mirror of
https://github.com/Rushilwiz/campaign.git
synced 2025-04-09 23:10:18 -04:00
feat: added rest of page
This commit is contained in:
parent
addf3d075b
commit
2a7d2465ef
54
index.html
54
index.html
|
|
@ -8,13 +8,53 @@
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="seal"></div>
|
<nav>
|
||||||
<section class="landing">
|
<ul>
|
||||||
<h1>Rushil<br>Umaretiya<br></h1>
|
<li><a href="#">home</a></li>
|
||||||
<p class="subtitle">for sga president</p>
|
<li><a href="https://bit.ly/ru4uplatform" target="_blank">platform</a></li>
|
||||||
</section>
|
<li><a href="#about">about</a></li>
|
||||||
<!-- <section class="about">
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
</section> -->
|
<div class="seal"></div>
|
||||||
|
<section id="landing">
|
||||||
|
<h1>Rushil<br>Umaretiya<br></h1>
|
||||||
|
<p class="subtitle">for sga president</p>
|
||||||
|
</section>
|
||||||
|
<section id="about">
|
||||||
|
<div class="row">
|
||||||
|
<div class="caption">
|
||||||
|
<h1>experience</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dolore rem perspiciatis beatae voluptates, temporibus error possimus, quis labore architecto delectus dignissimos nemo sequi nam quo, repudiandae mollitia saepe. Maiores.</p>
|
||||||
|
</div>
|
||||||
|
<div class="img" id="experience"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="img" id="initatives"></div>
|
||||||
|
<div class="caption">
|
||||||
|
<h1>initiatives</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dolore rem perspiciatis beatae voluptates, temporibus error possimus, quis labore architecto delectus dignissimos nemo sequi nam quo, repudiandae mollitia saepe. Maiores.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="caption">
|
||||||
|
<h1>community</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dolore rem perspiciatis beatae voluptates, temporibus error possimus, quis labore architecto delectus dignissimos nemo sequi nam quo, repudiandae mollitia saepe. Maiores.</p>
|
||||||
|
</div>
|
||||||
|
<div class="img" id="community"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="cta">
|
||||||
|
<h1>Are you for you?</h1>
|
||||||
|
<h2>I am.</h2>
|
||||||
|
<p>vote rushil umaretiya for sga president</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const cta = document.querySelector('#cta');
|
||||||
|
cta.addEventListener('click', () => {
|
||||||
|
window.location.href = 'https://ion.tjhsst.edu/polls';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
BIN
res/community.jpg
Normal file
BIN
res/community.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
BIN
res/experience.jpeg
Normal file
BIN
res/experience.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
res/initiatives.jpg
Normal file
BIN
res/initiatives.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
182
style.css
182
style.css
|
|
@ -1,3 +1,42 @@
|
||||||
|
nav {
|
||||||
|
width: 100vw;
|
||||||
|
height: 8vh;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
width: 60%;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-ms-flex-pack: distribute;
|
||||||
|
justify-content: space-around;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a:hover {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -67,7 +106,7 @@ section {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.landing {
|
#landing {
|
||||||
-webkit-box-align: start;
|
-webkit-box-align: start;
|
||||||
-ms-flex-align: start;
|
-ms-flex-align: start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
@ -89,7 +128,7 @@ section {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 786px) {
|
@media (max-width: 786px) {
|
||||||
.landing {
|
#landing {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -104,4 +143,143 @@ section {
|
||||||
color: #5d8db9;
|
color: #5d8db9;
|
||||||
font-family: "Fugaz One", cursive;
|
font-family: "Fugaz One", cursive;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5vw 5vh 0 5vw;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row .caption {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row .caption h1 {
|
||||||
|
font-family: "Fugaz One", cursive;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: #DA3252;
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row .caption p {
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #5d8db9;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row .img {
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row #experience {
|
||||||
|
background-image: url("/res/experience.jpeg");
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row #initatives {
|
||||||
|
background-image: url("/res/initiatives.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
#about .row #community {
|
||||||
|
background-image: url("/res/community.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 786px) {
|
||||||
|
#about .row {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: reverse;
|
||||||
|
-ms-flex-direction: column-reverse;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#cta {
|
||||||
|
position: relative;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 30vh;
|
||||||
|
background: #FDFD96;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cta h1 {
|
||||||
|
font-family: "Cooper Black", cursive;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cta h2 {
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-size: 6rem;
|
||||||
|
color: #000;
|
||||||
|
line-height: 1;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cta p {
|
||||||
|
font-family: "Cooper Black", sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #4b4b4b;
|
||||||
|
line-height: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cta:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cta:hover p {
|
||||||
|
color: #DA3252;
|
||||||
|
}
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
115
style.sass
115
style.sass
|
|
@ -2,7 +2,31 @@
|
||||||
@media (max-width: 786px)
|
@media (max-width: 786px)
|
||||||
@content
|
@content
|
||||||
|
|
||||||
|
nav
|
||||||
|
width: 100vw
|
||||||
|
height: 8vh
|
||||||
|
display: flex
|
||||||
|
position: fixed
|
||||||
|
align-items: center
|
||||||
|
justify-content: space-around
|
||||||
|
z-index: 999
|
||||||
|
|
||||||
|
ul
|
||||||
|
width: 60%
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: space-around
|
||||||
|
list-style: none
|
||||||
|
|
||||||
|
li a
|
||||||
|
font-family: 'Poppins', sans-serif
|
||||||
|
font-size: 1.2rem
|
||||||
|
color: black
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
*
|
*
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
@ -38,15 +62,13 @@ body
|
||||||
to
|
to
|
||||||
transform: rotate(360deg)
|
transform: rotate(360deg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
section
|
section
|
||||||
height: 100vh
|
height: 100vh
|
||||||
width: 100vw
|
width: 100vw
|
||||||
display: flex
|
display: flex
|
||||||
z-index: 1
|
z-index: 1
|
||||||
|
|
||||||
.landing
|
#landing
|
||||||
align-items: flex-start
|
align-items: flex-start
|
||||||
justify-content: center
|
justify-content: center
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
|
|
@ -69,7 +91,88 @@ section
|
||||||
color: #5d8db9
|
color: #5d8db9
|
||||||
font-family: "Fugaz One", cursive
|
font-family: "Fugaz One", cursive
|
||||||
|
|
||||||
|
#about
|
||||||
|
display: flex
|
||||||
|
position: relative
|
||||||
|
flex-direction: column
|
||||||
|
padding: 5vw 5vh 0 5vw
|
||||||
|
height: auto
|
||||||
|
|
||||||
|
.row
|
||||||
|
display: flex
|
||||||
|
flex-direction: row
|
||||||
|
justify-content: space-between
|
||||||
|
align-items: center
|
||||||
|
width: 100%
|
||||||
|
margin-bottom: 5vh
|
||||||
|
|
||||||
|
.caption
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
width: 50%
|
||||||
|
padding: 0 5vw
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-family: "Fugaz One", cursive
|
||||||
|
font-size: 4rem
|
||||||
|
color: #DA3252
|
||||||
|
line-height: 1
|
||||||
|
margin-bottom: 5vh
|
||||||
|
|
||||||
|
p
|
||||||
|
font-family: "Poppins", sans-serif
|
||||||
|
font-size: 1.5rem
|
||||||
|
color: #5d8db9
|
||||||
|
line-height: 1.5
|
||||||
|
margin-bottom: 5vh
|
||||||
|
|
||||||
|
.img
|
||||||
|
width: 100%
|
||||||
|
height: 50vh
|
||||||
|
|
||||||
|
#experience
|
||||||
|
background-image: url("/res/experience.jpeg")
|
||||||
|
|
||||||
|
#initatives
|
||||||
|
background-image: url("/res/initiatives.jpg")
|
||||||
|
|
||||||
|
#community
|
||||||
|
background-image: url("/res/community.jpg")
|
||||||
|
|
||||||
|
@include mobile
|
||||||
|
flex-direction: column-reverse
|
||||||
|
|
||||||
|
#cta
|
||||||
|
position: relative
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
height: 30vh
|
||||||
|
background: #FDFD96
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-family: "Cooper Black", cursive
|
||||||
|
font-size: 2rem
|
||||||
|
line-height: 1
|
||||||
|
|
||||||
|
h2
|
||||||
|
font-family: "Poppins", sans-serif
|
||||||
|
font-size: 6rem
|
||||||
|
color: #000
|
||||||
|
line-height: 1
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
p
|
||||||
|
font-family: "Cooper Black", sans-serif
|
||||||
|
font-size: 1.5rem
|
||||||
|
color: #4b4b4b
|
||||||
|
line-height: 4
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
p
|
||||||
|
color: #DA3252
|
||||||
Loading…
Reference in New Issue
Block a user