diff --git a/README.md b/README.md index 54ce3414a..ab42c4c84 100644 --- 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 new file mode 100644 index 000000000..36fa692fd --- /dev/null +++ b/code/ChiliMasala.html @@ -0,0 +1,39 @@ + + + + + Chili Masala + + + + +

+ Chili Masala +

+ + + +
+

Chili Masala

+

Chili Masala is a punjab restaurant in Stockholm, Solna. The restaurant is located on Hagalundsgatan 19 in + Solna. +

+
+ +
+ +
+ +
+ +
+ + diff --git a/code/IndianStreetFood.html b/code/IndianStreetFood.html new file mode 100644 index 000000000..da2a2edef --- /dev/null +++ b/code/IndianStreetFood.html @@ -0,0 +1,39 @@ + + + + + Indian Street Food + + + + +

+ Indian Street Food +

+ + + +
+

Indian Street Food & co

+

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.

+
+ +
+ +
+ +
+ +
+ + diff --git a/code/SaravanaBhavan.html b/code/SaravanaBhavan.html new file mode 100644 index 000000000..9df150d05 --- /dev/null +++ b/code/SaravanaBhavan.html @@ -0,0 +1,39 @@ + + + + + Saravana Bhavan + + + + +

+ Saravana Bhavan +

+ + + +
+

Saravana Bhavan

+

Saravana Bhavan is an all vegetarian and Indian restaurant chain. They serve authentic Indian food + and are located on Sankt Eriksgatan 66 in Stockholm. +

+
+ +
+ +
+ +
+ +
+ + diff --git a/code/SouthIndian.html b/code/SouthIndian.html new file mode 100644 index 000000000..55e4a7aad --- /dev/null +++ b/code/SouthIndian.html @@ -0,0 +1,39 @@ + + + + + South Indian + + + + +

+ South Indian +

+ + + +
+

South Indian

+

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

+
+ +
+ +
+ +
+ +
+ + diff --git a/code/assets/20220323_190719.jpg b/code/assets/20220323_190719.jpg new file mode 100644 index 000000000..77ffc2357 Binary files /dev/null and b/code/assets/20220323_190719.jpg differ diff --git a/code/assets/20220402_122854.jpg b/code/assets/20220402_122854.jpg new file mode 100644 index 000000000..3f0bf5546 Binary files /dev/null and b/code/assets/20220402_122854.jpg differ diff --git a/code/assets/20240707_105107.jpg b/code/assets/20240707_105107.jpg new file mode 100644 index 000000000..c7257b5f9 Binary files /dev/null and b/code/assets/20240707_105107.jpg differ diff --git a/code/assets/20240708_143140.jpg b/code/assets/20240708_143140.jpg new file mode 100644 index 000000000..ce296c19b Binary files /dev/null and b/code/assets/20240708_143140.jpg differ diff --git a/code/assets/20240716_121644.jpg b/code/assets/20240716_121644.jpg new file mode 100644 index 000000000..fadee0e56 Binary files /dev/null and b/code/assets/20240716_121644.jpg differ diff --git a/code/assets/Golgappa-india-food.jpg b/code/assets/Golgappa-india-food.jpg new file mode 100644 index 000000000..7ac9a7270 Binary files /dev/null and b/code/assets/Golgappa-india-food.jpg differ diff --git a/code/assets/IMG_20220408_213650_292.jpg b/code/assets/IMG_20220408_213650_292.jpg new file mode 100644 index 000000000..78d05efa8 Binary files /dev/null and b/code/assets/IMG_20220408_213650_292.jpg differ diff --git a/code/assets/IMG_20240725_214649_375.jpg b/code/assets/IMG_20240725_214649_375.jpg new file mode 100644 index 000000000..bff42a801 Binary files /dev/null and b/code/assets/IMG_20240725_214649_375.jpg differ diff --git a/code/assets/Indian-food-dosa.jpg b/code/assets/Indian-food-dosa.jpg new file mode 100644 index 000000000..275deccab Binary files /dev/null and b/code/assets/Indian-food-dosa.jpg differ diff --git a/code/assets/Indian-food-paneer-tikka.jpg b/code/assets/Indian-food-paneer-tikka.jpg new file mode 100644 index 000000000..38bb88eb7 Binary files /dev/null and b/code/assets/Indian-food-paneer-tikka.jpg differ diff --git a/code/index.html b/code/index.html index 7efea3242..39126b75b 100644 --- a/code/index.html +++ b/code/index.html @@ -2,22 +2,80 @@ - - News Site + Best Indian restaurants in Stockholm -
- -
+

+ Best Indian restaurants in Stockholm +

-
- -
+ -
- -
+ +
+

Indian cuisine

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

+

Dosa

Dosa is a traditional dish from south India.

+

Paneer tikka masala

Paneer tikka masala is a traditional Indian dish.

+

Golgappa

Golgappa (aka Pani Puri) is very popular street food in India.

+

Idli

Idli is a traditional Indian rice cake.

+
+ + +
+
+ + + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + +
+
diff --git a/code/style.css b/code/style.css index d6be16468..d7557cfe9 100644 --- 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%; + } +} \ No newline at end of file