<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Myproject2</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="/2023/myproject2/Myproject/img/i.webp">
</head>
<body>
<div class="body">
<div class="body__block">
<div class="body__top">
<div class="body__title title">about</div>
<div class="body__text">We specialize in contemporary, functional, and stunning websites with design that really brings that "WOW" <br> In our design process, we make sure to stay one step ahead of the latest trends,<br> never forgetting to abide by key web standards.</div>
</div>
<div class="body__stolbi">
<div class="body__column">
<div class="item-body">
<div class="item-body__icon"><img src="..//Myproject/img/01.png"></div>
<div class="item-body__title">web</div>
<div class="item-body__text">We tend to deliver unique and functional design, through innovation and creativity.</div>
</div>
</div>
<div class="body__column">
<div class="item-body">
<div class="item-body__icon"><img src="..//Myproject/img/02.png"></div>
<div class="item-body__title">ios and android</div>
<div class="item-body__text">We seek to bring new businesses and customers closer together through valuable insights and proper targeting.</div>
</div>
</div>
<div class="body__column">
<div class="item-body">
<div class="item-body__icon"><img src="..//Myproject/img/03.png"></div>
<div class="item-body__title">marketing</div>
<div class="item-body__text">We ll help you establish the right goals and build the right paths. Success depends on setting the right intention.</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@import "..//nostyle.scss"; // на нуль
body{
padding: 30px;
}
.body{
&__block{
max-width: 823px;
margin: 0px auto;
}
&__top{}
&__title{}
&__text{
padding: 20px 0px 0px 0px;
color: #444343;
text-align: center;
font-size: 20px;
line-height: 32px;
}
&__stolbi{
display: flex;
font-size: 0px;
margin: 0px -15px;
justify-content: center;
}
&__column{
padding: 0px 15px;
flex: 0 0 33.33333%;
text-align: center;
}
}
.title{
font-size: 36px;
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
font-weight: 700;
position: relative;
padding: 0px 0px 20px 0px;
&::after{
content: '';
background-color: #000;
width: 110px;
height: 1.5px;
position: absolute;
bottom: 0;
left: 43.2%;
}
}
.item-body{
&__icon{
width: 92px;
height: 92px;
border-radius: 50%;
border: 2px solid #5e58586a;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 30px 0;
}
&__title{
margin: 0 auto;
font-weight: 400;
font-size: 22px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 4px;
text-align: center;
margin: 0 0 35px 0;
}
&__text{
text-align: center;
line-height: 26px;
font-size: 16px;
}
}
Простой
Простой
Простой
