<img class="google_play_img" src="../images/google.png" alt="google_play_img">
<img class="app_store_img" src="../images/appstore.png" alt="app_store_img">
</div>
</div>
<div class="services1">
<h3 class="service1_title"> Have Question in Mind? <br> Let us help you </h3>
<div class="inputs">
<input class="input_1" placeholder="Your phone number" type="tel">
<input class="input_2" placeholder="Question type" type="text">
<input class="input_3" placeholder="Enter your question" type="text">
<input class="input_4" value="Send" type="submit">
</div>
</div>
<div class="footer">
<div class="cards">
<div class="card_1">
<img class="card_1_logo" src="../images/logo1.png" alt="logo1_img">
<p class="card_1_text"> Some food has looked so awful that it's looked like something that the dog's brought home. </p>
<p class="card_1_icons_text"> Fllow Us </p>
<img class="card_1_icons" src="../images/Group 55.png" alt="icons_img">
</div>
<div class="card_2">
<h6 class="card_2_title"> Home </h6>
<p class="card_2_text"> Product </p>
<p class="card_2_text"> Blog </p>
<p class="card_2_text"> Pricing </p>
<p class="card_2_text"> Testimonials </p>
<p class="card_2_text"> Contact Us </p>
</div>
<div class="card_3">
<p class="card_3_text"> Delivery Information </p>
<p class="card_3_text"> Privacy Policy </p>
<p class="card_3_text"> Terms & Condition </p>
<p class="card_3_text"> Search Terms </p>
<p class="card_3_text"> Order & Return </p>
</div>
<div class="card_4">
<h6 class="card_4_title"> Newsletter </h6>
<input class="card_4_input" placeholder="Your Email" type="email">
<button class="card_4_btn"> Subscribe </button>
<div class="card_4_cards">
<img class="card_4_cards_card_1" src="../images/card_1.png" alt="card_1_img">
<img class="card_4_cards_card_2" src="../images/card_2.png" alt="card_2_img">
<img class="card_4_cards_card_3" src="../images/card_3.png" alt="card_3_img">
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Pixer </title>
<link rel="stylesheet" href="../styles/pixer.css">
<link rel="stylesheet" href="../styles/fonts.css">
</head>
<body>
<header>
<div class="navbar">
<img class="navbar_logo" src="../images/pixer-logo.png" alt="pixer-logo_img">
<div class="navbar_links_btn">
<ul class="navbar_links">
<li> <a href="../index.html"> Index </a> </li>
<li> <a href="./assessme.html"> AssessMe </a> </li>
<li> <a href="./trafalgar.html"> Trafalgar </a> </li>
<li> <a href="./polar.html"> Polar </a> </li>
<li> <a href="./pixer.html"> Pixer </a> </li>
</ul>
<button class="navbar_btn"> +998 90 921 37 11 </button>
</div>
</div>
<div class="container">
<div class="intro">
<div class="intro_left">
<h3 class="intro_title"> Biznesingizni keyingi bosqichga olib chiqing </h3>
<p class="intro_text"> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. Nam facilisis lacinia ex, eget sollicitudin
massa pellentesque in. Vivamus mattis eros at sem pulvinar </p>
<button class="intro_btn"> Xizmatlar bilan tanishish </button>
</div>
<div class="intro_right">
<iframe width="500" height="300" src="https://www.youtube.com/embed/EcDoW7iZkV0?si=qil4og9IE3UuapxK" title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen> </iframe>
</div>
</div>
</div>
</header>
<!-- Services Section -->
<section class="services">
<div class="container">
<h2 class="service_title"> Xizmatlar </h2>
<p class="service_subtitle"> Nullam laoreet nec turpis et ultrices.
Duis sit amet quam arcu. Nam facilisis lacinia ex, eget <br>
sollicitudin massa pellentesque in. Vivamus mattis eros at sem
pulvinar </p>
<div class="services">
<div class="service_card">
<img src="../images/website-illustration.png" alt="Vebsayt tuzish">
<h3> Vebsayt tuzish </h3>
<p> lorem ipsum </p>
</div>
<div class="service_card">
<img src="../images/bot-illustration.png" alt="Telegram bot">
<h3> Telegram bot </h3>
<p> lorem ipsum </p>
</div>
<div class="service_card">
<img src="../images/smm-illustration.png" alt="SMM">
<h3> SMM </h3>
<p> lorem ipsum </p>
</div>
<div class="service_card">
<img src="../images/design-illustration.png" alt="Grafik dizayn">
<h3> Grafik dizayn </h3>
<p> lorem ipsum </p>
</div>
<div class="service_card">
<img src="../images/crm-illustration.png" alt="CRM tizimlar">
<h3> CRM tizimlar </h3>
<p> lorem ipsum </p>
</div>
</div>
<div class="services_actions">
<a href="#" class="btn"> Buyurtma berish </a>
<a href="#" class="btn-outline"> Xizmatlar sahifasiga o'tish </a>
</div>
</div>
</section>
<!-- How We Work Section -->
<section class="work_process">
<div class="container">
<h2 class="section_title"> Biz qanday ishlaymiz? </h2>
<p class="section_subtitle"> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. Nam facilisis lacinia ex, eget <br>
sollicitudin massa pellentesque in. Vivamus mattis eros at sem pulvinar </p>
<div class="process_steps">
<div class="step">
<img src="../images/step-illlustration.png" alt="Talablarni aniqlash">
<div class="step_content">
<h3> Talablarni aniqlab chiqamiz </h3>
<p> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. <br> Nam facilisis </p>
</div>
</div>
<div class="step">
<div class="step_content">
<h3> Bir necha yechimlarni taklif qilamiz </h3>
<p> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. <br> Nam facilisis </p>
</div>
<img src="../images/step-illlustration (1).png" alt="Yechimlarni taklif qilish">
</div>
<div class="step">
<img src="../images/step-illustration.png" alt="Loyiha uchun vaqt">
<div class="step_content">
<h3> Loyiha uchun vaqt belgilaymiz </h3>
<p> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. <br> Nam facilisis </p>
</div>
</div>
<div class="step">
<div class="step_content">
<h3> A'lo sifat bilan bajarib topshiramiz </h3>
<p> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. <br> Nam facilisis </p>
<img src="../images/step-illustration (1).png" alt="A'lo sifat">
</div>
</div>
<div class="step">
<img src="../images/step-illustration (2).png" alt="Qo'llab-quvvatlash">
<div class="step_content">
<h3> Qo'llab-quvvatlab boramiz </h3>
<p> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. <br> Nam facilisis </p>
</div>
</div>
</div>
<div class="steps_btn">
<a href="#" class="btn"> Buyurtma berish </a>
</div>
</div>
</section>
<!-- Order Form Section -->
<section class="order_form">
<div class="container">
<h2>Buyurtma berish</h2>
<p> Nullam laoreet nec turpis et ultrices. Duis sit amet quam arcu. Nam facilisis lacinia ex, eget sollicitudin massa pellentesque in. Vivamus
mattis eros at sem pulvinar </p>
<form class="order_form_inner">
<input type="text" placeholder="Ismingiz" required>
<input type="tel" placeholder="Telefon raqamingiz" required>
<select required>
<option value="" disabled selected> Xizmat turi </option>
<option value="web"> Vebsayt tuzish </option>
<option value="bot"> Telegram bot </option>
<option value="smm"> SMM </option>
<option value="design"> Grafik dizayn </option>
<option value="crm"> CRM tizimlar </option>
</select>
<button type="submit"> Buyurtma berish </button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer_side">
<h3> Copyright 2020 </h3>
<p> Nullam laoreet nec turpis et ultrices. Duis <br> sit amet quam arcu.Nam facilisis lacinia <br> ex, eget sollicitudin massa pellentesque
in. <br> Vivamus mattis eros at sem pulvinar <br> tincidunt. </p>
</div>
<div class="footer_side">
<h3> Sayt sahifalari </h3>
<ul>
<li> <a href="#"> Bosh sahifa </a> </li>
<li> <a href="#"> Xizmatlar </a> </li>
<li> <a href="#"> Portfolio </a> </li>
<li> <a href="#"> Jamoa </a> </li>
<li> <a href="#"> Blog </a> </li>
<li> <a href="#"> Kontaktlar </a> </li>
</ul>
</div>
<div class="footer_side">
<h3> Biz internetda </h3>
<div class="social_logo">
<img src="../images/telegram.svg" alt="telegram_logo">
<img src="../images/facebook.png" alt="facebook_logo">
<img src="../images/instagram.png" alt="instagram_logo">
</div>
<ul class="social-links">
<li> <a href="https://telegram.org/" target="_blank"> <i class="link_telegram"></i> Telegram </a> </li>
<li> <a href="https://www.facebook.com/" target="_blank"> <i class="link_facebook"></i> Facebook </a> </li>
<li> <a href="https://www.instagram.com/" target="_blank"> <i class="link_instagram"></i> Instagram </a> </li>
</ul>
</div>
</div>
</footer>
</body>
</html>
YouTube
Волкам всё можно - Tural Everest & Ruslan Dobry | Премьера клипа
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
* {
margin: 0;
padding: 0;
background: linear-gradient(150deg, #000000, rgb(6, 36, 36));
}
nav {
width: 600px;
height: 600px;
background-color: black;
margin: 180px auto;
font-family: sans-serif;
font-size: 60px;
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
}
li {
list-style: none;
}
a {
color: cyan;
} * {
margin: 0;
padding: 0;
font-family: sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
font-weight: 700;
color: blue;
font-size: large;
}
a:hover {
color: red;
}
.container {
display: flex;
justify-content: center;
padding: 45px;
}
.wrapper {
width: 90%;
max-width: 1200px;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 40px;
}
.navbar__logo {
width: 120px;
}
.ul_of_navbar {
display: flex;
gap: 30px;
}
.intro {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.intro__left {
min-width: 300px;
}
.intro__title {
font-size: 60px;
font-weight: 500;
color: #003366;
margin-bottom: 20px;
line-height: 1.2;
}
.intro__text {
font-size: 20px;
color: blue;
margin-bottom: 20px;
}
.intro__btn {
padding: 10px;
margin-right: 20px;
font-weight: 100;
border-radius: 5px;
background-color: rgb(56, 56, 180);
border: none;
}
.intro_of_btn2 {
background-color: #003366;
color: rgb(238, 232, 232);
padding: 10px;
border-radius: 5px;
border: none;
}
.intro__btn2 {
background-color: rgb(238, 232, 232);
color: #003366;
border-radius: 5px;
padding: 10px;
}
.intro__right {
text-align: center;
min-width: 300px;
}
.image_of_assess {
width: 100%;
max-width: 700px;
}
.text__assessme {
margin-top: 60px;
text-align: center;
font-size: 110px;
font-weight: 800px;
color: rgba(0, 51, 102, 0.05);
}* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
font-weight: 700;
color: blue;
font-size: large;
}
a:hover {
color: red;
}
.container {
width: 1440px;
height: 700px;
background-color: #E5E5E5;
margin: 50px auto;
padding: 20px;
border-radius: 20px;
}
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
}
.navbar__logo {
width: 160px;
height: 41px;
margin-top: 20px;
}
.navbar__list {
display: flex;
justify-content: space-around;
align-items: center;
gap: 30px;
}
.navbar__link_bold {
font-family: sans-serif;
font-size: 18px;
line-height: 21px;
color: #1F1534;
font-weight: 900;
}
.navbar__link {
font-family: sans-serif;
font-size: 18px;
line-height: 21px;
color: #1F1534;
}
.navbar__link_bold:hover {
color: red;
}
.navbar__link:hover {
color: red;
}
.intro {
display: flex;
margin-top: 20px;
}
.intro__left {
margin-left: 140px;
}
.intro__title {
width: 420px;
font-family: sans-serif;
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 56px;
color: #000;
margin-top: 90px;
}
.intro__text {
width: 450px;
font-family: sans-serif;
font-style: normal;
font-weight: 300;
font-size: 21px;
line-height: 32px;
color: #7d7987;
margin-top: 35px;
}
.intro__btn {
width: 200px;
height: 57px;
font-size: 18px;
color: white;
border: none;
background: #458ff6;
border-radius: 55px;
margin-top: 50px;
}
.intro__btn:hover {
background-color: #84b3f4;
}
.services {
text-align: center;
}
.services h2 {
font-family: sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 56px;
margin-top: 70px;
}
.container1 {
width: 1440px;
height: 975px;
background-color: #E5E5E5;
margin: auto;
padding: 20px;
border-radius: 20px;
}
.subtitle {
font-family: sans-serif;
font-weight: 300;
width: 930px;
margin: 40px auto 60px;
color: #666;
font-size: 18px;
}
.service-cards {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 30px;
}
.card {
width: 350px;
height: 240px;
background: #fff;
padding: 30px 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card img {
width: 70px;
margin-bottom: 25px;
}
.card h3 {
font-family: sans-serif;
font-weight: 700;
font-size: 24px;
margin-bottom: 10px;
}
.card p {
width: 260px;
font-family: sans-serif;
font-weight: 300;
font-size: 16px;
color: #7D7987;
margin: 20px auto;
}
.learn-more {
margin-top: 45px;
}
.btn-outline {
font-family: sans-serif;
font-size: 15px;
font-weight: 700;
border: 1px solid #458ff6;
color: #458ff6;
padding: 12px 25px;
border-radius: 25px;
}
.btn-outline:hover {
background: #458ff6;
color: #fff;
}
.leading {
display: flex;
justify-content: space-evenly;
}
.leading__right {
margin: 60px;
}
.leading__left {
padding: 70px;
margin: 40px;
}
.intro__title1 {
width: 481px;
height: 112px;
font-family: sans-serif;
font-weight: 700;
font-size: 36px;
margin-top: 100px;
}
.intro__text1 {
width: 400px;
height: 120px;
font-family: sans-serif;
font-weight: 300;
font-size: 18px;
line-height: 30px;
color: #7D7987;
margin-top: 35px;
}
.download {
display: flex;
align-items: center;
justify-content: space-between;
width: 1200px;
height: 500px;
padding: 60px;
margin: 10px;
}
.btn-outline1 {
width: 200px;
height: 56px;
color: #458FF6;
font-family: sans-serif;
font-weight: 700;
font-size: 18px;
border-radius: 25px;
margin-top: 15px;
border: 1px solid #458FF6;
}
.btn-outline1:hover {
background-color: #4287e9;
color: #fff;
}
.customer {
height: 425px;
width: 1320px;
padding: 85px;
margin: auto;
background: linear-gradient(208.18deg, #67C3F3 9.05%, #64BAF3 22.72%, #63B5F3 31.83%, #60AAF2 48.1%, #5A98F2 76.74%);
border-radius: 25px;
color: white;
}
.customer__title {
text-align: center;
font-family: sans-serif;
font-weight: 700;
font-size: 45px;
line-height: 48px;
}
.customer__box {
display: flex;
align-items: center;
justify-content: space-evenly;
margin-top: 130px;
}
.customer__left {
display: flex;
align-items: center;
gap: 40px;
font-size: 22px;
font-family: sans-serif;
}
.customer__left p {
font-family: sans-serif;
font-weight: 400;
font-size: 18px;
margin-top: 10px;
}
.customer__right {
width: 400px;
font-family: sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 30px;
padding: 20px;
}
.article__title {
font-family: sans-serif;
font-weight: 700;
font-size: 45px;
text-align: center;
line-height: 56px;
color: #000;
}
.card1,
.card2,
.card3 {
display: inline-block;
padding: 25px;
font-size: 25px;
font-family: sans-serif;
margin-top: 30px;
}
.card1_img {
width: 350px;
height: 240px;
}
.card_title {
font-family: sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 32px;
color: #000;
margin-top: 30px;
}
.card_text {
font-family: sans-serif;
font-weight: 300;
font-size: 20px;
line-height: 28px;
color: #7D7987;
margin-top: 20px;
}
.btn-outline {
font-size: 19px;
}
.article__link1 {
width: 200px;
height: 60px;
text-align: center;
color:#458FF6;
border-radius: 25px;
font-family: sans-serif;
font-weight: 700;
font-size: 19px;
line-height: 60px;
border-color: #458FF6;
background-color: #E5E5E5;
margin: 15px 500px;
}
.article__link1:hover {
background-color: #458FF6;
color: #E5E5E5;
}
.trafalgar {
display: flex;
justify-content: space-evenly;
width: 1455px;
height: 435px;
background: linear-gradient(183.41deg, #67C3F3 -8.57%, #5A98F2 82.96%);
margin: auto;
border-radius: 25px;
color: #fff;
font-family: sans-serif;
position: relative;
}
.trafalgar__logo {
width: 221px;
height: 55px;
position: absolute;
top: 100px;
left: 90px;
}
.trafalgar__text_left_side {
font-weight: 300;
font-size: 18px;
line-height: 28px;
position: absolute;
top: 180px;
left: 120px;
}
.trafalgar__text_left_side_2 {
font-weight: 300;
font-size: 16px;
line-height: 28px;
position: absolute;
top: 300px;
left: 120px;
}
.trafalgar__cards {
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 90px;
margin-top: 10px;
margin-left: 250px;
}
.trafalgar__card {
display: flex;
flex-direction: column;
gap: 20px;
}
.trafalgar__title {
font-weight: 700;
font-size: 20px;
line-height: 60px;
}
.trafalgar__text {
font-weight: 300;
font-size: 18px;
}
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
font-weight: 700;
color: blue;
font-size: large;
}
a:hover {
color: red;
}
.navbar {
display: flex;
width: 1520px;
padding: 40px 40px;
background-color: #F8EDF0 ;
margin: auto;
border-radius: 5px;
}
.Polar_logo {
width: 79px;
margin: auto;
}
.nav_links {
display: flex;
gap: 25px;
margin: auto;
padding: 10px 10px;
font-family: sans-serif;
margin-top: 15px;
justify-content: center;
align-items: center;
}
#active {
color:#D23166;
font-weight: 600;
}
.btn {
width: 165px;
height: 50px;
background-color: #D23166;
color: white;
border-radius: 5px;
font-weight: bold;
font-size: 16px;
}
.hero {
display: flex;
align-items: center;
width: 1500px;
padding: 50px 50px;
margin: auto;
background-color: #F8EDF0;
}
.small_text {
font-size: 17px;
color: #333;
font-weight: bold;
font-family: sans-serif;
margin: 0px 100px;
}
.hero_title {
font-size: 49px;
margin: 20px 100px;
line-height: 1.2;
color: #111;
font-family: 'Fredoka';
width: 580px;
}
.hero_text h1 span {
color: #ff3a8c;
}
.hero_text .description {
margin: 28px 90px;
color: #555;
line-height: 1.5;
font-family: sans-serif;
font-size: 20px;
}
.btn1 {
background-color: #f81c77;
color: white;
padding: 20px 55px;
border-radius: 5px;
font-weight: bold;
font-size: 20px;
margin: 20px 90px;
}
.ice_cream_img {
width: 1000px;
}
.services {
display: flex;
justify-content: space-evenly;
width: 1500px;
background-color: #ffffff;
margin: auto;
gap: 20px;
font-family: sans-serif;
padding: 50px;
}
.service {
text-align: center;
background-color: #fff;
}
.service img {
width: 60px;
margin-bottom: 15px;
}
.service h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #000;
}
.service p {
font-size: 14px;
color: #666;
}
.feature {
display: flex;
justify-content: center;
align-items: center;
width: 1580px;
height: 490px;
margin: auto;
background-color: #F8EDF0;
}
.feature_main {
margin-left: 70px;
}
.feature_text {
font-family: sans-serif;
margin-left: 50px;
padding: 10px;
}
.feature_title {
font-size: 40px;
padding: 17px;
font-family: sans-serif;
}
.btn2 {
width: 165px;
height: 49px;
color: white;
background: #D64374;
border-radius: 5px;
font-size: 15px;
margin: 20px 0px;
}
.feature_img {
display: flex;
justify-content: center;
align-items: center;
width: 900px;
}
.box_title {
padding: 90px 10px 30px;
width: 300px;
font-family: sans-serif;
font-weight: 600;
font-size: 44px;
margin: auto;
}
.tasks {
display: flex;
justify-content: center;
gap: 20px;
padding: 50px;
font-size: 19px;
width: 1500px;
margin: auto;
font-family: 'roboto';
}
#main_task {
color: #000;
text-decoration: underline;
font-family: 'roboto';
}
.task {
text-decoration: none;
font-family: 'roboto';
font-size: 19px;
color: #666;
font-weight: 500;
}
.products {
display: flex;
align-items: center;
font-family: sans-serif;
border: 1px solid;
width: 1600px;
margin: auto;
flex-wrap: wrap;
}
.product {
margin-right: 50px;
}
#product {
margin-left: 50px;
}
.ice_cream_img {
width: 800px;
height: 600px;
margin: auto;
}
.product_title {
font-family: 'Hind Madurai';
font-weight: bold;
font-size: 26px;
line-height: 30px;
}
.product_text {
padding: 15px 0px;
font-size: 20px;
color: #555;
font-family: 'roboto';
font-weight: 400;
}
.new_price {
font-family: 'Hind Madurai';
font-weight: 500;
font-size: 30px;
line-height: 30px;
color: #000000;
}
.old_price {
font-family: 'Hind Madurai';
font-weight: 500;
font-size: 20px;
line-height: 28px;
text-decoration-line: line-through;
color: #000000c7;
}
.btn3 {
width: 165px;
height: 49px;
color: white;
background: #D64374;
border-radius: 5px;
font-size: 15px;
margin-top: 12px;
font-family: 'roboto';
}
.limon__img {
width: 800px;
height: 600px;
margin: auto;
}
.Sweetcorn_img {
width: 800px;
height: 600px;
margin: auto;
}
.description {
display: flex;
justify-content: center;
align-items: center;
}
.description_left {
margin: 100px 80px;
}
.icon_img {
margin-left: 100px;
}
.icon_texts {
margin: 0px 100px;
}
.char {
width: 20px;
margin-top: 60px;
margin-left: 80px;
}
.icon_text {
margin: 20px 100px;
font-family: 'Roboto';
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.char1 {
width: 20px;
margin-left: 380px;
}
.icons {
margin: 20px 130px;
}
.adele__img {
width: 800px;
height: 600px;
}
.orders {
width: 1600px;
height: 678px;
background-color: #F8EDF0;
margin: auto;
display: flex;
}
.screen {
margin: 50px 100px;
width: 300px;
height: 620px;
}
.order_title {
font-family: 'Roboto';
font-weight: 500;
font-size: 44px;
line-height: 52px;
color: #000000;
margin-top: 50px;
}
.order_text {
font-family: 'Roboto';
font-weight: 400;
font-size: 20px;
color: #0f0101b5;
margin-top: 30px;
}
.select_img {
width: 30px;
height: 35px;
background-color: white;
margin-top: 30px;
}
.select_text {
font-family: 'Roboto';
font-weight: 400;
font-size: 25px;
line-height: 26px;
color: #000000;
margin-left: 10px;
}
.add_to_card_img {
width: 30px;
height: 35px;
background-color: white;
margin-top: 30px;
}
.add_to_card_text {
font-family: 'Roboto';
font-weight: 400;
font-size: 25px;
line-height: 26px;
color: #000000;
margin-left: 10px;
}
.order_img {
width: 30px;
height: 35px;
background-color: white;
margin-top: 30px;
}
.order_text {
font-family: 'Roboto';
font-weight: 400;
font-size: 25px;
line-height: 26px;
color: #000000;
margin-left: 10px;
}
.google_play_img {
margin-top: 40px;
}
.app_store_img {
margin-top: 40px;
}
.services1 {
width: 1600px;
height: 500px;
margin: auto;
background-color: #fff;
}
.service1_title {
font-family: 'Roboto';
font-weight: 500;
font-size: 44px;
line-height: 50px;
text-align: center;
color: #000;
margin: 150px;
}
.inputs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
max-width: 820px;
margin: auto;
position: relative;
}
.input_1 {
width: 303px;
height: 74px;
border: 2px solid #FFA3A3;
border-radius: 10px;
padding-left: 20px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #0F0000;
}
.input_2 {
width: 303px;
height: 74px;
border: 2px solid #FFA3A3;
border-radius: 10px;
padding-left: 20px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #0F0000;
}
.input_3 {
width: 637px;
height: 74px;
border: 2px solid #FFA3A3;
border-radius: 10px;
padding-left: 20px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #0F0000;
}
.input_4 {
width: 134px;
height: 74px;
color: #fff;
background-color: #D64374;
border-radius: 10px;
position: absolute;
top: 98px;
right: 80px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
}
.input_4:hover {
background-color: #000;
color: cyan;
}
.input_4:active {
background-color: #000;
color: blue;
}
.footer {
width: 1600px;
height: 381px;
background-color: #000;
margin: auto;
}
.cards {
display: flex;
position: relative;
}
.card_1 {
width: 200px;
height: 150px;
margin-top: 100px;
position: absolute;
top: 10px;
left: 250px;
}
.card_1_logo {
width: 79px;
height: 79px;
}
.card_1_text {
width: 207px;
height: 47px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.01em;
color: #FFFFFF;
margin-top: 15px;
}
.card_1_icons_text {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
margin-top: 30px;
}
.card_1_icons {
width: 90px;
height: 15px;
margin-top: 10px;
}
.card_2 {
width: 80px;
height: 100px;
margin-top: 100px;
position: absolute;
top: 90px;
left: 500px;
}
.card_2_title {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
}
.card_2_text {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
margin-top: 10px;
}
.card_3 {
width: 110px;
height: 110px;
margin-top: 100px;
position: absolute;
top: 90px;
left: 710px;
}
.card_3_text {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
margin-top: 10px;
}
.card_4 {
width: 400px;
height: 130px;
position: absolute;
top: 180px;
left: 1000px;
}
.card_4_title {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
}
.card_4_input {
width: 388px;
height: 55px;
border: 3px solid #D64374;
background-color: inherit;
border-radius: 10px;
margin-top: 15px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
padding-left: 20px;
}
.card_4_btn {
width: 125px;
height: 55px;
background-color: #D23166;
border-radius: 10px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 23px;
color: #FFFFFF;
position: absolute;
top: 37px;
left: 286px;
}
.card_4_btn:hover {
background-color: #000;
color: cyan;
}
.card_4_btn:active {
background-color: #000;
color: blue;
}
.card_4_cards {
display: flex;
gap: 15px;
margin-top: 15px;
}
.card_4_cards_card_1 {
width: 19px;
height: 22px;
}
.card_4_cards_card_2 {
width: 34px;
height: 20px;
}
.card_4_cards_card_3 {
width: 47px;
height: 15px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
font-weight: 700;
color: blue;
font-size: large;
}
a:hover {
color: red;
}
body {
color: #333;
}
header {
background: #fff;
padding: 15px 0;
}
.container {
width: 1200px;
margin: 0 auto;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 1200px;
margin: 10px auto;
}
.navbar_logo {
width: 67px;
height: 30px;
}
.navbar_links_btn {
display: flex;
gap: 20px;
}
.navbar_links {
display: flex;
align-items: center;
gap: 30px;
list-style: none;
}
.navbar_link {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: 500;
transition: 0.3s;
}
.navbar_link:hover {
color: #00bafc;
}
.navbar_btn {
background: #00bafc;
color: white;
padding: 10px 22px;
border: none;
border-radius: 6px;
font-weight: 600;
transition: 0.3s;
}
.navbar_btn:hover {
background: #003b55;
}
.intro {
display: flex;
align-items: center;
justify-content: space-between;
padding: 70px 0;
}
.intro_title {
width: 470px;
font-size: 38px;
font-weight: 700;
line-height: 1.3;
}
.intro_text {
margin: 20px 0;
font-size: 17px;
color: #555;
max-width: 420px;
}
.intro_btn {
background: #00bafc;
padding: 12px 25px;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
transition: 0.3s;
}
.intro_btn:hover {
background: #01567b;
}
.intro_right {
margin-right: 10px;
}
.service_title {
font-size: 32px;
font-weight: 700;
}
.service_subtitle {
margin: 15px 0 40px;
color: #555;
}
.services .service_card {
width: 300px;
padding: 25px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: 0.3s;
}
.services .service_card:hover {
transform: scale(1.05);
}
.services {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
padding: 80px 0;
text-align: center;
}
.service_card img {
height: 120px;
}
.service_card h3 {
margin: 15px 0 10px;
font-size: 20px;
font-weight: 700;
}
.service_card p {
color: #777;
font-size: 15px;
}
.btn,
.btn-outline {
display: inline-block;
margin-top: 40px;
padding: 12px 25px;
font-size: 16px;
border-radius: 6px;
text-decoration: none;
transition: 0.3s;
}
.btn {
background: #00bafc;
color: #fff;
}
.btn:hover {
color: #0099d9;
background-color: #fff;
border: 2px solid #0099d9;
}
.btn-outline {
border: 2px solid #00bafc;
color: #00bafc;
}
.btn-outline:hover {
background: #00bafc;
color: white;
}
.work_process {
padding: 80px 0;
background: #f5fafd;
}
.section_title {
text-align: center;
font-size: 32px;
font-weight: 700;
}
.section_subtitle {
text-align: center;
margin-top: 15px;
color: #555;
}
.process_steps {
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 30px;
}
.step {
display: flex;
align-items: center;
gap: 40px;
}
.step:nth-child(even) {
flex-direction: row-reverse;
}
.step img {
width: 250px;
}
.step_content h3 {
font-size: 22px;
font-weight: 700;
}
.step_content p {
color: #666;
margin-top: 8px;
}
.steps_btn {
text-align: center;
margin-top: 40px;
}
.order_form {
background-color: #00bafc;
color: #fff;
padding: 80px 0;
text-align: center;
}
.order_form h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
}
.order_form p {
max-width: 600px;
margin: 0 auto 40px;
color: #e6f5ff;
line-height: 1.6;
}
.order_form_inner {
background: #fff;
padding: 30px 25px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 15px;
max-width: 400px;
margin: 0 auto;
}
.order_form_inner input,
.order_form_inner select {
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
}
.order_form_inner select {
appearance: none;
cursor: pointer;
}
.order_form_inner button {
background: #00bafc;
color: #fff;
border: none;
border-radius: 6px;
padding: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
.order_form_inner button:hover {
background: #01567b;
}
.footer {
background: #191919;
color: white;
padding: 70px 0;
}
.footer .container {
display: flex;
justify-content: space-between;
}
.footer_side h3 {
margin-bottom: 15px;
}
.footer_side p {
color: #ccc;
line-height: 1.5;
}
.footer_side ul {
list-style: none;
}
.footer_side ul li {
margin-bottom: 10px;
}
.footer_side ul li a {
color: #ccc;
text-decoration: none;
transition: 0.3s;
}
.footer_side ul li a:hover {
color: #00bafc;
}
.social_logo img {
width: 28px;
margin-right: 10px;
}
.social-links li {
margin: 10px 0;
}
.social-links a {
color: #ccc;
text-decoration: none;
}
Front-End Projects (HTML CSS SCSS)
https://github.com/sarvaribrokhimov001/Universal-Projects
Back then, I hadn’t worked on any projects with two or more pages—this was my very first one, which is why the project has that name.
These were all the projects we worked on together using only HTML, CSS, and SCSS.
❤1
If you're interested, you can also check out JavaScript and React projects on this channel: https://t.me/ibrokhimovjs
❤1
Front-End Projects (HTML CSS SCSS) pinned «If you're interested, you can also check out JavaScript and React projects on this channel: https://t.me/ibrokhimovjs»
<select> va <option> — HTML’da dropdown (tanlash ro‘yxati) yaratish uchun ishlatiladigan teglar. Formalarda juda ko‘p qo‘llaniladi.
🎯 <select> nima?
<select> — foydalanuvchiga bir yoki bir nechta variantni tanlash imkonini beradi.
<select>
<option>Olma</option>
<option>Banan</option>
</select>
🔑 <select> atributlari
🔹 name
Form yuborilganda qiymat nomi sifatida ketadi.
<select name="fruit">
🔹 multiple
Bir nechta variantni tanlash imkonini beradi.
<select multiple>
👉 Ctrl yoki Shift bilan bir nechta tanlanadi
🔹 size
Nechta element ko‘rinib turishini belgilaydi.
<select size="4">
🔹 required
Tanlash majburiy bo‘ladi.
<select required>
🔹 disabled
Select’ni o‘chiradi (foydalanib bo‘lmaydi)
<select disabled>
🔹 autofocus
Sahifa ochilganda avtomatik fokus oladi
<select autofocus>
🎯 <option> nima?
<option> — <select> ichidagi har bir variant.
<option value="apple">Olma</option>
🔑 <option> atributlari
🔹 value
Serverga yuboriladigan qiymat
<option value="apple">Olma</option>
👉 foydalanuvchi “Olma”ni ko‘radi, lekin "apple" yuboriladi
🔹 selected
Default tanlangan variant
<option selected>Olma</option>
🔹 disabled
Variantni tanlab bo‘lmaydi
<option disabled>Banan</option>
🔹 label
Ba’zi hollarda qisqa nom berish uchun ishlatiladi
<option value="apple" label="A">Olma</option>
🧩 To‘liq misol
<form>
<label>Meva tanlang:</label>
<select name="fruit" required>
<option value="">-- Tanlang --</option>
<option value="apple">Olma</option>
<option value="banana" disabled>Banan</option>
<option value="orange" selected>Apelsin</option>
</select>
<button type="submit">Yuborish</button>
</form>
🔥 Qo‘shimcha foydali teg: <optgroup>
Variantlarni guruhlash uchun ishlatiladi:
<select>
<optgroup label="Mevalar">
<option>Olma</option>
<option>Banan</option>
</optgroup>
<optgroup label="Sabzavotlar">
<option>Sabzi</option>
<option>Kartoshka</option>
</optgroup>
</select>
⚡️ Qisqa xulosa:
<select> → dropdown yaratadi
<option> → variantlar
value → yuboriladigan qiymat
selected → default tanlangan
multiple → ko‘p tanlash
🎯 <select> nima?
<select> — foydalanuvchiga bir yoki bir nechta variantni tanlash imkonini beradi.
<select>
<option>Olma</option>
<option>Banan</option>
</select>
🔑 <select> atributlari
🔹 name
Form yuborilganda qiymat nomi sifatida ketadi.
<select name="fruit">
🔹 multiple
Bir nechta variantni tanlash imkonini beradi.
<select multiple>
👉 Ctrl yoki Shift bilan bir nechta tanlanadi
🔹 size
Nechta element ko‘rinib turishini belgilaydi.
<select size="4">
🔹 required
Tanlash majburiy bo‘ladi.
<select required>
🔹 disabled
Select’ni o‘chiradi (foydalanib bo‘lmaydi)
<select disabled>
🔹 autofocus
Sahifa ochilganda avtomatik fokus oladi
<select autofocus>
🎯 <option> nima?
<option> — <select> ichidagi har bir variant.
<option value="apple">Olma</option>
🔑 <option> atributlari
🔹 value
Serverga yuboriladigan qiymat
<option value="apple">Olma</option>
👉 foydalanuvchi “Olma”ni ko‘radi, lekin "apple" yuboriladi
🔹 selected
Default tanlangan variant
<option selected>Olma</option>
🔹 disabled
Variantni tanlab bo‘lmaydi
<option disabled>Banan</option>
🔹 label
Ba’zi hollarda qisqa nom berish uchun ishlatiladi
<option value="apple" label="A">Olma</option>
🧩 To‘liq misol
<form>
<label>Meva tanlang:</label>
<select name="fruit" required>
<option value="">-- Tanlang --</option>
<option value="apple">Olma</option>
<option value="banana" disabled>Banan</option>
<option value="orange" selected>Apelsin</option>
</select>
<button type="submit">Yuborish</button>
</form>
🔥 Qo‘shimcha foydali teg: <optgroup>
Variantlarni guruhlash uchun ishlatiladi:
<select>
<optgroup label="Mevalar">
<option>Olma</option>
<option>Banan</option>
</optgroup>
<optgroup label="Sabzavotlar">
<option>Sabzi</option>
<option>Kartoshka</option>
</optgroup>
</select>
⚡️ Qisqa xulosa:
<select> → dropdown yaratadi
<option> → variantlar
value → yuboriladigan qiymat
selected → default tanlangan
multiple → ko‘p tanlash
❤1