Задать вопрос
@Evgenij_nechujveter
верстка

Как сделать такую примитивную верстку?

Ребят, нужна помощь. Не могу до конца довести верстку (только учусь верстке)
Я так понимаю здесь осталось padding изменить и font size угадать?

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>Испытание: макет-прототип</title>
    </head>
    <body>
        <div class="header">
            <div class="logo">Лого</div>
            <div class="contacts">+7 (812) 33-4-55</div>
        </div>
        <div class="about-us">
            <h1>Наша компания</h1>
            <p>Предлагает самые лучшие услуги по вёрстке HTML-страниц.</p>
            <p>Мы используем HTML5 и CSS3, создаём адаптивную вёрстку, применяем Progressive Enhancement.</p>
        </div>
        <div class="main-menu">
            <a href="#about">О нас</a><br>
            <a href="#contacts">Вакансии</a><br>
            <a href="#contacts">Контакты</a><br>
        </div>
        <div class="footer">
            &copy; 2015 — Keksby Web Production
        </div>
    </body>
</html>


/* Общие стили для документа и блоков, менять не надо */

body {
    width: 450px;
    margin: 0;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.logo,
.contacts,
.about-us,
.main-menu,
.footer {
    padding: 10px 20px 10px 20px;
    background-color: #f5f5f5;
    border: 2px solid #cccccc;
    font-size: 14px;
    
}

/* Собственные стили блоков */

.header {
    min-height: 40px;
    margin-bottom: 20px;
}

.logo {
    float: left;
    width: 230px;
    text-align: center;
    background-color: #333333;
    color: #ffffff;
}

.contacts {
    float: right;
    width: 110px;
    text-align: center;
    background-color: #333333;
    color: #ffffff;
}

.about-us {
    width: 230px;
    margin-bottom: 10px;
    float: left;
    
}

.about-us h1 {
    font-size: 20px;
}

.about-us p {
    font-size: 12px;
}

.main-menu {
    width: 110px;
    float: right;
}

.footer {
    clear: both;
    background-color: #333333;
    color: #ffffff;
    
}


Нужно чтобы было вот так:

4heUCpKpRsCakMZSY1FQ4g.png
  • Вопрос задан
  • 514 просмотров
3 комментария
Подписаться 1 Оценить 3 комментария
Пригласить эксперта
Ответы на вопрос 2
infern01it
@infern01it
учусь быть крутым front-end разработчиком :)
CodePen

body {
	width: 450px;
	margin: 0;
	padding: 10px;
	font-family: Arial, sans-serif;
	font-size: 14px;
}

.logo,
.contacts,
.about-us,
.main-menu,
.footer {
	padding: 10px 20px 10px 20px;
	background-color: #f5f5f5;
	border: 2px solid #cccccc;
}


/* Собственные стили блоков */

.header {
	min-height: 40px;
	margin-bottom: 20px;
}

.logo {
	float: left;
	width: 230px;
	text-align: center;
	background-color: #333333;
	color: #ffffff;
	font-weight: bold;
}

.contacts {
	float: right;
	width: 110px;
	text-align: center;
	background-color: #333333;
	color: #ffffff;
	font-style: italic;
}

.about-us {
	width: 230px;
	margin-bottom: 20px;
	font-size: 10px;
	float: left;
}

.about-us h1 {
	font-size: 20px;
}

.about-us p {
	font-size: 12px;
}

.main-menu {
	float: right;
	width: 110px;
}

.footer {
	clear: both;
	background-color: #333333;
	color: #ffffff;
}
Ответ написан
5 комментариев
5 комментариев
Krasnodar_etc
@Krasnodar_etc
avito front
Мы не умеем гадать, как оно выглядит сейчас ) Закинь код на codepen или jsfiddle
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Приложение или модуль для Wordpress для учета поездок по QR
25 апр. 2024, в 03:58
10000 руб./за проект
Ошибка в 1с при выгрузке товаров на сайт на Битриксе
25 апр. 2024, в 03:08
3000 руб./за проект
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Ещё заказы