“Kaynak kodu ile HTML CSS projeleri” kodu Cevap
Kaynak kodu ile HTML CSS projeleri
* { font-family: 'Montserrat', sans-serif; padding: 0px; margin: 0px; font-weight: 900; } .container-fluid { padding: 0% 10%; } #title { background-image: linear-gradient(to bottom, rgb(255, 0, 43), rgba(255, 81, 0, 0.904)); color: #fff; } h1 { size: 5rem; line-height: 1.5; font-weight: 900; } nav { background-color: rgba(0, 0, 0, 0.233); } .navbar { margin-bottom: 4.5rem; } .navbar-brand { font-family: 'Ubuntu', sans-serif; font-size: 3.5rem; font-weight: bold; margin-left: 25%; } .nav-item { padding: 0 15px; color: rgba(163, 162, 162, 0.603); } .nav-item a:hover { border-bottom: 2px solid black; } .download-btn { margin: 6% 1%; } .heading h1 { font-size: 4rem; font-weight: bold; } .dog_img { transform: rotateZ(30deg); height: 60%; margin-left: 10%; -webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.226)); z-index: 1; position: absolute; top: 30%; } /* Features */ #features { padding: 7% 15%; background-color: white; position: relative; z-index: 2; } .icons { margin: 5% 30%; color: rgb(255, 0, 43); } .icons:hover { color: rgba(255, 81, 0, 0.904); } #features h3 { font-size: 1.7rem; font-weight: 900; } .feature-box { text-align: center; padding: 5%; } #features p { color: rgb(145, 144, 144); } /* Testimonials section */ #testimonials { text-align: center; background-color: rgb(255, 0, 43); color: white; } #testimonials h2 { font-size: 3rem; line-height: 1.5; } .testimonials-img { border-radius: 50%; width: 10%; margin: 5%; } .carousel-item { padding: 7% 10%; } /* Pricing Section */ #pricing { text-align: center; padding: 5%; font-weight: 800; } .card { position: relative; display: flex; flex-direction: column; height: fit-content; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, .125); border-radius: .25rem; } #pricing p { font-weight: 700; color: rgb(255, 0, 43); } #pricing h3 { color: rgb(255, 0, 43); } .pricing-col { margin: 8% 5%; } /* Call to Action */ #cta { text-align: center; background-image: linear-gradient(to bottom, rgb(255, 0, 43), rgba(255, 81, 0, 0.904)); padding: 5%; } #cta h3 { color: white; font-size: 2.4rem; font-weight: 900; } #cta button { padding: 6px; } /* footer */ #footer { text-align: center; margin: 2%; } #footer i { margin: 15px; } #footer i:hover { background-image: linear-gradient(to bottom, rgb(255, 0, 43), rgba(255, 81, 0, 0.904)); } /* MEDIA QUERIES TO MAKE IT SCREEN RESPONSIVE */ @media screen and (max-width: 1028px) { #title { text-align: center; } .dog_img { position: static; transform: rotate(0); -webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)); margin-bottom: 0%; } nav { background-color: rgba(0, 0, 0, 0); } .navbar { margin-bottom: 2.5rem; } .navbar-brand { font-size: 2.5rem; font-weight: bold; /* margin-left: 25%; */ } #cta h3 { font-size: 2rem; font-weight: 600; } }