Stack Overflow на русском Asked by darkdarklord on December 6, 2020
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header{
text-align:center;
}
.zag_header_1{
text-transform:uppercase;
margin-top:40px;
}
.main_text{
text-align:center;
margin-top:50px;
}
.main_text_2{
margin-top:30px;
}
.main_link{
text-align:center;
}
.zag_main_1{
text-transform:uppercase;
margin-top:50px;
}
footer{
display:flex;
align-items:flex-end;
justify-content:center;
height:70px;
background-color:DimGray;
text-align:center;
}
.text_footer{
color:white;
}
.main_link_text a {
display:inline-block;
background-color:#C0C0C0;
width:100%;
height:50px;
border-radius:20px;
text-decoration:none;
color:#696969;
text-transform:uppercase;
}
.main_link_text a:hover{
background-color:#00CED1;
color:white;
}
</style>
</head>
<body>
<header>
<div class="icon_header"><img src="123.png" alt="иконка"></div>
<div class="zag_header_1">
<h1>Little web design agency</h1>
<hr>
</div>
</header>
<main>
<section class="main_text">
<p class="main_text_1">We are a small web design agency based in Sheffield, UK. Over the las
years weve worked with many companies and made a reputation
for building websites that look great and are easy-to-use</p>
<p class="main_text_2">We always take and shape your ideas and focus on simple
,elegant and usable solutions. We bring your project to life
with clean and standarts-based code using the latest tech
niques and technologies</p>
</section>
<section class="main_link">
<div class="zag_main_1"><h2>Our services</h2>
</div>
<div class="main_link_text">
<a class="main_link_text_tt" href="#">Design</a> <br>
<a class="main_link_text_tt" href="#">Ui / Ux</a> <br>
<a class="main_link_text_tt" href="#">Content</a>
</div>
</section>
</main>
<footer>
<p class="text_footer">© 2020 Little web design agency</p>
</footer>
</body>
</html>Для нижнего отступа использую margin-bottom, а для выравнивания по центру line-height и высоту кнопки.
header {
text-align: center;
}
.zag_header_1 {
text-transform: uppercase;
margin-top: 40px;
}
.main_text {
text-align: center;
margin-top: 50px;
}
.main_text_2 {
margin-top: 30px;
}
.main_link {
text-align: center;
}
.zag_main_1 {
text-transform: uppercase;
margin-top: 50px;
}
footer {
display: flex;
align-items: flex-end;
justify-content: center;
height: 70px;
background-color: DimGray;
text-align: center;
}
.text_footer {
color: white;
}
.main_link_text a {
display: inline-block;
background-color: #C0C0C0;
width: 100%;
height: 50px;
border-radius: 20px;
text-decoration: none;
color: #696969;
text-transform: uppercase;
margin-bottom: 15px;
line-height: 50px;
}
.main_link_text a:hover {
background-color: #00CED1;
color: white;
}<main>
<section class="main_text">
<p class="main_text_1">We are a small web design agency based in Sheffield, UK. Over the las years weve worked with many companies and made a reputation for building websites that look great and are easy-to-use</p>
<p class="main_text_2">We always take and shape your ideas and focus on simple, elegant and usable solutions. We bring your project to life with clean and standarts-based code using the latest tech niques and technologies</p>
</section>
<section class="main_link">
<div class="zag_main_1">
<h2>Our services</h2>
</div>
<div class="main_link_text">
<a class="main_link_text_tt" href="#">Design</a><br>
<a class="main_link_text_tt" href="#">Ui / Ux</a><br>
<a class="main_link_text_tt" href="#">Content</a>
</div>
</section>
</main>
<footer>
<p class="text_footer">© 2020 Little web design agency</p>
</footer>Answered by entithat on December 6, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP