founding main tag structure

bkarimii · bkarimii · commit a6bc86b78df3 · 2023-09-08T13:53:37.000+01:00
diff --git a/css/store.css b/css/store.css
@@ -1,3 +1,13 @@
+
+:root{
+    --text-color:white;
+    --hover-color:#C64110;
+    --link-color:rgb(100, 99, 99);
+    --karma-color:black;
+
+    
+}
+
 html{
     margin: 0;
     width: 100%;
@@ -8,7 +18,7 @@ body{
     margin: 0;
     display: grid;
     /* grid-template-columns: repeat(2,minmax(1fr,auto-fit)); */
-    grid-template-rows: repeat(3,auto-fill);
+    grid-template-rows: 10% auto 10%;
     grid-template-areas: 
     "header header"
     "main main"
@@ -19,20 +29,25 @@ body{
 .header{
     grid-area: header;
     margin: 0;
-    top: 0;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    background-color: rgb(166, 90, 237);
+    background-color: #fff;
 
 }
 
 .header img{
-    width: 2em;
-    height: 2em;
+    width: 3em;
+    height: 3em;
+}
+
+.nav-bar{
+    height: inherit;
 }
+
 .nav-bar ul{
+    margin: 0;
     list-style: none;
     display: flex;
     flex-direction: row;
@@ -42,19 +57,50 @@ body{
 }
 
 .nav-bar ul>*{
-    margin: 1em;
-    text-decoration: none;
+    margin: 1.5em;
     list-style: none;
 
 }
 
+.nav-bar ul a{
+   text-decoration: none;
+   color: var(--link-color);
+}
+
 
 /* styling main tag with class=main */
 .main{
     grid-area: main;
     background-color: chartreuse;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
+    margin: 0;
+    
+}
+.main>*{
+    margin: 0;
 }
+.section-1{
+
+    grid-column: 1/2;
+    background-color: rgb(245, 78, 56);
+}
+
+.section-2{
+    grid-column: 2/-1;
+    background-color: rgb(233, 233, 80);
+}
+
+.section-2 img{
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+    margin: 0;
+}
+
 
+/* styling footer */
 .footer{
     grid-area: footer;
     background-color: darkgrey;
diff --git a/css/style.css b/css/style.css
@@ -86,8 +86,8 @@ body {
 
  }
 .header img{
-    width: 50px;
-    height: 50px;
+    width: 3em;
+    height: 3em;
 }
 
 .header nav{
diff --git a/level-2/store.html b/level-2/store.html
@@ -43,7 +43,7 @@
         </section>
 
         <section class="section-2">
-
+            <img src="store-image_by-andrew-neel-unsplash.jpg" alt="store image on the side bar a lady using karma wifi">
         </section>
 
     </main>

Original file line number	Diff line number	Diff line change
`@@ -86,8 +86,8 @@ body {`
`86`	`86`
`87`	`87`	`}`
`88`	`88`	`.header img{`
`89`		`- width: 50px;`
`90`		`- height: 50px;`
	`89`	`+ width: 3em;`
	`90`	`+ height: 3em;`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`.header nav{`