├── home-images ├── hero.jpg ├── favicon.png ├── home-thumb.JPG └── Interior-logo.png ├── index.html └── style.css /home-images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sadia-Shahzadi/Home-Decor-Website/HEAD/home-images/hero.jpg -------------------------------------------------------------------------------- /home-images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sadia-Shahzadi/Home-Decor-Website/HEAD/home-images/favicon.png -------------------------------------------------------------------------------- /home-images/home-thumb.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sadia-Shahzadi/Home-Decor-Website/HEAD/home-images/home-thumb.JPG -------------------------------------------------------------------------------- /home-images/Interior-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sadia-Shahzadi/Home-Decor-Website/HEAD/home-images/Interior-logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home Decor - Make your home look good 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 |

19 | 33 |

34 |

35 | Coming Home Never
36 | Felt So Good! 37 |

38 |

Quam a diamlorem explicabo quos fugit, ut aliquam modi.

39 | 40 |

41 |

42 | 43 | 44 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Google Font */ 2 | @import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@1,500;1,600&family=Montserrat:wght@600;700&display=swap"); 3 | 4 | /* Custom CSS */ 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | outline: none; 10 | border: none; 11 | list-style: none; 12 | text-decoration: none; 13 | font-family: "Montserrat", sans-serif; 14 | } 15 | ::selection { 16 | background-color: #c50529; 17 | } 18 | header { 19 | width: 100%; 20 | min-height: 120vh; 21 | background-image: url(home-images/hero.jpg); 22 | background-position: center; 23 | background-size: cover; 24 | } 25 | nav { 26 | display: flex; 27 | padding: 2.5% 5%; 28 | } 29 | nav img { 30 | width: 180px; 31 | height: 36px; 32 | cursor: pointer; 33 | } 34 | nav ul { 35 | text-align: right; 36 | flex: 1; 37 | } 38 | nav ul li { 39 | display: inline-block; 40 | padding: 6px 15px; 41 | } 42 | nav ul li a { 43 | color: white; 44 | font-size: 16px; 45 | } 46 | nav ul li a:hover { 47 | color: #c50529; 48 | } 49 | nav ul li a::after { 50 | content: ""; 51 | width: 0; 52 | height: 2px; 53 | display: block; 54 | transition: 0.6s; 55 | background-color: #c50529; 56 | } 57 | nav ul li a:hover::after { 58 | width: 100%; 59 | } 60 | .head { 61 | text-align: center; 62 | justify-content: center; 63 | color: white; 64 | margin-top: 10%; 65 | } 66 | .head h1 { 67 | font-size: 86px; 68 | padding-bottom: 25px; 69 | line-height: 1.2em; 70 | } 71 | .head p { 72 | line-height: 1.4; 73 | font-family: "Libre Franklin", sans-serif; 74 | font-weight: 300 !important; 75 | font-size: 23px; 76 | letter-spacing: 1px; 77 | margin-bottom: 3%; 78 | } 79 | button { 80 | padding: 15px 40px; 81 | color: white; 82 | cursor: pointer; 83 | font-weight: bold !important; 84 | font-size: 24px; 85 | border-radius: 5px; 86 | background: linear-gradient(110deg, #c50529 40%, #833556 60%); 87 | } 88 | #check-btn { 89 | font-size: 20px; 90 | color: white; 91 | float: right; 92 | flex: 1; 93 | margin-right: 40px; 94 | cursor: pointer; 95 | display: none; 96 | } 97 | #check { 98 | display: none; 99 | } 100 | /* Responsive */ 101 | @media (max-width: 858px) { 102 | #check-btn { 103 | display: block; 104 | color: #c50529; 105 | } 106 | ul { 107 | position: fixed; 108 | width: 100%; 109 | height: 82vh; 110 | background-color: #c50529; 111 | top: 80px; 112 | left: -100%; 113 | text-align: center; 114 | align-items: center; 115 | justify-content: center; 116 | display: flex; 117 | flex-direction: column; 118 | transition: 0.5s; 119 | } 120 | ul li { 121 | display: block; 122 | margin: 30px 0; 123 | line-height: 30px; 124 | } 125 | ul li a { 126 | color: white; 127 | font-size: 20px; 128 | } 129 | #check:checked ~ ul { 130 | left: 0; 131 | } 132 | } 133 | /* For screens smaller than 480px */ 134 | @media (max-width: 636px) { 135 | .head h1 { 136 | font-size: 70px; 137 | } 138 | .head p { 139 | font-size: 16px; 140 | padding-bottom: 5%; 141 | } 142 | button { 143 | padding: 8px 20px; 144 | font-size: 16px; 145 | } 146 | } 147 | --------------------------------------------------------------------------------