Develop Reference

How to make the envelop html responsive

I am working on the invite page, in which the envelope is shown first and after clicking on envelope it shows content, the problem is that the envelope is not responsive, I am using display:flex for my main page, but the template I used for envelope does not use flex, when I remove it, it works fine but my main page broke down, so is there any way to fix it?:
(the envelope looks like this on mobile screen)
.frame {
width: 550px;
height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 580px;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 0;
height: 0;
position: absolute;
top: 0;
z-index: 310;
}
.left {
border-left: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right {
border-right: 300px solid #337efc;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
left: 300px;
}
.top {
border-right: 300px solid transparent;
border-top: 200px solid #03a9f4;
border-left: 300px solid transparent;
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 600px;
height: 190px;
position: absolute;
background: #2b67cb;
top: 160px;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
/* height: 100vh;
width: 100%; */
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>

The border properties unfortunately don't take responsive percentages, so your .top .left and .right elements will not be responsive. You could instead create those envelope shapes with clip-path and then combined with a few other CSS updates and your envelope will adjust with screen size. Demo included
.frame {
width: 100%;
max-width: 550px;
height: 100%;
max-height: 350px;
margin: 50px auto 0;
position: relative;
background: #435d77;
border-radius: 0 0 40px 40px;
}
#button_open_envelope {
width: 180px;
height: 60px;
position: absolute;
z-index: 311;
bottom: 0;
left: 50%;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding: 15px 0;
border: 2px solid #fff;
transform: translateX(-50%);
transition: 0.3s;
}
#button_open_envelope:hover {
background: #fff;
color: #2b67cb;
transform: translateX(-50%) scale(1.1);
transition: background 0.25s, transform 0.5s, ease-in;
cursor: pointer;
}
.message {
position: relative;
width: 100%;
min-height: 300px;
height: auto;
background: #fff;
margin: 0 auto;
bottom: 0;
box-shadow: 0 0 5px 2px #333;
transition: 2s ease-in-out;
transition-delay: 1.5s;
z-index: 300;
}
.left,
.right,
.top {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 310;
}
.left {
background: #337efc;
clip-path: polygon(0 0, 0 90%, 50% 50%);
}
.right {
background: #337efc;
clip-path: polygon(100% 0, 100% 90%, 50% 50%);
}
.top {
background: #03a9f4;
clip-path: polygon(0 0, 100% 0, 50% 62.5%);
transition: transform 1s, border 1s, ease-in-out;
transform-origin: top;
transform: rotateX(0deg);
z-index: 500;
}
.bottom {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
background: #2b67cb;
border-radius: 0 0 30px 30px;
z-index: 310;
}
.open {
transform-origin: top;
transform: rotateX(180deg);
transition: transform 0.7s, border 0.7s, z-index 0.7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull {
-webkit-animation: message_animation 2s 1 ease-in-out;
animation: message_animation 2s 1 ease-in-out;
-webkit-animation-delay: 0.9s;
animation-delay: 0.45s;
transition: 1.5s;
transition-delay: 1s;
z-index: 350;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="frame">
<div id="button_open_envelope">
Open Invitation
</div>
<div class="message">
<h1>Invitation</h1>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>

Background of box not changing color when responsive | HTML, CSS

I have the following code:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #6665ee;
}
.skill-bars{
padding: 25px 30px;
width: 600px;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
#media all and (max-width: 500px) {
.skill-bars{
background: black;
}
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
#keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: #6665ee;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span{
width: 90%;
}
.bar .progress-line.css span{
width: 60%;
}
.bar .progress-line.jquery span{
width: 85%;
}
.bar .progress-line.python span{
width: 50%;
}
.bar .progress-line.mysql span{
width: 75%;
}
.progress-line span::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
#keyframes showText2 {
100%{
opacity: 1;
}
}
.progress-line.html span::after{
content: "90%";
}
.progress-line.css span::after{
content: "60%";
}
.progress-line.jquery span::after{
content: "85%";
}
.progress-line.python span::after{
content: "50%";
}
.progress-line.mysql span::after{
content: "75%";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="skill-bars">
<div class="bar">
<div class="info">
<span>HTML</span>
</div>
<div class="progress-line html">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>CSS</span>
</div>
<div class="progress-line css">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>jQuery</span>
</div>
<div class="progress-line jquery">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>Python</span>
</div>
<div class="progress-line python">
<span></span>
</div>
</div>
<div class="bar">
<div class="info">
<span>MySQL</span>
</div>
<div class="progress-line mysql">
<span></span>
</div>
</div>
</div>
</body>
</html>
So here for some reason, the background of the box turns black when you inspect the page and set it to responsive - that is what I want - but on my end, it does not work. Am I missing a reference link or something?
It does not work here: https://replit.com/join/wgghqoeseb-hussainomer1
What reference link do I seem to be missing? Any suggestions?

Add this to the header
<meta name="viewport" content="width=device-width, initial-scale=1" />
It helps the website position with the right viewport.
For more info checkout
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Using Javascript To Toggle CSS - Disabling The Scroll Behind the Hamburger Menu

Below is both the HTML and CSS I'm using to create a website. I have no previous
experience with Javascript, so I'm unfamiliar with how to use it but would like to
be able to use Javascript to toggle some CSS so that the background doesn't scroll
when my hamburger menu is open. I'm stuck, but if anyone has any advice to give me
it'd be much appreciated.
Please ignore the Javascript above as this applies to the search bar I intend to use.
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br>
<h1 style="text-align: center; font-size: 40px;">東京都</h1>
<br>
<p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br>
<div class="image">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
</div>
</div>
<br><br>
<footer class="site-footer" style="font-size: 12px;"> | English</footer>
</div>
<style>
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
`enter code here` margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>

Add an onchange event on the input you used to toggle the hamburger menu.
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
`enter code here` margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
<body style="background-color: white;">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;" />
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;" />
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br>
<h1 style="text-align: center; font-size: 40px;">東京都</h1>
<br>
<p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br>
<div class="image">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
<img src="#" alt="#" width="85%">
</div>
</div>
<br><br>
<footer class="site-footer" style="font-size: 12px;"> | English</footer>
</div>

How can I implement this loader for my project?

Basically, I am trying to implement a loader for my clock project. However, for some reason, it does not work. I have tried moving my code around to see what's wrong, but I have not figured it out. However, if I remove the div that my clock is in, the loader appears and fades out which is what I want it to do. How can I produce my loader so it appears, fades out, and shows the clock? Any help is appreciated. Here is my code below.
setInterval(setClock, 1000)
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')
function setClock() {
const currentDate = new Date()
const secondsRatio = currentDate.getSeconds() / 60
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation(secondHand, secondsRatio)
setRotation(minuteHand, minutesRatio)
setRotation(hourHand, hoursRatio)
}
function setRotation(element, rotationRatio){
element.style.setProperty('--rotation', rotationRatio * 360)
}
setClock()
.loader-wrap{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #292929;
overflow: hidden;
}
.loader-circles{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
width: 200px;
height: 200px;
}
.loader-circles .circle{
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: transparent;
border: 4px solid #fff;
border-radius: 50%;
border-bottom-color: transparent;
border-right-color: transparent;
text-align: center;
}
.loader-circles .circle:nth-child(even){
border-color: #42CAFD;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(odd){
border-color: #EFD2CB;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(1){
width: 20px;
height: 20px;
animation: rotate-circle linear infinite;
animation-duration: 12s;
}
.loader-circles .circle:nth-child(2) {
width: 40px;
height: 40px;
animation: rotate-circle linear infinite;
animation-duration: 6s;
}
.loader-circles .circle:nth-child(3) {
width: 60px;
height: 60px;
animation: rotate-circle linear infinite;
animation-duration: 4s;
}
.loader-circles .circle:nth-child(4) {
width: 80px;
height: 80px;
animation: rotate-circle linear infinite;
animation-duration: 3s;
}
.loader-circles .circle:nth-child(5) {
width: 100px;
height: 100px;
animation: rotate-circle linear infinite;
animation-duration: 2.4s;
}
.loader-circles .circle:nth-child(6) {
width: 120px;
height: 120px;
animation: rotate-circle linear infinite;
animation-duration: 2s;
}
.loader-circles .circle:nth-child(7) {
width: 140px;
height: 140px;
animation: rotate-circle linear infinite;
animation-duration: 1.7142857143s;
}
.loader-circles .circle:nth-child(8) {
width: 160px;
height: 160px;
animation: rotate-circle linear infinite;
animation-duration: 1.5s;
}
.loader-circles .circle:nth-child(9) {
width: 180px;
height: 180px;
animation: rotate-circle linear infinite;
animation-duration: 1.3333333333s;
}
.loader-circles .circle:nth-child(10) {
width: 200px;
height: 200px;
animation: rotate-circle linear infinite;
animation-duration: 1.2s;
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
}
.clock {
width: 300px;
height: 300px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number{
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 1.5rem;
}
.clock .number1 { --rotation: 30deg;}
.clock .number2 { --rotation: 60deg;}
.clock .number3 { --rotation: 90deg;}
.clock .number4 { --rotation: 120deg;}
.clock .number5 { --rotation: 150deg;}
.clock .number6 { --rotation: 180deg;}
.clock .number7 { --rotation: 210deg;}
.clock .number8 { --rotation: 240deg;}
.clock .number9 { --rotation: 270deg;}
.clock .number10 { --rotation: 300deg;}
.clock .number11 { --rotation: 330deg;}
.clock .hand{
--rotation: 0;
position: absolute;
bottom: 50%;
left: 50%;
background-color: black;
border: 1px solid white;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
transform-origin: bottom;
z-index: 10;
transform: translate(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock::after{
content: " ";
position: absolute;
background-color: black;
z-index: 11;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.clock .hand.second{
width: 3px;
height: 45%;
background-color: red;
}
.clock .hand.minute{
width: 7px;
height: 40%;
background-color: black;
}
.clock .hand.hour{
width: 10px;
height: 35%;
background-color: black;
}
body {
background-color: cornflowerblue;
text-align: center;
overflow-x: hidden;
}
.section {
min-height: 820px;
position: relative;
text-align: center;
font-family: sans-serif, arial;
margin: 0;
}
h1, p {
margin: 0;
font-family: sans-serif, arial;
font-weight: bold;
}
.title-top {
font-size: 60px;
padding-bottom: 30px;
}
.title-bottom {
font-size: 30px;
}
.title-tx {
font-size: 20px;
opacity: 0.8;
}
/* Navbar */
.nav {
position: fixed;
width: 100%;
top: 20px;
z-index: 9;
padding-left: 10px;
}
.nav a {
padding: 7px 20px;
border-radius: 50px;
margin-right: 10px;
float: left;
border-style: ridge;
background: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-decoration: none;
color: black;
font-family: sans-serif, arial;
font-weight: 100;
}
.nav a.active {
background: rgba(0, 0, 0, 0.5);
color: white;
}
.nav a:hover {
background: rgba(250, 164, 84, 0.795);
color: white;
}
/* Sections */
#section1{
background: linear-gradient(to right, #1e5799 0%, #2ce0bf 20%, #76dd2c 40%, #dba62b 60%, #e02cbf 80%, #1e5799 100%);
background-size: 10000px 100%;
animation: bg 15s linear infinite;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'Audiowide', cursive;
}
#keyframes bg {
0% {
background-position-x: 0;
}
100% {
background-position-x: 10000px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Animations Page HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--Links and Fonts-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.4.1.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript Clock</title>
<script defer src="script.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="loader-wrap">
<div class="loader-circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<!--Navbar-->
<div class="nav">
<nav>
<a class="active" href="#section1">Section 1</a>
</nav>
</div>
<!--Lesson 1-->
<div class="section" id="section1">
<div class = "clock">
<div class = "hand hour" data-hour-hand></div>
<div class = "hand minute" data-minute-hand></div>
<div class = "hand second" data-second-hand></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
</div>
<script>
setTimeout(function(){
$('.loader-wrap').fadeToggle();
}, 2500);
</script>
</body>
</html>

You only need to add Z-index to the parent container of either the Clock or the loader:
Here I add a z-index on the container of the clock:
#section1{
z-index: -1;
}
So the loader and your clock are overlapping on one another and the clock has higher priority in terms of your HTML which is below the loader HTML-markup and that is why the clock shows on top of the Loader.
setInterval(setClock, 1000)
const hourHand = document.querySelector('[data-hour-hand]')
const minuteHand = document.querySelector('[data-minute-hand]')
const secondHand = document.querySelector('[data-second-hand]')
function setClock() {
const currentDate = new Date()
const secondsRatio = currentDate.getSeconds() / 60
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12
setRotation(secondHand, secondsRatio)
setRotation(minuteHand, minutesRatio)
setRotation(hourHand, hoursRatio)
}
function setRotation(element, rotationRatio){
element.style.setProperty('--rotation', rotationRatio * 360)
}
setClock()
.loader-wrap{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #292929;
overflow: hidden;
}
.loader-circles{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
width: 200px;
height: 200px;
}
.loader-circles .circle{
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: transparent;
border: 4px solid #fff;
border-radius: 50%;
border-bottom-color: transparent;
border-right-color: transparent;
text-align: center;
}
.loader-circles .circle:nth-child(even){
border-color: #42CAFD;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(odd){
border-color: #EFD2CB;
border-bottom-color: transparent;
border-right-color: transparent;
}
.loader-circles .circle:nth-child(1){
width: 20px;
height: 20px;
animation: rotate-circle linear infinite;
animation-duration: 12s;
}
.loader-circles .circle:nth-child(2) {
width: 40px;
height: 40px;
animation: rotate-circle linear infinite;
animation-duration: 6s;
}
.loader-circles .circle:nth-child(3) {
width: 60px;
height: 60px;
animation: rotate-circle linear infinite;
animation-duration: 4s;
}
.loader-circles .circle:nth-child(4) {
width: 80px;
height: 80px;
animation: rotate-circle linear infinite;
animation-duration: 3s;
}
.loader-circles .circle:nth-child(5) {
width: 100px;
height: 100px;
animation: rotate-circle linear infinite;
animation-duration: 2.4s;
}
.loader-circles .circle:nth-child(6) {
width: 120px;
height: 120px;
animation: rotate-circle linear infinite;
animation-duration: 2s;
}
.loader-circles .circle:nth-child(7) {
width: 140px;
height: 140px;
animation: rotate-circle linear infinite;
animation-duration: 1.7142857143s;
}
.loader-circles .circle:nth-child(8) {
width: 160px;
height: 160px;
animation: rotate-circle linear infinite;
animation-duration: 1.5s;
}
.loader-circles .circle:nth-child(9) {
width: 180px;
height: 180px;
animation: rotate-circle linear infinite;
animation-duration: 1.3333333333s;
}
.loader-circles .circle:nth-child(10) {
width: 200px;
height: 200px;
animation: rotate-circle linear infinite;
animation-duration: 1.2s;
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
#keyframes rotate-circle {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
}
.clock {
width: 300px;
height: 300px;
background-color: rgba(255, 255, 255, .8);
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number{
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(var(--rotation));
font-size: 1.5rem;
}
.clock .number1 { --rotation: 30deg;}
.clock .number2 { --rotation: 60deg;}
.clock .number3 { --rotation: 90deg;}
.clock .number4 { --rotation: 120deg;}
.clock .number5 { --rotation: 150deg;}
.clock .number6 { --rotation: 180deg;}
.clock .number7 { --rotation: 210deg;}
.clock .number8 { --rotation: 240deg;}
.clock .number9 { --rotation: 270deg;}
.clock .number10 { --rotation: 300deg;}
.clock .number11 { --rotation: 330deg;}
.clock .hand{
--rotation: 0;
position: absolute;
bottom: 50%;
left: 50%;
background-color: black;
border: 1px solid white;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
transform-origin: bottom;
z-index: 10;
transform: translate(-50%) rotate(calc(var(--rotation) * 1deg));
}
.clock::after{
content: " ";
position: absolute;
background-color: black;
z-index: 11;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.clock .hand.second{
width: 3px;
height: 45%;
background-color: red;
}
.clock .hand.minute{
width: 7px;
height: 40%;
background-color: black;
}
.clock .hand.hour{
width: 10px;
height: 35%;
background-color: black;
}
body {
background-color: cornflowerblue;
text-align: center;
overflow-x: hidden;
}
.section {
min-height: 820px;
position: relative;
text-align: center;
font-family: sans-serif, arial;
margin: 0;
}
h1, p {
margin: 0;
font-family: sans-serif, arial;
font-weight: bold;
}
.title-top {
font-size: 60px;
padding-bottom: 30px;
}
.title-bottom {
font-size: 30px;
}
.title-tx {
font-size: 20px;
opacity: 0.8;
}
/* Navbar */
.nav {
position: fixed;
width: 100%;
top: 20px;
z-index: 9;
padding-left: 10px;
}
.nav a {
padding: 7px 20px;
border-radius: 50px;
margin-right: 10px;
float: left;
border-style: ridge;
background: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-decoration: none;
color: black;
font-family: sans-serif, arial;
font-weight: 100;
}
.nav a.active {
background: rgba(0, 0, 0, 0.5);
color: white;
}
.nav a:hover {
background: rgba(250, 164, 84, 0.795);
color: white;
}
/* Sections */
#section1{
background: linear-gradient(to right, #1e5799 0%, #2ce0bf 20%, #76dd2c 40%, #dba62b 60%, #e02cbf 80%, #1e5799 100%);
background-size: 10000px 100%;
animation: bg 15s linear infinite;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
font-family: 'Audiowide', cursive;
z-index: -1; /* ADDED THIS LINE OF CSS */
}
#keyframes bg {
0% {
background-position-x: 0;
}
100% {
background-position-x: 10000px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Animations Page HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--Links and Fonts-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.4.1.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript Clock</title>
<script defer src="script.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="loader-wrap">
<div class="loader-circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<!--Navbar-->
<div class="nav">
<nav>
<a class="active" href="#section1">Section 1</a>
</nav>
</div>
<!--Lesson 1-->
<div class="section" id="section1">
<div class = "clock">
<div class = "hand hour" data-hour-hand></div>
<div class = "hand minute" data-minute-hand></div>
<div class = "hand second" data-second-hand></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>
</div>
<script>
setTimeout(function(){
$('.loader-wrap').fadeToggle();
}, 2500);
</script>
</body>
</html>

Align vertical center CSS clock in bootstrap

Facing a problem in this bootstrap code.
section "hero" ( background gradient )
container
CSS & JS clock
text
waves
I want the container to be aligned vertically centered to the xl-lg-md-sm-col screen resolutions with equal padding or margin from top & bottom.
when ever i try adjusting the padding wave at the bottom also moves along.
Need a output like this https://ibb.co/7x3NF2s
here is the code-pen
https://codepen.io/haribabu-manoharan/pen/xxEdWez
// java scrtipt for clock
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
// java scrtipt for clock
#hero {
width: 100%;
position: relative;
padding: 260px 0 0 0;
bottom: 0px;
}
/*EDITED NERAM*/
#hero:before {
content: "";
/*background: rgba(2, 5, 161, 0.91);*/
background-image: linear-gradient(111.37738709038058deg, rgba(43, 45, 78, 1) 1.557291666666667%, rgba(225, 20, 139, 1) 101.34895833333333%);
background-repeat: no-repeat;
display: inherit;
align-items: center;
/*added*/
position: absolute;
bottom: 30px;
top: 0;
left: 0;
right: 0;
}
#hero h1 {
margin: 0 0 20px 0;
font-size: 24px;
font-weight: 700;
color: rgba(255, 255, 255, 0.8);
}
#hero h1 span {
color: #fff;
border-bottom: 4px solid #1acc8d;
}
#hero h2 {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
font-size: 17px;
text-align: justify;
line-height: 27px;
}
#hero .btn-get-started {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 30px;
border-radius: 50px;
transition: 0.5s;
color: #fff;
background: #1acc8d;
}
#hero .btn-get-started:hover {
background: #17b57d;
}
#hero .animated {
animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
#media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
#media (max-width: 991px) {
#hero {
padding-top: 260px;
}
#hero .animated {
-webkit-animation: none;
animation: none;
}
#hero .hero-img {
text-align: center;
}
#hero .hero-img img {
max-width: 45%;
}
#hero h1 {
font-size: 22px;
line-height: 30px;
margin-bottom: 10px;
}
#hero h2 {
font-size: 15px;
line-height: 24px;
margin-bottom: 30px;
}
}
#media (max-width: 575px) {
#hero .hero-img img {
width: 80%;
}
}
#-webkit-keyframes up-down {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes up-down {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}
.hero-waves {
display: block;
margin-top: 70px;
width: 100%;
height: 60px;
z-index: 5;
position: relative;
top: -29px;
}
#media (max-width:767px) {
#hero {
padding-top: 4px;
}
}
.wave1 use {
-webkit-animation: move-forever1 10s linear infinite;
animation: move-forever1 10s linear infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.wave2 use {
-webkit-animation: move-forever2 8s linear infinite;
animation: move-forever2 8s linear infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.wave3 use {
-webkit-animation: move-forever3 6s linear infinite;
animation: move-forever3 6s linear infinite;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
#-webkit-keyframes move-forever1 {
0% {
transform: translate(85px, 0%);
}
100% {
transform: translate(-90px, 0%);
}
}
#keyframes move-forever1 {
0% {
transform: translate(85px, 0%);
}
100% {
transform: translate(-90px, 0%);
}
}
#-webkit-keyframes move-forever2 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
#keyframes move-forever2 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
#-webkit-keyframes move-forever3 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
#keyframes move-forever3 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
/** clock css **/
.clock {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: url(../img/clock.png);
background-size: cover;
border-radius: 50%;
box-shadow: 0 -25px +25px rgba(255, 255, 255, 0.05),
inset 0 -25px +25px rgba(255, 255, 255, 0.05),
0 25px 25px rgba(0, 0, 0, 0.05),
inset 0 25px 25px rgba(0, 0, 0, 0.05);
}
.clock:before {
content: '';
position: absolute;
width: 25px;
height: 25px;
background: #fff;
border-radius: 50%;
z-index: 1000;
}
.clock .hour,
.clock .min,
.clock .sec {
position: absolute;
}
.clock .hour,
.hr {
width: 260px;
height: 150px;
}
.clock .min,
.mn {
width: 250px;
height: 190px;
}
.clock .sec,
.sc {
width: 330px;
height: 205px;
}
.hr,
.mn,
.sc {
display: flex;
justify-content: center;
/*align-items: center;*/
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 12px;
height: 70px;
background: #ff105e;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 100px;
background: #fff;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 130px;
background: #fff;
z-index: 12;
border-radius: 6px 6px 0 0;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<section id="hero">
<div class="container d-flex align-items-center">
<div class="row pt-lg-n5 mt-col-5 pt-col-5 mt-sm-5 pt-sm-5 mt-md-0 pt-md-0 d-flex align-self-center">
<div class="justify-content-sm-center col-12 col-md-6 col-lg-5 offset-xl-1 col-xl-4 order-1 d-flex align-items-center hero-img" data-aos="zoom-out" data-aos-delay="300">
<!-- HTML for clock -->
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<!-- End HTML for clock -->
</div>
<div class="col-12 col-md-6 offset-lg-0 col-lg-7 col-xl-6 order-2 d-flex align-items-center">
<div data-aos="zoom-out">
<h1>Why neram Classes for <span>NATA Coaching ?</span></h1><br>
<h2>We are team of talanted practising architects from IITs & NITs started this for betterment of this Architecture profession </h2>
<div class="text-center text-lg-left">
Get Started
</div>
</div>
</div>
</div>
</div>
<svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
<defs>
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
</defs>
<g class="wave1">
<use xlink:href="#wave-path" x="50" y="1" fill="rgba(255,255,255, .1)">
</g>
<g class="wave2">
<use xlink:href="#wave-path" x="50" y="-2" fill="rgba(255,255,255, .2)">
</g>
<g class="wave3">
<use xlink:href="#wave-path" x="50" y="7" fill="#fff">
</g>
</svg>
</section>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>