Стандартные моменты при верстке. Часть 1

Как сделать, что бы блок с каруселью был на всю высоту экрана

Для этого добавляем в нужный блок строку

height: calc(100vh - 100px); где "100px" - это высота которая будет отведена к верхнему меню сайта над каруселью.

т.е к примеру будет так

.container-001 {
    background-color: #ffffff;}
.container-001-content {
    height: calc(100vh - 100px);
    border: 1px solid;
    background-color: #ffffff;
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 15px 10px;}

 

Бэкграунд ко всему контейнеру

HTML

	<div class="container-004 overlay-black" style="background-image: url(assets/images/back001.jpg);">
		<div class="container-004-content">

		</div>
	</div>

CSS

.container-004 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;}
.container-004-content {
    width: 1200px;
    height: 600px;
    margin: auto;
    display: flex;
    justify-content: center;
    padding: 50px 10px 50px 10px;}

 

Как сделать наслоение блоков друг на друга

Как сделать наслоение блоков друг на друга

В данном примере контент 3 блока наслаивается на 4 блок.

HTML

	<div class="container-003">
		<div class="container-003-content">
			<div class="container-003__info">
				<p class="container-003__info-text">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
				<div class="container-003__info-link">
					<a class="container-003__info-link-lnk" href="">Заказать звонок</a>
				</div>
			</div>
		</div>
	</div>





	<div class="container-004 overlay-black" style="background-image: url(assets/images/back001.jpg);">
		<div class="container-004-content">

		</div>
	</div>

CSS

.container-003-content {
    width: 1200px;
    margin: 0px auto -70px auto;
    display: flex;
    justify-content: center;
    padding: 50px 10px 50px 10px;
    position: relative;
    z-index: 10;}

 

Как заполнить всю высоту блока от Header до Footer если мало контента 

HTML

	<div class="container-page-001 overlay-black" style="background-image: url(<?=$image_page;?>);">
		<div class="container-page-001-content">
			ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
		</div>
	</div>

	<div class="container-page-002">
		<div class="container-page-002-content">
			КОНТЕНТ	
		</div>
	</div>

CSS

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;}

.container-page-002 {
    background-color: #000000;
    flex-grow: 1;}

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены