Выполни следующее на языке HTML и CSS: 1. Добавь верхнее меню и футер с оформлением 2. Добавь галерею из 3 других товаров в ряд, а также их описание с ценами 3. Адаптируй карты товаров под

Вопрос пользователя:

Выполни следующее на языке HTML и CSS: 1. Добавь верхнее меню и футер с оформлением 2. Добавь галерею из 3 других товаров в ряд, а также их описание с ценами 3. Адаптируй карты товаров под разные устройства

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Store</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <div class="gallery">
        <div class="product">
            <img src="product1.jpg" alt="Product 1">
            <h3>Product 1</h3>
            <p>$20</p>
        </div>
        <div class="product">
            <img src="product2.jpg" alt="Product 2">
            <h3>Product 2</h3>
            <p>$30</p>
        </div>
        <div class="product">
            <img src="product3.jpg" alt="Product 3">
            <h3>Product 3</h3>
            <p>$25</p>
        </div>
    </div>
</main>

<footer>
    <p>&copy; 2021 Online Store. All rights reserved.</p>
</footer>

</body>
</html>

CSS:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

.gallery {
    display: flex;
    justify-content: space-around;
}

.product {
    text-align: center;
    margin: 10px;
}

.product img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

Этот код создаст простую страницу с верхним меню, галереей из трех товаров и футером. Галерея будет отображаться в ряд, а верхнее меню и футер будут стилизованы.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Store</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <div class="gallery">
        <div class="product">
            <img src="product1.jpg" alt="Product 1">
            <h3>Product 1</h3>
            <p>$20</p>
        </div>
        <div class="product">
            <img src="product2.jpg" alt="Product 2">
            <h3>Product 2</h3>
            <p>$30</p>
        </div>
        <div class="product">
            <img src="product3.jpg" alt="Product 3">
            <h3>Product 3</h3>
            <p>$25</p>
        </div>
    </div>
</main>

<footer>
    <p>&copy; 2021 Online Store. All rights reserved.</p>
</footer>

</body>
</html>

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

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

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

.gallery {
    display: flex;
    justify-content: space-around;
}

.product {
    text-align: center;
    margin: 10px;
}

.product img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: