/* Goggle Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200; 1,200; 1.300&display=swap'); *{ font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; scroll-padding-top: 4rem; scroll-behavior: smooth; list-style: none; text-decoration: none; } :root{ --main-color:#bc9667; --second-color:#edeae3; --text-color:#1b1b1b; --bg-color:#fff; /* kutu gölgesi */ --box-shadow:2px 2px 10px 4px rgb(14 55 54 / 15%); } section{ padding: 50px 100px; } img{ width: 100%; } body{ color: var(--text-color); } header{ position: fixed; width: 100%; top: 0; right: 0; z-indeksi: 1000; ekran: esnek; justify-content: aradaki boşluk; align-items: orta; dolgu: 18 piksel 100 piksel; geçiş: 0.5s doğrusal; } header.shadow{ background: var(--text-color); box-shadow: var(--box-shadow); } .logo img{ width: 60px; } .navbar{ display: flex; } .navbar a{ padding: 8px 17px; color: var(--bg-color); font-size: 1rem; text-transform: uppercase; font-weight: 500; } .navbar a:hover{ background: var(--main-color); border-radius: 0.2rem; transition: 0.2s all linear; } .header-icon{ font-size: 22px; imleç: pointer; z-index: 10000; display: flex; column-gap: 0.8rem; } .header-icon .bx{ color: var(--bg-color); } . header-icon .bx:hover{ color: var(--main-color); } #menu-icon{ color: var(--bg-color); font-size: 24px; z-index: 100001; imleç: işaretçi; display: none; } .search-box{ position: absolute; top: -100%; left: 50%; transform: translate(-50%); background: var(--bg-color); width: 100%; } .search-box.active{ top: 110%; box-shadow: var(--box-shadow); transition: 0.2s all lineer; } .search-box input{ padding: 20px; border: none; outline: none; width: 100%; font-size: 1rem; color: var(--ana-renk); } .search-box input::p laceholder{ font-size: 1rem; font-weight: 500; } .home{ width: 100%; min-height: 100vh; background: url(img/bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, auto)); align-items: center; gap: 1.5rem; } .home-text h1{ font-size: 3.4rem; color: var(--main-color); text-transform: büyük harf; harf aralığı: 1px; } .home-text p{ font-size: 0.938rem; color: var(--bg-renk); kenar boşluğu: 0.5rem 0 1.4rem; } .btn{ dolgu: 10px 40px; border-radius: 0.3rem; background: var(--main-color); color: var(--bg-color); font-weight: 500; } .btn:hover{ background: #8a6f4d; } .about{ display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, auto)); gap: 1.5rem; } .about-img img{ border-radius: 0.5rem; } .about-text h2{ font-size: 1.8rem; text-transform: uppercase; } .about-text p{ font-size: 0.938rem; margin: 0.5rem 0 1.1rem; } .heading{ text-align: center; } .heading h2{ font-size: 1.8rem; metin dönüşümü: büyük harf; } .products-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, auto)); gap: 1.5rem; margin-top: 2rem; } .products-container .box{position: relative; padding: 10px; display: flex; flex-direction: column; justify-content: center; border-radius: 0.5rem; box-shadow: var(--box-shadow); } .products-container img{ width: 100%; height: 250px; object-fit: contain; object-position: center; padding: 20px; background: #f1f1f1; border-radius: 0.5rem; } .products-container .box h3{ font-size: 1rem; font-weight: 600; text-transform: uppercase; margin: 0.5rem 0 0.5rem; } .products-container .box .content{ display: flex; align-items: center; justify-content: space-around; } .products-container .box .content span{ dolgu: 0 1rem; color: var(--bg-color); background: var(--main-color); border-radius: 4px; font-weight: 500; } .products-container .box .content a{ padding: 0 1rem; color: var(--text-color); border: 2px solid var(--main-color); border-radius: 4px; text-transform: uppercase; } .products-container .box .content a:hover{ background: var(--main-color); color: var(--bg-color); transition: 0.2s all lineer; } .customers-container{ display: grid; grid-template-columns: tekrarla(otomatik sığdır, minmax(280px, otomatik)); Boşluk: 1.5rem; kenar boşluğu üstü: 2rem; } .customers-container .box{ padding: 20px; box-shadow: var(--box-shadow); border-radius: 0.5rem; text-align: center; } .stars .bx{ color: var(--main-color); } .customers-container .box p{ font-size: 0.938rem; } .customers-container .box h2{ font-size: 1.2rem; font-weight: 600; margin: 0.5rem 0 0.5rem; } .customers-container .box img{ width: 70px; height: 70px; border-radius: 50%; object-fit: cover; } .customers-container .box:hover{ background: var(--second-color); geçiş: 0.2s tamamen doğrusal; } .footer{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, auto)); gap: 1.5rem; } .footer-box h2{ font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; } .footer-box p{ font-size: 0.938rem; margin-bottom: 10px; } .social{ display: flex; align-items: center; column-gap: 0.5rem; } .social a .bx{ font-size: 24px; color: var(--text-color); padding: 10px; background: var(--second-color); border-radius: 0.2rem; } .social a .bx:hover{ background: var(--main-color); color: var(--bg-renk); } .footer-box h3{ font-weight: 600; margin-bottom: 10px; } .footer-box li a{color: var(--text-color); } .footer-box li a:hover{ color: var(--main-color); } .contact{ display: flex; flex-direction: column; row-gap: 0.5rem; } .contact span{ display: flex; align-items: center; } .contact i{ font-size: 20px; margin-right: 1rem; } .copyright{ padding: 20px; text-align: center; background: var(--second-color); } @media (max-width: 991px) { header { padding: 16px 4%; } section { padding: 50px 4%; } . home-text h1{ font-size: 2rem; } } @media (maksimum genişlik: 768px) { header { padding: 12px 4%; } #menu-icon {display: initial; } .navbar{ position: absolute; top: -570px; left: 0; right: 0; display: flex; flex-direction: column; background: var(--second-color); row-gap: 1.4rem; padding: 20px; transition: 0.3s; text-align: center; } .navbar a {color: var(--text-color); } .navbar a:hover{ color: var(--bg-color); } .navbar.active{ top: 100%; } .about{ align-items: center; } } @media (max-width: 360px){ header{ padding: %11 x %4; } .logo img{ width: 45px; } .home-text{ padding-top: 15px; } .home-text h1{ font-size: 1.4rem; } .home-text p { yaz tipi boyutu: 0.8rem; yaz tipi arl: 300; } .about-img{ sipari: 2; } .about-text{ metin hizalama: orta; } .about-text h2{ yaz tipi boyutu: 1.2rem; } .balk h2{ yaz tipi boyutu: 1.2rem; } }