update projekt side

Author: magnusfm

projektet.html

@@ -61,20 +61,33 @@ <h3>2-3 t<td></td></h3>
 </section>
 
 <section class="mat">
-        <h2>materialer</h2>
-        <div class="ikonkruv">
-                <img src="img/shopping-purse-icon.png" alt="shop ikon">
-        <p>læg alt i kruv</p>
+        <div class="topmat">
+
+               
+        <div>
+          <h2>Materialer</h2>      
         </div>
-        <li>
-                <div class="item-mat1"><h3>stoff med plante motiv</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div>
-                <div class="item-mat2"><h3>sytråd, sort</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div>
-                <div class="item-mat3"><h3>sækkeude, 60cm x 60cm</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div>
-                <div class="item-mat3"><h3>lynlys 1 meter</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div>
-        </li>
+
+                <div class="ikonkruv">
+                        <img src="img/shopping-purse-icon.png" alt="shop ikon">
+                <p>Læg alt i kruven</p>
+                </div>
+
+        </div>
+        <section class="mat-container">
+
+        <ul>
+               <li><h3>stoff med plante motiv</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div></li> 
+               <li> <div class="item-mat2"><h3>sytråd, sort</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div></li>
+                <li> <div class="item-mat3"><h3>sækkeude, 60cm x 60cm</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div> </li>
+                <li><div class="item-mat4"><h3>lynlys 1 meter</h3><img src="img/shopping-purse-icon.png" alt="shop ikon"></div>
+                </li>
+        </ul>
+        </section>
         <div class="btn-shop">
-                <p>se din kurv på stof og stills webshop</p>
+                <p>Stoff og Stills Webshop</p>
         </div>
+        
 
 </section>
 <div class="gains">
@@ -86,7 +99,7 @@ <h2>materialer</h2>
         <div class="imgtool">
                 <img src="img/vorktoj.png" alt="værktøj">
         </div>
-        <div>
+        <div class="vliste">
                <ul>
                        <li>opsprætter</li>
                        <li>saks</li>

style.css

@@ -496,6 +496,7 @@ input {
 
 .tidpenge{
     border-top: 1px solid gainsboro;
+    border-bottom: 1px solid gainsboro;
     margin-top: 250px;
     padding: 20px;
     display: grid;
@@ -519,12 +520,51 @@ input {
     display:block ;
 }
 
+.mat {
+margin: 20px;
+padding: 10px;
 
+}
+.topmat{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+}
+.topmat img{
+align-content: center;
+}
 
+.ikonkruv{
+    display: block;
+   align-items: center;
+   margin: auto;
+   
 
+}
 
 
+.ikonkruv img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
 
+ul{
+    list-style: none;
+    border-bottom: 1px solid gainsboro;
+    border-top: 1px solid gainsboro;
+    display: inline-block;
+    
+}
+
+.item-mat1{
+    display:inline-block;
+}
+
+.btn-shop:hover{
+background-color: black;
+
+}