i use a wave svg. but when use it margin under that while there is no margin or padding in elements
what is problem?
My Code:
body {
background-color: lightgray;
margin: 0;
font-family: "Source Sans 3";
}
.topheader,
.left,
.right {
display: flex;
}
.left,
.right {
flex-grow: 1;
}
.right {
justify-content: end;
}
ul {
list-style-type: none;
display: flex;
margin: 0;
/* border: 1px solid; */
}
ul li {
padding: 13px 5px;
font-family: "Source Sans 3";
font-size: 16px;
/* border: 1px solid; */
}
.left ul li:hover {
background-color: #04aa6d;
}
.left ul li a:hover {
color: #fff;
}
.topheader ul li a {
color: #000;
}
ul li,
header a {
display: flex;
align-items: center;
}
ul li a {
text-decoration: none;
}
.right li>a {
padding: 2px 15px;
}
.right li a.det:hover {
background-color: #f1f1f1;
border-radius: 15px;
}
.right li:nth-child(2) span {
color: #04aa6d;
}
.right li:nth-child(3) span {
color: #9763f6;
}
.reg {
/* background-color: #d9eee1; */
display: flex;
padding: 0px;
border-radius: 15px;
overflow: hidden;
}
.reg a:nth-child(1) {
background-color: #04aa6d;
border-radius: 15px;
padding: 5px 20px;
z-index: 0;
}
.reg a:nth-child(1):hover {
background-color: #059862;
}
.reg a:nth-child(2) {
background-color: #d9eee1;
padding: 0 20px;
margin-left: -10px;
}
.reg .log:hover {
background-color: #059862;
}
.menubar {
background-color: #282a35;
/* height: 100px; */
display: flex;
}
.mun {
margin: 0 3px;
padding: 0;
}
.mun li {
color: #c2c3c5;
padding-left: 3px;
padding-right: 3px;
padding-top: 5px;
padding-bottom: 0;
}
.menuicon {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.menuicon span {
color: #c2c3c5;
font-size: 20px;
line-height: 27px;
margin: 0 10px;
margin: 20px 0;
}
.top {
background-color: #282a35;
color: #fff;
text-align: center;
/* position: relative;
height: 350px; */
}
.top p:nth-child(1) {
font-size: 70px;
line-height: 105px;
font-weight: 700;
}
.top p {
margin: 0;
/* margin-bottom: 0; */
padding: 0;
}
.top .title {
color: #ffc0c7;
font-size: 23px;
}
.searchbox {
text-align: center;
/* margin: 40px; */
/* border: 1px solid #fff; */
padding: 10px;
}
.searchbox .container {
background-color: #fff;
width: 500px;
border-radius: 50px;
overflow: hidden;
/* display: inline-block; */
margin: auto;
/* padding: 15px 5px; */
display: flex;
justify-content: space-between;
}
.searchbox .container input {
width: 100%;
border: 0;
outline: 0;
border: 1px solid;
padding: 0 10px;
}
.searchbox .container a {
background-color: #04aa6d;
padding: 5px 40px;
/* display: flex; */
}
.searchbox .container a span {
line-height: 40px;
}
a.notsure {
font-weight: 900;
font-size: 23px;
text-decoration: underline;
padding: 40px 0;
color: #fff;
display: block;
}
.courses .html {
background-color: #d9eee1;
display: flex;
justify-content: space-around;
height: 250px;
}
.courses .html .left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* height: 300px; */
}
.courses .html .left .btns {
background-color: #04AA6D;
width: 200px;
border-radius: 25px;
color: #fff;
text-align: center;
font-size: 18px;
margin: auto;
padding: 8px 16px
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+3">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<body>
<div class="container">
<header>
<div class="topheader">
<div class="left">
<img src="img/w3.png" alt="" width="40px">
<ul>
<li><a href="#">Toturials
<span class="material-symbols-outlined">arrow_drop_down</span></a>
</li>
<li><a href="#"> Exercises
<span class="material-symbols-outlined">arrow_drop_down</span></a>
</li>
<li><a href="#"> Get Certificated <span
class="material-symbols-outlined">arrow_drop_down</span></a>
</li>
<li><a href="#"> Services <span class="material-symbols-outlined">arrow_drop_down</span></a>
</li>
</ul>
</div>
<div class="right">
<ul>
<li class="det"><a href=""><span class="material-symbols-outlined">
military_tech
</span>Bootcamps</a></li>
<li class="det"><a href=""><span class="material-symbols-outlined">
redeem
</span>Spaces</a></li>
<li>
<div class="reg">
<a id="a1" href="">Sign Up</a>
<a id="a2" href="" class="log">Log in</a>
</div>
</li>
</ul>
</div>
</div>
<div class="menubar">
<ul class="mun">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>SQL</li>
<li>PYTHON</li>
<li>JAVA</li>
<li>PHP</li>
<li>BOOTSTRAP</li>
<li>HOW TO</li>
<li>W3.CSS</li>
<li>C</li>
<li>C++</li>
<li>C#</li>
<li>REACT</li>
<li>R</li>
<li>JQUERY</li>
<li>DJANGO</li>
<li>TYPESCRIPT</li>
</ul>
<div class="menuicon">
<span class="material-symbols-outlined">
dark_mode
</span>
<span class="material-symbols-outlined">
public
</span>
<span class="material-symbols-outlined">
search
</span>
</div>
</div>
</header>
<section class="top">
<p>Learn to Code</p>
<p class="title">With the world's largest web developer site.</p>
<div class="searchbox">
<div class="container">
<input type="text" placeholder="Search our tutorials, e.g. HTML">
<a href="#"> <span class="material-symbols-outlined">
search
</span></a>
</div>
<a href="#" class="notsure">Not Sure Where To Begin?</a>
</div>
<svg class="svg" style="background-color:#D9EEE1;" width="100%" height="70" viewBox="0 0 100 100"
preserveAspectRatio="none">
<path id="wavepath" d="M0,0 L110,0C35,150 35,0 0,100z" fill="#282A35"></path>
</svg>
</section>
<section class="courses">
<div class="html">
<div class="left">
<a class="btns" id="learn">Learn HTML</a>
<a class="btns" id="video">Video Toturial</a>
<a class="btns" id="refrence">HTML Refrences</a>
<a class="btns" id="get">Get Certificated</a>
</div>
<div class="right">vj</div>
</div>
</section>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>