CSS
1
Вклад в тег
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="2.css">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Titillium+Web:wght@400;700&display=swap" rel="stylesheet">
<title>Cuda</title>
</head>
<body>
<div class="block-purple">
<header>
<div class="inner-header">
<a class="logo" href="#">Cuda</a>
<nav class="nav">
<a class="nav-link" href="#">home</a>
<a class="nav-link" href="#">about</a>
<a class="nav-link" href="#">work</a>
<a class="nav-link" href="#">blog</a>
<a class="nav-link" href="#">contact</a>
</nav>
</div>
</header>
<div class="container1">
<p class="big-text">Hi there! We are the new kids on the block<br>
and we build awesome websites and mobile apps.</p>
<a href="#"><p class="button-orange">Work with us!</p></a>
</div>
</div>
<div class="block-green">
<h2 class="block-title">Services we provide</h2>
<p class="block-text">We are working with both individuals and businesses from all over the globe<br>
to create awesome websites and applications.</p>
<div class="in-a-row">
<div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Branding</span><br><br>Lorem ipsum dolor sit a consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
<div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Design</span><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
<div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Development</span><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
<div class="item"><img src="images/flag.svg"><br><p class="item-text"><span class="item-title">Rocket Science</span><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Titillium Web', sans-serif;
font-size: 12pt;
}
a, a:visited {
text-decoration: none;
}
.block-purple {
background-color: #87509c;
height: 100vh;
}
header {
height: 64px;
}
.inner-header {
display: flex;
height: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 200px;
}
.logo {
font-size: 2rem;
font-family: 'Pacifico', cursive;
color: white;
}
.nav-link {
margin-left: 25px;
text-transform: uppercase;
font-size: 0.8rem;
color: white;
padding: 4px 10px;
}
.nav-link:hover {
background-color: #643a79;
border-radius: 7px;
}
.container1 {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 70%;
}
.big-text {
margin-top: 100px;
font-size: 2rem;
text-align: center;
color: white;
}
.button-orange {
margin-top: 30px;
padding: 15px 60px;
border: 1px solid #eb7d4b;
border-radius: 4px;
background-color: #eb7d4b;
color: white;
box-shadow: 0 3px #c86a40;
text-transform: uppercase;
font-size: 0.9rem;
}
.block-green {
background-color: #17c2a4;
height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.in-a-row {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 75px;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 60px;
}
.block-title {
position: relative;
font-size: 2.6rem;
color: white;
text-transform: uppercase;
letter-spacing: 4px;
}
.block-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 4px;
background-color: #14a58c;
right: 0;
margin: 0 auto;
display: block;
border-radius: 10px;
}
.block-text {
font-size: 0.9rem;
color: white;
text-align: center;
margin-top: 20px;
}
.item-title {
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
}
.item-text {
text-align: center;
color: white;
font-size: 0.8rem;
}