Target checked checkbox in jQuery - javascript

I have HTML, CSS and jQuery code for a checkbox. But I was recently making some changes in the HTML structure and now the jQuery is no longer working. And since I'm a beginner, I don't know how to fix this.
Can someone take a look and just let me know what jQuery should be targeting instead, so it'll change the styling of the elements when the checkbox is checked?
$('.form-check').click(function(){
$(this).closest('.list-group-item').find('.incomplete').css('display', (this.checked)?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', (this.checked)?'block':'none')
$(this).closest('.list-group-item').css('background-color',(this.checked)?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (this.checked)?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (this.checked)?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>


You are checking the .form-check if it is checked.. It should be the checkbox inside the .form-check.
Find the checkbox inside the .form-check first and the check for its prop if checked or not as follows:
$('.form-check').click(function() {
var checkbox = $(this).find('input[type=checkbox]')
$(this).closest('.list-group-item').find('.incomplete').css('display', (checkbox.prop('checked')) ? 'none' : 'block')
$(this).closest('.list-group-item').find('.complete').css('display', (checkbox.prop('checked')) ? 'block' : 'none')
$(this).closest('.list-group-item').css('background-color', (checkbox.prop('checked')) ? '#4CAF50' : '')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (checkbox.prop('checked')) ? '#fff' : '#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (checkbox.prop('checked')) ? '#fff' : '#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+svg {
display: none;
}
input[type=checkbox]:checked+svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div>
<!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>


The problem is with your this.isChecked, it is always undefined, so it always evaluates to false. I replaced it with isChecked, getting the value from the checked property of the checkbox belonging to this li item.
$('.form-check').click(function(){
var isChecked = $(this).find('#checkbox').prop('checked');
$(this).closest('.list-group-item').find('.incomplete').css('display', isChecked?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', isChecked?'block':'none')
$(this).closest('.list-group-item').css('background-color',isChecked?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', isChecked?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', isChecked?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

Related

Row Low / Minimalistic One page

I tried to figure out, how the website Link is made, especially the SVG fill out and the polygon which is alternating. But yet I did not achieve to make a suitable css.
What I want is:
Make a alternating background like them
and also the svg fillings.
They use also row low but I could not install it on my ubuntu, since i am using Ubuntu 22.04, does anybody know a suitable responsive grid layout for rowlow?
I made a CSS:
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
/* Standard syntax */
#keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
#keyframes svg-animation {
to {
stroke-dashoffset: 0; } }
#keyframes fill {
from {
fill: transparent; }
to {
fill: white; } }
#keyframes fade-logo {
0% {
opacity: 0; }
80% {
opacity: 0; }
100% {
opacity: 100%; } }
#keyframes no-scroll {
0% {
overflow: hidden; }
99% {
overflow: hidden; }
100% {
overflow: auto; } }
.menu-btn {
position: absolute;
z-index: 3;
right: 35px;
top: 25px;
cursor: pointer;
transition: all .75s ease-out; }
.menu-btn .btn-line {
width: 30px;
height: 3px;
margin: 0 0 5px 0;
background: black;
transition: all .75s ease-out; }
.menu-btn.close {
transform: rotate(180deg); }
.menu-btn.close .btn-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px); }
.menu-btn.close .btn-line:nth-child(2) {
opacity: 0; }
.menu-btn.close .btn-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px); }
.menu {
position: fixed;
top: 0;
width: 100%;
z-index: 2; }
.menu .menu-nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
display: none;
justify-content: center;
transition-property: none; }
.menu .menu-nav.mobile {
display: flex;
background-color: pink;
flex-direction: column;
height: 100vh;
width: 100vw;
position: absolute;
z-index: 2;
left: 100%; }
.menu .menu-nav.mobile.show {
left: 0; }
.menu .menu-nav li {
float: left;
text-align: center;
color: black;
padding: 25px 16px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: .85rem;
letter-spacing: .2rem; }
.menu .menu-nav li:hover {
cursor: pointer;
color: #87c6bd; }
#content_1 {
padding: 30px 0;
text-align: center;
height: 100vh;
background-color: #F3F3F3;
clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%); }
#content_1 .logo {
width: 220px;
height: auto;
animation: fade-logo 5s ease forwards; }
#content_2 {
margin-top: 0;
position: relative;
padding-top: 100px;
background: #FFF; }
#content_2 .gem-image {
transform: translate(-50%, -80%);
width: 30%;
max-width: 400px;
min-width: 250px;
height: auto;
left: 50%;
top: 0;
position: absolute;
z-index: 200; }
.loading-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
#svg_logo {
width: 220px;
height: auto;
animation: fill 2s ease forwards 2.25s; }
#svg_logo path:nth-child(1) {
stroke-dasharray: 493px;
stroke-dashoffset: 493px;
animation: svg-animation .75s ease forwards; }
#svg_logo path:nth-child(2) {
stroke-dasharray: 364px;
stroke-dashoffset: 364px;
animation: svg-animation .75s ease forwards 0.15s; }
#svg_logo path:nth-child(3) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 0.3s; }
#svg_logo path:nth-child(4) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 0.45s; }
#svg_logo path:nth-child(5) {
stroke-dasharray: 386px;
stroke-dashoffset: 386px;
animation: svg-animation .75s ease forwards .6s; }
#svg_logo path:nth-child(6) {
stroke-dasharray: 77px;
stroke-dashoffset: 77px;
animation: svg-animation .75s ease forwards .75s; }
#svg_logo path:nth-child(7) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards .9s; }
#svg_logo path:nth-child(8) {
stroke-dasharray: 314px;
stroke-dashoffset: 314px;
animation: svg-animation .75s ease forwards 1.05s; }
#svg_logo path:nth-child(9) {
stroke-dasharray: 236px;
stroke-dashoffset: 236px;
animation: svg-animation .75s ease forwards 1.20s; }
#svg_logo path:nth-child(10) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 1.35s; }
#svg_logo path:nth-child(11) {
stroke-dasharray: 361px;
stroke-dashoffset: 361px;
animation: svg-animation .75s ease forwards 1.5s; }
#svg_logo path:nth-child(12) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards 1.65s; }
#svg_logo path:nth-child(13) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 1.8s; }
#svg_logo path:nth-child(14) {
stroke-dasharray: 310px;
stroke-dashoffset: 310px;
animation: svg-animation .75s ease forwards 1.95s; }
#svg_logo path:nth-child(15) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.1s; }
#svg_logo path:nth-child(16) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.25s; }
* {
box-sizing: border-box; }
body {
height: 100%;
margin: 0;
font-family: 'Lato', Tahoma, Verdana, sans-serif;
background-color: white;
animation: no-scroll 5s ease forwards; }
h1, h2, h3 {
margin: 0;
font-weight: 600; }
a {
color: white;
text-decoration: none; }
#load {
content: '';
background-color: black;
width: 100%;
color: white;
text-align: center;
letter-spacing: .3rem;
display: flex;
height: 0;
justify-content: center;
align-items: center;
height: 100vh;
-webkit-animation: example 4s ease forwards 2.25s;
/* Safari 4.0 - 8.0 */
animation-name: example 4s ease forwards 2.25s; }
.headline {
position: relative;
text-align: center;
top: 0;
left: 0;
width: 100%;
z-index: 200;
font-size: 2rem;
letter-spacing: 1rem;
font-weight: 900;
margin-top: 100px; }
.headline:after {
width: 100px;
margin: 70px auto;
content: '';
display: block;
background: #1D1D1F;
height: 4px; }
The index.html is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>We Ain't Plastic Clone</title>
<meta name="description" content="We Ain't Plastic Clone">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css?v=1.0">
<!-- <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="load"></div>
<div class="loading-svg">
<svg id="svg_logo" width="1252" height="355" viewBox="0 0 1252 355" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.968 202H16.376L1.49597 134.8H15.8L24.92 180.4L38.072 134.8H51.128L64.184 180.208L73.304 134.8H87.128L72.248 202H57.656L44.312 155.056L30.968 202Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M121.624 202V134.8H173.272V146.896H135.544V162.256H160.408V173.968H135.544V189.904H173.656V202H121.624Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M248.22 202L275.868 134.8H291.996L319.26 202H304.188L297.372 184.336H269.628L262.716 202H248.22ZM273.948 173.2H293.148L283.644 148.432L273.948 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M350.884 202V134.8H364.804V202H350.884Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M402.96 134.8H416.208L449.616 178.288V134.8H462.672V202H450.384L416.112 157.072V202H402.96V134.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M503.955 130.864H517.587L507.219 156.112H497.331L503.955 130.864Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M549.012 147.088V134.8H608.148V147.088H585.588V202H571.668V147.088H549.012Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M687.109 202V134.8H720.805C724.069 134.8 727.077 135.344 729.829 136.432C732.645 137.456 735.045 138.896 737.029 140.752C739.013 142.608 740.549 144.848 741.637 147.472C742.789 150.032 743.365 152.848 743.365 155.92C743.365 158.928 742.789 161.712 741.637 164.272C740.549 166.768 738.981 168.944 736.933 170.8C734.949 172.656 732.581 174.096 729.829 175.12C727.077 176.144 724.069 176.656 720.805 176.656H701.029V202H687.109ZM719.269 146.8H701.029V165.136H719.269C722.277 165.136 724.677 164.304 726.469 162.64C728.325 160.976 729.253 158.768 729.253 156.016C729.253 153.264 728.325 151.056 726.469 149.392C724.677 147.664 722.277 146.8 719.269 146.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M778.373 202V134.8H792.293V189.712H829.061V202H778.373Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M859.549 202L887.196 134.8H903.325L930.589 202H915.516L908.701 184.336H880.956L874.044 202H859.549ZM885.276 173.2H904.477L894.972 148.432L885.276 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M958.328 191.344L966.296 181.36C970.2 184.752 973.944 187.248 977.528 188.848C981.176 190.384 985.016 191.152 989.048 191.152C993.208 191.152 996.536 190.384 999.032 188.848C1001.53 187.312 1002.78 185.264 1002.78 182.704C1002.78 180.4 1001.91 178.608 1000.18 177.328C998.52 176.048 995.704 175.088 991.736 174.448L978.392 172.144C972.632 171.184 968.248 169.168 965.24 166.096C962.296 163.024 960.824 159.056 960.824 154.192C960.824 147.92 963.192 142.96 967.928 139.312C972.728 135.664 979.192 133.84 987.32 133.84C992.184 133.84 997.08 134.672 1002.01 136.336C1007 138 1011.35 140.304 1015.06 143.248L1007.58 153.616C1003.99 150.864 1000.47 148.848 997.016 147.568C993.56 146.224 990.008 145.552 986.36 145.552C982.648 145.552 979.672 146.256 977.432 147.664C975.192 149.008 974.072 150.832 974.072 153.136C974.072 155.184 974.808 156.784 976.28 157.936C977.752 159.088 980.216 159.92 983.672 160.432L996.344 162.544C1003 163.632 1007.99 165.776 1011.32 168.976C1014.71 172.112 1016.41 176.272 1016.41 181.456C1016.41 187.984 1013.82 193.2 1008.63 197.104C1003.51 201.008 996.664 202.96 988.088 202.96C982.712 202.96 977.4 201.936 972.152 199.888C966.968 197.84 962.36 194.992 958.328 191.344Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1044.47 147.088V134.8H1103.61V147.088H1081.05V202H1067.13V147.088H1044.47Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1137.33 202V134.8H1151.25V202H1137.33Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1223.01 190.096C1226.53 190.096 1229.83 189.36 1232.9 187.888C1235.97 186.416 1238.69 184.304 1241.06 181.552L1250.18 190.576C1246.98 194.352 1242.88 197.36 1237.89 199.6C1232.96 201.84 1227.87 202.96 1222.63 202.96C1217.57 202.96 1212.83 202.064 1208.42 200.272C1204.07 198.48 1200.29 196.048 1197.09 192.976C1193.89 189.904 1191.36 186.256 1189.51 182.032C1187.71 177.808 1186.82 173.264 1186.82 168.4C1186.82 163.536 1187.75 158.992 1189.6 154.768C1191.46 150.48 1193.99 146.8 1197.19 143.728C1200.39 140.656 1204.16 138.224 1208.51 136.432C1212.93 134.64 1217.63 133.744 1222.63 133.744C1228 133.744 1233.22 134.896 1238.27 137.2C1243.33 139.44 1247.43 142.48 1250.56 146.32L1241.15 155.632C1238.79 152.688 1236 150.448 1232.8 148.912C1229.6 147.312 1226.21 146.512 1222.63 146.512C1219.62 146.512 1216.77 147.088 1214.08 148.24C1211.46 149.328 1209.19 150.864 1207.27 152.848C1205.35 154.768 1203.84 157.072 1202.75 159.76C1201.67 162.384 1201.12 165.264 1201.12 168.4C1201.12 171.472 1201.67 174.352 1202.75 177.04C1203.91 179.664 1205.44 181.936 1207.36 183.856C1209.35 185.776 1211.65 187.312 1214.27 188.464C1216.96 189.552 1219.87 190.096 1223.01 190.096Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M635.731 88.853L635.4 89.564H636.184H649.432H649.751L649.885 89.2749L690.493 2.01094L690.824 1.29999H690.04H676.792H676.473L676.339 1.58904L635.731 88.853Z" stroke="white"/>
<path d="M521.731 352.853L521.4 353.564H522.184H535.432H535.751L535.885 353.275L576.493 266.011L576.824 265.3H576.04H562.792H562.473L562.339 265.589L521.731 352.853Z" stroke="white"/>
</svg>
</div>
<nav class="menu">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
Gems
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Letters
</li>
<li class="nav-item">
Profile
</li>
<li class="nav-item">
Workflow
</li>
<li class="nav-item">
Content
</li>
</ul>
</nav>
<main>
<div id="content">
<section id="content_1">
<img class="logo" src="images/logo.svg" >
</section>
<section id="content_2">
<div class="headline">
<h1>GEMS</h1>
</div>
<img class="gem-image" src="images/gem-textured.png" >
</section>
</div>
</main>
<script src="js/main.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
My Problem is: The Polygon is not alternating like the link below. And I need a hint how I can make a scroll event such in the link the fill out the svg. As I already mentioned, I want to make use of Row Low but that did not work, I also get in touch with the owner but he did not replied yet.

Animation in CSS

I want to know how can you edit/modify the css so that it starts the animation when the user scrolls at the page where the whole animation or the skills bar in my case, is visible.
The animation works but the problem I am facing is that it works on the load of the website, and when I get to the skills bar the animation has been already played and it is not there anymore.
See the example below:
https://drive.google.com/file/d/1ogZE87xoeJV4vbMkE7fBV068ERMzd8it/view
This is an example, see how the animation plays when the user scrolls down to that page or section? I would like the same to happen with the below 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;
}
body20{
height: 100%;
place-items: center;
background: transparent;
}
::selection{
color: #fff;
background: black;
}
.skill-bars{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
.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 span18{
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 span18{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.html span18{
width: 84%;
}
.bar .progress-line.css span18{
width: 76%;
}
.bar .progress-line.jquery span18{
width: 91%;
}
.bar .progress-line.python span18{
width: 59%;
}
.bar .progress-line.mysql span18{
width: 70%;
}
.progress-line span18::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 span18::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 span18::after{
content: "84%";
}
.progress-line.css span18::after{
content: "76%";
}
.progress-line.jquery span18::after{
content: "91%";
}
.progress-line.python span18::after{
content: "59%";
}
.progress-line.mysql span18::after{
content: "70%";
}
/* -----------------second box------------------------- */
.skill-bars1{
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 10px;
}
.skill-bars1 .bar1{
margin: 20px 0;
}
.skill-bars1 .bar1:first-child{
margin-top: 0px;
}
.skill-bars1 .bar1 .info1{
margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars1 .bar1 .progress-line1{
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);
}
}
.bar1 .progress-line1 span19{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar1 .progress-line1.html1 span19{
width: 61%;
}
.bar1 .progress-line1.css1 span19{
width: 50%;
}
.bar1 .progress-line1.jquery1 span19{
width: 68%;
}
.bar1 .progress-line1.python1 span19{
width: 82%;
}
.bar1 .progress-line1.mysql1 span19{
width: 98%;
}
.progress-line1 span19::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-line1 span19::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-line1.html1 span19::after{
content: "61%";
}
.progress-line1.css1 span19::after{
content: "50%";
}
.progress-line1.jquery1 span19::after{
content: "68%";
}
.progress-line1.python1 span19::after{
content: "82%";
}
.progress-line1.mysql1 span19::after{
content: "98%";
}
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18>Harvard CS50 Course</span18>
</div>
<div class="progress-line html">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Youtube Channel (Java Tutorials)</span18>
</div>
<div class="progress-line css">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>C++</span18>
</div>
<div class="progress-line jquery">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="progress-line python">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="progress-line mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second box -->
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars1">
<div class="bar1">
<div class="info1">
<span19>Competitive Chess (School Club)</span19>
</div>
<div class="progress-line1 html1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Basketball</span19>
</div>
<div class="progress-line1 css1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>GitHub Side Projects</span19>
</div>
<div class="progress-line1 jquery1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>Computer Science and Math Tutoring</span19>
</div>
<div class="progress-line1 python1">
<span19></span19>
</div>
</div>
<div class="bar1">
<div class="info1">
<span19>University Supplementary Applications &#128522</span19>
</div>
<div class="progress-line1 mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</section>
Right now, the animation plays but like I said it only plays on the load of the whole website, but when I reach that section where the skills bar is displayed, the animation does not work. Any suggestions?
BTW I did use bad coding practices which is that I reuseed the same code for skills bar for the second skills bar, I just renamed the classes which I should not have, but I am gradually getting the jist of good coding practices.

Try and add the animation to a class which you only add to the element when it scrolls into view.
Add animation styles to "animate" class.
Add scroll event listener and get skills bar offset-top property.
In the scroll event listener, check whether the offset top of your skills bar is in view, if it is in view, add the "animate" class you created in step 1.
This should start the animation only when you add the class to your skills bar and therefore every time you scroll in view, the animation will be applied

here is an example of setting it on scroll but u have to set it's default to be set if the windows does not overflow
EDITED: less code with foreach instead of separated functions.
$(document).ready(function() {
$(window).scroll(function(event) {
var nxtdiv, nxtdiv2;
var scroll = $(window).scrollTop() + 240;
var trgt = $('.info > span18');
var trgt2 = $('.info1 > span19');
trgt.each(function(e){
nxtdiv = trgt[e].parentNode.nextElementSibling;
if (scroll >= trgt[e].offsetTop && !(nxtdiv.classList.contains('progress-line'))) {
nxtdiv.classList.add('progress-line');
}
});
trgt2.each(function(e){
nxtdiv2 = trgt2[e].parentNode.nextElementSibling;
if (scroll >= trgt2[e].offsetTop && !(nxtdiv2.classList.contains('progress-line1'))) {
nxtdiv2.classList.add('progress-line1');
}
});
});
});
$(window).scroll();
#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;
}
body20 {
height: 100%;
align-items: center;
background: transparent;
}
::selection {
color: #fff;
background: black;
}
.skill-bars {
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.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 span18 {
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 span18 {
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line.html span18 {
width: 84%;
}
.bar .progress-line.css span18 {
width: 76%;
}
.bar .progress-line.jquery span18 {
width: 91%;
}
.bar .progress-line.python span18 {
width: 59%;
}
.bar .progress-line.mysql span18 {
width: 70%;
}
.progress-line span18::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 span18::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 span18::after {
content: "84%";
}
.progress-line.css span18::after {
content: "76%";
}
.progress-line.jquery span18::after {
content: "91%";
}
.progress-line.python span18::after {
content: "59%";
}
.progress-line.mysql span18::after {
content: "70%";
}
/* -----------------second box------------------------- */
.skill-bars1 {
padding: 25px 30px;
width: 97%;
background: #fff;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.skill-bars1 .bar1 {
margin: 20px 0;
}
.skill-bars1 .bar1:first-child {
margin-top: 0px;
}
.skill-bars1 .bar1 .info1 {
margin-bottom: 5px;
}
.skill-bars1 .bar1 .info1 span19 {
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
#keyframes showText {
100% {
opacity: 1;
}
}
.skill-bars1 .bar1 .progress-line1 {
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);
}
}
.bar1 .progress-line1 span19 {
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: black;
animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar1 .progress-line1.html1 span19 {
width: 61%;
}
.bar1 .progress-line1.css1 span19 {
width: 50%;
}
.bar1 .progress-line1.jquery1 span19 {
width: 68%;
}
.bar1 .progress-line1.python1 span19 {
width: 82%;
}
.bar1 .progress-line1.mysql1 span19 {
width: 98%;
}
.progress-line1 span19::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-line1 span19::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-line1.html1 span19::after {
content: "61%";
}
.progress-line1.css1 span19::after {
content: "50%";
}
.progress-line1.jquery1 span19::after {
content: "68%";
}
.progress-line1.python1 span19::after {
content: "82%";
}
.progress-line1.mysql1 span19::after {
content: "98%";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>What I am Working On</h2>
</div>
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars">
<div class="bar">
<div class="info">
<span18 id="S1">Harvard CS50 Course</span18>
</div>
<div class="html progress-line">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18 id="S2">Youtube Channel (Java Tutorials)</span18>
</div>
<div class="css progress-line">
<span18></span18>
</div>
</div>
<div class="bar">
<div class="info">
<span18 id="S3">C++</span18>
</div>
<div class="jquery">
<span18></span18>
</div>
</div>
<div id="S4" class="bar">
<div class="info">
<span18>Java</span18>
</div>
<div class="python">
<span18></span18>
</div>
</div>
<div id="S5" class="bar">
<div class="info">
<span18>Web Development (Front-End)</span18>
</div>
<div class="mysql">
<span18></span18>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second box -->
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/picturealign.css">
<div class="column1">
<div class="row1">
<div class="skill-bars1">
<div id="S6" class="bar1">
<div class="info1">
<span19>Competitive Chess (School Club)</span19>
</div>
<div class="html1">
<span19></span19>
</div>
</div>
<div id="S7" class="bar1">
<div class="info1">
<span19>Basketball</span19>
</div>
<div class="css1">
<span19></span19>
</div>
</div>
<div id="S8" class="bar1">
<div class="info1">
<span19>GitHub Side Projects</span19>
</div>
<div class="jquery1">
<span19></span19>
</div>
</div>
<div id="S9" class="bar1">
<div class="info1">
<span19>Computer Science and Math Tutoring</span19>
</div>
<div class="python1">
<span19></span19>
</div>
</div>
<div id="S10" class="bar1">
<div class="info1">
<span19>University Supplementary Applications &#128522</span19>
</div>
<div class="mysql1">
<span19></span19>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

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>

CSS border animation - convert solid lines to dotted lines

I have created a circle animation and it works fine, however I am trying to change from solid lines to dotted lines, but I am wondering how to get it done, can somebody please suggest?
Here is how it looks right now:
#loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.outer-shadow, .inner-shadow {
z-index: 4;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
}
.inner-shadow {
top: 1px;
left: 1px;
width: 48px;
height: 48px;
margin-left: 0;
margin-top: 0;
border-radius: 100%;
background-color: #ffffff;
}
.hold {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 50px, 50px, 25px);
border-radius: 100%;
background-color: #fff;
}
.fill, .dot span {
background-color: #f00;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
z-index: 1;
-webkit-animation: left 1s linear;
-moz-animation: left 1s linear;
animation: left 1s linear both;
}
#keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
#-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
z-index: 3;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.right .fill {
z-index: 3;
-webkit-animation: right 1s linear;
-moz-animation: right 1s linear;
animation: right 1s linear both;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
#-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
margin-left: 8px;
margin-top: 7px;
}
<div id='loading'>
<div class='outer-shadow'> </div>
<div class='inner-shadow'> </div>
<div class='hold left'>
<div class='fill'></div>
</div>
<div class='hold right'>
<div class='fill'></div>
</div>
</div>

Here is another snippet for your question. There is no genuine way to move dotted lines. Instead, I cover/uncover the dotted circle below with another circle with white border. Please see below:
#c1 {
stroke-width: 1px;
stroke: red;
fill: transparent;
stroke-dasharray: 5;
}
#c2 {
animation: render 1s linear both;
stroke-width: 5px;
stroke: white;
fill: transparent;
stroke-dasharray: 377;
stroke-dashoffset: 0;
}
#keyframes render {
100% {
stroke-dasharray: 377;
stroke-dashoffset: -377;
}
}
<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<circle id="c1" cx="120" cy="120" r="60" />
<circle id="c2" cx="120" cy="120" r="60" />
</svg>

.circle {
border-radius: 50%;
width: 50px;
height: 50px;
border: 2px dotted transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
position: relative;
margin: 30px auto;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
25% {
border-right-color: red;
}
50% {
border-bottom-color: red;
}
75% {
border-left-color: red;
}
100% {
border-top-color: red;
border-left-color: red;
border-bottom-color: red;
border-right-color: red;
transform: rotate(360deg);
}
}
<div class="circle"></div>
Edit, Updated
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
border-color: transparent;
border-style: hidden;
border-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-style: dotted;
border-right-style: dotted;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-delay: .25s;
position: relative;
margin: 30px auto;
transform: rotate(45deg);
transition: border 1s ease-in .25s;
}
#keyframes spin {
0% {
border-top-width: 2px;
border-top-color: red;
}
25% {
border-right-width: 2px;
border-right-color: red;
}
50% {
border-bottom-width: 2px;
border-bottom-color: red;
}
75% {
border-left-width: 2px;
border-left-color: red;
}
100% {
border: 2px dotted red;
}
}
<div class="circle"></div>

If possible, I would like to strongly recommend to use SVG as it will make your life way easier.
In the example below, I am using stroke-dasharray and stroke-dashoffset to manipulate the border. stroke-dasharray stands for the length of dashes, and stroke-dashoffset means offset from where dashed line begins.
By default, I assigned stroke-dasharray: 377; and stroke-dashoffset: 377;. It means it uses 377px length of dashes and spaces in between, with 377px offset.
If you change stroke-dashoffset to 0, it will gradually draw(reduce offset) the circle border. As the length of circumference is about 377px (2 x Pi x 60px), it will make a circle without any dashes.
At the last frame of the animation, as soon as you change the stroke-dasharray to smaller numbers, it will transform its border to dashes.
circle {
stroke-width: 1px;
stroke: red;
fill: transparent;
stroke-dasharray: 377;
stroke-dashoffset: 377;
animation: render 1s linear both;
}
#keyframes render {
99% {
stroke-dasharray: 377;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 5;
stroke-dashoffset: 0;
}
}
<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
<circle cx="80" cy="80" r="60" />
</svg>

how to prevent resizing div when resizing my web browser?

please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D
/** to prevent inputing numbers in textbox enter your mobile number */
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}/** to prevent inputing numbers in textbox enter your mobile number END */
/** For Checkbox */
jQuery(document).ready(function()
{
jQuery("#accept").click(function(){
if(jQuery("#button").is(":enabled"))
{
jQuery("#button").prop("disabled",true);
}
else
{
jQuery("#button").prop("disabled",false);
}
});});/** For Checkbox End*/
.plogo{
z-index:5;
position:absolute;
font-family: Georgia, serif;
line-height: 1em;
color: #ffffff;
font-weight:bold;
font-style:italic;
font-size: 72px;
text-shadow:0px 0px 0 rgb(56,56,56),1px 1px 0 rgb(56,56,56),2px 2px 0 rgb(56,56,56),3px 3px 0 rgb(56,56,56),4px 4px 0 rgb(56,56,56),5px 5px 0 rgb(56,56,56),6px 6px 0 rgb(56,56,56), 7px 7px 0 rgb(56,56,56),8px 8px 7px rgba(0,0,0,0.3),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
a {text-decoration: none;}
nav {
width: 100%;
height: 80px;
background: rgb(2,189,138);
position:absolute;
z-index:4;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
font-weight:bold;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
color: #eee;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100% auto;
margin-top: -250px;
overflow: visible;
}
.container {
max-width: 600px;
margin: 20px;
padding: 80px 0;
height: 100% auto;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
.cacc{
z-index: 2;
position:relative;
height:10px;
width:280px;
}
input[type='text']{
font-size:18px;
font-family:modern, tahoma;
}
/*---------- For username --------------------------------*/
input[type='text'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
/*---------- For username End--------------------------------*/
input[type='password'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;}
input[type='email'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
.dlist{font-size: 18px; font-family:modern; color:grey; border-radius:5px; z-index:2; position:relative; }
.cbox{ position:relative; z-index:2;}
.logbutton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: #fff;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
position: relative;
z-index: 2;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.logbutton:hover {
background-color: #f5f7f9;
}
</head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<body style="background-color:#e8e8e8; margin:0px; padding:0px;">
<font class="plogo"> &nbspP . A . R . S</font>
<nav>
<ul>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<li>Home</li> &nbsp&nbsp&nbsp
<li>Log In</li> &nbsp&nbsp&nbsp
<li>Create Account</li>
<li class="drop">
Advertisement
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Job Hiring</li>
<li>Tourist Spot</li>
<li>Restaurant & Bar</li>
<li>Foods</li>
<li>Party Events</li>
</ul>
</div>
</div>
</li>
<li>About Us</li>
</ul>
</nav>
<div class="wrapper">
<div class="container">
<center><h1 style="font-weight:bold;color:#fff;">CREATE ACCOUNT</h1>
<?php
?>
<form action=""><font style="color:#fff; font-weight:bold; font-size:18px;">
Choose your Username
<input type="text" class="cacc" placeholder="Create Username" />
Choose your Password
<input type="text" class="cacc" placeholder="Create Password" />
Your Email
<input type="email" class="cacc" placeholder="Enter your email" />
Your First Name
<input type="text" class="cacc" placeholder="First name" />
Your Last Name
<input type="text" class="cacc" placeholder="Last name" />
Your Mobie Number
<input type="text" onkeypress="validate(event)" class="cacc" placeholder="11 Digits Mobile Number" maxlength="11" />
Your Birthday<br />
<select class="dlist">
<option>Month</option>
<option>123</option>
</select>
<select class="dlist">
<option>Day</option>
</select>
<select class="dlist">
<option>Year</option>
</select><br />
Your Gender<br />
<select class="dlist">
<option>Gender</option>
<option>Male</option>
<option>Female</option>
</select><br />
<input type="checkbox" class="cbox" id="accept" required />
<br />
<input type="submit" value="Create Account" class="logbutton" disabled="disabled" id="button" />
</font></form>
</center></div>
</body>
please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D

Add min-width CSS property to the element you want to not be resized to lower than prefered width:
.YOUR_DIV_CLASS {
min-width: 500px; // Or any other width you prefer.
}
Or use width property and define width in px to make the div have static width.

changing each or some of those elements (depending on your needs)
... {
...
width: 100%;
...
}
into something like:
... {
...
width: 980px; (or whatever numeber you need)
...
}

Categories

Resources