For Any Question Contact US: Instagram
Code:
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></link>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Flag</title>
<style>
html{
padding: 0px;
margin: 0px;
}
body{
background: linear-gradient(45deg,red,blue);
height: 1000px;
width: auto;
}
.flag{
padding: 0px;
height: 400px;
width: 600px;
border-radius: 20px;
margin-top: 200px;
overflow: hidden;
}
.white{
height: 400px;
}
.green{
height: 400px;
}
.moon{
font-size: 200px;
color: white;
padding-top: 100px;
padding-left: 20px;
}
.star{
font-size: 90px;
color: white;
position: absolute;
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container flag bg-warning block">
<div class="row">
<div class="white bg-white col-4">
</div>
<div class="green bg-success col-8">
<span><i class="fas fa-moon moon"></i></span>
<span><i class="fas fa-star star"></i></span>
</div>
</div>
</div>
</body>
</html>