<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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:wght@400;700&display=swap" rel="stylesheet">
<title>Iphone 14 pro</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<nav class="nav">
<ul class="menu">
<li class="menu-item">
<a class="menu-link" href="#">Что нового</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Цвет</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Заказать</a>
</li>
</ul>
<a class="logo">
<img class="logo-img" src="images/logo.png" alt="логотип">
</a>
<a class="phone" href="tel:380504565656">+38 050-456-56-56</a>
</nav>
</div>
</header>
<main class="main">
<section class="headline">
<div class="coineiner">
<h1 class="title">IPHONE 14 PRO</h1>
<img class="headline-img" src="images/iphone_14_pro.png" alt="IPHONE 14 PRO">
<a class="headline-btn" href="#">ВЫБРАТЬ</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="images/Apple-iPhone-14-Pro-Max%201.jpg" alt="iphone">
</div>
</div>
</section>
<section class="color">
<div class="container">
<h2 class="color-title">ВЫБЕРИ СВОЙ ЦВЕТ</h2>
<ul class="color-list">
<li class="color-item">
<img src="images/color-1.jpg" alt="">
<h3>Silver</h3>
<p>Серебристый</p>
</li>
<li class="color-item">
<img src="images/color-2.jpg" alt="">
<h3>Deep purple</h3>
<p>Темно фиолетовый</p>
</li>
<li class="color-item">
<img src="images/color-3.jpg" alt="">
<h3>Gold</h3>
<p>Золотой</p>
</li>
<li class="color-item">
<img src="images/color-4.jpg" alt="">
<h3>Space Black</h3>
<p>Космический черный</p>
</li>
</ul>
</div>
</section>
<section>
<section class="contacts">
<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 type="submit">ЗАКАЗАТЬ</button>
</form>
<img src="images/contact.jpg" alt="iphone">
</div>
</section>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-inner">
</div>
<a class="footer-link" href="#">Политика конфиденциальности</a>
<a class="logo">
<img class="logo-img" src="images/logo.png" alt="логотип">
</a>
<a class="phone" href="tel:380504565656">+38 050-456-56-56</a>
</div>
</footer>
</body>
</html>a{
text-decoration: none;
color: #717171;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: 400;
color: #0a0a0a;
}
.header {
background-color: #0a0a0a;
padding: 33px 0 32px;
font-size: 24px;
line-height: 29px;
color: #717171;
}
.container {
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: 0 0 40px;
color: #490E84;
font-weight: 700;
font-size: 64px;
line-height: 77px;
}
.headline-img {
margin: 0 0 25;
display: block;
margin: 0 auto;
}
.headline-btn {
display: inline-flex;
font-weight: 700;
font-size: 24px;
line-height: 29px;
text-transform: uppercase;
color: #FFF;
background-color: #490E84;
padding: 22px 117px 19px;
border-radius: 30px;
margin: 36px 0 36px 0;
}
.new {
padding: 90px 0 150px;
}
.new-title,
.color-title
{
margin: 0 0 50px;
text-transform: uppercase;
text-align: center;
color: #717171;
font-size: 32px;
line-height: 39px;
font-weight: 700;
}
.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-left: 190px;
}
.color-list {
display: flex;
justify-content: space-between;
text-align: center;
}
.color-item img {
margin-bottom: 20px;
}
.color-item h3 {
font-size: 20px;
line-height: 26px;
margin: 0 0 10px;
}
.color-item p {
margin: 0;
}
.contacts-inner {
margin: 159px;
display: flex;
background-color: #574B63;
color: #fff;
}
.contacts-form {
width: 100%;
padding: 140px 93px;
text-align: center;
}
.contacts-title {
margin: 0 0 60px;
text-transform: uppercase;
font-size: 32px;
line-height: 39px;
}
.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;
color: #fff;
opacity: .5;
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.contacts-form p {
opacity: 0.5;
text-align: center;
margin: 30px 0;
}
.contacts-form button {
border: none;
text-transform: uppercase;
color: #490E84;
background-color: #fff;
border-radius: 30px;
padding: 16px 81px;
font-weight: 400;
cursor: pointer;
}
.footer {
background-color: #0A0A0A;
}
.footer-link {
flex-grow: 1;
flex-basis: 0;
}
#container {
display: flex;
}
.footer-inner {
color: #717171;
align-items: center;
justify-content: space-between;
padding: 50px 0;
}
Средний
Простой
