https://pastein.ru/t/Awy
Загрузка данных
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="verhushkacontenta">
<div class="logotip-kartinka">
<img src="img\logo.svg" alt="">
<p>markething</p>
</div>
<div class="ssilochki">
<a href="">Features</a>
<a href="">Pricing</a>
<a href="">About</a>
<a href="">Contact Us</a>
</div>
<button>
Free Trial
</button>
</div>
<div class="perviy-ekran">
<div>
<hr>
<p>The Best</p>
<hr>
</div>
<p class="glavniy-zagolovok">Digital Marketing</p>
<p class="mujik-text">Completely synergize resource taxing
relationships via premier niche markets.
Professionally cultivate one-to-one customer</p>
<button class="zelenayaknopochka">Get Started</button>
</div>
</header>
<img class="sponsors-kartinka" src="img\supports.png" alt="">
<div class="vtoroy-ekran">
<div>
<p class="krasiviy-tekst">We’re Strategic Digital
Marketing Agency</p>
<p class="mujik-text">We’ve created a full-stack structure for
our working workflow processe, were
from the funny the century initial all
made, have spare to negatives </p>
<a class="strelka-tuda" href="">See More <img src="img\arrow.svg" alt=""></a>
</div>
<div>
<div>
<img src="img\cube.svg" alt="">
<p class="krasiviy-tekst">Content Strategy</p>
<p class="mujik-text">All our content marketing
service packages include
a custom content strategy</p>
</div>
<div>
<img src="img\pyramid.svg" alt="">
<p class="krasiviy-tekst">Content Development</p>
<p class="mujik-text">We create some content
calendar for your company’s
must-share content</p>
</div>
<div>
<img src="img\ball.svg" alt="">
<p class="krasiviy-tekst">Content Creation</p>
<p class="mujik-text">Experienced in copywriting
and marketing team
begins creating content</p>
</div>
<div>
<img src="img\rect.svg" alt="">
<p class="krasiviy-tekst">Content Optimization</p>
<p class="mujik-text">Your content marketing
management services also
include SEO</p>
</div>
</div>
</div>
<div class="tretiy-ekran">
<img src="img\board.png" alt="">
<div>
<p class="krasiviy-tekst">Increase Business on Social Media Reach</p>
<p class="mujik-text">Using our network of industry
influencers,
we help promote your content</p>
<button class="zelenayaknopochka">Get Started</button>
</div>
</div>
<div class="chetvertiy-ekran">
<p class="krasiviy-tekst">How Can We Help You?</p>
<p class="mujik-text">Let's do great work together</p>
<img src="img\trial.svg" alt="">
<div>
<p>Update content
on my Website</p>
<p>Improve User Experience</p>
<p>Request Free
Website Review</p>
<p>Improve your
SEO Rankings</p>
</div>
<a class="strelka-tuda" href="">See More <img src="img\arrow.svg" alt=""></a>
</div>
<div class="pyatiy-ekran">
<div>
<p class="krasiviy-tekst">Read More Articles
From Our Blog</p>
<div>
<img src="" alt="">
<p class="mujik-text">AUGUST 17, 2021</p>
<p class="krasiviy-tekst">10 Reasons to invest in SEO copywriting services</p>
</div>
<button>Read More</button>
</div>
</div>
<footer>
<div class="anketa-dlya-sbora">
<p>Subscribe to get information, latest
news and other interesting offers about </p>
<div class="logotip-kartinka">
<img src="img\logo.svg" alt="">
<p>markething</p>
</div>
<div>
<input type="mail" placeholder="Your mail">
<button class="zelenayaknopochka">Subscribe</button>
</div>
</div>
<div class="nizhniy-podval">
<div>
<div>
<div class="logotip-kartinka krasiviy-tekst">
<img src="img\logo.svg" alt="">
<p>markething</p>
</div>
<p class="mujik-text">Marketing is a company that focus
on developing company’s strategy
for increase digital marketing</p>
<div>
<img src="img\facebook.svg" alt="">
<img src="img\twitter.svg" alt="">
<img src="img\instagram.svg" alt="">
</div>
</div>
<div>
<p class="krasiviy-tekst">Menu</p>
<a href="">Home</a>
<a href="">Features</a>
<a href="">Pricing About</a>
<a href="">Contact Us</a>
</div>
<div>
<p class="krasiviy-tekst">Services</p>
<a href="">Content Strategy</a>
<a href="">Content Development</a>
<a href="">Content Creation</a>
<a href="">Content Optimazion</a>
</div>
<div>
<p class="krasiviy-tekst">Company</p>
<a href="">Site Map</a>
<a href="">Terms of Use</a>
<a href="">Privacy Notice</a>
<a href="">Cookies</a>
<a href="">Modern Slavery</a>
</div>
</div>
<hr>
<p>© Copyright Markethink. All right reserved</p>
</div>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body{
width: 1600px;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
font-family: "Rubik", sans-serif;
}
header{
width: 1600px;
height: 947px;
display: flex;
flex-direction: column;
align-items: center;
background-image: url(img/hero.png);
color: white;
}
.verhushkacontenta{
width: 1170px;
height: 55px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 40px;
}
.logotip-kartinka{
width: 189px;
height: 31px;
display: flex;
flex-direction: row;
justify-content: space-between;
font-weight: 600;
font-size: 26px;
}
.verhushkacontenta > .ssilochki{
width: 404px;
height: 19px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.verhushkacontenta > .ssilochki > a{
font-weight: 400;
font-size: 16px;
color: white;
}
.verhushkacontenta > button{
width: 140px;
height: 55px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(237, 255, 129, 0.4);
border-radius: 116px;
font-weight: 500;
font-size: 16px;
color: white;
}
.perviy-ekran{
width: 810px;
height: 449px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-top: 105px;
}
.perviy-ekran > div {
width: 378px;
height: 43px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 36px;
opacity: 0.8;
}
.perviy-ekran > div > hr {
width: 60px;
}
.zelenayaknopochka{
width: 243px;
height: 78px;
background: linear-gradient(328.68deg, #98AA28 13.03%, #D6FF7E 120.61%);
box-shadow: 0px 34px 50px rgba(7, 63, 67, 0.07);
border-radius: 192px;
font-weight: 600;
font-size: 20px;
color: #FFFFFF;
text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
}
.perviy-ekran > .glavniy-zagolovok {
font-weight: 600;
font-size: 90px;
line-height: 107px;
}
.perviy-ekran > .mujik-text {
font-weight: 400;
font-size: 25px;
line-height: 44px;
text-align: center;
opacity: 0.6;
}
.sponsors-kartinka{
width: 1234px;
height: 40px;
padding: 58px 0;
}
.vtoroy-ekran{
width: 1300px;
height: 630px;
display: flex;
flex-direction: row;
gap: 122px;
}
.vtoroy-ekran > :first-child {
width: 542px;
height: 432px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vtoroy-ekran > :first-child > .krasiviy-tekst{
font-weight: 700;
font-size: 47px;
line-height: 72px;
color: #253D32;
}
.vtoroy-ekran > :first-child > .mujik-text{
width: 471px;
font-weight: 400;
font-size: 24px;
line-height: 44px;
color: #78847D;
}
.strelka-tuda{
font-weight: 500;
font-size: 27px;
line-height: 32px;
text-decoration-line: underline;
color: #A3B938;
}
.vtoroy-ekran > :last-child{
width: 635px;
height: 620px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 80px;
row-gap: 85px;
}
.vtoroy-ekran > :last-child > div{
width: max-content;
height: 265px;
display: flex;
flex-direction: column;
}
.vtoroy-ekran > :last-child > div > img{
width: 56px;
height: 56px;
}
.vtoroy-ekran > :last-child > div > .krasiviy-tekst{
font-weight: 500;
font-size: 27px;
line-height: 32px;
color: #253D32;
margin: 44px 0 27px;
}
.vtoroy-ekran > :last-child > div > .mujik-text{
width: 253px;
font-weight: 400;
font-size: 20px;
line-height: 36px;
color: #78847D;
}
.tretiy-ekran{
width: 1360px;
height: 522px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.tretiy-ekran > div {
width: 542px;
height: 408px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tretiy-ekran > div > .krasiviy-tekst{
width: 542px;
font-weight: 700;
font-size: 47px;
line-height: 72px;
color: #253D32;
}
.tretiy-ekran > div > .mujik-text{
width: 484px;
font-weight: 400;
font-size: 24px;
line-height: 44px;
color: #78847D;
}
.chetvertiy-ekran{
width: auto;
height: 532px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-top: 235px;
}
.chetvertiy-ekran > .krasiviy-tekst{
font-weight: 700;
font-size: 47px;
color: #253D32;
}
.chetvertiy-ekran > .mujik-text{
width: 320px;
font-weight: 400;
font-size: 24px;
color: #78847D;
}
.chetvertiy-ekran > div{
width: 1264px;
height: 89px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chetvertiy-ekran > div > p{
width: 263px;
font-weight: 400;
font-size: 24px;
line-height: 44px;
text-align: center;
color: #253D32;
}
.chetvertiy-ekran > div > :first-child{
font-weight: 600;
}
.pyatiy-ekran{
width: 1300px;
height: 861px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 243px;
}
footer{
width: 1600px;
height: 1238px;
display: flex;
flex-direction: column;
align-items: center;
}
.anketa-dlya-sbora {
width: 1420px;
height: 611px;
margin-top: 67px;
margin-left: 150px;
background-image: url(img/formbackground.png);
background-repeat: no-repeat;
color: white;
}
.anketa-dlya-sbora > *{
margin-left: 144px;
}
.anketa-dlya-sbora > p{
padding: 111px 0 33px;
width: 732.22px;
font-weight: 600;
font-size: 36px;
line-height: 61px;
}
.anketa-dlya-sbora > div{
padding-top: 69px;
}
.anketa-dlya-sbora > div > input{
padding-left: 44px;
width: 413.33px;
height: 86.67px;
background: linear-gradient(332deg, #FFFFFF 4%, #E2E2E2 133%);
box-shadow: 0px 38px 56px rgba(7, 63, 67, 0.07);
border-radius: 213px;
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #14183E;
margin-right: 33px;
}
.anketa-dlya-sbora > div > input::placeholder{
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #14183E;
}
.nizhniy-podval{
width: 1300px;
height: 404px;
display: flex;
flex-direction: column;
align-items: center;
margin: 83px 0 73px;
}
.nizhniy-podval > div{
width: 1300px;
height: 266px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.nizhniy-podval > div :first-child > .mujik-text{
width: 393px;
font-weight: 400;
font-size: 22px;
line-height: 38px;
color: #78847D;
margin-bottom: 33px;
}
.nizhniy-podval > div > :first-child > div{
width: 187px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.nizhniy-podval > div > div{
display: flex;
flex-direction: column;
}
.nizhniy-podval > div > div > .krasiviy-tekst{
font-weight: 700;
font-size: 27px;
color: #253D32;
margin-bottom: 38px;
}
.nizhniy-podval > div > div > a{
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #78847D;
}
.nizhniy-podval > hr{
width: 1300px;
border: 1.11111px solid rgba(20, 24, 62, 0.15);
margin: 70px 0 33px;
}
.nizhniy-podval > p{
font-weight: 400;
font-size: 18px;
line-height: 38px;
color: #78847D;
}