Задать вопрос
@interneterrorhehe
html

Как разместить блоки так же как и на макете?

Я хочу сделать так:

61215b3437fcf531112506.png

У меня получается так:

61215b554de96652341557.png

вот мои коды:

html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
    	<div class="container">
      		<div id="text-head">
        		<h1>Product name</h1>
      		</div>
      		<div id="head-description">
        		<h2>Put on this page information about your product</h2>
        		<h2>A detailed description of your product</h2>
        		<h2>Tell us about the advantages and merits</h2>
        		<h2>Associate the page with the payment system</h2>
      		</div>
      		<div id="image-head">
        		<img src="image/Shape-9.png">
     	 	</div>
    	</div>
  	</header>
</body>
</html>


css:

*{
  margin: 0;
  padding: 0;
}
header{
  background: #445162;
  height: 378px;
  color: white;
}

.container{
  padding: 50px;
}

#text-head{
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 48px;
}

#head-description{
  line-height: 35px;
}

#image-head{
  border: 5px solid black;
  width: 470px;
  display: flex;
  justify-content: flex-end;
}
  • Вопрос задан
  • 528 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Фронтенд-разработчик
    11 месяцев
    Далее
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка
    3 месяца
    Далее
Решения вопроса 1
qwnofear
@qwnofear
Попробуйте так:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    	<div class="container">
        <div class="header">
          <div class="header__left">
          		<div id="text-head">
            		<h1>Product name</h1>
          		</div>
          		<div id="head-description">
            		<h2>Put on this page information about your product</h2>
            		<h2>A detailed description of your product</h2>
            		<h2>Tell us about the advantages and merits</h2>
            		<h2>Associate the page with the payment system</h2>
          		</div>
          </div>
          
          <div class="header__right">
        		<div id="image-head">
          		<img src="image/Shape-9.png">
       	 	</div>
      	</div>
      </div>
  	</header>
</body>
</html>


*{
  margin: 0;
  padding: 0;
}
header{
  background: #445162;
  height: 378px;
  color: white;
}

.header {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
}

.header__left {
  width: 60%;
}

.header__right {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

.container {
  padding: 50px;
}

#text-head{
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 48px;
}

#head-description{
  line-height: 35px;
}

#image-head{
  border: 5px solid black;
  width: 470px;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
HTML-верстальщик
ТехСофт
от 60 000 до 60 000 ₽
Frontend-разработчик (vanilla JS, high-load)
Karma8
от 200 000 ₽
Junior SEO-специалист
MST
от 600 до 800 $
Ещё вакансии