mirror of
https://github.com/Rushilwiz/campaign.git
synced 2025-04-03 20:10:20 -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">
|
||||
</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">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">home</a></li>
|
||||
<li><a href="https://bit.ly/ru4uplatform" target="_blank">platform</a></li>
|
||||
<li><a href="#about">about</a></li>
|
||||
</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>
|
||||
</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;
|
||||
padding: 0;
|
||||
|
|
@ -67,7 +106,7 @@ section {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.landing {
|
||||
#landing {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
|
|
@ -89,7 +128,7 @@ section {
|
|||
}
|
||||
|
||||
@media (max-width: 786px) {
|
||||
.landing {
|
||||
#landing {
|
||||
padding-left: 0;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
|
|
@ -104,4 +143,143 @@ section {
|
|||
color: #5d8db9;
|
||||
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 */
|
||||
115
style.sass
115
style.sass
|
|
@ -2,7 +2,31 @@
|
|||
@media (max-width: 786px)
|
||||
@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
|
||||
padding: 0
|
||||
|
|
@ -38,15 +62,13 @@ body
|
|||
to
|
||||
transform: rotate(360deg)
|
||||
|
||||
|
||||
|
||||
section
|
||||
height: 100vh
|
||||
width: 100vw
|
||||
display: flex
|
||||
z-index: 1
|
||||
|
||||
.landing
|
||||
#landing
|
||||
align-items: flex-start
|
||||
justify-content: center
|
||||
flex-direction: column
|
||||
|
|
@ -69,7 +91,88 @@ section
|
|||
color: #5d8db9
|
||||
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