Lektion 4

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

index.html

@@ -3,6 +3,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FruktOnline</title>
+    <link rel="icon" href="images/favicon.ico">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
 
@@ -41,22 +42,166 @@ <h1 id="typing-text">Välkommen till Fruktbutik!</h1>
      </section>
     <!--About section-->
     <section id="about" class="about-section">
+      <div class="contact-about" >
         <h2>Varför välja våra frukter?</h2>
-        <div class="paragraf-box">
-            <p> 🍎 **Äpplen:** Knapriga och saftiga äpplen från våra lokala odlingar är inte bara en smakupplevelse utan också en källa till viktiga näringsämnen och antioxidanter för din hälsa.</p>
-
-            <p> 🍌 **Bananer:** Våra bananer är inte bara fyllda med energi och näringsämnen utan kommer också från hållbara odlingar, vilket gör dem till ett val som är bra för både dig och planeten.</p>
-
-            <p> 🍊 **Apelsiner:** Saftiga och fulla av C-vitamin är våra apelsiner perfekta för att ge dig den uppiggande energikicken du behöver för att starta dagen på rätt sätt.</p>
-
-            <p> 🍇 **Druvor:** Våra druvor är inte bara en fest för smaklökarna utan är också laddade med antioxidanter och vitaminer som främjar din hälsa och välbefinnande.</p>
+          <div class="row">
+            <div class="col col-md-6 col-sm-12">
+              <div class="about-wrapper__image load-hidden" >
+                  <img
+                  alt="Profile Image"
+                  class="img-fluid rounded shadow-lg"
+                  height="auto"
+                  width="80%"
+                  src="images/about.jpeg"
+                />
+              </div>
+            </div>
+            <div class="col col-md-6 col-sm-12">
+              <div class="paragraf-box">
+                <p> 🍎 **Äpplen:** Knapriga och saftiga äpplen från våra lokala odlingar är inte bara en smakupplevelse utan också en källa till viktiga näringsämnen och antioxidanter för din hälsa.</p>
 
-        </div>
+                <p> 🍌 **Bananer:** Våra bananer är inte bara fyllda med energi och näringsämnen utan kommer också från hållbara odlingar, vilket gör dem till ett val som är bra för både dig och planeten.</p>
+
+                <p> 🍊 **Apelsiner:** Saftiga och fulla av C-vitamin är våra apelsiner perfekta för att ge dig den uppiggande energikicken du behöver för att starta dagen på rätt sätt.</p>
+
+                <p> 🍇 **Druvor:** Våra druvor är inte bara en fest för smaklökarna utan är också laddade med antioxidanter och vitaminer som främjar din hälsa och välbefinnande.</p>
+
+              </div>
+              <div id="mc_embed_shell">
+                <link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
+                  <style type="text/css">
+                        #mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; width: 600px;}
+                        /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
+                          We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
+                </style>
+                <div id="mc_embed_signup">
+                    <form action="https://gmail.us22.list-manage.com/subscribe/post?u=9114bca7522609dd32a6a0ec6&amp;id=7a2dc8e4ef&amp;f_id=00d3c0e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
+                        <div id="mc_embed_signup_scroll"><h2>Prennumera till vårt veckobrev och få erbjudande varje vecka!!!</h2>
+                            <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span></div>
+                        <div id="mce-responses" class="clear foot">
+                            <div class="response" id="mce-error-response" style="display: none;"></div>
+                            <div class="response" id="mce-success-response" style="display: none;"></div>
+                        </div>
+                    <div aria-hidden="true" style="position: absolute; left: -5000px;">
+                        /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
+                        <input type="text" name="b_9114bca7522609dd32a6a0ec6_7a2dc8e4ef" tabindex="-1" value="">
+                    </div>
+                        <div class="optionalParent">
+                            <div class="clear foot">
+                                <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe">
+                            </div>
+                        </div>
+                    </div>
+                </form>
+                </div>
+                <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>
+
+            </div>
+          </div>
+
         <p> Oavsett om du letar efter en nyttig och läcker snacks eller frukt till din favorit smoothie, så har vi något för dig!</p>
 
         <p> Utforska vårt sortiment och upptäck varför våra frukter är det bästa valet för dig och din familj! 🌟</p>
 
+
+      </div>
+
     </section>
+    <!-- ------- Product section------------->
+    <section id="product">
+      <div class="container-product">
+        <div class="product-header">
+          <h2 class="section-title load-hidden">Våra tjänster</h2>
+        </div>
+        <div class="product-hero">
+          <div class="product-sidebar">
+            <p class="about-wrapper__info-text">
+              This is where you can describe about yourself. The more you
+              describe about yourself, the more chances you have!
+            </p>
+            <p class="about-wrapper__info-text">
+              Extra Information about you! like hobbies and your goals.
+            </p>
+          </div>
+          <div class="product-content">
+            <div class="about-wrapper__image load-hidden">
+              <img
+                alt="Profile Image"
+                class="img-fluid rounded shadow-lg"
+                height="auto"
+                width="300px"
+                src="images/cssgrid.png"
+                alt="Profile Image"
+              />
+            </div>
+            <div class="about-wrapper__image load-hidden">
+              <img
+                alt="Profile Image"
+                class="img-fluid rounded shadow-lg"
+                height="auto"
+                width="300px"
+                src="images/leverans.png"
+                alt="Profile Image"
+              />
+            </div>
+            <div class="about-wrapper__image load-hidden">
+              <img
+                alt="Profile Image"
+                class="img-fluid rounded shadow-lg"
+                height="auto"
+                width="300px"
+                src="images/cssgrid.png"
+                alt="Profile Image"
+              />
+            </div>
+            <div class="about-wrapper__image load-hidden">
+              <img
+                alt="Profile Image"
+                class="img-fluid rounded shadow-lg"
+                height="auto"
+                width="300px"
+                src="images/cssgrid.png"
+                alt="Profile Image"
+              />
+            </div>
+            <div class="about-wrapper__image load-hidden">
+              <img
+                alt="Profile Image"
+                class="img-fluid rounded shadow-lg"
+                height="auto"
+                width="300px"
+                src="images/leverans.png"
+                alt="Profile Image"
+              />
+            </div>
+            <div class="about-wrapper__image load-hidden">
+              <img
+                alt="Profile Image"
+                class="img-fluid rounded shadow-lg"
+                height="auto"
+                width="300px"
+                src="images/cssgrid.png"
+                alt="Profile Image"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="product-footer">
+          <span class="d-flex mt-3">
+            <a
+              rel="noreferrer"
+              target="_blank"
+              class="cta-btn cta-btn--resume"
+              href="assets/resume.pdf"
+            >
+              View Resume
+            </a>
+          </span>
+        </div>
+
+      </div>
+    </section>
+
     <!--contat section-->
     <section id="contact" class="contact-section">
         <div class="paragraf-box-contact">
@@ -78,6 +223,14 @@ <h2>Varför välja våra frukter?</h2>
             </form>
         </div>
     </section>
+    <!-- **** Footer Section **** -->
+    <footer class="footer navbar-static-bottom">
+      <div class="container">
+        <p class="footer__text">
+          © 2024 - MaxAI & Innovation          
+        </p>    
+      </div>
+    </footer>
     <!--Java Script-->
      <!-- Länka JavaScript-filen -->
     <script src="script.js"></script>

sccgrid.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Grid Exempel</title>
+    <style>
+        .container {
+            display: grid;
+            grid-template-columns: 200px auto; /* Två kolumner: sidebar och innehåll */
+            grid-template-rows: auto 1fr auto; /* Tre rader: header, innehåll, footer */
+            height: 30vh; /* Hela fönstrets höjd */
+        }
+        .header {
+            grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
+            background-color: #333;
+            color: #fff;
+            padding: 10px;
+        }
+        .sidebar {
+            background-color: #ddd;
+            padding: 10px;
+        }
+        .content {
+            background-color: #eee;
+            padding: 10px;
+        }
+        .footer {
+            grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
+            background-color: #333;
+            color: #fff;
+            padding: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">Header</div>
+        <div class="sidebar">Sidebar</div>
+        <div class="content">Innehåll</div>
+        <div class="footer">Footer</div>
+    </div>
+</body>
+</html>

style.css

@@ -68,6 +68,7 @@ section {
 
 /*----About sektion --------*/
 
+
 .paragraf-box {
     background-color: #f0f0f0;
     border: 2px solid black;
@@ -84,7 +85,35 @@ section {
     background-color:#5F9EA0;
     margin: 0 auto;
 }
+ /*-------Product section ----------*/ 
 
+ .product-container {
+    display: grid;
+    grid-template-rows: auto 1fr auto; /* Tre rader: header, innehåll, footer */
+
+  }
+  .product-header {
+    grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
+    padding: 10px;
+  }
+  .product-hero {
+    display: grid; 
+    grid-template-columns: 200px auto;
+  }
+  .product-sidebar {
+    padding: 10px;
+  }
+  .product-content { 
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));; 
+    padding: 10px;
+  }
+  .product-footer {
+    grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
+    padding: 10px;
+
+  }
 /*------------ Kontakt sektion --------- */
 .contact-section {
     margin: 0 auto;