diff --git a/index.html b/index.html index 7435d8b..1d340d5 100644 --- a/index.html +++ b/index.html @@ -8,13 +8,53 @@ -
-
-

Rushil
Umaretiya

-

for sga president

-
- +
+
+

Rushil
Umaretiya

+

for sga president

+
+
+
+
+

experience

+

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.

+
+
+
+
+
+
+

initiatives

+

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.

+
+
+
+
+

community

+

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.

+
+
+
+
+
+

Are you for you?

+

I am.

+

vote rushil umaretiya for sga president

+
+ + \ No newline at end of file diff --git a/res/community.jpg b/res/community.jpg new file mode 100644 index 0000000..8e02d3b Binary files /dev/null and b/res/community.jpg differ diff --git a/res/experience.jpeg b/res/experience.jpeg new file mode 100644 index 0000000..73b5353 Binary files /dev/null and b/res/experience.jpeg differ diff --git a/res/initiatives.jpg b/res/initiatives.jpg new file mode 100644 index 0000000..b387602 Binary files /dev/null and b/res/initiatives.jpg differ diff --git a/style.css b/style.css index 442c890..3c12596 100644 --- a/style.css +++ b/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 */ \ No newline at end of file diff --git a/style.sass b/style.sass index e2555b0..faebf62 100644 --- a/style.sass +++ b/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") - \ No newline at end of file + #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 \ No newline at end of file