Проверьте правильность
Так как я обучаюсь сам - мне неуково спросить про ошибки.
Проверьте пожалуйста на правильность. Достаточно сказать где не так и всё, дальше я сам разберусь <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style-main1.css"> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style2.css"> </head> <body> <!-- Меню --> <nav class="navbar"> <div class="container"> <a href="#" class="navbar-brand">Логотип</a> <div class="navbar-menu"> <ul class="navbar-wrap"> <li><a href="#">Покупка</a></li> <li><a href="#">Доставка</a></li> <li><a href="#">Корзина</a></li> <li><a href="#">Главная</a></li> </ul> </div> <a href="#" class="callback">Обратная связь</a> </div> </div> </nav> <!-- Верхний блок ФОНА --> <div class="background-main"></div> <!-- Карточки товара --> <div class="wrapper"> <!-- Первая карточка --> <div class="card"> <img src="https://img.freepik.com/premium-photo/milk-bottle-mock-up_1051-2381.jpg" alt="Молоко"> <div class="content"> <div class="row"> <div class="details"> <span>Молоко</span> <p>Коровье молоко</p> </div> <div class="price">150 $</div> </div> <button>Купить</button> <button>В корзину</button> </div> </div> <!-- Вторая карточка --> <div class="card"> <img src="https://img2.freepng.ru/20180511/ute/kisspng-pizza-cheese-drawing-coloring-book-5af519a1752196.0167868915260123214798.jpg" alt="Сыр"> <div class="content"> <div class="row"> <div class="details"> <span>Сыр</span> <p>Натуральный сыр</p> </div> <div class="price">350 $</div> </div> <button>Купить</button> <button>В корзину</button> </div> </div> <!-- Третья карточка --> <div class="card"> <img src="https://free-png.ru/wp-content/uploads/2022/06/free-png.ru-550.png" alt="Масло"> <div class="content"> <div class="row"> <div class="details"> <span>Масло</span> <p>Коровье масло</p> </div> <div class="price">150 $</div> </div> <button>Купить</button> <button>В корзину</button> </div> </div> </div> </body> </html> CSS .navbar { width: 100%; height: 70px; box-shadow: 0 4px 10px rgba(0, 0, 0, .1) } .navbar .container { height: inherit; display: flex; justify-content: space-between; align-items: center; } .navbar-menu { margin-bottom: 0; padding-left: 0; list-style-type: none; } .navbar-menu>ul>li { display: inline-block } .navbar-menu>ul>a { display: inline-block; } .navbar-brand { font-weight: 700; font-size: 26px; padding-left: 20px; display: inline-block; text-decoration: none; color: #000; transition: all 0.3s ease-in-out; } ul li a { padding: 26px; opacity: 0.6; color: #000; display: inline-block; text-decoration: none; font-size: 15px; text-decoration: none; } .callback { margin-right: 20px; padding: 16px 30px; border-radius: 100px; transition: all .1s ease-out; display: inline-block; background-color:blanchedalmond; text-decoration: none; color: #ff0000; box-shadow: 1px 2px 5px #000; } .callback:hover { transform: scale(1.07); transition: all 0.3s ease-out; box-shadow: 4px 5px 3px; } .navbar-wrap>li>a:hover{ opacity: 1; transition: all 0.3s ease-in-out; } .navbar-brand:hover{ transition: all step-end; text-decoration: overline; transition: all 1s ease-out; } /* Верхний блок */ .background-main { height: 300px; box-shadow: 0 0 10px; margin: 50px; border-radius: 15px; } .background-main { background:url(car.png) right bottom no-repeat, url(bg_repeat.jpg) } /* Карточки товара */ .wrapper { font-family: Arial, Helvetica, sans-serif; max-width: 1130px; display: flex; align-items: center; margin: 0 auto; } .wrapper .card { height: 540px; text-align: center; } .wrapper .card img { object-fit: cover; border-radius: 10px; padding-left: 150px; position: relative; } .wrapper .card .content { padding: 10px 20px 20px 10px; } .content .row .details span { font-weight: 700; font-size: 20px; } .content .row .details p { color: #333; font-size: 14px; font-weight: 400; } .content .row .details p { padding-left: 150px; } .content .row .details span { padding-left: 150px; } .content .row .price { padding-left: 150px; } button { position: relative; left: 75px; margin: 0px 5px; } Скрин. https://skr.sh/sKBb85FcVCf?a |
Почему lang="en", если все на русском?
Вместо слишком общего селектора ul li a я бы сделал более конкретный .navbar-wrap li a мало ли какой ul понадобится еще сделать Непонятно, зачем такие длинные селекторы? .content .row .details span .content .row .details p Почему не дать этим span и p свои классы? А вдруг понадобится ввести в .details еще какой-нибудь span Ну и я обычно размеры стараюсь ставить в относительных единицах (em), а не px По картинку непонятно как это все выглядит при разных размерах окна. |
Спасибо.
При разных размерах окна знаю, но пока не умею это исправлять, делаю пока что как могу. Про селекторы понял Просто ul li a тоже Еще раз спасибо |
Часовой пояс GMT +3, время: 14:33. |