Display Property - Mobile Navbar Example

pktcodes · pktcodes · commit 96901c99aca4 · 2022-11-04T15:41:54.000-05:00
diff --git a/index.html b/index.html
@@ -11,14 +11,11 @@
   </head>
 
   <body>
-    <!-- Block elements -->
-    <div class="block">I'm a block element</div>
-    <h1 class="block">I'm a block element</h1>
-    <p class="block">I'm a block element</p>
-
-    <!-- Inline elements -->
-    <span class="inline">I'm an inline element</span>
-    <a class="inline">I'm an inline element</a>
-    <img src="./smoothie.jpg" alt="smoothie" width="100" class="inline" />
+    <ul class="navbar">
+      <li><a href="#">home</a></li>
+      <li><a href="#">contact</a></li>
+      <li><a href="#">products</a></li>
+      <li><a href="#">about us</a></li>
+    </ul>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,21 +1,32 @@
 /* 
- HORIZONTAL CENTERING
+ BLOCK:browser respects width/height, top/bottom margin
+ INLINE:browser does not respect width/height, 
+ top/bottom margin
+ Navbar
+list-style-type:property
+descendant selectors
 */
 
-.block {
-  background: blue;
-  color: white;
-  width: 300px;
-  margin: 2rem auto;
-  /* margin-left: auto; */
-  /* margin-right: auto; */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.inline {
-  background: red;
-  color: white;
+body {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
-body {
-  text-align: center;
+ul li {
+  list-style-type: none;
+}
+
+ul li a {
+  text-decoration: none;
+  color: red;
+  background: black;
+  letter-spacing: 2px;
+  display: block;
+  padding: 5px;
+  /* margin: 10px; */
 }
