@zavrikk

Как адаптировать сайт?

Не знаю как адаптировать страницу, не могу понять.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="preload" href="/fonts/FuturaBookC.ttf" as="font">
	<link rel="preload" href="/fonts/FuturaDemiC.ttf" as="font">
	<link rel="stylesheet" href="css/main.css">
	 <style type="text/css">
        	 @font-face {
    font-family: FuturaDemiC; 
    src: url(fonts/FuturaDemiC.ttf); 
   }
   	 @font-face {
    font-family: FuturaBookC; 
    src: url(fonts/FuturaBookC.ttf); 
   }
        </style>  
</head>
<body>
	<header id="header" class="header">
		<div class="container" >
			<div class="header1">
				<div class="nav">
					<ul class="menu">
					<li>
						<a href="#">
							Главная
						</a>
					</li>
					<li>
						<a href="#">
							Руководитель
						</a>
					</li>
					<li>
						<a href="#">
							Студенты
						</a>
					</li>
					<li>
						<a href="#">
							Проекты
						</a>
					</li>
				</ul>
				</div>
				<div class="logo">
				<div class="offer">
				<h1> ПРОЕКТНАЯ <br>ЛАБОРАТОРИЯ </h1>
				<p>кафедра математики</p>
			</div>

			<div class="offer-right">
				<img src="img/logo-header.svg" alt="logo" style="margin-top: 100px; border: solid;">
			</div>
			
			</div>

			</div>
		</div>
		
	</header>

	<section id="about" class="about">
		<div class="container" >
			<div class="description">
				<div class="one">
					<div class="one1">
					<img src="img/1.svg" style="width: 450px; border: solid;" >
				</div>
				<div class="des-1">
					<h1>Что такое лаборатория?</h1>
					<p>Лаборатория - это обьединение единомышленчерез проведение различных мероприятий в активной форме</p>
				</div>
			</div>
			<div class="two">
				<div class="des-2">
					<h1>Чем мы занимаемся?</h1>
					<p>Научной, прикладной и творческой деятельностью</p>
				</div>
				<div class="two2">
					<img src="img/2.svg" style="width: 450px; border: solid;" >
				</div>
			</div>
			<div class="three">
				<div class="three3">
				<img src="img/3.svg" style="width: 450px; border: solid;">
			</div>
			<div class="des-3">
				<h1>для чего?</h1>
				<p>У участников появляется возможность не только развить свой потенциал, но и пробовать себя в других направлениях деятельности через мастер-классы, исследовательскую и творческую деятельность.</p>
			</div>
			</div>
			<div class="for">
				<div class="des-4">
					<h1>присоединяйся</h1>
					<p>Нет иерархии в отношениях участников. Задачи решаются совместно, согласовано, происходит обмен знаниями. Такой подход к работе является очень эффективным.</p>
				</div>
				<div class="for4">
					<img src="img/4.svg" alt="" style="width: 450px; border: solid;" >
				</div>
			</div>

		</div>
		</div>
	</section>

	<section id="objective" class="objective" >
		<div class="container">
			<div class="objective1">
				<h1>основные задачи лаборатории</h1>
			</div>
			<div class="objj1">
			<div class="obj-1">
				<hr align="center" > 
				<p>повышение проффесионального мастерства учеников</p>
			</div>
			<div class="obj-2">
				<hr align="center" > 
				<p>поддерка творческой молодежи, использующей в своей работе инновационный и передовой опыт</p>
			</div>
		</div>
		<div class="objj2">
			<div class="obj-3">
				<hr align="center" >
				<p>совершенствование подходов к организации образовательного и творческого процесса с ориентацией на развитие личности   </p>
			</div>
			<div class="obj-4">
				<hr align="center" >
				<p>представлению возможности для самореализации и развития потенциала</p>
			</div>
		</div>
		</div>
	</section>


	<footer id="footer" class="footer">
		<div class="container">
			<div class="footer-text">
				<p>©1994—2021 УГНТУ</p>
				<p>koledinsrg@gmail.com</p>
			</div>
			<div class="icons">
				<a class="instagram" href="https://www.instagram.com/bni_rusoil/">
					<img src="img/inst.svg" alt="">
				</a>
				<a class="vk" href="https://m.vk.com/digital_track?from=groups%253Fact%253Dlist"><img src="img/vk.svg" alt=""></a>
			</div>
		</div>
	</footer>

</body>
</html>

body {
	padding: 0;
	margin: 0;
	color: black;
	font-size: 16px;
	font-family: FuturaBookC;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	text-transform: uppercase;
}

h1 {
	font-family: FuturaDemiC;
}

a {
	text-decoration: none;
}

p {
	margin: 0;
	font-size: 25px;
}

ul, li {
	display: block;
	padding: 0;
	margin: 0;
}

section {
	padding-top: 160px;
}

section h1 {
	margin-bottom: 40px;

}

.container {
	width: 1170px;
	/*позиционирование по центру*/
	margin: 0 auto; 
}

.header {
	background: linear-gradient(to right, #00a2ff, #00ffb4);
	width: 100%;
	height: 800px;
	padding-top: 110px;
}

.header1 {
	width: 1000px;
	height: 600px;
	background: #fff;
    margin: 0 auto;

    
}

header a {
	color: #000;
}

.menu {
	display: flex;
	margin-left: 450px;
	padding-top: 20px;

}

.menu li a {
	text-transform: capitalize;
	font-size: 24px;
}

.menu li a:hover {
	border-bottom: 1px solid #fff;
}

.menu li {
	margin-right: 40px;
}

.nav {
	align-items: center;
}

.logo {
	display: flex;
}

.offer {
	margin-top: 200px;
	margin-left: 50px;
}

.offer p {
	text-transform: uppercase;
}
.offer-right {
	float: right;
}
.offer-right {
	margin-left: auto;
}


.one, .two, .three {
	display: flex;
	margin-bottom: 150px;
}


.des-1, .des-3{
	width: 450px;
	margin-left: 200px;
	margin-top: 30px;
}

.for {
	display: flex;
}

.des-2, .des-4{
	width: 450px;
	margin-right: 200px;
	margin-top: 30px;
}

.objective1 h1{
	text-align: center;
	font-family: FuturaDemiC;
	margin-bottom: 73px;
}

.obj-1, .obj-2, .obj-3, .obj-4{
	width: 500px;
	text-align: center;
}

hr {
	border: none; 
    border-top: 2px solid #FFF623; 
    width: 100px;
    margin-top: 70px;
}


.objj1, .objj2{
	margin-bottom: 73px;
	display: flex;
	justify-content: space-between;
}

.footer{
	padding-top: 25px;
	width: 100%;
	height: 100px;
	background: #757575;
}

.footer p{
	font-size: 15px;
	margin-bottom: 10px;
}
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
Что Конкретно не понятно?
Как делаются медиа-запросы, вот ссылка:
https://basicweb.ru/css/css_pr_media.php
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы