├── README.md ├── assets ├── banner.jpg ├── blog-1.jpg ├── blog-2.jpg ├── blog-3.jpg ├── customer-1.jpg ├── customer-2.jpg ├── customer-3.jpg ├── header.jpg ├── stats-1.jpg ├── stats-2.jpg └── subscribe.jpg ├── index.html ├── main.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Induz_20-09-23 2 | Discover the secrets to creating an impressive Industrial Responsive Landing Page with HTML, CSS, and JavaScript! 3 | -------------------------------------------------------------------------------- /assets/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/banner.jpg -------------------------------------------------------------------------------- /assets/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/blog-1.jpg -------------------------------------------------------------------------------- /assets/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/blog-2.jpg -------------------------------------------------------------------------------- /assets/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/blog-3.jpg -------------------------------------------------------------------------------- /assets/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/customer-1.jpg -------------------------------------------------------------------------------- /assets/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/customer-2.jpg -------------------------------------------------------------------------------- /assets/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/customer-3.jpg -------------------------------------------------------------------------------- /assets/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/header.jpg -------------------------------------------------------------------------------- /assets/stats-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/stats-1.jpg -------------------------------------------------------------------------------- /assets/stats-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/stats-2.jpg -------------------------------------------------------------------------------- /assets/subscribe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Induz_20-09-23/41051dd61af003ab16e8e62c267402b04a97c27d/assets/subscribe.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | Web Desig Mastery | Induz 16 | 17 | 18 |
19 | 32 |
33 |

The Reliable Industry Takes Many Forms.

34 | 38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 |

About Us

46 |

Company History

47 |

48 | We are your trusted partner in the world of industrial solutions. 49 | With a legacy spanning 20+ years, we have established ourselves as 50 | a leading force in the industry, committed to delivering 51 | excellence in every facet of our operations. Your success is our 52 | success. 53 |

54 |
55 |

56 | We conduct ourselves with the utmost integrity in all our 57 | dealings, ensuring that our clients receive the highest quality 58 | products and services. 59 |

60 |
61 |
62 |
63 | 64 |

The reliable industry takes many forms

65 |
66 |
67 | 68 |

Delivering beyond possible solutions

69 |
70 |
71 | 72 |

Success through human resources

73 |
74 |
75 |
76 |
77 |
78 | 79 |
80 |
81 |
82 |

Company

83 |

Our Stats

84 |

85 | With a team of dedicated experts and professionals, we bring a 86 | wealth of experience and knowledge to every project. Our deep 87 | industry insights and hands-on experience enable us to tackle even 88 | the most complex industrial challenges, providing you with tailored 89 | solutions that drive results. 90 |

91 |
92 |
93 | 94 |

1800

95 |

Worldwide Branches

96 |
97 |
98 | 99 |

1920

100 |

Qualified Engineers

101 |
102 |
103 | 104 |

1612

105 |

Work Facilities

106 |
107 |
108 | 109 |

1980

110 |

Completed Projects

111 |
112 |
113 |
114 |
115 | stats 116 | stats 117 |
118 |
119 |
120 | 121 | 147 | 148 |
149 |
150 |

Our Posts

151 |

Blog Posts

152 |
153 |
154 | blog 155 |
156 | By David 157 | Jun 28, 2022 158 | 5 159 |
160 |

Sustainability in Manufacturing

161 |

162 | Discover how sustainable practices are becoming a cornerstone of 163 | modern manufacturing. 164 |

165 |
166 |
167 | blog 168 |
169 | By Sarah 170 | Nov 22, 2022 171 | 18 172 |
173 |

Navigating Industrial Safety

174 |

175 | Stay updated on the latest safety regulations, guidelines, and 176 | industry-specific best practices. 177 |

178 |
179 |
180 | blog 181 |
182 | By Michael 183 | Mar 15, 2023 184 | 20 185 |
186 |

Innovations in Material Handling

187 |

188 | Discover the latest innovations in material handling, from robotic 189 | automation to intelligent logistics solutions. 190 |

191 |
192 |
193 |
194 |
195 | 196 |
197 |
198 |

Newsletter

199 |

200 | Subscribe To Get The Latest News & Updates 201 |

202 |
203 | 204 | 205 | 206 |
207 |

208 | By sumbitting this form, you agree to the 209 | privacy policy and terms of use. 210 |

211 |
212 |
213 | 214 |
215 |
216 |

Testimonials

217 |

What Our Customers Say

218 |

219 | Discover what our valued customers have to say about their experiences 220 | partnering with Induz. At Induz, we take pride in delivering 221 | exceptional industrial solutions and services, and nothing speaks 222 | louder than the words of those who have entrusted us with their 223 | projects. 224 |

225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |
233 | 234 |

235 | Working with Induz has been a game-changer for our 236 | manufacturing operations. Their precision-engineered 237 | machinery and expert guidance have not only improved 238 | efficiency but also reduced downtime significantly. It's 239 | more than a partnership; it's a strategic advantage. 240 |

241 |
242 | customer 243 |
244 |

John Smith

245 |
Industrialist
246 |
247 |
248 |
249 |
250 |
251 |
252 | 253 |

254 | In the construction industry, deadlines and quality are 255 | non-negotiable. Induz consistently delivered on both fronts. 256 | Their dedication to project management and their skilled 257 | workforce made our project a seamless success. We're 258 | grateful for their expertise. 259 |

260 |
261 | customer 262 |
263 |

Laura Rodriguez

264 |
CEO & Founder
265 |
266 |
267 |
268 |
269 |
270 |
271 | 272 |

273 | The logistics solutions provided by Induz have streamlined 274 | our supply chain like never before. Their innovative 275 | approach and attention to detail saved us time and 276 | resources, ultimately boosting our bottom line. They're more 277 | than a vendor; they're a partner in our success. 278 |

279 |
280 | customer 281 |
282 |

Mark Thompson

283 |
Architect
284 |
285 |
286 |
287 |
288 |
289 | 290 |
291 |
292 |
293 |
294 |
295 | 296 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.getElementById("menu-btn"); 2 | const navLinks = document.getElementById("nav-links"); 3 | const menuBtnIcon = menuBtn.querySelector("i"); 4 | 5 | menuBtn.addEventListener("click", (e) => { 6 | navLinks.classList.toggle("open"); 7 | 8 | const isOpen = navLinks.classList.contains("open"); 9 | menuBtnIcon.setAttribute("class", isOpen ? "ri-close-line" : "ri-menu-line"); 10 | }); 11 | 12 | navLinks.addEventListener("click", (e) => { 13 | navLinks.classList.remove("open"); 14 | menuBtnIcon.setAttribute("class", "ri-menu-line"); 15 | }); 16 | 17 | const scrollRevealOption = { 18 | distance: "50px", 19 | origin: "bottom", 20 | duration: 1000, 21 | }; 22 | 23 | // header container 24 | ScrollReveal().reveal(".header__container h1", { 25 | ...scrollRevealOption, 26 | }); 27 | 28 | ScrollReveal().reveal(".header__container .btn", { 29 | ...scrollRevealOption, 30 | delay: 500, 31 | }); 32 | 33 | // about container 34 | ScrollReveal().reveal(".about__item", { 35 | ...scrollRevealOption, 36 | interval: 500, 37 | }); 38 | 39 | // stats container 40 | ScrollReveal().reveal(".stats__image img", { 41 | ...scrollRevealOption, 42 | origin: "right", 43 | interval: 500, 44 | }); 45 | 46 | ScrollReveal().reveal(".stats__card", { 47 | interval: 500, 48 | duration: 500, 49 | delay: 1000, 50 | }); 51 | 52 | // blog container 53 | ScrollReveal().reveal(".blog__card", { 54 | ...scrollRevealOption, 55 | interval: 500, 56 | }); 57 | 58 | const swiper = new Swiper(".swiper", { 59 | loop: true, 60 | pagination: { 61 | el: ".swiper-pagination", 62 | }, 63 | }); 64 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 2 | 3 | :root { 4 | --primary-color: #ff581f; 5 | --secondary-color: #111111; 6 | --secondary-color-light: #232220; 7 | --text-light: #a3a3a3; 8 | --white: #ffffff; 9 | --black: #000000; 10 | --max-width: 1200px; 11 | } 12 | 13 | * { 14 | padding: 0; 15 | margin: 0; 16 | box-sizing: border-box; 17 | } 18 | 19 | .section__container { 20 | max-width: var(--max-width); 21 | margin: auto; 22 | padding: 5rem 1rem; 23 | } 24 | 25 | .section__header { 26 | font-size: 2.5rem; 27 | font-weight: 600; 28 | } 29 | 30 | .section__subheader { 31 | position: relative; 32 | isolation: isolate; 33 | margin-bottom: 1rem; 34 | padding-left: 20px; 35 | font-size: 1.2rem; 36 | font-weight: 500; 37 | } 38 | 39 | .section__subheader::after { 40 | position: absolute; 41 | content: ""; 42 | left: 0; 43 | top: 50%; 44 | transform: translateY(-50%); 45 | height: 45px; 46 | aspect-ratio: 1; 47 | background-color: var(--primary-color); 48 | z-index: -1; 49 | } 50 | 51 | .btn { 52 | display: flex; 53 | align-items: center; 54 | gap: 10px; 55 | padding: 0.75rem 1.5rem; 56 | outline: none; 57 | font-size: 1rem; 58 | color: var(--white); 59 | border-radius: 5px; 60 | cursor: pointer; 61 | } 62 | 63 | .btn__secondary { 64 | background-color: transparent; 65 | border: 1px solid var(--white); 66 | } 67 | 68 | .btn__primary { 69 | background-color: var(--primary-color); 70 | border: 1px solid var(--primary-color); 71 | } 72 | 73 | .btn span { 74 | font-size: 1.2rem; 75 | transition: 0.3s; 76 | } 77 | 78 | .btn:hover span { 79 | transform: translateX(5px); 80 | } 81 | 82 | img { 83 | display: flex; 84 | width: 100%; 85 | } 86 | 87 | a { 88 | text-decoration: none; 89 | } 90 | 91 | html, 92 | body { 93 | scroll-behavior: smooth; 94 | } 95 | 96 | body { 97 | font-family: "Poppins", sans-serif; 98 | color: var(--white); 99 | } 100 | 101 | header { 102 | background-image: linear-gradient( 103 | to right, 104 | rgba(0, 0, 0, 0.5), 105 | rgba(0, 0, 0, 0.8) 106 | ), 107 | url("assets/header.jpg"); 108 | background-position: center center; 109 | background-repeat: no-repeat; 110 | background-size: cover; 111 | } 112 | 113 | nav { 114 | max-width: var(--max-width); 115 | margin: auto; 116 | padding: 2rem 1rem; 117 | display: flex; 118 | align-items: center; 119 | justify-content: space-between; 120 | } 121 | 122 | .nav__logo a { 123 | font-size: 2rem; 124 | font-weight: 700; 125 | color: var(--white); 126 | } 127 | 128 | .nav__links { 129 | list-style: none; 130 | display: flex; 131 | align-items: center; 132 | gap: 2rem; 133 | } 134 | 135 | .link a { 136 | padding: 5px; 137 | font-size: 1rem; 138 | font-weight: 500; 139 | color: var(--white); 140 | transition: 0.3s; 141 | } 142 | 143 | .link a:hover { 144 | color: var(--primary-color); 145 | } 146 | 147 | .nav__menu__btn { 148 | display: none; 149 | font-size: 1.5rem; 150 | } 151 | 152 | .header__container { 153 | padding-block: 5rem 12rem; 154 | } 155 | 156 | .header__container h1 { 157 | max-width: 900px; 158 | margin-inline: auto; 159 | margin-bottom: 2rem; 160 | font-size: 4rem; 161 | font-weight: 700; 162 | text-align: center; 163 | } 164 | 165 | .header__container .btn { 166 | margin: auto; 167 | } 168 | 169 | .about { 170 | background-color: var(--secondary-color); 171 | } 172 | 173 | .about__container { 174 | padding-block: 0; 175 | } 176 | 177 | .about__grid { 178 | padding: 2rem; 179 | display: grid; 180 | grid-template-columns: 1.5fr 1fr; 181 | gap: 4rem; 182 | align-items: center; 183 | background-color: var(--secondary-color-light); 184 | transform: translateY(-5rem); 185 | border-radius: 10px; 186 | } 187 | 188 | .about__content .section__header { 189 | margin-bottom: 1rem; 190 | } 191 | 192 | .about__content .para { 193 | color: var(--text-light); 194 | } 195 | 196 | .about__list { 197 | display: grid; 198 | gap: 2rem; 199 | } 200 | 201 | .about__item { 202 | display: flex; 203 | align-items: center; 204 | gap: 2rem; 205 | } 206 | 207 | .about__item span { 208 | padding: 13px 20px; 209 | font-size: 1.75rem; 210 | color: var(--primary-color); 211 | background-color: var(--secondary-color); 212 | border-radius: 5px; 213 | } 214 | 215 | .about__item h4 { 216 | font-size: 1.2rem; 217 | font-weight: 600; 218 | } 219 | 220 | .stats { 221 | background-color: var(--black); 222 | } 223 | 224 | .stats__container { 225 | display: grid; 226 | grid-template-columns: repeat(2, 1fr); 227 | gap: 2rem; 228 | } 229 | 230 | .stats__content .section__header { 231 | margin-bottom: 1rem; 232 | } 233 | 234 | .stats__content .para { 235 | margin-bottom: 2rem; 236 | color: var(--text-light); 237 | } 238 | 239 | .stats__grid { 240 | display: grid; 241 | grid-template-columns: repeat(2, 1fr); 242 | gap: 2rem; 243 | } 244 | 245 | .stats__card span { 246 | font-size: 1.75rem; 247 | color: var(--primary-color); 248 | } 249 | 250 | .stats__card h4 { 251 | font-size: 2rem; 252 | font-weight: 700; 253 | } 254 | 255 | .stats__card p { 256 | font-weight: 500; 257 | } 258 | 259 | .stats__image { 260 | display: grid; 261 | gap: 2rem; 262 | } 263 | 264 | .stats__image img { 265 | max-width: 450px; 266 | margin: auto; 267 | border-radius: 5px; 268 | } 269 | 270 | .banner { 271 | background-image: linear-gradient( 272 | to right, 273 | rgba(0, 0, 0, 0.6), 274 | rgba(0, 0, 0, 0.6) 275 | ), 276 | url("assets/banner.jpg"); 277 | background-position: center center; 278 | background-size: cover; 279 | background-repeat: no-repeat; 280 | } 281 | 282 | .banner__content { 283 | max-width: 800px; 284 | } 285 | 286 | .banner__content .section__header { 287 | margin-bottom: 1rem; 288 | } 289 | 290 | .banner__content .para { 291 | max-width: 600px; 292 | margin-bottom: 2rem; 293 | } 294 | 295 | .banner__btns { 296 | display: flex; 297 | align-items: center; 298 | gap: 2rem; 299 | } 300 | 301 | .blog { 302 | background-color: var(--secondary-color); 303 | } 304 | 305 | .blog__grid { 306 | margin-top: 4rem; 307 | display: grid; 308 | grid-template-columns: repeat(3, 1fr); 309 | gap: 2rem; 310 | } 311 | 312 | .blog__card img { 313 | margin-bottom: 1rem; 314 | border-radius: 5px; 315 | } 316 | 317 | .blog__card > div { 318 | margin-bottom: 1rem; 319 | display: flex; 320 | align-items: center; 321 | gap: 1rem; 322 | } 323 | 324 | .blog__card div span { 325 | font-size: 0.9rem; 326 | color: var(--text-light); 327 | } 328 | 329 | .blog__card div span i { 330 | margin-right: 5px; 331 | font-size: 1rem; 332 | color: var(--primary-color); 333 | } 334 | 335 | .blog__card h4 { 336 | margin-bottom: 0.5rem; 337 | font-size: 1.2rem; 338 | font-weight: 600; 339 | } 340 | 341 | .blog__card p { 342 | color: var(--text-light); 343 | } 344 | 345 | .subscribe { 346 | background-image: linear-gradient( 347 | to right, 348 | rgba(0, 0, 0, 0.6), 349 | rgba(0, 0, 0, 0.6) 350 | ), 351 | url("assets/subscribe.jpg"); 352 | background-position: center center; 353 | background-repeat: no-repeat; 354 | background-size: cover; 355 | } 356 | 357 | .subscribe__container { 358 | max-width: 700px; 359 | text-align: center; 360 | } 361 | 362 | .subscribe__container .section__subheader { 363 | max-width: fit-content; 364 | margin-inline: auto; 365 | } 366 | 367 | .subscribe__container form { 368 | margin-block: 2rem 1rem; 369 | display: flex; 370 | align-items: center; 371 | gap: 1rem; 372 | } 373 | 374 | .subscribe__container input { 375 | flex: 1; 376 | width: 100%; 377 | padding: 0.75rem 1.5rem; 378 | font-size: 1rem; 379 | outline: none; 380 | border: 1px solid var(--white); 381 | border-radius: 5px; 382 | } 383 | 384 | .subscribe__container .btn { 385 | flex: 1; 386 | justify-content: center; 387 | } 388 | 389 | .subscribe__container .para a { 390 | color: var(--primary-color); 391 | } 392 | 393 | .customer { 394 | background-color: var(--secondary-color-light); 395 | } 396 | 397 | .customer__container .para { 398 | margin-block: 1rem 4rem; 399 | color: var(--text-light); 400 | } 401 | 402 | .swiper { 403 | width: 100%; 404 | padding-bottom: 4rem; 405 | } 406 | 407 | .customer__review .swiper-pagination-bullet-active { 408 | background-color: var(--primary-color); 409 | } 410 | 411 | .customer__review__card { 412 | position: relative; 413 | isolation: isolate; 414 | max-width: 600px; 415 | margin-inline: auto; 416 | text-align: center; 417 | } 418 | 419 | .customer__review__card span { 420 | position: absolute; 421 | top: 0; 422 | left: 0; 423 | font-size: 6rem; 424 | line-height: 4rem; 425 | color: var(--primary-color); 426 | opacity: 0.1; 427 | } 428 | 429 | .customer__review__card p { 430 | margin-bottom: 2rem; 431 | color: var(--text-light); 432 | } 433 | 434 | .customer__review__details { 435 | display: flex; 436 | align-items: center; 437 | justify-content: center; 438 | gap: 1rem; 439 | } 440 | 441 | .customer__review__details img { 442 | max-width: 70px; 443 | border-radius: 100%; 444 | } 445 | 446 | .customer__review__details h4 { 447 | font-size: 1.2rem; 448 | font-weight: 500; 449 | } 450 | 451 | .customer__review__details h5 { 452 | font-size: 0.9rem; 453 | font-weight: 400; 454 | color: var(--text-light); 455 | } 456 | 457 | .footer { 458 | background-color: var(--black); 459 | } 460 | 461 | .footer__container { 462 | display: grid; 463 | grid-template-columns: 1.5fr repeat(3, 1fr); 464 | gap: 2rem; 465 | } 466 | 467 | .footer__col h5 a { 468 | display: inline-block; 469 | margin-bottom: 1rem; 470 | font-size: 1.5rem; 471 | font-weight: 600; 472 | color: var(--white); 473 | } 474 | 475 | .footer__col p { 476 | margin-bottom: 2rem; 477 | color: var(--text-light); 478 | } 479 | 480 | .footer__socials { 481 | display: flex; 482 | align-items: center; 483 | gap: 1rem; 484 | flex-wrap: wrap; 485 | } 486 | 487 | .footer__socials a { 488 | padding: 5px 10px; 489 | font-size: 1.25rem; 490 | color: var(--primary-color); 491 | background-color: var(--secondary-color-light); 492 | border-radius: 100%; 493 | cursor: pointer; 494 | transition: 0.3s; 495 | } 496 | 497 | .footer__socials a:hover { 498 | color: var(--white); 499 | background-color: var(--primary-color); 500 | } 501 | 502 | .footer__col h4 { 503 | margin-bottom: 1rem; 504 | font-size: 1.2rem; 505 | font-weight: 600; 506 | } 507 | 508 | .footer__links a { 509 | margin-bottom: 1rem; 510 | display: flex; 511 | color: var(--text-light); 512 | transition: 0.3s; 513 | } 514 | 515 | .footer__links a:hover { 516 | color: var(--primary-color); 517 | } 518 | 519 | .footer__bar { 520 | padding: 1rem; 521 | font-size: 0.8rem; 522 | text-align: center; 523 | color: var(--text-light); 524 | } 525 | 526 | @media (width < 900px) { 527 | .nav__links { 528 | gap: 1.5rem; 529 | } 530 | 531 | .about__grid { 532 | grid-template-columns: repeat(1, 1fr); 533 | } 534 | 535 | .stats__container { 536 | grid-template-columns: repeat(1, 1fr); 537 | } 538 | 539 | .stats__image { 540 | grid-area: 1/1/2/2; 541 | grid-template-columns: repeat(2, 1fr); 542 | gap: 1rem; 543 | } 544 | 545 | .blog__grid { 546 | grid-template-columns: repeat(2, 1fr); 547 | gap: 2rem 1rem; 548 | } 549 | 550 | .footer__container { 551 | grid-template-columns: 2fr 1fr; 552 | } 553 | } 554 | 555 | @media (width < 600px) { 556 | nav { 557 | position: fixed; 558 | width: 100%; 559 | padding: 1rem; 560 | background-color: var(--black); 561 | z-index: 99; 562 | } 563 | 564 | .nav__links { 565 | position: absolute; 566 | left: 0; 567 | top: 68px; 568 | padding: 2rem; 569 | width: 100%; 570 | flex-direction: column; 571 | transform: scaleY(0); 572 | transform-origin: top; 573 | transition: 0.5s; 574 | background-color: rgba(0, 0, 0, 0.9); 575 | } 576 | 577 | .nav__links .link a { 578 | opacity: 0; 579 | } 580 | 581 | .nav__links.open .link a { 582 | opacity: 1; 583 | } 584 | 585 | .nav__links.open { 586 | transform: scaleY(1); 587 | } 588 | 589 | .nav__menu__btn { 590 | display: block; 591 | } 592 | 593 | .header__container h1 { 594 | margin-top: 4rem; 595 | font-size: 3.5rem; 596 | } 597 | 598 | .stats__image { 599 | grid-template-columns: repeat(1, 1fr); 600 | } 601 | 602 | .blog__grid { 603 | grid-template-columns: repeat(1, 1fr); 604 | } 605 | 606 | .subscribe__container form { 607 | flex-direction: column; 608 | } 609 | 610 | .subscribe__container .btn { 611 | width: 100%; 612 | } 613 | } 614 | --------------------------------------------------------------------------------