Как "отделить" часть. Flexbox
Как сделать второй блок (справа) так же как и на макете. Код прикреплен.
Дело в том, что если я задам margin-top второму блоку он подвинет и nav вниз, кстати из-за второго блока у меня уже nav и поехал( Желательно на флексах сделать блок, но главное без js, bootstrap, position absolute.
Мой сайт:
Мне необходимо чтобы было схоже с макетом:
Как мне сделать второй блок напротив nav
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400&family=Oswald:wght@200;300;400;700&family=Roboto+Condensed&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background: rgb(42, 61, 59);
/* font-family: 'Cormorant', serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto Condensed', sans-serif; */
}
.container {
display: flex;
margin: 0 auto;
width: 1110px;
}
.nav {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
height: 75px;
}
.nav__item {
font-family: 'Oswald';
font-weight: 400;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
.nav__search {
padding-left: 28px;
background-image: url('../assets/header/search.png');
background-repeat: no-repeat;
background-position: left
}
.info {
/* flex-basis: 430px; */
flex-grow: .4;
display: flex;
align-items: flex-end;
flex-direction: column;
}
.info__title {
font-family: 'Oswald';
font-weight: 400;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #43FFD2;
text-align: end;
}
.info__text {
font-family: 'Oswald';
font-weight: 300;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #FFFFFF;
line-height: 15px;
text-align: end;
}<!DOCTYPE html>
<html lang="ru">
<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>Lower Flower</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<a class="logo" href="#"><img src="assets/header/logo.png" alt="Логотип"></a>
<a class="nav__item" href="#">Каталог</a>
<a class="nav__item" href="#">Доставка и оплата</a>
<a class="nav__item" href="#">О нас</a>
<a class="nav__item" href="#">Контакты</a>
<a class="nav__item" href="#">FAQ</a>
<a class="nav__item nav__search" href="#">Поиск</a>
</nav>
<div class="info">
<div class="info__mail">
<p class="info__title">[email protected]</p>
<p class="info__text">Доставка 24/7 по договоренности с оператором</p>
</div>
<div class="info__street">
<p class="info__title">ул. Тимирязева 67</p>
<p class="info__text">10:00 до 21:00 <br>без выходных</p>
</div>
</div>
</div>
</header>
</body>Ответы (2 шт):
Автор решения: Gene Erbin
→ Ссылка
.nav {
flex-grow: 1;
display: flex;
align-items: center; <- убрать
justify-content: space-between;
}
.container {
display: flex;
margin: 0 auto;
width: 1110px;
padding-top: 20px; <- добавить (или margin-top)
}
Автор решения: Daniil Loban
→ Ссылка
Чтобы не сильно менять текущие стили я бы делал следующим образом. Для вложенного в info на первом уровне устанавливал margin-top:
.info > [class^=info__] {
margin-top: 30px;
}
А чтобы навигация не съезжала выровнял бы конкретно nav по старту:
.nav {
align-self: start;
}
Результат посмотреть можно тут:
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400&family=Oswald:wght@200;300;400;700&family=Roboto+Condensed&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background: rgb(42, 61, 59);
/* font-family: 'Cormorant', serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto Condensed', sans-serif; */
}
.container {
display: flex;
margin: 0 auto;
width: 1110px;
}
.nav {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
height: 75px;
}
.nav__item {
font-family: 'Oswald';
font-weight: 400;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
}
.nav__search {
padding-left: 28px;
background-image: url('../assets/header/search.png');
background-repeat: no-repeat;
background-position: left
}
.info {
/* flex-basis: 430px; */
flex-grow: .4;
display: flex;
align-items: flex-end;
flex-direction: column;
}
.info__title {
font-family: 'Oswald';
font-weight: 400;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #43FFD2;
text-align: end;
}
.info__text {
font-family: 'Oswald';
font-weight: 300;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #FFFFFF;
line-height: 15px;
text-align: end;
}
.info > [class^=info__] {
margin-top: 30px;
}
.nav {
align-self: start;
}<!DOCTYPE html>
<html lang="ru">
<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>Lower Flower</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<a class="logo" href="#"><img src="assets/header/logo.png" alt="Логотип"></a>
<a class="nav__item" href="#">Каталог</a>
<a class="nav__item" href="#">Доставка и оплата</a>
<a class="nav__item" href="#">О нас</a>
<a class="nav__item" href="#">Контакты</a>
<a class="nav__item" href="#">FAQ</a>
<a class="nav__item nav__search" href="#">Поиск</a>
</nav>
<div class="info">
<div class="info__mail">
<p class="info__title">[email protected]</p>
<p class="info__text">Доставка 24/7 по договоренности с оператором</p>
</div>
<div class="info__street">
<p class="info__title">ул. Тимирязева 67</p>
<p class="info__text">10:00 до 21:00 <br>без выходных</p>
</div>
</div>
</div>
</header>
</body>