mirror of
https://github.com/Rushilwiz/campaign.git
synced 2025-04-09 23:10:18 -04:00
feat: added landing
This commit is contained in:
parent
d3bc8d7067
commit
addf3d075b
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
*.map
|
||||||
22
index.html
22
index.html
|
|
@ -1,2 +1,20 @@
|
||||||
<h1>ru4u?</h1>
|
<!DOCTYPE html>
|
||||||
<p>vote rushil umaretiya for sga president</p>
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>RU4U?</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="seal"></div>
|
||||||
|
<section class="landing">
|
||||||
|
<h1>Rushil<br>Umaretiya<br></h1>
|
||||||
|
<p class="subtitle">for sga president</p>
|
||||||
|
</section>
|
||||||
|
<!-- <section class="about">
|
||||||
|
|
||||||
|
</section> -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
res/banner.png
Normal file
BIN
res/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
res/seal.png
Normal file
BIN
res/seal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
107
style.css
Normal file
107
style.css
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seal {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seal::before {
|
||||||
|
-webkit-animation: spin 20s 10s infinite;
|
||||||
|
animation: spin 20s 10s infinite;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
background-image: url("/res/seal.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 786px) {
|
||||||
|
.seal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
from {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.landing {
|
||||||
|
-webkit-box-align: start;
|
||||||
|
-ms-flex-align: start;
|
||||||
|
align-items: flex-start;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: 5vw;
|
||||||
|
font-size: 4rem;
|
||||||
|
font-family: "Cooper Black", "Arial Black", sans-serif;
|
||||||
|
color: #DA3252;
|
||||||
|
line-height: 1;
|
||||||
|
background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(245, 246, 252, 0.52)), to(rgba(255, 255, 255, 0))), url("/res/banner.png");
|
||||||
|
background-image: linear-gradient(to right, rgba(245, 246, 252, 0.52) 50%, rgba(255, 255, 255, 0)), url("/res/banner.png");
|
||||||
|
text-shadow: 3px 3px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 786px) {
|
||||||
|
.landing {
|
||||||
|
padding-left: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(245, 246, 252, 0.52);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #5d8db9;
|
||||||
|
font-family: "Fugaz One", cursive;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
75
style.sass
Normal file
75
style.sass
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
@mixin mobile
|
||||||
|
@media (max-width: 786px)
|
||||||
|
@content
|
||||||
|
|
||||||
|
|
||||||
|
*
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
body
|
||||||
|
overflow-x: hidden
|
||||||
|
|
||||||
|
.seal
|
||||||
|
width: 100px
|
||||||
|
height: 100px
|
||||||
|
z-index: 999
|
||||||
|
position: fixed
|
||||||
|
right: 0
|
||||||
|
margin-right: 15px
|
||||||
|
margin-top: 15px
|
||||||
|
|
||||||
|
&::before
|
||||||
|
animation: spin 20s 10s infinite
|
||||||
|
content: ''
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
position: absolute
|
||||||
|
background-image: url('/res/seal.png')
|
||||||
|
background-size: cover
|
||||||
|
|
||||||
|
@include mobile
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@keyframes spin
|
||||||
|
from
|
||||||
|
transform: rotate(0deg)
|
||||||
|
to
|
||||||
|
transform: rotate(360deg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
section
|
||||||
|
height: 100vh
|
||||||
|
width: 100vw
|
||||||
|
display: flex
|
||||||
|
z-index: 1
|
||||||
|
|
||||||
|
.landing
|
||||||
|
align-items: flex-start
|
||||||
|
justify-content: center
|
||||||
|
flex-direction: column
|
||||||
|
padding-left: 5vw
|
||||||
|
font-size: 4rem
|
||||||
|
font-family: "Cooper Black", "Arial Black", sans-serif
|
||||||
|
color: #DA3252
|
||||||
|
line-height: 1
|
||||||
|
background-image: linear-gradient(to right, rgba(245, 246, 252, 0.52) 50%, rgba(255, 255, 255, 0)), url("/res/banner.png")
|
||||||
|
text-shadow: 3px 3px #000
|
||||||
|
|
||||||
|
@include mobile
|
||||||
|
padding-left: 0
|
||||||
|
font-size: 2rem
|
||||||
|
text-align: center
|
||||||
|
align-items: center
|
||||||
|
background: rgba(245, 246, 252, 0.52)
|
||||||
|
|
||||||
|
.subtitle
|
||||||
|
color: #5d8db9
|
||||||
|
font-family: "Fugaz One", cursive
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user