Day 3: Added CSS Only

2021-04-09 21:42:27 +02:00
parent 5650c582dd
commit 4182d936c2
3 changed files with 208 additions and 0 deletions
--- a/50Days/day3_cssonly/index.html
+++ b/50Days/day3_cssonly/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Day 3: Rotating Navigation</title>
+  </head>
+
+  <body>
+    <input type="checkbox" name="" id="toggle" />
+    <div class="container">
+      <div class="circle-container">
+        <div class="circle">
+          <label for="toggle" class="close">
+            <i class="fas fa-times"></i>
+          </label>
+          <label for="toggle" class="open"> <i class="fas fa-bars"></i> </label>
+        </div>
+      </div>
+      <div class="content">
+        <h1>Amazing Article</h1>
+        <small>The Writer</small>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum odio,
+          maiores nostrum debitis, natus numquam velit minus officia a
+          consequuntur quaerat obcaecati perspiciatis repudiandae suscipit nemo
+          accusamus quam beatae pariatur iste cumque. Quibusdam illo mollitia
+          unde odio eligendi ratione atque amet sunt fugit, laborum harum
+          officiis at placeat dolore. Est optio omnis delectus hic voluptatem
+          quam, cumque iusto laudantium ullam? Fugit, voluptates fugiat
+          perferendis sunt corrupti vitae ab aperiam ipsa voluptatum, maiores
+          maxime? Perferendis commodi architecto eligendi culpa ipsam adipisci
+          magni deleniti placeat voluptatum, facilis deserunt id expedita vero!
+          Repellendus possimus at harum fugiat repellat rem consequatur, placeat
+          dignissimos soluta.
+        </p>
+
+        <h3>My Image</h3>
+        <img
+          src="https://images.unsplash.com/photo-1617892459113-0ef697cafa05?w=1350"
+          alt=""
+        />
+      </div>
+    </div>
+
+    <nav>
+      <ul>
+        <li><i class="fas fa-home"></i> Home</li>
+        <li><i class="fas fa-user-alt"></i> About</li>
+        <li><i class="fas fa-envelope"></i> Contact</li>
+      </ul>
+    </nav>
+    <script src="script.js"></script>
+  </body>
+</html>