ErrorCorrection
Hectopat
- Katılım
- 11 Ağustos 2022
- Mesajlar
- 2.549
- Çözümler
- 4
Daha fazla
- Cinsiyet
- Erkek
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Css-sites</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header class="main-header">
<div class="navbar">
<a href="#" class="main_logo">GetDomain.com</a>
<div class="main-div">
<ul class="main-div__items">
<li class="main-div__item"><a href="#">Home</a></li>
<li class="main-div__item"><a href="#">Get Domain</a></li>
<li class="main-div__item"><a href="#">Say Hello</a></li>
<li class="main-div__item main-div__item-login"><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="section">
<h2>Welcome to MyWorld</h2>
</div>
</header>
<main class="main">
<div class="main-div__header">
<h3>How it works</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
</div>
<div class = "main-texts">
<div class = "main-row">
<h3>Register</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class = "main-row">
<h3>Register</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class = "main-row">
<h3>Register</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</main>
</body>
</html>
CSS:
body{
margin: 0;
}
*{
margin: 0;
}
.navbar{
background-color: #E8D5C4;
padding: 15px 0 15px 10px;
}
.main-div__item a{
text-decoration: none;
color: #4E6E81;
font-weight: bold;
font-size: 15px;
font-family: sans-serif;
}
.main-div{
display: inline-block;
width: calc(100% - 150px);
text-align: right;
}
.main-div__items{
margin: 0;
padding: 0;
list-style: none;
}
.main-div__item{
display: inline-block;
margin-left: 10px;
box-sizing: border-box;
}
.main_logo{
color: #40513B;
text-decoration: none;
font-size: 15px;
font-weight: bolder;
}
.main-div__item a:hover{
color: #BE6DB7;
}
.main-div__item::before{
content: "\2022";
}
.main-div__item-login a{
color: #fff;
background-color: #3795BD;
border: 2px solid white;
padding: 7px 12px;
/* border-radius: 10px 30px; */
border-radius: 10px;
}.main-div__item-login a:hover{
color:#3795BD;
background-color: white;
border-color: #3795BD;
}.main-div__item-login::before{
content: none;
}.section{
height: 500px;
width: 100%;
background-image: url(way.jpg);
background-position: center;
}.section h2{
height: 500px;
color: white;
width: 100%;
text-align: center;
padding-top: 100px;
}
.main-div__header{
margin: 0 25%;
text-align: center;
margin-top: 30px;
}.main-row{
display: inline-block;
width: 30%;
padding: 60px;
margin: 15px;
}.main{
text-align: center;
}.main h3{
color: #804674;
}.main-texts h3{
margin-bottom: 30px;
}