its-otabek/gist:73fb1237471dcd5096da23f67b5afac3

## gistfile1.txt
<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green Stay - Ekologik Toza Dam Olish</title>
    <style>
        /* Umumiy sozlamalar */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            color: #333;
            line-height: 1.6;
        }

        /* Header */
        header {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        header input[type="text"] {
            width: 40%;
            padding: 10px;
            margin-top: 10px;
            border: none;
            border-radius: 5px;
            outline: none;
            font-size: 1rem;
        }

        header nav {
            margin-top: 20px;
        }

        header nav ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        header nav ul li {
            margin-right: 20px;
        }

        header nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
        }

        header nav ul li a:hover {
            text-decoration: underline;
        }

        /* Main Section */
        main {
            padding: 20px;
        }

        h2, h3 {
            color: #333;
        }

        .houses {
            display: flex;
            justify-content: space-around;
            margin-top: 40px;
            flex-wrap: wrap; /* Responsivlikni yaxshilash */
        }

        .house {
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 20px;
            width: 30%;
            transition: transform 0.3s ease-in-out;
            margin-bottom: 20px;
        }

        .house:hover {
            transform: translateY(-10px);
        }

        .house h3 {
            color: #4CAF50;
            font-size: 1.8rem;
        }

        .house p {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        .house button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .house button:hover {
            background-color: #45a049;
        }

        /* Blog Section */
        .blog {
            background-color: #fff;
            padding: 20px;
            margin-top: 40px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .blog .post {
            margin-bottom: 20px;
        }

        .blog h2 {
            color: #333;
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .blog .post h3 {
            color: #4CAF50;
            font-size: 1.5rem;
        }

        .blog .read-more-btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.3s;
        }

        .blog .read-more-btn:hover {
            background-color: #45a049;
        }

        /* Contact Section */
        .contact {
            background-color: #fff;
            padding: 20px;
            margin-top: 40px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .contact h2 {
            color: #333;
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .contact form {
            display: flex;
            flex-direction: column;
        }

        .contact input,
        .contact textarea {
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
            outline: none;
        }

        .contact input[type="text"],
        .contact input[type="email"] {
            width: 100%;
        }

        .contact textarea {
            width: 100%;
            height: 150px;
            resize: vertical;
        }

        .contact button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .contact button:hover {
            background-color: #45a049;
        }

        /* Footer */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            margin-top: 40px;
        }

        footer p {
            font-size: 1rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            header input[type="text"] {
                width: 80%;
            }

            .houses {
                flex-direction: column;
                align-items: center;
            }

            .house {
                width: 80%;
            }
        }

        /* Slider Styles (for visual elements) */
        .slider {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 10px;
        }

        .slider img {
            width: 100%;
            height: auto;
            display: block;
        }

        .slider-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }

        .slider-controls button {
            background-color: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
            font-size: 2rem;
            padding: 10px;
            cursor: pointer;
        }

        .slider-controls button:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

    </style>
</head>
<body>
    <header>
        <h1>Ekologik Toza Dam Olish Uylari</h1>
        <input type="text" id="search" placeholder="Qidirish...">
        <nav>
            <ul>
                <li><a href="#home">Bosh sahifa</a></li>
                <li><a href="#houses">Uylarga qarash</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#contact">Aloqa</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- Slider for Houses -->
        <section id="houses" class="houses">
            <h2>Ekologik Uylarga Qarash</h2>
            <div class="slider">
                <img src="house1.jpg" alt="Green Villa">
                <div class="slider-controls">
                    <button>&lt;</button>
                    <button>&gt;</button>
                </div>
            </div>
            <div class="house">
                <h3>Green Villa</h3>
                <p><strong>Joylashuv:</strong> Toshkent, O'zbekiston</p>
                <p><strong>Narx:</strong> $120/kun</p>
                <p><strong>Xususiyatlar:</strong> Quyosh energiyasi, suvni tejash</p>
                <button class="book-btn">Bron qilish</button>
            </div>
            <div class="house">
                <h3>Forest Retreat</h3>
                <p><strong>Joylashuv:</strong> Almaty, Qozog'iston</p>
                <p><strong>Narx:</strong> $150/kun</p>
                <p><strong>Xususiyatlar:</strong> Ekologik uy, tabiiy gazanlar</p>
                <button class="book-btn">Bron qilish</button>
            </div>
            <div class="house">
                <h3>Mountain Eco Lodge</h3>
                <p><strong>Joylashuv:</strong> Bishkek, Qirg'iziston</p>
                <p><strong>Narx:</strong> $90/kun</p>
                <p><strong>Xususiyatlar:</strong> Bio materiallar, quyosh batareyalari</p>
                <button class="book-btn">Bron qilish</button>
            </div>
        </section>

        <section id="blog" class="blog">
            <h2>Blog</h2>
            <div class="post">
                <h3>Ekologik Turizmning Afzalliklari</h3>
                <p>Ekologik turizm haqida ko‘proq bilib oling va yashil turizmni rivojlantirishga yordam bering...</p>
                <button class="read-more-btn">Batafsil</button>
            </div>
            <div class="post">
                <h3>Ekologik Uyda Yashashning 5 Sababi</h3>
                <p>Yashil uylar nafaqat tabiatga zarar keltirmaydi, balki foydalanuvchilarga bir qancha afzalliklar taqdim etadi...</p>
                <button class="read-more-btn">Batafsil</button>
            </div>
        </section>

        <section id="contact" class="contact">
            <h2>Aloqa</h2>
            <p>Biz bilan bog‘laning:</p>
            <form action="#">
                <input type="text" name="name" placeholder="Ismingiz" required>
                <input type="email" name="email" placeholder="Email" required>
                <textarea name="message" placeholder="Xabar..." required></textarea>
                <button type="submit">Yuborish</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Green Stay - Barcha huquqlar himoyalangan.</p>
    </footer>
</body>
</html>
	<!DOCTYPE html>
	<html lang="uz">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Green Stay - Ekologik Toza Dam Olish</title>
	<style>
	/* Umumiy sozlamalar */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: Arial, sans-serif;
	background-color: #f7f7f7;
	color: #333;
	line-height: 1.6;
	}

	/* Header */
	header {
	background-color: #4CAF50;
	color: white;
	padding: 20px;
	text-align: center;
	}

	header h1 {
	font-size: 2.5rem;
	margin-bottom: 10px;
	}

	header input[type="text"] {
	width: 40%;
	padding: 10px;
	margin-top: 10px;
	border: none;
	border-radius: 5px;
	outline: none;
	font-size: 1rem;
	}

	header nav {
	margin-top: 20px;
	}

	header nav ul {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: center;
	}

	header nav ul li {
	margin-right: 20px;
	}

	header nav ul li a {
	color: white;
	text-decoration: none;
	font-size: 1.1rem;
	}

	header nav ul li a:hover {
	text-decoration: underline;
	}

	/* Main Section */
	main {
	padding: 20px;
	}

	h2, h3 {
	color: #333;
	}

	.houses {
	display: flex;
	justify-content: space-around;
	margin-top: 40px;
	flex-wrap: wrap; /* Responsivlikni yaxshilash */
	}

	.house {
	background-color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 20px;
	width: 30%;
	transition: transform 0.3s ease-in-out;
	margin-bottom: 20px;
	}

	.house:hover {
	transform: translateY(-10px);
	}

	.house h3 {
	color: #4CAF50;
	font-size: 1.8rem;
	}

	.house p {
	font-size: 1.1rem;
	margin-bottom: 10px;
	}

	.house button {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	}

	.house button:hover {
	background-color: #45a049;
	}

	/* Blog Section */
	.blog {
	background-color: #fff;
	padding: 20px;
	margin-top: 40px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	}

	.blog .post {
	margin-bottom: 20px;
	}

	.blog h2 {
	color: #333;
	font-size: 2rem;
	margin-bottom: 20px;
	}

	.blog .post h3 {
	color: #4CAF50;
	font-size: 1.5rem;
	}

	.blog .read-more-btn {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.3s;
	}

	.blog .read-more-btn:hover {
	background-color: #45a049;
	}

	/* Contact Section */
	.contact {
	background-color: #fff;
	padding: 20px;
	margin-top: 40px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	}

	.contact h2 {
	color: #333;
	font-size: 2rem;
	margin-bottom: 20px;
	}

	.contact form {
	display: flex;
	flex-direction: column;
	}

	.contact input,
	.contact textarea {
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1rem;
	outline: none;
	}

	.contact input[type="text"],
	.contact input[type="email"] {
	width: 100%;
	}

	.contact textarea {
	width: 100%;
	height: 150px;
	resize: vertical;
	}

	.contact button {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	}

	.contact button:hover {
	background-color: #45a049;
	}

	/* Footer */
	footer {
	background-color: #333;
	color: white;
	text-align: center;
	padding: 10px;
	margin-top: 40px;
	}

	footer p {
	font-size: 1rem;
	}

	/* Responsive Design */
	@media (max-width: 768px) {
	header input[type="text"] {
	width: 80%;
	}

	.houses {
	flex-direction: column;
	align-items: center;
	}

	.house {
	width: 80%;
	}
	}

	/* Slider Styles (for visual elements) */
	.slider {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 20px auto;
	overflow: hidden;
	border-radius: 10px;
	}

	.slider img {
	width: 100%;
	height: auto;
	display: block;
	}

	.slider-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	}

	.slider-controls button {
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	color: white;
	font-size: 2rem;
	padding: 10px;
	cursor: pointer;
	}

	.slider-controls button:hover {
	background-color: rgba(0, 0, 0, 0.8);
	}

	</style>
	</head>
	<body>
	<header>
	<h1>Ekologik Toza Dam Olish Uylari</h1>
	<input type="text" id="search" placeholder="Qidirish...">
	<nav>
	<ul>
	<li><a href="#home">Bosh sahifa</a></li>
	<li><a href="#houses">Uylarga qarash</a></li>
	<li><a href="#blog">Blog</a></li>
	<li><a href="#contact">Aloqa</a></li>
	</ul>
	</nav>
	</header>

	<main>
	<!-- Slider for Houses -->
	<section id="houses" class="houses">
	<h2>Ekologik Uylarga Qarash</h2>
	<div class="slider">
	<img src="house1.jpg" alt="Green Villa">
	<div class="slider-controls">
	<button><</button>
	<button>></button>
	</div>
	</div>
	<div class="house">
	<h3>Green Villa</h3>
	<p><strong>Joylashuv:</strong> Toshkent, O'zbekiston</p>
	<p><strong>Narx:</strong> $120/kun</p>
	<p><strong>Xususiyatlar:</strong> Quyosh energiyasi, suvni tejash</p>
	<button class="book-btn">Bron qilish</button>
	</div>
	<div class="house">
	<h3>Forest Retreat</h3>
	<p><strong>Joylashuv:</strong> Almaty, Qozog'iston</p>
	<p><strong>Narx:</strong> $150/kun</p>
	<p><strong>Xususiyatlar:</strong> Ekologik uy, tabiiy gazanlar</p>
	<button class="book-btn">Bron qilish</button>
	</div>
	<div class="house">
	<h3>Mountain Eco Lodge</h3>
	<p><strong>Joylashuv:</strong> Bishkek, Qirg'iziston</p>
	<p><strong>Narx:</strong> $90/kun</p>
	<p><strong>Xususiyatlar:</strong> Bio materiallar, quyosh batareyalari</p>
	<button class="book-btn">Bron qilish</button>
	</div>
	</section>

	<section id="blog" class="blog">
	<h2>Blog</h2>
	<div class="post">
	<h3>Ekologik Turizmning Afzalliklari</h3>
	<p>Ekologik turizm haqida ko‘proq bilib oling va yashil turizmni rivojlantirishga yordam bering...</p>
	<button class="read-more-btn">Batafsil</button>
	</div>
	<div class="post">
	<h3>Ekologik Uyda Yashashning 5 Sababi</h3>
	<p>Yashil uylar nafaqat tabiatga zarar keltirmaydi, balki foydalanuvchilarga bir qancha afzalliklar taqdim etadi...</p>
	<button class="read-more-btn">Batafsil</button>
	</div>
	</section>

	<section id="contact" class="contact">
	<h2>Aloqa</h2>
	<p>Biz bilan bog‘laning:</p>
	<form action="#">
	<input type="text" name="name" placeholder="Ismingiz" required>
	<input type="email" name="email" placeholder="Email" required>
	<textarea name="message" placeholder="Xabar..." required></textarea>
	<button type="submit">Yuborish</button>
	</form>
	</section>
	</main>

	<footer>
	<p>© 2025 Green Stay - Barcha huquqlar himoyalangan.</p>
	</footer>
	</body>
	</html>