diff --git a/images/2.jpg b/assets/coffee.jpg similarity index 100% rename from images/2.jpg rename to assets/coffee.jpg diff --git a/images/3.jpg b/assets/courage.jpg similarity index 100% rename from images/3.jpg rename to assets/courage.jpg diff --git a/images/1.jpg b/assets/mind.jpg similarity index 100% rename from images/1.jpg rename to assets/mind.jpg diff --git a/index.html b/index.html index c3b79ec..5862179 100644 --- a/index.html +++ b/index.html @@ -1,73 +1,76 @@ - - + tretton37 @ TEQ - - + + - +
-
-
-

Your only limit is your mind

-
+
+
Your only limit is your mind
+
-
-
-

Sometimes what you're most afraid of doing is the very thing that will set you free.

-
+
+
+ Sometimes what you're most afraid of doing is the very thing that will + set you free. +
+
-
-
-

Courage doesn't mean you don't get afraid. Courage means you don't let fear stop you.

-
+
+
+ Courage doesn't mean you don't get afraid. Courage means you don't let + fear stop you. +
+
-
-
-

One does not discover new lands without losing sight of shore for a very long time.

-
+
+
+ One does not discover new lands without losing sight of shore for a very + long time. +
+
-
-

Programmering är kul!

-

Alla kan lära sig att programmera

-

Ett stycke text där vi kan skriva lite saker. Sugar plum cake brownie cupcake chocolate wafer. Bonbon - lemon - drops oat cake chocolate cake cotton candy sugar plum cupcake chupa chups cupcake. Topping cake soufflé - cupcake lemon drops jelly-o. Jujubes jelly beans pie pudding. Chocolate cake apple pie dragée muffin - sesame - snaps.

-

Bear claw halvah sweet roll. Tart caramels chupa chups pastry muffin gummies candy canes chupa chups - tootsie - roll. Bonbon chupa chups toffee cookie cake carrot cake danish. Gummies lollipop jelly-o gummies icing - jelly - cake. Lollipop icing liquorice macaroon bear claw pudding topping pudding. Cheesecake brownie cupcake - bonbon - muffin. Gingerbread sweet candy canes biscuit jelly. Ice cream ice cream brownie cupcake cotton candy - sweet - roll. Macaroon carrot cake tiramisu sesame snaps. Liquorice lemon drops lollipop powder cupcake soufflé - brownie muffin. Sweet jujubes jelly. Cookie chocolate bar halvah muffin toffee. Chocolate cake chocolate - cake tootsie roll tart macaroon topping marshmallow. Ice cream lemon drops pastry sweet roll bear claw. -

-
Kanske någon liten quote?
-

Macaroon gingerbread chocolate jelly beans wafer pastry. Gummies candy topping macaroon. Macaroon - fruitcake - cake chocolate cake sugar plum muffin cheesecake lollipop gummies. Cake chocolate bar dragée carrot cake - sweet roll bonbon candy canes. Donut apple pie tart lemon drops cotton candy candy canes. Cake sugar - plum - icing. Donut cookie chocolate bar topping cake. Tiramisu chocolate cake sugar plum. Jelly dessert - chocolate - bar wafer. Gummies toffee marshmallow fruitcake lollipop powder jelly beans sesame snaps. Biscuit - topping - liquorice soufflé wafer sesame snaps. Candy canes gummi bears chupa chups muffin donut liquorice. - Marshmallow chocolate cupcake sesame snaps sweet roll. Chocolate chupa chups icing fruitcake chupa - chups. -

-
+

Programmering är kul!

+

Alla kan lära sig att programmera

+

+ Ett stycke text där vi kan skriva lite saker. Sugar plum cake brownie + cupcake chocolate wafer. Bonbon lemon drops oat cake chocolate cake + cotton candy sugar plum cupcake chupa chups cupcake. Topping cake + soufflé cupcake lemon drops jelly-o. Jujubes jelly beans pie pudding. + Chocolate cake apple pie dragée muffin sesame snaps. +

+

+ Bear claw halvah sweet roll. Tart caramels chupa chups pastry muffin + gummies candy canes chupa chups tootsie roll. Bonbon chupa chups toffee + cookie cake carrot cake danish. Gummies lollipop jelly-o gummies icing + jelly cake. Lollipop icing liquorice macaroon bear claw pudding topping + pudding. Cheesecake brownie cupcake bonbon muffin. Gingerbread sweet + candy canes biscuit jelly. Ice cream ice cream brownie cupcake cotton + candy sweet roll. Macaroon carrot cake tiramisu sesame snaps. Liquorice + lemon drops lollipop powder cupcake soufflé brownie muffin. Sweet + jujubes jelly. Cookie chocolate bar halvah muffin toffee. Chocolate cake + chocolate cake tootsie roll tart macaroon topping marshmallow. Ice cream + lemon drops pastry sweet roll bear claw. +

+

Kanske någon liten quote?

+

+ Macaroon gingerbread chocolate jelly beans wafer pastry. Gummies candy + topping macaroon. Macaroon fruitcake cake chocolate cake sugar plum + muffin cheesecake lollipop gummies. Cake chocolate bar dragée carrot + cake sweet roll bonbon candy canes. Donut apple pie tart lemon drops + cotton candy candy canes. Cake sugar plum icing. Donut cookie chocolate + bar topping cake. Tiramisu chocolate cake sugar plum. Jelly dessert + chocolate bar wafer. Gummies toffee marshmallow fruitcake lollipop + powder jelly beans sesame snaps. Biscuit topping liquorice soufflé wafer + sesame snaps. Candy canes gummi bears chupa chups muffin donut + liquorice. Marshmallow chocolate cupcake sesame snaps sweet roll. + Chocolate chupa chups icing fruitcake chupa chups. +

- - - \ No newline at end of file + + diff --git a/styles.css b/styles.css index 3730ad4..366695f 100644 --- a/styles.css +++ b/styles.css @@ -1,148 +1,111 @@ @import url("https://fonts.googleapis.com/css?family=Pacifico|Quicksand"); -* { - margin: 0; -} - body { - font-family: "Pacifico", serif; + margin: 0; + line-height: 1.5; + font-family: "Quicksand", sans-serif; } .hero { - height: 100vh; - clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); + height: 100%; + clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0); } - -.hero .image { - background-size: cover; -} - .hero:nth-child(1) .image { - background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/1.jpg"); + background-image: url("assets/mind.jpg"); } - .hero:nth-child(2) .image { - background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/2.jpg"); + background-image: url("assets/coffee.jpg"); } - .hero:nth-child(3) .image { - background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/3.jpg"); + background-image: url("assets/courage.jpg"); } - .hero:nth-child(4) .image { - background-image: linear-gradient(rgb(255, 219, 74), rgba(241, 137, 45, 0.5)); + background: linear-gradient(yellow, orange); } - -.hero:nth-child(4) .quote p { - color: white; +.hero:nth-child(4) .quote { + color: white; } .image { - width: 100%; - height: 100%; - top: 0; - left: 0; - position: fixed; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-size: cover; + filter: brightness(50%); } +h1, +h2, .quote { - width: 100%; - height: 100%; - top: 0; - left: 0; - position: fixed; - display: flex; - align-items: center; - justify-content: center; + font-family: "Pacifico", serif; } -.quote p { - font-family: "Pacifico", serif; - width: 50%; - color: #ffdb4a; - font-size: 50px; - text-align: center; -} - -p { - font-family: "Quicksand", sans-serif; - font-size: 20px; - line-height: 1.5; - margin: 20px 0; -} - -h1 { - font-size: 48px; - font-weight: normal; - text-align: center; -} - -h2.subtitle { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 30px; - width: 100%; - font-size: 25px; - text-align: center; +.quote { + font-size: 50px; + position: fixed; + width: 100%; + top: 0; + margin-top: 300px; + text-align: center; + color: #ffdb4a; } .content { - position: relative; - margin: 0 auto 80px; - padding: 2rem; + position: relative; + margin: 0 auto 80px; + padding: 2rem; + max-width: 700px; } .content:before { - content: ''; - display: block; - position: absolute; - top: -100px; - left: 0; - width: 100%; - height: 100px; - background-color: white; - z-index: 99; - clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -} - -.content_inner { - margin: 0 auto; - max-width: 700px; + content: ""; + position: absolute; + width: 100%; + height: 100px; + top: -100px; + left: 0; + z-index: 99; + background-color: white; + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } -.content_inner>blockquote { - margin: 3rem 0; +/* Overkill stuff if we have time */ +.subtitle { + display: flex; + align-items: center; + margin-bottom: 30px; } -/* Overkill stuff if we have time */ -h2.subtitle:before, h2.subtitle:after { - content: ''; - flex: 1; - height: 2px; - background-color: #ffdb4a; +.subtitle:before, +.subtitle:after { + content: ""; + flex: 1; + height: 2px; + background-color: #ffdb4a; } -h2.subtitle:before { - margin-right: 15px; +.subtitle:before { + margin-right: 15px; } -h2.subtitle:after { - margin-left: 15px; +.subtitle:after { + margin-left: 15px; } -blockquote { - position: relative; - padding-left: 20px; - font-size: 30px; +.extra_description { + position: relative; + padding-left: 20px; + margin: 3rem 0; } -blockquote:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 6px; - height: 100%; - background-color: #ffdb4a; - border-radius: 50px; +.extra_description:before { + content: ""; + position: absolute; + height: 100%; + width: 6px; + top: 0; + left: 0; + background-color: #ffdb4a; + border-radius: 50px; }