/*=============== GOOGLE FONTS ===============*/ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); /*=============== VARIABLES CSS ===============*/ /* :root Pseudo-Class :root: This pseudo-class represents the top-level element of the document, which is the element in HTML. By declaring variables in :root, they become global and can be accessed throughout the entire document. */ :root { /* Defining Variables Variables are defined using the -- prefix, followed by the variable name. They can be used for colors, sizes, fonts, and more.*/ /* Using Variables Once defined, you can use these variables anywhere in your CSS with the var() function: body { font-family: var(--body-font); color: var(--text-color); background-color: var(--body-color); } */ --header-height: 3.5rem; /*========== Colors ==========*/ /*Color mode HSL(hue, saturation, lightness)*/ --first-color: hsl(23, 100%, 50%); --gradient-color: linear-gradient( 90deg, hsl(23, 4%, 28%) 0%, hsl(23, 4%, 8%) 100% ); --white-color: hsl(0, 0%, 100%); --text-color: hsl(23, 4%, 60%); --body-color: hsl(23, 12%, 4%); --container-color: hsl(23, 4%, 10%); /*========== Font and typography ==========*/ /*.5rem = 8px | 1rem = 16px ...*/ --body-font: "Poppins", sans-serif; --biggest-font-size: 10rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; --normal-font-size: 0.938rem; --small-font-size: 0.813rem; --smaller-font-size: 0.75rem; /*========== Font weight ==========*/ --font-regular: 400; --font-medium: 500; --font-semi-bold: 600; /*========== z index ==========*/ /* Elements with higher z-index values are displayed in front of elements with lower z-index values within the same stacking context. Example: .element1 { position: absolute; z-index: 1; } .element2 { position: absolute; z-index: 2; } In this example, .element2 will appear on top of .element1. */ --z-tooltip: 10; --z-fixed: 100; } /*========== Responsive typography ==========*/ @media screen and (min-width: 1150px) { :root { --biggest-font-size: 25rem; --h1-font-size: 2.25rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: 0.875rem; --smaller-font-size: 0.813rem; } } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body-font); font-size: var(--normal-font-size); background: var(--body-color); color: var(--text-color); } h1, h2, h3, h4 { color: var(--white-color); font-weight: var(--font-semi-bold); } ul { list-style: none; } a { text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /*=============== REUSABLE CSS CLASSES ===============*/ .container { max-width: 1120px; margin-inline: 1.5rem; /*Purpose: Applies horizontal margins (left and right) to the .container.*/ } .grid { display: grid; gap: 1.5rem; } .section { padding-block: 5rem 1rem; } .section__title { font-size: var(--h2-font-size); text-align: center; margin-bottom: 1.5rem; } .main { overflow: hidden; /* For animation ScrollReveal */ } /*=============== HEADER & NAV ===============*/ .header { position: fixed; width: 100%; background: transparent; top: 0; left: 0; z-index: var(--z-fixed); } .nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; } .nav__logo { font-size: var(--h2-font-size); font-weight: var(--font-semi-bold); color: var(--first-color); } .nav__toggle, .nav__close { display: flex; font-size: 1.5rem; color: var(--white-color); cursor: pointer; } /* Navigation for mobile devices */ @media screen and (max-width: 1150px) { .nav__menu { position: fixed; /* 100% refers to the height of the element itself. Thus, -100% means the element's entire height is above the viewport. This technique is often used for menus or elements that slide down into view when triggered (e.g., on a button click). */ top: -100%; left: 0; background: hsla(23, 12%, 4%, 0.2); width: 100%; /* First Value (5.5rem): This value sets the padding at the start of the block axis. In a horizontal writing mode (such as English), this would apply to the top padding of the element. Second Value (4.5rem): This value sets the padding at the end of the block axis. In a horizontal writing mode, this would apply to the bottom padding of the element. */ padding-block: 5.5rem 4.5rem; /* Purpose: Applies graphical effects like blurring or color shifting to the area behind an element. Behavior: In this case, it applies a blur effect with a radius of 32px to the backdrop of the element, creating a frosted glass effect. Only the content behind the element is blurred, not the element's content itself. */ backdrop-filter: blur(32px); --webkit-bacdrop-filter: blur(32px); transition: top 0.4s; } } .nav__list { text-align: center; display: flex; flex-direction: column; row-gap: 2.5rem; } .nav__link { color: var(--white-color); font-weight: var(--font-medium); transition: color 0.4s; } .nav__link:hover { color: var(--first-color); } .nav__close { position: absolute; top: 1rem; right: 1.5rem; } /* Show menu */ .show__menu { top: 0; } /* Add blur header */ .blur__header::after { content: ""; position: absolute; width: 1000%; height: 100%; background-color: hsla(23, 12%, 4%, 0.2); backdrop-filter: blur(32px); --webkit-backdrop-filter: blur(32px); top: 0; left: 0; z-index: -1; } /* Active link */ .active-link { color: var(--first-color); } /*=============== HOME ===============*/ .home__container { position: relative; padding-block: 7rem 1rem; row-gap: 2.5rem; } .home__content { position: relative; display: grid; justify-self: center; /*Purpose: Aligns an individual grid item along the inline (horizontal) axis within its grid cell.*/ } .home__img { width: 220px; } .home__title { font-size: var(--biggest-font-size); display: flex; column-gap: 0.25rem; color: var(--first-color); position: absolute; top: -2rem; justify-self: center; } .home__title span:nth-child(2) { z-index: -1; } .home__toolip { position: absolute; top: -0.5rem; right: 1.5rem; } .home__toolip-img { width: 60px; } .home__tooltip-text { background: var(--gradient-color); padding: 0.25rem 0.75rem; color: var(--white-color); font-weight: var(--font-medium); border-radius: 4rem; font-size: var(--small-font-size); position: absolute; transform: translate(60px, -40px); /* The white-space: nowrap; CSS property prevents text from wrapping onto multiple lines. It forces the text to stay on a single line */ white-space: nowrap; } .home__social { display: grid; justify-items: center; row-gap: 6rem; position: absolute; top: 9rem; left: -1.5rem; } .home__social-text { position: relative; rotate: 90deg; font-size: var(--small-font-size); font-weight: var(--font-medium); } .home__social-text::after { content: ""; width: 48px; height: 1px; background-color: var(--text-color); position: absolute; top: 0; bottom: 0; right: -64px; margin-block: auto; } .home__social-links { display: grid; row-gap: 0.75rem; } .home__social-link { font-size: 1.25rem; color: var(--text-color); transition: color 0.4s; } .home__social-link:hover { color: var(--first-color); } .home__button { justify-self: center; } /*=============== BUTTON ===============*/ .button { background: var(--gradient-color); padding: 0.75rem 1.5rem; border-radius: 4rem; color: var(--white-color); font-weight: var(--font-semi-bold); display: inline-flex; justify-content: center; align-items: center; column-gap: 0.5rem; transition: box-shadow 0.4s; } .button i { font-size: 2rem; font-weight: initial; color: var(--first-color); } .button:hover { box-shadow: 0 12px hsla(23, 100%, 50%, 0.12); } /*=============== ABOUT ===============*/ .about__container { row-gap: 3.5rem; } .about__data { text-align: center; } .about__description { margin-bottom: 3.5rem; } .about__img { width: 200px; justify-self: center; } /*=============== FAVORITE ===============*/ .favorite__container { padding-top: 2rem; } .favorite__article { width: 220px; /* The CSS properties display: grid and justify-items: center are used together to create a grid layout in which items are centered along the horizontal axis within their respective grid cells */ display: grid; justify-items: center; filter: blur(8px); scale: 0.8; transition: filter 0.3s scale 0.3s; } .favorite__img { width: 220px; margin-bottom: 1.5rem; } .favorite__model { background: var(--gradient-color); padding: 0.5rem 1.5rem; border-radius: 4rem; color: var(--white-color); } /* Swiper class */ .swiper-slide-active, .swiper-slide-duplicate-active { filter: blur(0); scale: 1; } /*=============== MODEL ===============*/ .model__container { padding-top: 2rem; row-gap: 2.5rem; } .model__content { position: relative; justify-self: center; } .model__img { width: 280px; } .model__tooltip-img { width: 60px; } .model__tooltip-text { background: var(--gradient-color); padding: 0.25rem 0.75rem; border-radius: 4rem; color: var(--white-color); font-size: var(--small-font-size); font-weight: var(--font-medium); position: absolute; transform: translate(60px, -40px); white-space: nowrap; } .model__tooltip-1, .model__tooltip-2 { /* When using scale(-1), you can achieve a mirroring effect */ transform: scaleX(-1); } .model__tooltip-1 .model__tooltip-text, .model__tooltip-2 .model__tooltip-text { /* translate(60px, -40px): Moves the element 60 pixels to the right and 40 pixels up. */ /* scale(-1): Flips the element horizontally, creating a mirror effect. */ transform: translate(60px, -40px) scaleX(-1); } .model__tooltip { position: absolute; } .model__tooltip-1 { top: 5.5rem; left: 5rem; } .model__tooltip-2 { top: 1rem; right: 1.5rem; } .model__tooltip-3 { bottom: 1.8rem; left: 3.5rem; } .model__tooltip-4 { bottom: 7rem; right: 5rem; } .model__button { justify-self: center; } /*=============== SPONSOR ===============*/ .sponsor__img { width: 100px; transition: transform 0.4s; } .sponsor__img:hover { transform: scale(1.1); } .sponsor__container { padding-block: 0.5rem 4.5rem; grid-template-columns: repeat(2, max-content); justify-content: center; align-items: center; gap: 5rem 4rem; } /*=============== FOOTER ===============*/ .footer { padding-block: 2rem; overflow: hidden; } .footer__container { row-gap: 4rem; } .footer__logo { font-size: var(--h2-font-size); font-weight: var(--font-semi-bold); color: var(--first-color); } .footer__data { grid-template-columns: repeat(2, 1fr); row-gap: 4rem; } .footer__title { font-size: var(--h3-font-size); margin-bottom: 1rem; } .footer__links { display: grid; row-gap: 0.75rem; } .footer__link { color: var(--text-color); transition: color 0.4s; } .footer__link:hover { color: var(--first-color); } .footer__group { /* 1/3: This specifies the element should start at the beginning of the first column line (1) and span to the start of the third column line (3) */ /* means the element will occupy two columns (the first and the second columns) in the grid. */ grid-column: 1/3; } .footer__form { display: grid; row-gap: 1rem; margin-bottom: 2rem; } .footer__input, .footer__button { font-size: var(--normal-font-size); font-family: var(--body-font); border: none; outline: none; } .footer__input { width: 100%; padding: 1.15rem 1.25rem; border-radius: 4rem; background-color: var(--container-color); color: var(--text-color); } .footer__input::placeholder { color: var(--text-color); } .footer__button { cursor: pointer; } .footer__social { display: flex; justify-content: center; column-gap: 1rem; } .footer__social-link { font-size: 1.25rem; color: var(--white-color); transition: color 0.4s; } .footer__social-link:hover { color: var(--first-color); } .footer__copy { display: block; margin-top: 5rem; font-size: var(--small-font-size); text-align: center; } /*=============== SCROLL BAR ===============*/ /* ::-webkit-scrollbar: Targets the entire scrollbar. */ ::-webkit-scrollbar { width: 0.6rem; border-radius: 0.5rem; background-color: hsla(23, 4%, 15%); } /* ::-webkit-scrollbar-thumb: Targets the draggable part of the scrollbar (the "thumb"). */ ::-webkit-scrollbar-thumb { border-radius: 0.5rem; background-color: hsla(23, 4%, 30%); } ::-webkit-scrollbar-thumb:hover { background-color: hsla(23, 4%, 40%); } /*=============== SCROLL UP ===============*/ .scrollup { position: fixed; right: 1rem; bottom: -50%; background: var(--gradient-color); display: inline-flex; color: var(--white-color); font-size: 1.25rem; padding: 6px; border-radius: 0.25rem; z-index: var(--z-tooltip); transition: 0.4s; } .scrollup:hover { transform: translateY(-0.5rem); } /* Show Scroll Up */ .show-scroll { bottom: 3rem; } /*=============== BREAKPOINTS ===============*/ /* For small devices */ @media screen and (max-width: 340px) { .container { margin-inline: 1rem; } .home__img { width: 180px; } .home__title { font-size: 8rem; } .model__img { width: 220px; } .model__tooltip-text { font-size: var(--smaller-font-size); transform: translate(42px, -40px); } .model__tooltip-1 .model__tooltip-text, .model__tooltip-2 .model__tooltip-text { transform: translate(40px, -40px) scaleX(-1); } .model__tooltip-1 { top: 3rem; left: 4rem; } .model__tooltip-2 { top: 0; } .model__tooltip-3 { bottom: 2rem; left: 3rem; } .model__tooltip-4 { right: 4rem; bottom: 6rem; } .sponsor__container { gap: 4rem 2rem; } } /* For medium devices */ /* styles for screens 576px and wider */ @media screen and (min-width: 576px) { .about__container { grid-template-columns: 380px; justify-content: center; } .footer__data { grid-template-columns: repeat(3, max-content); column-gap: 3rem; } .footer__group { grid-column: initial; /* Reset to default behavior on wider screens */ } .footer__social { grid-column: initial; } } @media screen and (min-width: 768px) { .home__img { width: 320px; } .home__title { font-size: 15rem; top: -4rem; } .home__social { top: 0; bottom: 0; align-content: center; } .sponsor__container { grid-template-columns: repeat(4, max-content); } .footer__container { grid-template-columns: repeat(2, max-content); justify-content: space-between; } .footer__data { column-gap: 4rem; } } /* For large devices */ @media screen and (min-width: 1150px) { .container { margin-inline: auto; } .section { padding-block: 7rem 2rem; } .section__title { font-size: var(--h1-font-size); } .nav { height: calc(var(--header-height) + 2rem); } .nav__close, .nav__toggle { display: none; } .nav__list { flex-direction: row; column-gap: 4.5rem; } .home__container { position: relative; } .home__img { width: 500px; } .home__title { font-size: var(--biggest-font-size); top: -6.5rem; column-gap: 1rem; } .home__toolip { right: 6rem; } .home__toolip-img { width: initial; } .home__tooltip-text { font-size: var(--normal-font-size); transform: translate(82px, -52px); } .home__social-text { font-size: var(--normal-font-size); } .home__social-links { row-gap: 1rem; } .home__button { position: absolute; bottom: -3rem; } .about__container { grid-template-columns: 400px 500px; align-items: center; column-gap: 5rem; } .about__data .section__title, .about__data { text-align: initial; } .about__description { margin-bottom: 3.5rem; } .about__img { width: 500px; } .favorite__container { max-width: 1100px; margin-inline: auto; } .favorite__img { width: 500px; } .model__img { width: 500px; } .model__tooltip-img { width: initial; } .model__tooltip-text { font-size: var(--normal-font-size); padding: 0.5rem 1.25rem; transform: translate(82px, -56px); } .model__tooltip-1 { top: 7.5rem; left: 8.5rem; } .model__tooltip-1 .model__tooltip-text { transform: translate(82px, -56px) scaleX(-1); } .model__tooltip-2 { /* The transform: initial; CSS property sets the transform of an element to its default value, effectively removing any transformations that may have been applied to it previously. */ transform: initial; top: 6.5rem; right: -1.5rem; } .model__tooltip-2 .model__tooltip-text { transform: translate(82px, -56px); } .model__tooltip-3 { left: 0; bottom: 6rem; transform: scaleX(-1); } .model__tooltip-3 .model__tooltip-text { transform: translate(82px, -56px) scaleX(-1); } .model__tooltip-4 { bottom: 10rem; right: 7rem; } .sponsor__container { column-gap: 7.5rem; padding-bottom: 6rem; } .footer { padding-bottom: 3rem; } .footer__data { column-gap: 6rem; } .footer__form { grid-template-columns: 1fr max-content; background-color: var(--container-color); padding: 0.5rem; border-radius: 4rem; width: 380px; } .footer__social { column-gap: 1.5rem; } .footer__social-link { font-size: 1.5rem; } .footer__copy { margin-top: 7.5rem; } .scrollup { right: 3rem; } }