Technigo · IamLise · Aug 25, 2024 · Aug 25, 2024 · Aug 25, 2024
diff --git a/README.md b/README.md
@@ -1,12 +1,13 @@
 # News Site
 
-Replace this readme with your own information about your project. 
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This assignment is about learning how to properly plan and make a website using css grid and flexbox.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+When working on this project I came across a lot of difficulties, most of my problems I manage to solve with the help of W3Schools 
+or other websites. I planned it on a piece of paper. If I had more time I would love to try out some animation in css.
 
 ## View it live
 Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+
+https://master--chimerical-cucurucho-69c124.netlify.app/
diff --git a/code/ChiliMasala.html b/code/ChiliMasala.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Chili Masala</title>
+    <link rel="stylesheet" href="./style.css" />
+    <!-- dont forget the meta tag for responsiveness -->
+  </head>
+  <body>
+    <h1>
+      Chili Masala
+    </h1>
+
+    <nav class="navbar">
+      <ul>
+            <li><a href="index.html">Home</a></li>
+          <li><a href="SaravanaBhavan.html">Saravana Bhavan</a></li>
+          <li><a href="SouthIndian.html">South Indian</a></li>
+          <li><a href="ChiliMasala.html">Chili Masala</a></li>
+          <li><a href="IndianStreetFood.html">Indian Street Food</a></li>
+      </ul>
+  </nav>
+
+  <main>
+    <h2>Chili Masala</h2>
+    <p>Chili Masala is a punjab restaurant in Stockholm, Solna. The restaurant is located on Hagalundsgatan 19 in
+        Solna.
+    </p>
+</main>
+
+    <section class="big-news">
+      <!-- The big news content -->
+    </section>
+
+    <section class="">
+      <!-- The other news  -->
+    </section>
+  </body>
+</html>
diff --git a/code/IndianStreetFood.html b/code/IndianStreetFood.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Indian Street Food</title>
+    <link rel="stylesheet" href="./style.css" />
+    <!-- dont forget the meta tag for responsiveness -->
+  </head>
+  <body>
+    <h1>
+      Indian Street Food
+    </h1>
+
+    <nav class="navbar">
+      <ul>
+            <li><a href="index.html">Home</a></li> 
+          <li><a href="SaravanaBhavan.html">Saravana Bhavan</a></li>
+          <li><a href="SouthIndian.html">South Indian</a></li>
+          <li><a href="ChiliMasala.html">Chili Masala</a></li>
+          <li><a href="IndianStreetFood.html">Indian Street Food</a></li>
+      </ul>
+  </nav>
+
+  <main>
+    <h2>Indian Street Food & co</h2>
+    <p>Indian Street Food & Co creates a modern Indian cuisine inspired by food vendors in the streets of India. 
+       By blending tradition with modern tastes and sustainable ideals their mission is to raise the Indian dining
+       experience wherever they go. Indian Street Food is located on Sankt Eriksgatan 116, Stockholm.</p>
+</main>
+
+    <section class="big-news">
+      <!-- The big news content -->
+    </section>
+
+    <section class="">
+      <!-- The other news  -->
+    </section>
+  </body>
+</html>
diff --git a/code/SaravanaBhavan.html b/code/SaravanaBhavan.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Saravana Bhavan</title>
+    <link rel="stylesheet" href="./style.css" />
+    <!-- dont forget the meta tag for responsiveness -->
+  </head>
+  <body>
+    <h1>
+      Saravana Bhavan
+    </h1>
+
+    <nav class="navbar">
+      <ul>
+            <li><a href="index.html">Home</a></li>
+          <li><a href="SaravanaBhavan.html">Saravana Bhavan</a></li>
+          <li><a href="SouthIndian.html">South Indian</a></li>
+          <li><a href="ChiliMasala.html">Chili Masala</a></li>
+          <li><a href="IndianStreetFood.html">Indian Street Food</a></li>
+      </ul>
+  </nav>
+
+  <main>
+    <h2>Saravana Bhavan</h2>
+    <p>Saravana Bhavan is an all vegetarian and Indian restaurant chain. They serve authentic Indian food
+       and are located on Sankt Eriksgatan 66 in Stockholm.
+    </p>
+</main>
+
+    <section class="big-news">
+      <!-- The big news content -->
+    </section>
+
+    <section class="">
+      <!-- The other news  -->
+    </section>
+  </body>
+</html>
diff --git a/code/SouthIndian.html b/code/SouthIndian.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>South Indian</title>
+    <link rel="stylesheet" href="./style.css" />
+    <!-- dont forget the meta tag for responsiveness -->
+  </head>
+  <body>
+    <h1>
+      South Indian
+    </h1>
+
+    <nav class="navbar">
+      <ul>
+            <li><a href="index.html">Home</a></li>
+          <li><a href="SaravanaBhavan.html">Saravana Bhavan</a></li>
+          <li><a href="SouthIndian.html">South Indian</a></li>
+          <li><a href="ChiliMasala.html">Chili Masala</a></li>
+          <li><a href="IndianStreetFood.html">Indian Street Food</a></li>
+      </ul>
+  </nav>
+
+  <main>
+    <h2>South Indian</h2>
+    <p>The South Indian restaurant take the tastes of South India to Stockholm. It is a great restaurant to go to
+       if you or one of your friends are vegetarians. The restaurant is located at Rådmansgatan 52 in Stockholm. 
+    </p>
+</main>
+
+    <section class="big-news">
+      <!-- The big news content -->
+    </section>
+
+    <section class="">
+      <!-- The other news  -->
+    </section>
+  </body>
+</html>
diff --git a/code/assets/20220323_190719.jpg b/code/assets/20220323_190719.jpg
diff --git a/code/assets/20220402_122854.jpg b/code/assets/20220402_122854.jpg
diff --git a/code/assets/20240707_105107.jpg b/code/assets/20240707_105107.jpg
diff --git a/code/assets/20240708_143140.jpg b/code/assets/20240708_143140.jpg
diff --git a/code/assets/20240716_121644.jpg b/code/assets/20240716_121644.jpg
diff --git a/code/assets/Golgappa-india-food.jpg b/code/assets/Golgappa-india-food.jpg
diff --git a/code/assets/IMG_20220408_213650_292.jpg b/code/assets/IMG_20220408_213650_292.jpg
diff --git a/code/assets/IMG_20240725_214649_375.jpg b/code/assets/IMG_20240725_214649_375.jpg
diff --git a/code/assets/Indian-food-dosa.jpg b/code/assets/Indian-food-dosa.jpg
diff --git a/code/assets/Indian-food-paneer-tikka.jpg b/code/assets/Indian-food-paneer-tikka.jpg
diff --git a/code/index.html b/code/index.html
@@ -2,22 +2,80 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <!-- Change the title below -->
-    <title>News Site</title>
+    <title>Best Indian restaurants in Stockholm</title>
     <link rel="stylesheet" href="./style.css" />
     <!-- dont forget the meta tag for responsiveness -->
   </head>
   <body>
-    <header>
-      <!-- Some kind of logo and navbar -->
-    </header>
+    <h1>
+      Best Indian restaurants in Stockholm
+    </h1>
 
-    <section class="big-news">
-      <!-- The big news content -->
-    </section>
+    <nav class="navbar">
+      <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="SaravanaBhavan.html">Saravana Bhavan</a></li>
+          <li><a href="SouthIndian.html">South Indian</a></li>
+          <li><a href="ChiliMasala.html">Chili Masala</a></li>
+          <li><a href="IndianStreetFood.html">Indian Street Food</a></li>
+      </ul>
+  </nav>
 
-    <section class="">
-      <!-- The other news  -->
-    </section>
+
+<div class="grid-container">
+  <div class="item1"> <h2>Indian cuisine</h2> <p>Indian cuisine consists of a variety of regional and traditional cuisines native to the
+    Indian subcontinent. Given the diversity in soil, climate, culture, ethnic groups, and 
+    occupations, these cuisines vary substantially and use locally available spices, herbs,
+    vegetables, and fruits. 
+
+    Indian food is also heavily influenced by religion, in particular Hinduism and Islam, 
+    cultural choices and traditions.
+   </p></div>
+  <div class="item2"><img src="assets/Indian-food-dosa.jpg" style="width: 100%;"><h2>Dosa</h2><p>Dosa is a traditional dish from south India.</p></div>
+  <div class="item3"><img src="assets/Indian-food-paneer-tikka.jpg" style="width: 50%;"><h2>Paneer tikka masala</h2><p>Paneer tikka masala is a traditional Indian dish.</p></div>  
+  <div class="item4"><img src="assets/Golgappa-india-food.jpg" style="width: 50%;"><h2>Golgappa</h2><p>Golgappa (aka Pani Puri) is very popular street food in India.</p></div>
+  <div class="item5"><h2>Idli</h2><p>Idli is a traditional Indian rice cake.</p></div>
+</div>
+
+
+<div class="row"> 
+  <div class="column">
+    <img src="assets/20220323_190719.jpg" style="width:100%">
+    <img src="assets/20220402_122854.jpg" style="width:100%">
+    <img src="assets/20240707_105107.jpg" style="width:100%">
+    <img src="assets/20240708_143140.jpg" style="width:100%">
+    <img src="assets/20240716_121644.jpg" style="width:100%">
+    <img src="assets/IMG_20220408_213650_292.jpg" style="width:100%">
+    <img src="assets/IMG_20240725_214649_375.jpg" style="width:100%">
+  </div>
+
+  <div class="column">
+    <img src="assets/20240716_121644.jpg" style="width:100%">
+    <img src="assets/IMG_20220408_213650_292.jpg" style="width:100%">
+    <img src="assets/IMG_20240725_214649_375.jpg" style="width:100%">
+    <img src="assets/20220323_190719.jpg" style="width:100%">
+    <img src="assets/20220402_122854.jpg" style="width:100%">
+    <img src="assets/20240707_105107.jpg" style="width:100%">
+  </div> 
+
+  <div class="column">
+    <img src="assets/20220323_190719.jpg" style="width:100%">
+    <img src="assets/20220402_122854.jpg" style="width:100%">
+    <img src="assets/20240707_105107.jpg" style="width:100%">
+    <img src="assets/20240708_143140.jpg" style="width:100%">
+    <img src="assets/20240716_121644.jpg" style="width:100%">
+    <img src="assets/IMG_20220408_213650_292.jpg" style="width:100%">
+    <img src="assets/IMG_20240725_214649_375.jpg" style="width:100%">
+  </div>
+
+  <div class="column">
+    <img src="assets/20240716_121644.jpg" style="width:100%">
+    <img src="assets/IMG_20220408_213650_292.jpg" style="width:100%">
+    <img src="assets/IMG_20240725_214649_375.jpg" style="width:100%">
+    <img src="assets/20220323_190719.jpg" style="width:100%">
+    <img src="assets/20220402_122854.jpg" style="width:100%">
+    <img src="assets/20240707_105107.jpg" style="width:100%">
+  </div>
+</div>
   </body>
 </html>
diff --git a/code/style.css b/code/style.css
@@ -1,4 +1,120 @@
 html {
-  background: #0025ff;
-  color: #fff;
+  background: #d7d9e6;
+  color: #110e0e;
 }
+
+body{
+  margin: 0px;
+}
+
+main{
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+h1{
+  text-align: center;
+}
+
+.navbar ul{
+  list-style-type: none;
+  background-color: hsl(0, 0%, 25%);
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
+}
+
+.navbar a{
+  color: white;
+  text-decoration: none;
+  padding: 15px;
+  display: block;
+  text-align: center;
+}
+
+.navbar a:hover{
+  background-color: hsl(0, 0%, 10%);
+}
+
+.navbar li{
+  float: left;
+}
+
+/*Grid*/
+
+.item1 { grid-area: header; }
+.item2 { grid-area: menu; }
+.item3 { grid-area: main; }
+.item4 { grid-area: right; }
+.item5 { grid-area: footer; }
+
+.grid-container {
+  display: grid;
+  grid-template-areas:
+    'header header header header header header'
+    'menu main main main right right'
+    'menu footer footer footer footer footer';
+  gap: 10px;
+  background-color: hsl(0, 0%, 25%);
+  padding: 10px;
+}
+
+.grid-container > div {
+  background-color: #d7d9e6;
+  text-align: center;
+  padding: 20px 0;
+}
+
+h2{
+  text-align: center;
+  font-size: 20px;
+}
+
+/* flexbox */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial;
+}
+
+.header {
+  text-align: center;
+  padding: 32px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+  flex: 25%;
+  max-width: 25%;
+  padding: 0 4px;
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media (max-width: 800px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
+  }
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media (max-width: 600px) {
+  .column {
+    flex: 100%;
+    max-width: 100%;
+  }
+}