diff --git a/.DS_Store b/.DS_Store index 31eb914..2058a13 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/index.html b/index.html index 68658b5..f57cbbd 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ FruktOnline - + + @@ -41,73 +42,68 @@

Välkommen till Fruktbutik!

-
-
-

Varför välja våra frukter?

-
-
-
- Profile Image -
+
+
+

Om Oss

+
+
+
+ Profile Image
-
+
+
+
-

🍎 **Ä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.

+

🍎 **Ä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.

-

🍌 **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.

+

🍌 **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.

-

🍊 **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.

+

🍊 **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.

-

🍇 **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.

+

🍇 **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.

+
+ +
+
-
-
-

Prennumera till vårt veckobrev och få erbjudande varje vecka!!!

-
+ +
+
-
- +
-
-
- +
+
+
- -

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!

- -

Utforska vårt sortiment och upptäck varför våra frukter är det bästa valet för dig och din familj! 🌟

- - +
-
- +
@@ -194,14 +190,13 @@

Våra tjänster

class="cta-btn cta-btn--resume" href="assets/resume.pdf" > - View Resume + Footer
-
diff --git a/style.css b/style.css index 2aebb54..896634a 100644 --- a/style.css +++ b/style.css @@ -2,11 +2,6 @@ body { background-color : #87CEEB; margin: auto 0; } - -section { - margin-left: 10px; - margin-right: 10px; -} /*---------Nav bar--------------*/ .nav { background-color: #f0f0f0; @@ -67,7 +62,41 @@ section { /*----About sektion --------*/ +#about { + margin: auto 0; + background-color: $primary-color; + background-image: linear-gradient( + 135deg, + green 0%, + blue 100% + ); + color: $white-color; + height: 120vh; + border-top: 0px; + -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); + clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); + padding-bottom: 10%; +} +h2 { + text-align: center; + color: white; +} +.about-wrapper { + margin-top: 60px; +} + +.about-wrapper__image { + display: flex; + justify-content: center; /* Placera innehållet horisontellt i mitten */ + align-items: center; /* Placera innehållet vertikalt i mitten */ +} +/* Justera storleken på bilden på mobilskärmar */ +@media only screen and (max-width: 800px) { + .about-wrapper__image img { + width: 70%; /* Justera bredden till 70% på mobilskärmar */ + } +} .paragraf-box { background-color: #f0f0f0; @@ -75,45 +104,61 @@ section { padding: 10px; border-radius: 20px; margin: 0 auto; - width: 80%; + width: 90%; } -.paragraf-box-contact { - width: 80%; - margin: 0 auto; + +.about-wrapper__info-text { + @media only screen and (max-width: 900px) { + font-size: 0.7rem; + } } -.about-section { - background-color:#5F9EA0; - margin: 0 auto; +.form-label-subscribe{ + font-weight: bold; /* Gör texten fet */ + font-size: 1.5rem; /* Öka textstorleken */ + color: white; + @media only screen and (max-width: 900px) { + font-size: 0.7rem; + } } - /*-------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; - +/*-----------produkt sektion-------------*/ +.product-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 */ + +} +.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-hero { + @media only screen and (max-width: 700px) { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + padding: 10px; + } + } +.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; @@ -127,9 +172,16 @@ section { /* 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-size: 100%; /* Täcker hela hero-sektionen med bakgrundsbilden */ background-position: center; /* Centrerar bakgrundsbilden */ background-position: fixed; + + +} +.paragraf-box-contact { + width: 80%; + background-color: rgba(128, 128, 128, 0.6);; + } /* Styla label för formular */ @@ -137,6 +189,11 @@ section { font-weight: bold; /* Gör texten fet */ font-size: 2.2rem; /* Öka textstorleken */ color: blue; + margin: 15px; + @media only screen and (max-width: 700px) { + + font-size: 1.1rem; /* Öka textstorleken */ + } } /* Styla input-fälten */ @@ -152,5 +209,12 @@ section { 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 */ + margin: 10px; /* Lägg till lite avstånd ovanför knappen */ } + +/*** Footer ---- */ + +.footer { + text-align: center; /* Centrerar texten */ + padding: 10px 0; /* Lägger till 10 pixlar padding över och under texten */ +} \ No newline at end of file