Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.12.2021, 11:58   #1
Greory
Новичок
Джуниор
 
Регистрация: 08.12.2021
Сообщений: 1
По умолчанию Как сверстать правильно карточки и фон?

В общем история такая, сижу 4й час и не понимаю как сделать все красиво
Как поставить задний фон - "волну" и чтоб картинки не растягивались, недочетов много, буду очень благодарен и признателен за помощь!

P.S Картинку приложил, как должно получится


Код:
Цитата:
<!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="/Css/style.css"> <link rel="stylesheet" href="/Css/style2.css"> </head> <body> <div class="main_contaner"> <div class="back_home"> <a href="program.html" class="back">Назад</a> </div> <div class="modul">Модули курса Веб-верстка</div> <div class="parent"> <ul class="list"> <li class="child"> <div class="card"> <img class="image_one" src="/img/1.jpeg" alt=""> <div class="info_menu"> <h3 class="header_color">Введение</h3> <p class="list_info">Как работают сайты.Верстка</p> <p class="list_info">Возможности HTML, CSS, JS</p> <p class="list_info">Редактор кода. Codepen</p> <p class="list_info">Работа с DevTools</p> </div> </div> <div class="number">01</div> </li> <li class="right child"> <div class="card"> <img class="image_one" src="/img/2.jpeg" alt=""> <div class="info_menu"> <h3 class="header_color">Базовый HTML</h3> <p class="list_info">Базовые теги</p> <p class="list_info">Теги картинок и ссылок</p> <p class="list_info">Теги таблиц</p> <p class="list_info">Служебные теги</p> <p class="list_info">Кодстайл HTML</p> </div> </div> <div class="number">02</div> </li> <li class="child"> <div class="card"> <img class="image_one" src="/img/3.jpeg" alt=""> <div class="info_menu"> <h3 class="header_color">Базовый CSS</h3> <p class="list_info">Подключение CSS</p> <p class="list_info">Вес селектора</p> <p class="list_info">Свойство display</p> <p class="list_info">Блочная модель и позиционирование</p> <p class="list_info">Кодстайл CSS</p> </div> </div> <div class="number">03</div> </li> <li class="right child"> <div class="card"> <img class="image_one" src="/img/4.jpeg" alt=""> <div class="info_menu"> <h3 class="header_color">Работа с макетом</h3> <p class="list_info">Про форматы изображений</p> <p class="list_info">Работа с макетом в Photoshop</p> <p class="list_info">Работа с макетом Figma</p> </div> </div> <div class="number">04</div> </li> </ul> </div> <div class="btn_center"> <button class="btn">Показать ещё</button> </div> </div> </body> </html>

Код:
Цитата:
/* Modules ========================== */ .main_contaner { width: 1180px; margin: 0 auto; } .back_home { padding-top: 70px; } .modul { margin-top: 35px; font-size: 48px; font-weight: bold; font-family: "Gilroy Medium", sans-serif; } .parent { width: 1150px; margin: 0 auto; margin-top: 70px; } .right { margin-right: 0; } .list { padding: 0; margin: 0; } .child { width: 481px; min-height: 501px; border: 1px solid black; display: inline-block; margin-left: 62px; margin-bottom: 15px; position: relative; } .card { position: relative; } .image_one { width: 479px; height: 176px; } .info_menu { position: absolute; left: 50px; } .number { position: absolute; right: 20px; bottom: 20px; color: #eaeaea; font-size: 48px; } .header_color { font-size: 36px; color: #2f1ce4; } .list_info { font-size: 16px; } .btn_center { text-align: center; margin-top: 95px; } /*=============================== */ /* Кнопка =============================== ================ */ .btn { width: 278px; height: 78px; font-size: 18px; border: 3px solid #2f1ce4; color: #2f1ce4; background-color: Transparent; cursor: pointer; } /*=============================== */
Изображения
Тип файла: jpg Как должно.jpg (33.9 Кб, 0 просмотров)
Greory вне форума Ответить с цитированием
Старый 10.12.2021, 08:05   #2
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Сообщений: 17,758
По умолчанию

У меня такой вопрос, вы же платите скиллбокс? ))
Alar вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сверстать GRID Krasi HTML и CSS 1 27.09.2021 20:18
Как сверстать border-radius в IE? zayabelka HTML и CSS 2 24.07.2012 09:06
Как создать карточки. Керимов Помощь студентам 0 11.11.2011 21:46
Как правильно изменить фон в объекте, полученном через getElementById Stilet JavaScript, Ajax 3 11.11.2010 17:34
Как сверстать такой блок Manonia HTML и CSS 10 19.02.2010 12:57