From de810d1bfa42260ff8968d5fd5f622d344c6e230 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Wed, 9 Mar 2022 23:46:05 +0530 Subject: [PATCH 1/5] add basic layout --- index.html | 72 ++++++++++++++++++++++++++++++++++++ style.min.css | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++ style.scss | 83 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 255 insertions(+) create mode 100644 index.html create mode 100644 style.min.css create mode 100644 style.scss diff --git a/index.html b/index.html new file mode 100644 index 0000000..6b4494c --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + + + + css exersise + + + + +
+

A Hotel

+
+
+
+
+
+ card image +
+
+

Beautiful Food

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem consequatur aliquam ex eum + mollitia + eius fugiat nisi ducimus quidem praesentium ea reiciendis ratione eligendi tempora, distinctio + eos + sunt ad iure.

+
+
+
+
+ card image +
+
+

Beautiful Food

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem consequatur aliquam ex eum + mollitia + eius fugiat nisi ducimus quidem praesentium ea reiciendis ratione eligendi tempora, distinctio + eos + sunt ad iure.

+
+
+
+
+ card image +
+
+

Beautiful Food

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem consequatur aliquam ex eum + mollitia + eius fugiat nisi ducimus quidem praesentium ea reiciendis ratione eligendi tempora, distinctio + eos + sunt ad iure.

+
+
+
+
+
+

Stay

+
+ + + \ No newline at end of file diff --git a/style.min.css b/style.min.css new file mode 100644 index 0000000..f38458b --- /dev/null +++ b/style.min.css @@ -0,0 +1,100 @@ +* { + padding: 0; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +body { + background-color: rgba(0, 0, 0, 0.774); + overflow-x: hidden; + width: 100vw; + height: 100vh; +} +nav { + position: fixed; + width: 100%; + padding: 20px; + background-color: violet; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +nav .logo { + background-color: red; +} +nav ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 20px; + list-style: none; + background-color: green; +} +nav ul li { + background-color: gold; +} +section.landing { + width: 100%; + min-height: 90%; + display: -ms-grid; + display: grid; + place-items: center; + background-color: greenyellow; +} +section.landing h1 { + display: -ms-grid; + display: grid; +} +section.facilities { + width: 100%; + min-height: 90%; + display: -ms-grid; + display: grid; + place-items: center; + background-color: pink; +} +section.facilities .container { + width: 80%; + display: -ms-grid; + display: grid; + -ms-grid-columns: (minmax(250px, 1fr)) [auto-fit]; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} +section.facilities .container .card { + background-color: aqua; +} +section.facilities .container .card .card-img { + height: 200px; + background-color: yellow; +} +section.facilities .container .card .card-desc { + background-color: burlywood; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 10px; +} +section.message { + width: 100%; + min-height: 90%; + display: -ms-grid; + display: grid; + place-items: center; + background-color: salmon; +} +section.message h1 { + display: -ms-grid; + display: grid; +} +/*# sourceMappingURL=style.min.css.map */ diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..6a5c0f8 --- /dev/null +++ b/style.scss @@ -0,0 +1,83 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + background-color: rgba(0, 0, 0, 0.774); + overflow-x: hidden; + width: 100vw; + height: 100vh; +} + +nav { + position: fixed; + width: 100%; + padding: 20px; + background-color: violet; + display: flex; + justify-content: space-between; + align-items: center; + .logo { + background-color: red; + } + ul { + display: flex; + gap: 20px; + list-style: none; + background-color: green; + li { + background-color: gold; + } + } +} + +section.landing { + width: 100%; + min-height: 90%; + display: grid; + place-items: center; + background-color: greenyellow; + h1 { + display: grid; + } +} + +section.facilities { + width: 100%; + min-height: 90%; + display: grid; + place-items: center; + background-color: pink; + .container { + width: 80%; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + .card { + background-color: aqua; + .card-img { + height: 200px; + background-color: yellow; + } + .card-desc { + background-color: burlywood; + display: flex; + flex-direction: column; + gap: 10px; + } + } + } +} + +section.message { + width: 100%; + min-height: 90%; + display: grid; + place-items: center; + background-color: salmon; + h1 { + display: grid; + } +} From 241a2f9a6c6798b6efd54e2ed91660c44c0f6e92 Mon Sep 17 00:00:00 2001 From: Satyam Seth Date: Wed, 9 Mar 2022 23:48:20 +0530 Subject: [PATCH 2/5] Update README.md --- README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a4798c5..cc93406 100644 --- a/README.md +++ b/README.md @@ -1 +1,13 @@ -# css_exercise \ No newline at end of file +# css_exercise + +- Desktop View - + +![127 0 0 1_5500_css_exercise_ (1)](https://user-images.githubusercontent.com/63374020/157505370-edc3b4a0-bbd6-4a26-b06f-62613cd9af5c.png) + + - Tablet View - + +![127 0 0 1_5500_css_exercise_ (3)](https://user-images.githubusercontent.com/63374020/157505357-c1d3f99d-e898-40db-b051-d89358295f52.png) + +- Mobile View - + +![127 0 0 1_5500_css_exercise_ (2)](https://user-images.githubusercontent.com/63374020/157505366-38309ea1-4dd5-43d0-b671-916782e40aca.png) From 3632a51ca2b90f7a1cb2ec3219b6f138701eb44a Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Thu, 10 Mar 2022 22:21:04 -0800 Subject: [PATCH 3/5] fix --- style.min.css | 102 +------------------------------------------------- style.scss | 6 +-- 2 files changed, 5 insertions(+), 103 deletions(-) diff --git a/style.min.css b/style.min.css index f38458b..5abdc9a 100644 --- a/style.min.css +++ b/style.min.css @@ -1,100 +1,2 @@ -* { - padding: 0; - margin: 0; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -body { - background-color: rgba(0, 0, 0, 0.774); - overflow-x: hidden; - width: 100vw; - height: 100vh; -} -nav { - position: fixed; - width: 100%; - padding: 20px; - background-color: violet; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -nav .logo { - background-color: red; -} -nav ul { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - gap: 20px; - list-style: none; - background-color: green; -} -nav ul li { - background-color: gold; -} -section.landing { - width: 100%; - min-height: 90%; - display: -ms-grid; - display: grid; - place-items: center; - background-color: greenyellow; -} -section.landing h1 { - display: -ms-grid; - display: grid; -} -section.facilities { - width: 100%; - min-height: 90%; - display: -ms-grid; - display: grid; - place-items: center; - background-color: pink; -} -section.facilities .container { - width: 80%; - display: -ms-grid; - display: grid; - -ms-grid-columns: (minmax(250px, 1fr)) [auto-fit]; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; -} -section.facilities .container .card { - background-color: aqua; -} -section.facilities .container .card .card-img { - height: 200px; - background-color: yellow; -} -section.facilities .container .card .card-desc { - background-color: burlywood; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - gap: 10px; -} -section.message { - width: 100%; - min-height: 90%; - display: -ms-grid; - display: grid; - place-items: center; - background-color: salmon; -} -section.message h1 { - display: -ms-grid; - display: grid; -} -/*# sourceMappingURL=style.min.css.map */ +*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{background-color:rgba(0,0,0,0.774);width:100%;height:100vh}nav{position:fixed;width:100%;padding:20px;background-color:violet;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}nav .logo{background-color:red}nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;list-style:none;background-color:green}nav ul li{background-color:gold}section.landing{width:100%;min-height:100%;display:-ms-grid;display:grid;place-items:center;background-color:greenyellow}section.landing h1{display:-ms-grid;display:grid}section.facilities{width:100%;min-height:90%;display:-ms-grid;display:grid;place-items:center;background-color:pink}section.facilities .container{margin:20px 0px;width:80%;display:-ms-grid;display:grid;-ms-grid-columns:(minmax(250px, 1fr))[auto-fit];grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px}section.facilities .container .card{background-color:aqua}section.facilities .container .card .card-img{height:200px;background-color:yellow}section.facilities .container .card .card-desc{background-color:burlywood;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px}section.message{width:100%;min-height:90%;display:-ms-grid;display:grid;place-items:center;background-color:salmon}section.message h1{display:-ms-grid;display:grid} +/*# sourceMappingURL=style.min.css.map */ \ No newline at end of file diff --git a/style.scss b/style.scss index 6a5c0f8..bcf0057 100644 --- a/style.scss +++ b/style.scss @@ -6,8 +6,7 @@ body { background-color: rgba(0, 0, 0, 0.774); - overflow-x: hidden; - width: 100vw; + width: 100%; height: 100vh; } @@ -35,7 +34,7 @@ nav { section.landing { width: 100%; - min-height: 90%; + min-height: 100%; display: grid; place-items: center; background-color: greenyellow; @@ -51,6 +50,7 @@ section.facilities { place-items: center; background-color: pink; .container { + margin: 20px 0px; width: 80%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); From 159b678a853b079aaf612d36f9d5fac5c0302210 Mon Sep 17 00:00:00 2001 From: satyam-seth Date: Thu, 10 Mar 2022 22:28:21 -0800 Subject: [PATCH 4/5] add formatter --- .vscode/settings.json | 11 ++++ index.html | 113 ++++++++++++++++++++---------------------- style.min.css.map | 9 ++++ 3 files changed, 74 insertions(+), 59 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 style.min.css.map diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d431a16 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "liveSassCompile.settings.formats": [ + { + "format": "compressed", + "extensionName": ".min.css", + "savePath": "/" + } + ] +} diff --git a/index.html b/index.html index 6b4494c..bb0902d 100644 --- a/index.html +++ b/index.html @@ -1,72 +1,67 @@ - - - - - - + + + + + css exersise - + - +
-

A Hotel

+

A Hotel

-
-
-
- card image -
-
-

Beautiful Food

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem consequatur aliquam ex eum - mollitia - eius fugiat nisi ducimus quidem praesentium ea reiciendis ratione eligendi tempora, distinctio - eos - sunt ad iure.

-
-
-
-
- card image -
-
-

Beautiful Food

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem consequatur aliquam ex eum - mollitia - eius fugiat nisi ducimus quidem praesentium ea reiciendis ratione eligendi tempora, distinctio - eos - sunt ad iure.

-
-
-
-
- card image -
-
-

Beautiful Food

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem consequatur aliquam ex eum - mollitia - eius fugiat nisi ducimus quidem praesentium ea reiciendis ratione eligendi tempora, distinctio - eos - sunt ad iure.

-
-
+
+
+
card image
+
+

Beautiful Food

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem + consequatur aliquam ex eum mollitia eius fugiat nisi ducimus + quidem praesentium ea reiciendis ratione eligendi tempora, + distinctio eos sunt ad iure. +

+
+
+
+
card image
+
+

Beautiful Food

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem + consequatur aliquam ex eum mollitia eius fugiat nisi ducimus + quidem praesentium ea reiciendis ratione eligendi tempora, + distinctio eos sunt ad iure. +

+
+
+
card image
+
+

Beautiful Food

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem + consequatur aliquam ex eum mollitia eius fugiat nisi ducimus + quidem praesentium ea reiciendis ratione eligendi tempora, + distinctio eos sunt ad iure. +

+
+
+
-

Stay

+

Stay

- - - \ No newline at end of file + + diff --git a/style.min.css.map b/style.min.css.map new file mode 100644 index 0000000..5bd66e5 --- /dev/null +++ b/style.min.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,CAAC,AAAC,CACA,OAAO,CAAE,CAAC,CACV,MAAM,CAAE,CAAC,CACT,UAAU,CAAE,UAAU,CACvB,AAED,AAAA,IAAI,AAAC,CACH,gBAAgB,CAAE,iBAAoB,CACtC,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,CACd,AAED,AAAA,GAAG,AAAC,CACF,QAAQ,CAAE,KAAK,CACf,KAAK,CAAE,IAAI,CACX,OAAO,CAAE,IAAI,CACb,gBAAgB,CAAE,MAAM,CACxB,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,aAAa,CAC9B,WAAW,CAAE,MAAM,CAapB,AApBD,AAQE,GARC,CAQD,KAAK,AAAC,CACJ,gBAAgB,CAAE,GAAG,CACtB,AAVH,AAWE,GAXC,CAWD,EAAE,AAAC,CACD,OAAO,CAAE,IAAI,CACb,GAAG,CAAE,IAAI,CACT,UAAU,CAAE,IAAI,CAChB,gBAAgB,CAAE,KAAK,CAIxB,AAnBH,AAgBI,GAhBD,CAWD,EAAE,CAKA,EAAE,AAAC,CACD,gBAAgB,CAAE,IAAI,CACvB,AAIL,AAAA,OAAO,AAAA,QAAQ,AAAC,CACd,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,IAAI,CAChB,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,gBAAgB,CAAE,WAAW,CAI9B,AATD,AAME,OANK,AAAA,QAAQ,CAMb,EAAE,AAAC,CACD,OAAO,CAAE,IAAI,CACd,AAGH,AAAA,OAAO,AAAA,WAAW,AAAC,CACjB,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,GAAG,CACf,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,gBAAgB,CAAE,IAAI,CAqBvB,AA1BD,AAME,OANK,AAAA,WAAW,CAMhB,UAAU,AAAC,CACT,MAAM,CAAE,QAAQ,CAChB,KAAK,CAAE,GAAG,CACV,OAAO,CAAE,IAAI,CACb,qBAAqB,CAAE,oCAAoC,CAC3D,GAAG,CAAE,IAAI,CAcV,AAzBH,AAYI,OAZG,AAAA,WAAW,CAMhB,UAAU,CAMR,KAAK,AAAC,CACJ,gBAAgB,CAAE,IAAI,CAWvB,AAxBL,AAcM,OAdC,AAAA,WAAW,CAMhB,UAAU,CAMR,KAAK,CAEH,SAAS,AAAC,CACR,MAAM,CAAE,KAAK,CACb,gBAAgB,CAAE,MAAM,CACzB,AAjBP,AAkBM,OAlBC,AAAA,WAAW,CAMhB,UAAU,CAMR,KAAK,CAMH,UAAU,AAAC,CACT,gBAAgB,CAAE,SAAS,CAC3B,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,GAAG,CAAE,IAAI,CACV,AAKP,AAAA,OAAO,AAAA,QAAQ,AAAC,CACd,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,GAAG,CACf,OAAO,CAAE,IAAI,CACb,WAAW,CAAE,MAAM,CACnB,gBAAgB,CAAE,MAAM,CAIzB,AATD,AAME,OANK,AAAA,QAAQ,CAMb,EAAE,AAAC,CACD,OAAO,CAAE,IAAI,CACd", + "sources": [ + "style.scss" + ], + "names": [], + "file": "style.min.css" +} \ No newline at end of file From 2c4328e8ec148a988b9ba4c8b44447e188abfac8 Mon Sep 17 00:00:00 2001 From: Satyam Seth Date: Thu, 10 Mar 2022 09:08:48 -0800 Subject: [PATCH 5/5] Update README.md --- README.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index cc93406..10ae6e3 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,15 @@ - Desktop View - -![127 0 0 1_5500_css_exercise_ (1)](https://user-images.githubusercontent.com/63374020/157505370-edc3b4a0-bbd6-4a26-b06f-62613cd9af5c.png) +![127 0 0 1_5500_index html (1)](https://user-images.githubusercontent.com/63374020/157716935-01b9b318-77a4-4d54-bf28-320c16e67e76.png) + - Tablet View - -![127 0 0 1_5500_css_exercise_ (3)](https://user-images.githubusercontent.com/63374020/157505357-c1d3f99d-e898-40db-b051-d89358295f52.png) +![127 0 0 1_5500_index html](https://user-images.githubusercontent.com/63374020/157716977-fc0de005-851d-441d-94e7-d14b125b5273.png) + - Mobile View - -![127 0 0 1_5500_css_exercise_ (2)](https://user-images.githubusercontent.com/63374020/157505366-38309ea1-4dd5-43d0-b671-916782e40aca.png) +![127 0 0 1_5500_index html(iPhone SE)](https://user-images.githubusercontent.com/63374020/157717015-f2aba16d-b8fc-4544-9600-d6543fdc5f09.png) +