I'm currently experimenting with creating a header wave in Bootstrap CSS using SVG shape. However, I encountered an issue when implementing bootstrap into the HTML code - my design resembles the second image instead of the desired look of the first one. The problem arises as making the container smaller affects the size and appearance of the wave component. Here is the initial CSS code:
@import url("https://fonts.googleapis.com/css?family=Hind");
html, body {
margin: 0;
font-family: Hind, sans-serif;
}
.header {
background: #3076ff;
color: #f1f1f1;
position: relative;
width: 100%;
height: 170px;
margin: auto;
}
@media only screen and (max-width: 1000px) {
.header {
height: 150px;
}
}
.header .title {
padding: 0;
margin: 0;
text-align: center;
font-size: 3em;
}
@media only screen and (max-width: 600px) {
.header .title {
font-size: 2em;
}
}
@media only screen and (max-width: 400px) {
.header .title {
font-size: 1.5em;
}
}
@media only screen and (max-width: 200px) {
.header .title {
font-size: 1em;
}
}
.header .headerCurve {
width: 100%;
fill: #3076ff;
}
.wrapper {
min-height: calc(100vh - 2rem);
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42322d323227306c283102736c73746c73">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header">
<h1 class="title">Developer Job Postings</h1>
<svg class="headerCurve" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" transform="rotate(180 0 30)">
<path class="wavePath" d="M826.337463,25.5396311
C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383
C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414
C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505
C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311
Z"></path>
</svg>
</div>
</div>
</div>
</div>
</body>
</html>