<!DOCTYPE html>
<html lang="en">
<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<title>Iphone 14 pro</title>
</head>
<body>
<header class="header">
<div class="container">
<nav class="nav">
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-link">Что нового</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Цвет</a>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Заказать</a>
</li>
</ul>
<a class="logo">
<img src="img/logo.svg" alt="логотип" class="logo-img">
</a>
<a href="tel:380504565656" class="phone">+38 050-456-56-56</a>
</nav>
</div>
</header>
<main class="main">
<section class="headline">
<div class="container">
<h1 class="title">IPHONE 14 PRO</h1>
<img src="img/iphone.png" alt="IPHONE 14 PRO" class="headline-img">
<a href="#" class="headline-btn">ВЫБРАТЬ</a>
</div>
</section>
<section class="new">
<div class="container">
<h2 class="new-title">ЧТО НОВОГО</h2>
<div class="new-info">
<div class="new-text">
<p>Все модели оснащены однокристальной системой A16 Bionic, 48-мегапиксельной основной камерой и экранами ProMotion с
защитой Ceramic Shield и частотным диапазоном 1 — 120 Гц, а также ускоренной памятью LPDDR5. Дизайн линейки обновлен, на
фронтальной панели смартфонов два выреза. </p>
<p>Все iPhone 14 в США будут продаваться без лотка для SIM-карт: производитель заявляет, что улучшенная технология eSIM позволит перенести старые
электронные сим-карты на новые смартфоны.
</p>
<p>Обновлены фронтальная камера (она снабжена автофокусом и быстрее распознает пользователя в условиях недостаточной освещенности) и сенсор основной камеры.
</p>
<b>
iPhone 14 Pro вышел в новом дизайне — без фирменной «челки». Также в ассортименте появился новый цвет. В смартфоне, в отличие от «обычных»
14-х айфонов, установлен процессор A16 Bionic, который может
за секунду производить 4 трлн операций с фото.
</b>
</div>
<img class="images-new" src="img/iphone-news1.jpg" alt="iphone news">
</div>
</div>
</section>
<section class="color">
<div class="container">
<h2 class="color-title">
ВЫБЕРИ СВОЙ ЦВЕТ
</h2>
<ul class="color-list">
<li class="color-item">
<img src="img/color-1.jpg" alt="">
<h3>Silver</h3>
<p>серебристый</p>
</li>
<li class="color-item">
<img src="img/color-2.jpg" alt="">
<h3>Deep purple</h3>
<p>темно фиолетовый</p>
</li>
<li class="color-item">
<img src="img/color-3.jpg" alt="">
<h3>Gold</h3>
<p>золотой</p>
</li>
<li class="color-item">
<img src="img/color-4.jpg" alt="">
<h3>Space Black</h3>
<p>космический черный</p>
</li>
</ul>
<!смотреть на верстка сайта для начинающих 2.56.05!>
</div>
</section>
<section class:"contacts">
<div class="container">
<div class="contacts-inner">
<form class="contacts-form" action="#">
<h2 class="contacts-title">ХОЧЕШЬ IPHONE 14 PRO?</h2>
<input class="contacts-input" type="text"
placeholder="Ваше имя">
<input class="contacts-input" type="tel"
placeholder="Номер телефона">
<p>В ближайшее время наш менеджер свяжется с Вами</p>
<button tipe="submit">ЗАКАЗАТЬ</button>
</form>
<img src="img/big_phone.jpg" alt="iphone-photo">
</div>
</div>
</section>
</main>
<footer class"footer">
<div class="container">
<div class="footer-inner">
<a class="footer-link" href="#">Политика конфиденциальности</a>
<a class="logo">
<img src="img/logo.svg" alt="логотип" class="logo-img">
</a>
<a href="tel:380504565656" class="phone">+38 050-456-56-56</a>
</div>
</div>
</footer>
</body>
</html>a{
text-decoration: none;
color:inherit;
}
ul{
margin:0;
padding:0;
list-style:none;
}
body{
font-family: 'Inter Tight', sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: 400;
color: #0A0A0A;
}
.header{
background-color: #0A0A0A;
padding: 33px 0 32px;
color: #717171;
font-size: 24px;
line-height:29px;
}
.container{
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.nav{
display: flex;
justify-content: space-between;
align-items: center;
}
.menu{
display: flex;
flex-grow: 1;
flex-basis: 0;
/*для начала просто запомни и используй
эту штуку, чтобы выровнять лого по центру*/
}
.phone{
flex-grow: 1;
flex-basis: 0;
text-align: right;
font-size: 24px;
line-height: 29px;
}
.menu-item{
padding-right:30px;
}
.headline{
background-color:#F5F5F7;
text-align: center;
padding: 70px 0 40px;
}
.title{
text-transform: uppercase;
margin-bottom:0 0 40px;
color: #490E84;
font-weight: 700;
font-size: 64px;
line-height: 77px;
}
.headline-img{
margin-bottom:25px;
}
.headline-btn{
display: inline-block;
font-weight:700;
font-size:24px;
line-height: 29px;
color: #FFF;
background-color: #490E84;
padding: 22px 117px 19px;
border-radius: 30px;
}
.new{
padding:90px 0 150px;
}
.new-title,
.color-title {
margin: 0 0 50px;
text-transform: uppercase;
text-align: center;
color: #717171;
font-weight:700;
font-size: 32px;
line-height:39px;
}
.new-info{
display: flex;
align-items: center;
}
.new-text,p{
max-width: 560px;
margin: 0 0 30px;
}
.new-text,b{
max-width: 560px;
font-size: 20px;
line-height: 26px;
display:block;
}
.images-new{
margin: 190px;
}
.color{
padding-bottom:150px;
}
.color-list{
display: flex;
justify-content: space-between;
text-align: center;
}
.color-item img{
margin-bottom:20px;
}
.color-item h3{
margin-bottom:10px;
font-size:20px;
line-height:26px;
font-weight:700;
}
.color-item p{
margin:0;
font-size:14px;
line-height:18px;
font-weight: 400;
}
.contacts-inner{
display:flex;
background-color: #574B63;
color:#FFF;
}
.contacts-form{
width:100%;
padding: 140px 100px;
text-align: center;
}
.contacts-title{
font-weight:700;
font-size:32px;
line-height:39px;
margin: 0 0 60px;
text-transform: uppercase;
text-align: left;
}
.contacts-input{
padding: 10px 0;
border:none;
border-bottom: 1px solid #fff;
display: block;
width: 100%;
margin-bottom: 20px;
background-color: #574B63;
}
.contacts-input::placeholder{
font-size: 14px;
line-height: 18px;
font-weight: 400;
color: #fff;
opacity:50%;
font-family: 'inter', sans-serif;
}
.contacts-form p{
margin:30px 0;
opacity:0.5;
text-align: center;
}
.contacts-form button{
border:none;
text-transform: uppercase;
color:#574B63;
background-color: #FFF;
border-radius: 30px;
padding: 16px 81px;
font-weight: 700px;
font-size: 14px;
line-height: 18px;
cursor: pointer;
}
.footer-link{
flex-basis: 0;
flex-grow: 1;
}
.footer-inner{
color:#717171;
display:flex;
align-items: center;
justify-content: space-between;
padding:50px 0;
}
.footer{
background-color: # #0A0A0A;
}
- <footer class"footer">
+ <footer class="footer">- background-color: # #0A0A0A;
+ background-color: #0A0A0A;
Простой
Простой
Простой
Простой