HTML: index.html ↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Перемикачі</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="header">
<h1 class="top_title">Перемикачі_Прапорці</h1>
</header>
<div class="text2cols-left">
<p style="text-align: center;"><strong> Місто проживання: </strong></p>
<p style="text-align: center;"> ○Кам'янське </p>
<p style="text-align: center;"> ○Дніпро</p>
<p style="text-align: center;"> ○Київ </p>
<p style="text-align: center;"> ○Львів </p>
<p style="text-align: center;"> ○Харків </p>
</div>
<div class="text2cols-right">
<p style="text-align: center;"><strong> Послугами якго з мобільних операторів користуєтесь?:</strong></p>
<p style="text-align: center;"> ○Vadafone </p>
<p style="text-align: center;"> ○Lifecell</p>
<p style="text-align: center;"> ○Київстар</p>
<p style="text-align: center;"> ○Тримоб </p>
<p style="text-align: center;"> ○Інтертелеком Україна </p>
</body>
</html>
--------------------------------------------------------------------------------
CSS: style.css ↓
body {
background-image: url(img/fon.png);
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #1b1818;
}
.container {
min-width: 100%;
padding: 0 20px;
margin: 0 auto;
.header {
margin-bottom: 50px;
text-align: center;
color: blue;
/* Обгортка */
.header_inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 120px;
.menu_bt {
display: none;
.menu_list {
list-style: none;
.menu_item {
margin: 0 15px;
.menu_list_link {
/* text-transform: uppercase;*/
color:#120a8f;
font-size: 18px;
line-height: 20px;
padding-bottom: 5px;
transition: all 0.5s;
border-bottom: transparent;
/*
.menu_list_link:hover {
border-bottom: 1px solid #120a8f;
}*/
.phone {
color: #cf344e;
line-height: 21px;
margin: 40px;
.text2cols {
overflow: hidden;
.text2cols-left {
float: left;
width: 40%;
font-size: 30px;
.text2cols-right {
width: 60%;
.top{
padding-bottom: 100px;
.top_heading{
padding-bottom: 30px;
width: 50%;
.top_content{
padding-top: 90 px;
.top_title{
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
font-size: 48px;
line-height: 58px;
min-width: 600px ;
margin: 0 auto 20px;
.top_title2{
.top_text{
font-size: 24px;
line-height: 30px;
margin: 0 auto 50px;
min-width: 500px;
.aplication-btn{
display:inline-block;
padding: 15px 25px;
background-color:aqua;
border: 1px solid transparent ;
text-transform: uppercase;
.aplication-btn:hover{
color:aqua;
background-color: #120a8f;
border: 1px solid aqua ;
.top_slider{
.top_slider-text{
padding-right: 140 px;
text-align: right;
text-family: 'Fira sans', sans-serif;
.top_slider-text span + span{
padding-left: 20px;
Copyright © 2024 SCHOLAR.TIPS - All rights reserved.
Answers & Comments
HTML: index.html ↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Перемикачі</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="header">
<h1 class="top_title">Перемикачі_Прапорці</h1>
</header>
<div class="text2cols-left">
<p style="text-align: center;"><strong> Місто проживання: </strong></p>
<p style="text-align: center;"> ○Кам'янське </p>
<p style="text-align: center;"> ○Дніпро</p>
<p style="text-align: center;"> ○Київ </p>
<p style="text-align: center;"> ○Львів </p>
<p style="text-align: center;"> ○Харків </p>
</div>
<div class="text2cols-right">
<p style="text-align: center;"><strong> Послугами якго з мобільних операторів користуєтесь?:</strong></p>
<p style="text-align: center;"> ○Vadafone </p>
<p style="text-align: center;"> ○Lifecell</p>
<p style="text-align: center;"> ○Київстар</p>
<p style="text-align: center;"> ○Тримоб </p>
<p style="text-align: center;"> ○Інтертелеком Україна </p>
</div>
</body>
</html>
--------------------------------------------------------------------------------
CSS: style.css ↓
body {
background-image: url(img/fon.png);
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #1b1818;
}
.container {
min-width: 100%;
padding: 0 20px;
margin: 0 auto;
}
.header {
margin-bottom: 50px;
text-align: center;
color: blue;
}
/* Обгортка */
.header_inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 120px;
}
.menu_bt {
display: none;
}
.menu_list {
display: flex;
list-style: none;
}
.menu_item {
margin: 0 15px;
}
.menu_list_link {
/* text-transform: uppercase;*/
color:#120a8f;
font-size: 18px;
line-height: 20px;
padding-bottom: 5px;
transition: all 0.5s;
border-bottom: transparent;
}
/*
.menu_list_link:hover {
border-bottom: 1px solid #120a8f;
}*/
.phone {
color: #cf344e;
font-size: 18px;
line-height: 21px;
margin: 40px;
}
.text2cols {
overflow: hidden;
}
.text2cols-left {
float: left;
width: 40%;
font-size: 30px;
}
.text2cols-right {
float: left;
width: 60%;
font-size: 30px;
}
.text2cols {
overflow: hidden;
}
.top{
padding-bottom: 100px;
}
.top_heading{
display: flex;
padding-bottom: 30px;
width: 50%;
}
.top_content{
text-align: center;
padding-top: 90 px;
}
.top_title{
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
font-size: 48px;
line-height: 58px;
min-width: 600px ;
margin: 0 auto 20px;
}
.top_title2{
font-family: 'Fira Sans', sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 58px;
min-width: 600px ;
margin: 0 auto 20px;
}
.top_text{
font-size: 24px;
line-height: 30px;
margin: 0 auto 50px;
min-width: 500px;
}
.aplication-btn{
display:inline-block;
padding: 15px 25px;
background-color:aqua;
border: 1px solid transparent ;
text-transform: uppercase;
}
.aplication-btn:hover{
color:aqua;
background-color: #120a8f;
border: 1px solid aqua ;
.top_slider{
width: 50%;
}
.top_slider-text{
padding-right: 140 px;
text-align: right;
text-family: 'Fira sans', sans-serif;
font-weight: 500;
}
.top_slider-text span + span{
padding-left: 20px;
}