mirischoeb
/
WebsiteMasterProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make welcome.html and gallery.html responsive

Browse Source
main
Mirischoeb 1 year ago
parent 4dd802b5b7
commit ded23f644a
8 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File

BIN
assets/girldance.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
assets/happymanhat.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
assets/heartjump.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/takemymoney.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

5
gallery.html
Unescape Escape View File

@ -3,6 +3,7 @@
<title> <title>
How to be a social justice warrior How to be a social justice warrior
</title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body id="gallery"> <body id="gallery">
@ -21,6 +22,10 @@
<img class="backgroundgifs" id="simpsons" src="assets/simpsons.gif" loading="lazy"> <img class="backgroundgifs" id="simpsons" src="assets/simpsons.gif" loading="lazy">
<img class="backgroundgifs" id="heartrain" src="assets/heartrain.gif" loading="lazy"> <img class="backgroundgifs" id="heartrain" src="assets/heartrain.gif" loading="lazy">
<img class="backgroundgifs" id="dance" src="assets/dance.gif" loading="lazy"> <img class="backgroundgifs" id="dance" src="assets/dance.gif" loading="lazy">
<img class="backgroundgifs" id="girldance" src="assets/girldance.gif" loading="lazy">
<img class="backgroundgifs" id="happymanhat" src="assets/happymanhat.gif" loading="lazy">
<img class="backgroundgifs" id="heartjump" src="assets/heartjump.gif" loading="lazy">
<img class="backgroundgifs" id="takemymoney" src="assets/takemymoney.gif" loading="lazy">
</div> </div>
<div class="grid"> <div class="grid">

56
static/style.css
Unescape Escape View File

@ -5,7 +5,20 @@
body{ body{
} }
/* Add media queries for different screen sizes */
@media screen and (max-width: 600px) {
/* Adjust styles for screens smaller than 600px wide */
.buttoncontainer {
flex-direction: column;
align-items: center;
}
}
.fullcontainer {
max-width: 100%;
padding: 0 20px;
margin: 0 auto;
}
#welcomepage{ #welcomepage{
/* background: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgba(128,205,229,1) 50%, rgba(147,102,237,1) 100%); */ /* background: linear-gradient(90deg, rgba(153,150,244,1) 0%, rgba(128,205,229,1) 50%, rgba(147,102,237,1) 100%); */
background-color: #050725; background-color: #050725;
@ -44,6 +57,7 @@ p{
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
font-family: monospace; font-family: monospace;
} }
#description_color{ #description_color{
color:#87b5e7; color:#87b5e7;
} }
@ -63,6 +77,8 @@ p{
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
position: absolute; position: absolute;
max-width: 100%;
height: auto;
} }
@ -125,7 +141,24 @@ p{
left:52%; left:52%;
top:450%; top:450%;
} }
#happymanhat{
left: 14%;
top: 1600%;
}
#girldance{
left: 76%;
top: 1590%;
}
#heartjump{
left: 0%;
top: 1390%;
width: 15em;
height: 15em;
}
#takemymoney{
left: 47%;
top: 1800%;
}
.buttonback { .buttonback {
background-color: #050725; background-color: #050725;
@ -170,9 +203,8 @@ p{
.buttoncontainer { .buttoncontainer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
margin-top: 31em; margin-top: 31em;
justify-content: center;
} }
@ -302,15 +334,30 @@ a:link {
display: grid; display: grid;
justify-content: space-between; justify-content: space-between;
grid-template-columns: auto auto auto auto auto; grid-template-columns: auto auto auto auto auto;
row-gap: 90px;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
margin-left:2.5em; margin-left:2.5em;
margin-right: 2.5em; margin-right: 2.5em;
margin-bottom: 8em; margin-bottom: 8em;
margin-top: 38em; margin-top: 38em;
gap: 110px;
} }
/* Styles for medium-sized screens */
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Styles for smaller screens */
@media (max-width: 480px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
.overviewimage{ .overviewimage{
object-fit: contain; object-fit: contain;
width: 250px; width: 250px;
@ -319,6 +366,7 @@ a:link {
background-image: url(/assets/glitter-stars.gif); background-image: url(/assets/glitter-stars.gif);
height:250px; height:250px;
padding:10px; padding:10px;
max-width: 100%;
} }

10
tipsforleftistmememaking/index.html
Unescape Escape View File

@ -23,6 +23,11 @@ How to be a social justice warrior
<img class="sliderimage" src="leftistmemes_2.png" loading="lazy"> <img class="sliderimage" src="leftistmemes_2.png" loading="lazy">
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<div class="alert">
<div class="alert" id="alerttext" onclick="this.parentElement.style.display='none';">
Content Warning: Discriminatory content</br>Click to view
</div>
</div>
<img class="sliderimage" src="leftistmemes_3.png" loading="lazy"> <img class="sliderimage" src="leftistmemes_3.png" loading="lazy">
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
@ -41,6 +46,11 @@ How to be a social justice warrior
<img class="sliderimage" src="leftistmemes_8.png" loading="lazy"> <img class="sliderimage" src="leftistmemes_8.png" loading="lazy">
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<div class="alert">
<div class="alert" id="alerttext" onclick="this.parentElement.style.display='none';">
Content Warning: Discriminatory content</br>Click to view
</div>
</div>
<img class="sliderimage" src="leftistmemes_9.png" loading="lazy"> <img class="sliderimage" src="leftistmemes_9.png" loading="lazy">
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>

5
welcome.html
Unescape Escape View File

@ -3,7 +3,10 @@
<title> <title>
How to be a social justice warrior How to be a social justice warrior
</title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<div class="fullcontainer">
<body id="welcomepage"> <body id="welcomepage">
<div class="header"> <div class="header">
<img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" /> <img class="headerimage"src="https://images.cooltext.com/5661013.png" alt="How to be a social justice warrior" />
@ -31,5 +34,5 @@
</body> </body>
</div>

Write Preview
Loading…
Cancel
Save