├── assets ├── blog.jpg ├── client-1.jpg ├── client-2.jpg ├── client-3.jpg ├── header.jpg ├── image-1.jpg ├── image-2.jpg ├── image-3.jpg ├── image-4.jpg ├── image-5.jpg ├── image-6.jpg ├── image-7.jpg ├── image-8.jpg ├── service.jpg ├── logo-dark.png ├── logo-white.png ├── portfolio-1.jpg ├── portfolio-2.jpg └── portfolio-3.jpg ├── README.md ├── main.js ├── index.html └── styles.css /assets/blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/blog.jpg -------------------------------------------------------------------------------- /assets/client-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/client-1.jpg -------------------------------------------------------------------------------- /assets/client-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/client-2.jpg -------------------------------------------------------------------------------- /assets/client-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/client-3.jpg -------------------------------------------------------------------------------- /assets/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/header.jpg -------------------------------------------------------------------------------- /assets/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-1.jpg -------------------------------------------------------------------------------- /assets/image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-2.jpg -------------------------------------------------------------------------------- /assets/image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-3.jpg -------------------------------------------------------------------------------- /assets/image-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-4.jpg -------------------------------------------------------------------------------- /assets/image-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-5.jpg -------------------------------------------------------------------------------- /assets/image-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-6.jpg -------------------------------------------------------------------------------- /assets/image-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-7.jpg -------------------------------------------------------------------------------- /assets/image-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/image-8.jpg -------------------------------------------------------------------------------- /assets/service.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/service.jpg -------------------------------------------------------------------------------- /assets/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/logo-dark.png -------------------------------------------------------------------------------- /assets/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/logo-white.png -------------------------------------------------------------------------------- /assets/portfolio-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/portfolio-1.jpg -------------------------------------------------------------------------------- /assets/portfolio-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/portfolio-2.jpg -------------------------------------------------------------------------------- /assets/portfolio-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Capturer_23-03-24/HEAD/assets/portfolio-3.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Capturer_23-03-24 2 | Elevate your photography portfolio with our comprehensive tutorial on building a stunning website using HTML, CSS, and JavaScript! 3 | -------------------------------------------------------------------------------- /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 | ScrollReveal().reveal(".about__container .section__header", { 24 | ...scrollRevealOption, 25 | }); 26 | ScrollReveal().reveal(".about__container .section__description", { 27 | ...scrollRevealOption, 28 | delay: 500, 29 | interval: 500, 30 | }); 31 | ScrollReveal().reveal(".about__container img", { 32 | ...scrollRevealOption, 33 | delay: 1500, 34 | }); 35 | 36 | ScrollReveal().reveal(".service__container .section__header", { 37 | ...scrollRevealOption, 38 | }); 39 | ScrollReveal().reveal(".service__container .section__description", { 40 | ...scrollRevealOption, 41 | delay: 500, 42 | }); 43 | ScrollReveal().reveal(".service__card", { 44 | duration: 1000, 45 | delay: 1000, 46 | interval: 500, 47 | }); 48 | 49 | const swiper = new Swiper(".swiper", { 50 | loop: true, 51 | pagination: { 52 | el: ".swiper-pagination", 53 | }, 54 | }); 55 | 56 | ScrollReveal().reveal(".blog__content .section__header", { 57 | ...scrollRevealOption, 58 | }); 59 | ScrollReveal().reveal(".blog__content h4", { 60 | ...scrollRevealOption, 61 | delay: 500, 62 | }); 63 | ScrollReveal().reveal(".blog__content p", { 64 | ...scrollRevealOption, 65 | delay: 1000, 66 | }); 67 | ScrollReveal().reveal(".blog__content .blog__btn", { 68 | ...scrollRevealOption, 69 | delay: 1500, 70 | }); 71 | 72 | const instagram = document.querySelector(".instagram__flex"); 73 | 74 | Array.from(instagram.children).forEach((item) => { 75 | const duplicateNode = item.cloneNode(true); 76 | duplicateNode.setAttribute("aria-hidden", true); 77 | instagram.appendChild(duplicateNode); 78 | }); 79 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | Web Design Mastery | Capturer 16 | 17 | 18 |
19 | 44 |
45 | 46 |
47 |

WE CAPTURE THE MOMENTS

48 |

49 | At Capturer, we specialize in freezing those fleeting moments in time 50 | that hold immense significance for you. With our passion for photography 51 | and keen eye for detail, we transform ordinary moments into 52 | extraordinary memories. 53 |

54 |

55 | Whether it's a milestone event, a candid portrait, or the breathtaking 56 | beauty of nature, we strive to encapsulate the essence of every moment, 57 | ensuring that your cherished memories last a lifetime. Trust us to 58 | capture the magic of your life's journey, one frame at a time. 59 |

60 | logo 61 |
62 | 63 |
64 |

~ PORTFOLIO ~

65 |
66 |
67 | portfolio 68 |
69 | 70 |
71 |
72 |
73 | portfolio 74 |
75 | 76 |
77 |
78 |
79 | portfolio 80 |
81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |

~ SERVICES ~

90 |

91 | At Capturer, we offer a range of professional photography services 92 | tailored to meet your unique needs. With a commitment to excellence 93 | and creativity, we strive to exceed your expectations, delivering 94 | captivating visuals that tell your story with authenticity and 95 | passion. 96 |

97 |
98 |
99 |

Portrait Sessions

100 |

101 | Our portrait sessions are designed to showcase your personality 102 | and style in stunning imagery. 103 |

104 |
105 |
106 |

Maternity Sessions

107 |

108 | Embrace the beauty and miracle of new life with our maternity and 109 | newborn photography sessions. 110 |

111 |
112 |
113 |

Family Sessions

114 |

115 | Cherish the bond of family with our custom-designed playful candid 116 | moments and portrait sessions. 117 |

118 |
119 |
120 |
121 |
122 | 123 |
124 |

~ TESTIMONIALS ~

125 | 126 |
127 | 128 |
129 | 130 |
131 |
132 | client 133 |

134 | Capturer exceeded all our expectations! Their attention to 135 | detail and ability to capture the essence of our special day was 136 | truly remarkable. Every time we look at our wedding photos, 137 | we're transported back to those magical moments. Thank you for 138 | preserving our memories so beautifully! 139 |

140 |

Sarah and Michael

141 |
142 |
143 |
144 |
145 | client 146 |

147 | We couldn't be happier with our family portrait session with 148 | Capturer. They made us feel relaxed and comfortable throughout 149 | the entire shoot, resulting in natural and candid photos that 150 | perfectly reflect our family dynamic. These images will be 151 | cherished for years to come! 152 |

153 |

The Johnson Family

154 |
155 |
156 |
157 |
158 | client 159 |

160 | Capturer's maternity and newborn sessions captured the most 161 | precious moments of our lives with such tenderness and care. 162 | From the anticipation of pregnancy to the joy of welcoming our 163 | little one, every photo tells a story that we'll cherish 164 | forever. Thank you for creating beautiful memories for our 165 | family! 166 |

167 |

Emily and David

168 |
169 |
170 |
171 | 172 |
173 |
174 |
175 | 176 |
177 |

~ GALLERY ~

178 |
179 | gallery 180 | gallery 181 | gallery 182 | gallery 183 | gallery 184 | gallery 185 | gallery 186 | gallery 187 |
188 |
189 | 190 |
191 |
192 | 193 |
194 |
195 |
196 |

~ LATEST BLOG ~

197 |

Capturing Emotion in Every Frame

198 |

199 | This blog post delves into the importance of storytelling in 200 | photography and how Capturer approaches capturing emotion and 201 | narrative in their work. Readers will discover the techniques and 202 | strategies used by professional photographers to evoke emotion, 203 | convey meaning, and create compelling visual narratives that 204 | resonate with viewers on a deep level. 205 |

206 |
207 | 208 |
209 |
210 |
211 |
212 | 213 |
214 |

~ INSTAGRAM ~

215 |
216 | instagram 217 | instagram 218 | instagram 219 | instagram 220 | instagram 221 | instagram 222 | instagram 223 | instagram 224 |
225 |
226 | 227 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); 2 | 3 | :root { 4 | --text-dark: #171717; 5 | --text-light: #525252; 6 | --extra-light: #a3a3a3; 7 | --white: #ffffff; 8 | --max-width: 1200px; 9 | --header-font: "Merriweather", serif; 10 | } 11 | 12 | * { 13 | padding: 0; 14 | margin: 0; 15 | box-sizing: border-box; 16 | } 17 | 18 | .section__container { 19 | max-width: var(--max-width); 20 | margin: auto; 21 | padding: 5rem 1rem; 22 | } 23 | 24 | .section__header { 25 | margin-bottom: 1rem; 26 | font-size: 2rem; 27 | font-weight: 400; 28 | font-family: var(--header-font); 29 | color: var(--text-dark); 30 | text-align: center; 31 | } 32 | 33 | .section__description { 34 | color: var(--text-light); 35 | line-height: 1.75rem; 36 | text-align: center; 37 | } 38 | 39 | .btn { 40 | padding: 0.75rem 1.5rem; 41 | outline: none; 42 | border: none; 43 | font-size: 1rem; 44 | font-weight: 500; 45 | color: var(--white); 46 | background-color: var(--text-dark); 47 | border-radius: 5px; 48 | transition: 0.3s; 49 | cursor: pointer; 50 | } 51 | 52 | .btn:hover { 53 | background-color: var(--text-light); 54 | } 55 | 56 | img { 57 | display: flex; 58 | width: 100%; 59 | } 60 | 61 | a { 62 | text-decoration: none; 63 | transition: 0.3s; 64 | } 65 | 66 | html, 67 | body { 68 | scroll-behavior: smooth; 69 | } 70 | 71 | body { 72 | font-family: "Montserrat", sans-serif; 73 | } 74 | 75 | .header { 76 | min-height: 600px; 77 | background-image: radial-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9)), 78 | url("assets/header.jpg"); 79 | background-position: center center; 80 | background-size: cover; 81 | background-repeat: no-repeat; 82 | } 83 | 84 | nav { 85 | position: fixed; 86 | isolation: isolate; 87 | top: 0; 88 | width: 100%; 89 | max-width: var(--max-width); 90 | margin: auto; 91 | z-index: 9; 92 | } 93 | 94 | .nav__header { 95 | padding: 1rem; 96 | display: flex; 97 | align-items: center; 98 | justify-content: space-between; 99 | gap: 1rem; 100 | background-color: var(--text-dark); 101 | } 102 | 103 | .nav__logo img { 104 | max-width: 70px; 105 | } 106 | 107 | .nav__menu__btn { 108 | font-size: 1.5rem; 109 | color: var(--white); 110 | cursor: pointer; 111 | } 112 | 113 | .nav__links { 114 | list-style: none; 115 | position: absolute; 116 | width: 100%; 117 | padding: 2rem; 118 | display: flex; 119 | align-items: center; 120 | flex-direction: column; 121 | gap: 2rem; 122 | background-color: var(--text-dark); 123 | transform: translateY(-100%); 124 | transition: 0.5s; 125 | z-index: -1; 126 | } 127 | 128 | .nav__links.open { 129 | transform: translateY(0); 130 | } 131 | 132 | .nav__links .nav__logo { 133 | display: none; 134 | } 135 | 136 | .nav__links a { 137 | padding-bottom: 5px; 138 | font-weight: 500; 139 | color: var(--white); 140 | border-bottom: 2px solid transparent; 141 | } 142 | 143 | .nav__links a:hover { 144 | border-color: var(--white); 145 | } 146 | 147 | .about__container .section__description { 148 | max-width: 900px; 149 | margin-inline: auto; 150 | margin-bottom: 2rem; 151 | } 152 | 153 | .about__container img { 154 | max-width: 170px; 155 | margin-inline: auto; 156 | } 157 | 158 | .portfolio__grid { 159 | margin-top: 2rem; 160 | display: grid; 161 | gap: 1rem; 162 | } 163 | 164 | .portfolio__card { 165 | position: relative; 166 | isolation: isolate; 167 | } 168 | 169 | .portfolio__card::after { 170 | position: absolute; 171 | bottom: 2rem; 172 | left: 50%; 173 | transform: translateX(-50%); 174 | font-size: 2rem; 175 | font-family: var(--header-font); 176 | color: var(--white); 177 | } 178 | 179 | .portfolio__card:nth-child(1)::after { 180 | content: "Portraits"; 181 | } 182 | 183 | .portfolio__card:nth-child(2)::after { 184 | content: "Weddings"; 185 | } 186 | 187 | .portfolio__card:nth-child(3)::after { 188 | content: "Fashions"; 189 | } 190 | 191 | .portfolio__content { 192 | position: absolute; 193 | top: 0; 194 | left: 0; 195 | height: 100%; 196 | width: 100%; 197 | display: flex; 198 | align-items: center; 199 | justify-content: center; 200 | background-color: rgba(0, 0, 0, 0.5); 201 | opacity: 0; 202 | transition: 0.3s; 203 | z-index: 1; 204 | } 205 | 206 | .portfolio__card:hover .portfolio__content { 207 | opacity: 1; 208 | } 209 | 210 | .service { 211 | background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 212 | url("assets/service.jpg"); 213 | background-position: center center; 214 | background-size: cover; 215 | background-repeat: no-repeat; 216 | } 217 | 218 | .service__container .section__header { 219 | color: var(--white); 220 | } 221 | 222 | .service__container .section__description { 223 | max-width: 600px; 224 | margin-inline: auto; 225 | color: var(--extra-light); 226 | } 227 | 228 | .service__grid { 229 | margin-top: 4rem; 230 | display: grid; 231 | gap: 2rem; 232 | } 233 | 234 | .service__card { 235 | text-align: center; 236 | } 237 | 238 | .service__card h4 { 239 | position: relative; 240 | isolation: isolate; 241 | margin-bottom: 1rem; 242 | padding-bottom: 1rem; 243 | font-size: 1.75rem; 244 | font-weight: 400; 245 | font-family: var(--header-font); 246 | color: var(--white); 247 | } 248 | 249 | .service__card h4::after { 250 | position: absolute; 251 | content: "~"; 252 | bottom: 0; 253 | left: 50%; 254 | transform: translateX(-50%); 255 | font-size: 2rem; 256 | line-height: 0; 257 | } 258 | 259 | .service__card p { 260 | color: var(--extra-light); 261 | line-height: 1.75rem; 262 | } 263 | 264 | .client__container { 265 | padding-bottom: 2rem; 266 | } 267 | 268 | .swiper { 269 | margin-top: 2rem; 270 | padding-bottom: 3rem; 271 | width: 100%; 272 | } 273 | 274 | .client__card { 275 | max-width: 900px; 276 | margin-inline: auto; 277 | text-align: center; 278 | } 279 | 280 | .client__card img { 281 | max-width: 120px; 282 | margin-inline: auto; 283 | margin-bottom: 2rem; 284 | border-radius: 100%; 285 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); 286 | } 287 | 288 | .client__card p { 289 | margin-bottom: 1rem; 290 | color: var(--text-light); 291 | line-height: 1.75rem; 292 | } 293 | 294 | .client__card h4 { 295 | font-size: 1.2rem; 296 | font-weight: 600; 297 | color: var(--text-dark); 298 | } 299 | 300 | .swiper-pagination-bullet-active { 301 | background-color: var(--text-dark); 302 | } 303 | 304 | .gallery__grid { 305 | margin-block: 2rem; 306 | display: grid; 307 | gap: 1rem; 308 | grid-template-columns: repeat(2, 1fr); 309 | } 310 | 311 | .gallery__grid img { 312 | transition: 0.3s; 313 | } 314 | 315 | .gallery__grid:hover img:not(:hover) { 316 | opacity: 0.5; 317 | } 318 | 319 | .gallery__btn { 320 | text-align: center; 321 | } 322 | 323 | .blog { 324 | background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 325 | url("assets/blog.jpg"); 326 | background-size: cover; 327 | background-position: center center; 328 | background-repeat: no-repeat; 329 | } 330 | 331 | .blog__container { 332 | padding-block: 8rem; 333 | display: grid; 334 | } 335 | 336 | .blog__content { 337 | text-align: center; 338 | } 339 | 340 | .blog__content .section__header { 341 | margin-bottom: 2rem; 342 | color: var(--white); 343 | } 344 | 345 | .blog__content h4 { 346 | margin-bottom: 1rem; 347 | font-size: 1.25rem; 348 | font-weight: 400; 349 | font-family: var(--header-font); 350 | color: var(--white); 351 | } 352 | 353 | .blog__content p { 354 | margin-bottom: 2rem; 355 | line-height: 1.75rem; 356 | color: var(--extra-light); 357 | } 358 | 359 | .blog__content .btn { 360 | background-color: transparent; 361 | border: 1px solid var(--white); 362 | } 363 | 364 | .instagram__container { 365 | overflow: hidden; 366 | } 367 | 368 | .instagram__flex { 369 | margin-top: 2rem; 370 | width: max-content; 371 | display: flex; 372 | align-items: center; 373 | gap: 1rem; 374 | 375 | animation: scroll 45s linear infinite; 376 | } 377 | 378 | .instagram__flex img { 379 | max-width: 135px; 380 | } 381 | 382 | @keyframes scroll { 383 | to { 384 | transform: translateX(calc(-50% - 0.5rem)); 385 | } 386 | } 387 | 388 | .footer__container { 389 | display: grid; 390 | gap: 4rem 0; 391 | align-items: center; 392 | } 393 | 394 | .footer__col { 395 | padding-inline: 2rem; 396 | } 397 | 398 | .footer__container img { 399 | max-width: 170px; 400 | margin-inline: auto; 401 | margin-bottom: 2rem; 402 | } 403 | 404 | .footer__socials { 405 | display: flex; 406 | align-items: center; 407 | justify-content: center; 408 | gap: 1rem; 409 | flex-wrap: wrap; 410 | } 411 | 412 | .footer__socials a { 413 | font-size: 1.5rem; 414 | color: var(--text-dark); 415 | } 416 | 417 | .footer__socials a:hover { 418 | color: var(--text-light); 419 | } 420 | 421 | .footer__links { 422 | list-style: none; 423 | display: grid; 424 | grid-template-columns: repeat(2, 1fr); 425 | gap: 2rem; 426 | } 427 | 428 | .footer__links a { 429 | display: block; 430 | font-weight: 600; 431 | color: var(--text-dark); 432 | text-align: center; 433 | } 434 | 435 | .footer__links a:hover { 436 | color: var(--text-light); 437 | } 438 | 439 | .footer__col h4 { 440 | margin-bottom: 1rem; 441 | font-size: 1.2rem; 442 | font-weight: 600; 443 | color: var(--text-dark); 444 | text-align: center; 445 | } 446 | 447 | .footer__col p { 448 | color: var(--text-light); 449 | line-height: 1.75rem; 450 | text-align: center; 451 | } 452 | 453 | .footer__bar { 454 | padding: 1rem; 455 | font-size: 0.9rem; 456 | color: var(--extra-light); 457 | background-color: var(--text-dark); 458 | text-align: center; 459 | } 460 | 461 | @media (width > 540px) { 462 | .portfolio__grid { 463 | grid-template-columns: repeat(2, 1fr); 464 | } 465 | 466 | .service__grid { 467 | grid-template-columns: repeat(2, 1fr); 468 | } 469 | 470 | .gallery__grid { 471 | grid-template-columns: repeat(3, 1fr); 472 | } 473 | 474 | .footer__container { 475 | grid-template-columns: repeat(2, 1fr); 476 | } 477 | 478 | .footer__col:nth-child(1) { 479 | grid-area: 1/1/2/3; 480 | } 481 | 482 | .footer__col:nth-child(3) { 483 | border-left: 2px solid var(--text-dark); 484 | } 485 | } 486 | 487 | @media (width > 768px) { 488 | .header { 489 | min-height: 650px; 490 | } 491 | 492 | nav { 493 | padding: 2rem 1rem; 494 | position: static; 495 | max-width: 900px; 496 | display: flex; 497 | align-items: center; 498 | justify-content: space-between; 499 | } 500 | 501 | .nav__header { 502 | display: none; 503 | } 504 | 505 | .nav__links { 506 | padding: 0; 507 | width: 100%; 508 | position: static; 509 | transform: none; 510 | flex-direction: row; 511 | justify-content: space-between; 512 | background-color: transparent; 513 | } 514 | 515 | .nav__links .nav__logo { 516 | display: block; 517 | } 518 | 519 | .nav__links .nav__logo img { 520 | max-width: 150px; 521 | } 522 | 523 | .portfolio__grid { 524 | grid-template-columns: repeat(3, 1fr); 525 | } 526 | 527 | .service__grid { 528 | grid-template-columns: repeat(3, 1fr); 529 | } 530 | 531 | .gallery__grid { 532 | grid-template-columns: repeat(4, 1fr); 533 | } 534 | 535 | .blog__container { 536 | grid-template-columns: repeat(2, 1fr); 537 | } 538 | 539 | .blog__content { 540 | grid-column: 2/3; 541 | } 542 | 543 | .footer__container { 544 | grid-template-columns: repeat(3, 1fr); 545 | } 546 | 547 | .footer__col:nth-child(1) { 548 | grid-area: 1/2/2/3; 549 | border-left: 2px solid var(--text-dark); 550 | border-right: 2px solid var(--text-dark); 551 | } 552 | 553 | .footer__col:nth-child(3) { 554 | border: none; 555 | } 556 | } 557 | 558 | @media (width > 1024px) { 559 | .header { 560 | min-height: 700px; 561 | } 562 | 563 | .portfolio__grid { 564 | gap: 2rem; 565 | } 566 | } 567 | --------------------------------------------------------------------------------