Added Main Body, Images & Quote

Signed-off-by: Dip <[email protected]>
DipRRai · Jun 28, 2022 · 9577523 · 9577523
1 parent 4773e25
commit 9577523
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 15 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,11 +1,39 @@
-* {
+body {
+    margin: 0;
+}
+.main-header {
     background-color: #1F2937;
 }
+.main-body {
+    margin: 75px 0px;
+    color: #F9FAF8;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 h1, h2, a {
     font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     color: #F9FAF8;
     font-size: 38px;
 }
+.main-body h1, .main-body h2, .main-body a {
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    color: black;
+    font-size: 38px;
+} 
+
+.photos div p {
+    color: black;
+}
+
+.photos div p a {
+    color: #1F2937;
+    text-decoration: underline;
+}
+
+
 
 a {
     text-decoration: none;
@@ -15,6 +43,16 @@ h2 {
     font-size: 30px;
 }
 
+.right-subheader p a, p {
+    font-size: 15px;
+    color: #F9FAF8;
+}
+
+.right-subheader p a {
+    text-decoration: underline;
+}
+
+
 .header {
     display: flex;
     justify-content: space-between;
@@ -49,4 +87,77 @@ h2 {
 
 .right-subheader{
     margin-right: 100px;
-}
+}
+
+.main-body .photos img {
+    height: 200px;
+    width: auto;
+}
+.main-body .photos p a {
+    font-size: small;
+}
+
+.photos {
+    display: flex;
+    gap: 30px;
+}
+
+.quote {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #E5E7EB;
+    padding: 100px 0px;
+}
+
+.quote em {
+    font-size: 36px;
+    color: #232b36;
+}
+
+.quote h1 {
+    margin-left: 200px;
+    color: #1F2937;
+    font-size: 30px;
+}
+
+.subscription {
+    background-color: #F9FAF8;
+    display: flex;
+    justify-content: center;
+    padding: 80px 0px;
+}
+
+.sub-box {
+    background-color: #3882f6 ;
+    height: 150px;
+    width: 70%;
+    border-radius: 25px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.sub-box h1 {
+    font-size: 30px;
+    font-weight: 400;
+}
+
+.donation-outer {
+    background-color: white;
+    border-radius: 25px;
+    padding: 10px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.donation-inner {
+    background-color: #3882f6;
+    border-radius: 25px;
+    height: 25px;
+}
+.donation-inner h2 {
+    font-size: 10px;
+}
diff --git a/images/chandler-cruttenden-w-AAV86xQN0-unsplash.jpg b/images/chandler-cruttenden-w-AAV86xQN0-unsplash.jpg
diff --git a/images/joshua-j-cotten-O4k8wcUV964-unsplash.jpg b/images/joshua-j-cotten-O4k8wcUV964-unsplash.jpg
diff --git a/images/pexels-michael-m-2278163.jpg b/images/pexels-michael-m-2278163.jpg
diff --git a/index.html b/index.html
@@ -8,23 +8,61 @@
     <title>Floppa</title>
 </head>
 <body>
-    <div class="header">
-        <div class="left">
-            <h1 class="header-title">Floppa</h1>
+    <div class="main-header">
+        <div class="header">
+            <div class="left">
+                <h1 class="header-title">Floppa</h1>
+            </div>
+            <div class="right">
+                <a class="header-text" href="">About us</a>
+                <a class="header-text" href="">Our mission</a>
+                <a class="header-text" href="">Floppa facts</a>
+            </div>
         </div>
-        <div class="right">
-            <a class="header-text" href="">About us</a>
-            <a class="header-text" href="">Our mission</a>
-            <a class="header-text" href="">Floppa facts</a>
+        <div class="subheader-info">
+            <div class="left-subheader">
+                <h1>Floppa facts</h1>
+                <h2>This is a picture of a caracal cat, more commonly known as "floppa". Although this cute specimen seems like a welcome addition to the home, it is unfortunately banned from private ownership in Australia.</h2>
+            </div>
+            <div class="right-subheader">
+                <img class="floppa-subheader"src="./images/mario-esposito-9E2AztouXeM-unsplash.jpg">
+                <p>Photo by <a href="https://unsplash.com/@marius_otohpgraphy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mario Esposito</a> on <a href="https://unsplash.com/s/photos/caracal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
+                </p>
+            </div>
         </div>
     </div>
-    <div class="subheader-info">
-        <div class="left-subheader">
-            <h1>Floppa facts</h1>
-            <h2>This is a picture of a caracal cat, more commonly known as "floppa". Although this cute specimen seems like a welcome addition to the home, it is unfortunately banned from private ownership in Australia.</h2>
+
+    <div class="main-body">
+        <h1>Some photos of cool floppas</h1>
+        <div class="photos">
+            <div>
+                <img src="images/pexels-michael-m-2278163.jpg">
+                <p>Photo by <a href="https://www.pexels.com/photo/brown-caracal-standing-on-grass-field-2278163/">Michael M</a></p>
+            </div>
+            <div>
+                <img src="images/joshua-j-cotten-O4k8wcUV964-unsplash.jpg">
+                <p>Photo by <a href="https://unsplash.com/@jcotten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joshua J. Cotten</a> on <a href="https://unsplash.com/s/photos/caracal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
+            </div>
+            <div>
+                <img src="images/chandler-cruttenden-w-AAV86xQN0-unsplash.jpg">
+                <p>Photo by <a href="https://unsplash.com/@chanphoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Chandler Cruttenden</a> on <a href="https://unsplash.com/s/photos/caracal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
+            </div>
         </div>
-        <div class="right-subheader">
-            <img class="floppa-subheader"src="./images/mario-esposito-9E2AztouXeM-unsplash.jpg">
+    </div>
+
+    <div class="quote">
+        <em>"Let there be catnip"</em>
+        <h1>- Wise Cat</h1>
+    </div>
+
+    <div class="subscription">
+        <div class="sub-box">
+            <h1>Please consider donating to wildlife preservation!</h1>
+            <div class="donation-outer">
+                <div class="donation-inner">
+                    <h2>donate</h2>
+                </div>
+            </div>
         </div>
     </div>
 </body>