Lösning lektion 3

Mual5746 · Mar 10, 2024 · f4c9804 · f4c9804
1 parent 309a18d
commit f4c9804
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 71 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/contact.png b/images/contact.png
diff --git a/index.html b/index.html
@@ -5,56 +5,43 @@
     <title>FruktOnline</title>
     <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">
+
 </head>
 <body> 
-    <!--
-        <div class="nav" >
-        <div class="main-nav">
-            <a >Hem</a>
-            <a href="./Page/frukt.html">Frukt</a>
-            <a href="./Page/register.html">Register</a>
-        </div>
-     </div>
-    -->
-
-     <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <!-- Navbar seketion skapat med botrap och semantic tag: nav-->
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
-          <img src="./images/logo.png" alt="" width="70px" height="40px">
+          <img src="./images/logo.png" alt="" height="40" width="70">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
               <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="#">Hem</a>
+                <a class="nav-link active" aria-current="page" href="#">Home</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link active" aria-current="page" href="./Page/frukt.html">Frukt</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link active" aria-current="page" href="./Page/register.html">Register</a>
               </li>
-
-
-              </li>
-
-            </ul>
-            <ul>
-                <li class="d-flex">
+              <li class="d-flex">
                     <a class="nav-link active" aria-current="page" href="#contact">Kontakt</a>
-                  </li>
+                </li>
             </ul>
           </div>
         </div>
       </nav>
       <!--Hero section-->
-      <section id="hero" class="hero-section" >
-        <h1 id="typing-text" >Välkommen till din Online Fruktbutik!</h1>
-        <img src="images/store.png" alt="butik">
-      </section>
+    <section id="hero" class="hero-section">
+      <div class="hero-item">
+        <h1 id="typing-text">Välkommen till Fruktbutik!</h1>
+      </div>
+     </section>
+    <!--About section-->
     <section id="about" class="about-section">
-        <div class="about-item">
-            <h2>Varför välja våra frukter?</h2>
+        <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>
 
@@ -68,33 +55,33 @@ <h2>Varför välja våra frukter?</h2>
         <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>
-
-    <!--Contact-->
+    <!--contat section-->
     <section id="contact" class="contact-section">
-        <div class="contact-box">
+        <div class="paragraf-box-contact">
             <form action="">
                 <div class="mb-3">
+                    <label for="exampleFormControlInput1" class="form-label">Namn</label>
+                    <input type="name" class="form-control" id="exampleFormControlInput2" placeholder="Din namn">
+                  </div>
+                 <div class="mb-3">
                     <label for="exampleFormControlInput1" class="form-label">Email address</label>
                     <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
                   </div>
                   <div class="mb-3">
-                    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
+                    <label for="exampleFormControlTextarea1" class="form-label">Önskemål</label>
                     <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                   </div>
+                  <button class="btn btn-outline-success" type="submit">Skicka</button>
+                </dic>
             </form>
-
         </div>
-
     </section>
-
-
-     <!-- Script-->
-     <script src="script.js"></script>
+    <!--Java Script-->
+     <!-- Länka JavaScript-filen -->
+    <script src="script.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-
 </body>
 </html>
 
diff --git a/script.js b/script.js
@@ -25,4 +25,21 @@ function typeWriter() {
 }
 
 // Starta "typningen"
-typeWriter();
+typeWriter();
+
+
+
+/*
+<script>
+var typedElements = document.querySelectorAll('.auto-type');
+
+typedElements.forEach(function(element) {
+  var typed = new Typed(element, {
+    strings: ['Software Engineer', 'Fullstack Developer', 'Backend: C# .Net', 'Python and Java'],
+    typeSpeed: 50, // Samma hastighet som backSpeed
+    backSpeed: 50, // Samma hastighet som typeSpeed
+    loop: true
+  });
+});
+</script>
+*/
diff --git a/style.css b/style.css
@@ -2,28 +2,12 @@ body {
     background-color : #87CEEB; 
     margin: auto 0;
 }
- section {
-    margin:15px;
- }
-.hero-section img {
-    width: 100%;
- }
 
-
- .about-section {
-    background-color: green;
-    margin: 0 auto;
-    height: 90vh;
- }
- .about-item {
-    margin: 20px;
- }
-
-
-h1 {
-    color: green;
+section {
+    margin-left: 10px;
+    margin-right: 10px;
 }
-
+/*---------Nav bar--------------*/
 .nav {
     background-color: #f0f0f0; 
     height: 40px;
@@ -38,23 +22,106 @@ h1 {
     padding: 10px;
 }
 
+
+/*---------Hero sektion --------------*/
+.hero-section {
+    /* Texterna plaseras i center*/
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    /*backgrund bilden */
+    background: url('images/store.png') no-repeat fixed; /* Lägg till bakgrundsbilden här */
+    height: 100vh; /* Använd 100% av fönstrets höjd */
+    background-size: 100%; /* Täcker hela hero-sektionen med bakgrundsbilden */
+    background-position: center; /* Centrerar bakgrundsbilden */
+    background-position: fixed;
+}
+
+/* För mindre skärmar, justera storleken på bakgrundsbilden */
+@media only screen and (max-width: 1200px) {
+    .hero-section {
+        height: 90vh; /* Använd 100% av fönstrets höjd */
+    }
+}
+
+/* För ännu mindre skärmar, som telefoner */
+@media only screen and (max-width: 900px) {
+    .hero-section {
+        height: 70vh; /* Använd 40% av fönstrets höjd för telefoner */
+    }
+}
+/* För ännu mindre skärmar, som telefoner */
+@media only screen and (max-width: 500px) {
+    .hero-section {
+        height: 57vh; /* Använd 40% av fönstrets höjd för telefoner */
+    }
+}
+.hero-section h1 {
+    text-align: top;
+    color: green; /* Färgen på texten */
+    margin-bottom: 20px; /* Lite avstånd under texten */
+    font-weight: 800; 
+}
+
+
+/*----About sektion --------*/
+
 .paragraf-box {
     background-color: #f0f0f0;
     border: 2px solid black;
     padding: 10px;
     border-radius: 20px; 
+    margin: 0 auto; 
+    width: 80%;
 }
-
-.contact-section {
- height: 100vh
+.paragraf-box-contact {
+    width: 80%; 
+    margin: 0 auto; 
+}
+.about-section {
+    background-color:#5F9EA0;
+    margin: 0 auto;
 }
 
-.contact-box {
+/*------------ Kontakt sektion --------- */
+.contact-section {
+    margin: 0 auto;
+    margin-top: 0 auto;
+    /* Texterna placeras i center */
     display: flex;
+    flex-direction: column;
     justify-content: center;
-    background-color: #f0f0f0;
-    border: 2px solid black;
-    padding: 10px;
-    border-radius: 20px; 
-    width: 80%;
-}
+    align-items: center;
+
+    /* Bakgrundsbilden */
+    background: url('images/contact.png') fixed; /* Lägg till bakgrundsbilden här */
+    height: 100vh; /* Använd 100% av fönstrets höjd */
+    background-size: cover; /* Täcker hela hero-sektionen med bakgrundsbilden */
+    background-position: center; /* Centrerar bakgrundsbilden */
+    background-position: fixed;
+}
+
+/* Styla label för formular */
+.form-label {
+    font-weight: bold; /* Gör texten fet */
+    font-size: 2.2rem; /* Öka textstorleken */
+    color: blue;
+}
+
+/* Styla input-fälten */
+.form-control {
+    width: 50%; /* Anpassa bredden efter behov */
+    margin-left: 30%;
+}
+
+/* Styla skicka-knappen */
+.btn {
+    background: blue;
+    color: white; /* Ändra textfärg till vit */
+    font-weight: bold; /* Gör texten fet */
+    padding: 10px 20px; /* Lägg till lite utrymme runt texten */
+    font-size: 1.2rem; /* Öka textstorleken */
+    margin-top: 10px; /* Lägg till lite avstånd ovanför knappen */
+}