styling

8-bit-sheep · Aug 1, 2019 · 54072bd · 54072bd
1 parent 74afe8c
commit 54072bd
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 18 deletions.
diff --git a/about.css b/about.css
@@ -1,12 +1,52 @@
 #about-container {
-  margin: 10rem 10rem;
+  width: 100vw;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 5rem;
 }
 
 #headline {
   display: flex;
-  justify-content: space-between;
+
+  width: 50rem;
+}
+
+h1 {
+  color: #7badb6;
 }
 
 .text {
   font-size: 1.8rem;
+  margin-bottom: 3rem;
+  width: 50rem;
+  z-index: 1;
+  position: relative;
+  top: -5.5rem;
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+#family-pic {
+  width: 50rem;
+  z-index: 2;
+}
+#sheep {
+  width: 30rem;
+  height: 20rem;
+}
+
+:root {
+  background-color: black;
+}
+
+* {
+  color: white;
+}
+
+#continue-btn {
+  background-color: #7badb6;
+  color: white;
 }
diff --git a/about.html b/about.html
@@ -5,41 +5,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>About</title>
-    <link rel="stylesheet" href="about.css" />
     <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="about.css" />
   </head>
   <body>
     <div id="about-container">
       <div id="headline">
         <h1>About this project...</h1>
         <img
-          src="https://cdn-images-1.medium.com/max/1200/1*yNfJctOxxaWTe2KTivgKgg.png"
+          src="https://8-bit-sheep.com/logoanimation.gif"
           alt="sheep logo"
-          style="width:100px;"
           id="sheep"
         />
       </div>
 
       <img
         src="https://pbs.twimg.com/media/D8co_KuXkAARXJA.jpg:large"
         alt="lamb family pic"
-        style="width:500px;"
         id="family-pic"
       />
       <div class="text">
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam,
-          minus ex ad itaque numquam ut saepe necessitatibus repellat atque, aut
-          voluptatibus, voluptas repellendus cupiditate sit fugit eveniet
-          sapiente eum odit!Lorem ipsum dolor sit amet consectetur adipisicing
-          elit. Aperiam, minus ex ad itaque numquam ut saepe necessitatibus
-          repellat atque, aut voluptatibus, voluptas repellendus cupiditate sit
-          fugit eveniet sapiente eum odit!Lorem ipsum dolor sit amet consectetur
-          adipisicing elit. Aperiam, minus ex ad itaque numquam ut saepe
-          necessitatibus repellat atque, aut voluptatibus, voluptas repellendus
-          cupiditate sit fugit eveniet sapiente eum odit
-        </p>
+        <h4>
+          This project is a cooperation between 8-bit-sheep and Eija Moisala at
+          Yleisradio. The idea was to offer summer jobs to high schoolers, teach
+          them to code JavaScript and give them a sense of working in tech. This
+          *very cool* website is the product of that summer. Enjoy!
+        </h4>
       </div>
+      <a href="index.html" class="btn" id="continue-btn"
+        >Continue to *very cool* quiz</a
+      >
     </div>
   </body>
 </html>