set css

oncode-frontend · Mar 29, 2024 · 0b01fc3 · 0b01fc3
1 parent 3d281ad
commit 0b01fc3
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -7,7 +7,35 @@
     <title>Scroll Effect</title>
 </head>
 <body>
-
+    <nav class="nav-bar">
+        <h1 class="logo">Logo</h1>
+        <ul class="navigation">
+            <li class="home">Home</li>
+            <li class="about">About</li>
+            <li class="contact">Contact</li>
+            <li class="services">Services</li>
+            <li class="products">Products</li>
+        </ul>
+    </nav>
+    <div class="container">
+        <h2>Scroll Effect</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?
+        </p>
+        <br>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?</p>
+        <br>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?</p>
+        <br>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi voluptatum ducimus rerum soluta laboriosam minus perferendis, corrupti odit rem et sunt illo eveniet accusamus fugit doloremque alias labore accusantium modi?</p>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,41 @@
+*{
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+body{
+    font-family: cursive;
+    font-size: 24px;
+}
+
+.nav-bar{
+    min-height: 100px;
+    background-color: #000;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 35px;
+}
+
+.nav-bar .navigation{
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.nav-bar .navigation li:hover{
+    color: yellow;
+}
+
+.container{
+    margin: 40px 35px;
+}
+
+h2{
+    font-size: 62px;
+    text-align: center;
+    margin-bottom: 40px;
+}