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/README.md b/README.md index 5c914e8..1cf19c8 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,21 @@ # css_exercise + ![IMG20220309193544](https://user-images.githubusercontent.com/63374020/157505719-a5455e05-6b54-4660-a940-5b8b4c1206db.jpg) ![IMG20220309193612](https://user-images.githubusercontent.com/63374020/157505729-aeeb5c5d-b501-4d2e-8f11-440d9cc162ce.jpg) ![IMG20220309193653](https://user-images.githubusercontent.com/63374020/157505727-77fcbea8-d5c0-47c2-bc1d-e152aef69950.jpg) + +## Satyam Seth + +- Desktop View - + +![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_index html](https://user-images.githubusercontent.com/63374020/157716977-fc0de005-851d-441d-94e7-d14b125b5273.png) + + +- Mobile View - + +![127 0 0 1_5500_index html(iPhone SE)](https://user-images.githubusercontent.com/63374020/157717015-f2aba16d-b8fc-4544-9600-d6543fdc5f09.png) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..bb0902d --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + + + 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

+
+ + diff --git a/style.min.css b/style.min.css new file mode 100644 index 0000000..5abdc9a --- /dev/null +++ b/style.min.css @@ -0,0 +1,2 @@ +*{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.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 diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..bcf0057 --- /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); + width: 100%; + 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: 100%; + 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 { + margin: 20px 0px; + 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; + } +}