├── burger.png ├── burger_fries.png ├── french_fries.png ├── fried_chicken.png ├── index.html ├── logo.png └── style.css /burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/KFC-landing-page/d805bbef2f365e395a73f2202b7050583e59c64a/burger.png -------------------------------------------------------------------------------- /burger_fries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/KFC-landing-page/d805bbef2f365e395a73f2202b7050583e59c64a/burger_fries.png -------------------------------------------------------------------------------- /french_fries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/KFC-landing-page/d805bbef2f365e395a73f2202b7050583e59c64a/french_fries.png -------------------------------------------------------------------------------- /fried_chicken.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/KFC-landing-page/d805bbef2f365e395a73f2202b7050583e59c64a/fried_chicken.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | KFC Landing Page | Responsive Design 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 20 |
21 |
22 |
23 |

Its Finger
Lickin Good.

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, adipisci obcaecati! Accusamus fugiat obcaecati nesciunt maiores rerum placeat amet voluptatibus cumque soluta similique saepe, assumenda eos dolorum autem. Iusto enim accusamus optio cupiditate earum ipsam!

25 | Order Now 26 |
27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 | 43 |
44 | 49 |
50 |

Always Fresh

51 | 52 | 53 |
54 |
55 |
56 | 57 | 58 | 59 | 107 | 108 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/KFC-landing-page/d805bbef2f365e395a73f2202b7050583e59c64a/logo.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: "Ubuntu", sans-serif; 7 | } 8 | .main { 9 | position: relative; 10 | min-height: 100vh; 11 | background: radial-gradient(#f0483a, #d10a20); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | flex-direction: column; 16 | padding: 30px 100px; 17 | } 18 | header { 19 | position: absolute; 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | padding: 30px 100px; 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | z-index: 1000; 28 | } 29 | .logo { 30 | max-width: 90px; 31 | } 32 | .navigation { 33 | display: flex; 34 | } 35 | .navigation li { 36 | list-style: none; 37 | } 38 | .navigation li a { 39 | position: relative; 40 | color: #fff; 41 | text-decoration: none; 42 | margin-left: 40px; 43 | } 44 | .content { 45 | position: relative; 46 | width: 100%; 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | } 51 | .content .text { 52 | width: 100%; 53 | max-width: 600px; 54 | } 55 | .content .text h2 { 56 | color: #fff; 57 | font-size: 5em; 58 | font-weight: 300; 59 | } 60 | .content .text h2 span { 61 | font-weight: 700; 62 | } 63 | .content .text p { 64 | color: #fff; 65 | font-weight: 400; 66 | font-size: 1.1em; 67 | line-height: 1.5em; 68 | margin: 20px 0; 69 | } 70 | .btn { 71 | position: relative; 72 | display: inline-block; 73 | padding: 20px 50px; 74 | background: #fff; 75 | color: #333; 76 | font-size: 1.1em; 77 | font-weight: 500; 78 | border-radius: 40px; 79 | text-decoration: none; 80 | transition: 0.25s; 81 | } 82 | .btn:hover { 83 | letter-spacing: 2px; 84 | } 85 | .slider { 86 | position: relative; 87 | } 88 | .slider .slides { 89 | display: none; 90 | } 91 | .slider .slides.active { 92 | display: block; 93 | } 94 | .slider .slides img { 95 | width: 100%; 96 | max-width: 600px; 97 | } 98 | .footer { 99 | position: absolute; 100 | bottom: 0; 101 | width: 100%; 102 | display: flex; 103 | padding: 30px 100px; 104 | justify-content: space-between; 105 | align-items: flex-end; 106 | } 107 | .sci { 108 | display: flex; 109 | } 110 | .sci li { 111 | list-style: none; 112 | } 113 | .sci li a { 114 | color: #fff; 115 | font-size: 2em; 116 | margin-right: 20px; 117 | display: inline-block; 118 | transition: 0.25s; 119 | } 120 | .sci li a:hover { 121 | transform: translateY(-5px); 122 | } 123 | .prevNext { 124 | position: relative; 125 | user-select: none; 126 | } 127 | .prevNext p { 128 | position: relative; 129 | color: #fff; 130 | text-align: end; 131 | margin-bottom: 15px; 132 | } 133 | .prevNext p::before { 134 | content: ""; 135 | position: absolute; 136 | top: 50%; 137 | left: -35px; 138 | transform: translateY(-50%); 139 | width: 50px; 140 | height: 2px; 141 | background: #fff; 142 | } 143 | .prevNext span { 144 | position: relative; 145 | display: inline-flex; 146 | justify-content: center; 147 | align-items: center; 148 | width: 50px; 149 | height: 50px; 150 | border: 2px solid #fff; 151 | cursor: pointer; 152 | font-size: 2em; 153 | color: #fff; 154 | } 155 | .prevNext span:nth-child(2) { 156 | margin-right: 20px; 157 | } 158 | 159 | /* now, make it responsive */ 160 | @media (max-width: 991px) { 161 | .main { 162 | padding: 40px; 163 | } 164 | header { 165 | padding: 20px 40px; 166 | } 167 | .logo { 168 | max-width: 70px; 169 | } 170 | .content { 171 | flex-direction: column; 172 | margin: 120px 0 40px; 173 | } 174 | .content .text { 175 | max-width: 100%; 176 | } 177 | .content .text h2 { 178 | font-size: 4em; 179 | } 180 | .slider { 181 | margin-top: 40px; 182 | } 183 | .slider .slides img { 184 | width: 100%; 185 | max-width: 420px; 186 | } 187 | .footer { 188 | position: relative; 189 | padding: 0; 190 | } 191 | 192 | .navigation { 193 | display: none; 194 | } 195 | .navigation.active { 196 | position: fixed; 197 | top: 0; 198 | left: 0; 199 | width: 100%; 200 | height: 100%; 201 | background: #d10a20; 202 | display: flex; 203 | justify-content: center; 204 | align-items: center; 205 | flex-direction: column; 206 | } 207 | .navigation li a { 208 | font-size: 1.5em; 209 | margin: 10px 0; 210 | display: inline-block; 211 | } 212 | .toggle { 213 | position: relative; 214 | width: 32px; 215 | height: 40px; 216 | display: flex; 217 | justify-content: center; 218 | align-items: center; 219 | z-index: 100000; 220 | cursor: pointer; 221 | } 222 | .toggle.active { 223 | position: fixed; 224 | right: 40px; 225 | } 226 | .toggle::before { 227 | content: ""; 228 | position: absolute; 229 | width: 100%; 230 | height: 2px; 231 | background: #fff; 232 | transform: translateY(-10px); 233 | box-shadow: 0 10px 0 #fff; 234 | transition: 0.25s; 235 | } 236 | .toggle.active::before { 237 | transform: translateY(0px) rotate(45deg); 238 | box-shadow: 0 0 0 #fff; 239 | } 240 | .toggle::after { 241 | content: ""; 242 | position: absolute; 243 | width: 100%; 244 | height: 2px; 245 | background: #fff; 246 | transform: translateY(10px); 247 | transition: 0.25s; 248 | } 249 | .toggle.active::after { 250 | transform: translateY(0px) rotate(-45deg); 251 | } 252 | } 253 | 254 | @media (max-width: 480px) { 255 | header, 256 | .main { 257 | padding: 20px; 258 | } 259 | .toggle.active { 260 | right: 20px; 261 | } 262 | .content .text h2 { 263 | font-size: 3em; 264 | } 265 | .btn { 266 | padding: 15px 30px; 267 | } 268 | .footer { 269 | flex-direction: column-reverse; 270 | align-items: center; 271 | } 272 | .sci { 273 | margin-top: 40px; 274 | } 275 | } 276 | --------------------------------------------------------------------------------