diff --git a/.DS_Store b/.DS_Store index d062f5b..31eb914 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a291..f673a71 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/images/about.jpeg b/images/about.jpeg new file mode 100644 index 0000000..0cb6fc2 Binary files /dev/null and b/images/about.jpeg differ diff --git a/images/cssgrid.png b/images/cssgrid.png new file mode 100644 index 0000000..1698fd7 Binary files /dev/null and b/images/cssgrid.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..4b9b220 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/leverans.png b/images/leverans.png new file mode 100644 index 0000000..7751536 Binary files /dev/null and b/images/leverans.png differ diff --git a/index.html b/index.html index de36687..68658b5 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ FruktOnline + @@ -41,22 +42,166 @@

Välkommen till Fruktbutik!

+

Varför välja våra frukter?

-
-

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

- -

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

+
+
+
+ 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.

-
+

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

+ +

🍇 **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! 🌟

+ +
+
+ +
+
+
+

Våra tjänster

+
+
+
+

+ This is where you can describe about yourself. The more you + describe about yourself, the more chances you have! +

+

+ Extra Information about you! like hobbies and your goals. +

+
+
+
+ Profile Image +
+
+ Profile Image +
+
+ Profile Image +
+
+ Profile Image +
+
+ Profile Image +
+
+ Profile Image +
+
+
+
+ + + View Resume + + +
+ +
+
+
@@ -78,6 +223,14 @@

Varför välja våra frukter?

+ + diff --git a/sccgrid.html b/sccgrid.html new file mode 100644 index 0000000..b4a5fa6 --- /dev/null +++ b/sccgrid.html @@ -0,0 +1,44 @@ + + + + + + CSS Grid Exempel + + + +
+
Header
+
Sidebar
+
Innehåll
+
Footer
+
+ + \ No newline at end of file diff --git a/style.css b/style.css index 63fc23e..2aebb54 100644 --- a/style.css +++ b/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;