Develop Reference

Why is my content not displaying after the page gets loaded?

hello i have created a loading screen for my home page, but the content doesn't display after the site has loaded. I set the console log to send message once it has loaded and I don't get any errors. Does anyone know why this is happening? Also, how can I get the loading text to fade every time it changes as well?
function timeout(ms) {
return new Promise((resolve, reject) => setTimeout(resolve, ms));
}
function loadingScreen() {
var loadingText = document.getElementById('loading-text');
loadingText.innerText = "Welcome To StudioPick."
var delay = 7000;
return timeout(delay)
.then(() => { loadingText.innerText = "Loading studios..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Almost done..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Let's get started"; return timeout(delay) })
.then(() => { loadingText.parentElement.style.display = "none" })
}
document.addEventListener('DOMContentLoaded', () => {
console.log("content has loaded.")
loadingScreen();
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
background-color: #d1d1d1 !important;
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#loading-text {
position: relative;
top: 33rem;
text-align: center;
z-index: 100 !important;
color: #ffffff;
font-size: 20px;
}
#loading {
font-size: 30px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background: #9370db url(/dist/512x512\ Half\ Circle.gif);
background-size: 2%;
background-repeat: no-repeat;
background-position: center;
}
.navbar-light {
background-color: transparent;
z-index: 5;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.nav-item {
font-size: 20px;
padding-right: 15px;
color: #ffffff !important;
}
.nav-item2 {
background-color: #9370db !important;
border-radius: 15px !important;
width: 95px !important;
text-align: center !important;
font-size: 20px;
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
#media (pointer: coarse) and (hover: none) {
header {
background: url("https://source.unsplash.com/XT5OInaElMw/1600x900") black
no-repeat center center scroll;
}
header video {
display: none;
}
}
.graybg {
background-color: #ffffff !important;
border-radius: 15px !important;
margin: 15px;
padding: 7px;
}
.searchbox {
width: 100%;
border-radius: 15px !important;
background-color: transparent;
border: 5px;
padding: 30px;
margin: 0;
margin-top: 75px;
text-align: center;
position: relative;
top: -130px;
}
.search {
position: relative;
right: -185px;
display: flex;
justify-content: space evenly;
width: 100%;
border-radius: 15px !important;
padding: 7px;
margin-top: 10px;
border: 3px solid #000000;
font-size: 17px;
}
.zipcode {
position: relative;
right: -165px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
margin-left: 40px;
width: 50%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.sortbox {
position: relative;
right: -75px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
width: 33%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.filterbox {
position: relative;
right: 85px;
display: flex;
justify-content: space evenly;
width: 30%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
margin-top: 10px;
}
.enter-site {
background-color: transparent;
color: #ffffff;
padding: 0;
border-color: #ffffff;
width: 120px;
height: 45px;
border-radius: 15px !important;
align-items: center;
justify-content: center;
position: relative;
right: -580px;
top: 50px;
z-index: 25;
}
#footer {
position: relative;
right: -15px;
top: 225px;
z-index: 20;
font-size: 12px;
}
/*---Header---*/
.sturow > * {
flex: 1;
}
/*---Studio List---*/
.stucontainer {
width: 100%;
height: 900px;
padding: 50px 80px;
}
/*---Card One---*/
/*---Star Rating 1---*/
.rating-box {
width: 175px;
border-radius: 15px !important;
height: 35px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Links---*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
text-decoration: none;
color: purple;
}
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.card1 .card-meta {
position: relative;
right: -55px;
color: #9370db;
}
.stuLocation {
position: relative;
top: -10px;
right: -55px;
}
/*---Like Button---*/
.btns1 {
position: relative;
top: -50px;
left: -50px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1 {
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -30px;
left: -105px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -7px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.stucontainer .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.stucontainer .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.stucontainer .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.stucontainer .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.stucontainer .card1-stack .carousel .buttons:hover {
color: #c01313;
background: #fff;
}
.stucontainer .card1-stack .card-list {
width: 300px;
}
.stucontainer .card1-stack .card-list__image {
height: 200px;
}
.stucontainer .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.stucontainer .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.stucontainer .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.stucontainer .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.stucontainer .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.stucontainer .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.stucontainer .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover > .buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.stucontainer .card1-stack:hover > .buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
/*---Card stack---*/
/*---Card One---*/
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>StudioPick</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div id="loading">
<div id="loading-text"></div>
</div>
<div id="page">
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand"
href="#"><strong>StudioPick</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" style="color: #ffffff;"
href="index.html"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html"><strong>Log In</strong></a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html"><strong>Sign Up</strong></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This div is intentionally blank. It creates the transparent black overlay over the video which you can modify in the CSS -->
<div class="overlay"></div>
<!-- The HTML5 video element that will create the background video on the header -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./Joony_Vlog.mp4" type="video/mp4">
</video>
<!-- The header content -->
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<div class="searchbox">
<h1 style="font-size: 50px; font-family: Arial, sans-serif;"><strong>Find Your Next
Studio</strong></h1>
<div class="row">
<!---Search--->
<div class="col-md-3">
<input class="search" type="text" placeholder="Search">
</div>
<!---Zipcode-->
<div class="col-md-3">
<input class="zipcode" type="text" placeholder="Zipcode">
</div>
<!---Sort----->
<div class="col-md-3">
<select class="sortbox">
<option value="Sort">Sort by</option>
<option value="Location">Location</option>
<option value="Rating">Rating</option>
</select>
</div>
<!---Filter--->
<div class="col-md-3">
<select class="filterbox">
<option value="Filter">Filter</option>
<option value="50 mi">50 mi</option>
<option value="30 mi">30 mi</option>
<option value="25 mi">25 mi</option>
<option value="10 mi">10 mi</option>
<option value="5 mi">5 mi</option>
</select>
</div>
<button class="enter-site" onclick="window.location.href='Index.html'"></a><strong>View
Studios</strong></button>
<footer class="mt-auto text-white-50" id="footer">
<p>#Bekaedo <br>StudioPick 2022 ©</p>
</footer>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<!--Studio List-->
<div class="row">
<!--Studio One-->
<div class="stuOne mx-auto">
<div class="stucontainer">
<div class="card1-stack">
<!--Studio Front Page-->
<li class="card1 text-white card-has-bg click-col"
style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle" id="stuImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
alt="Generic placeholder image"
style="max-width:50px; position: relative; top: 50px; left: -150px;">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<!--Heart Button--->
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1"
class="btn"><i class="fas fa-heart"></i></Button>
</div>
<!---Heart Button--->
<!---Star Rating--->
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%"
y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5"
fill="currentColor"
points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085">
</polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<!---Star Rating--->
</div>
</div>
<!--Studio Front Page-->
</div>
</div>
</div>
<!--Studio One-->
<!--Studio Two-->
<!--Studio Two-->
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

You are setting display: none to .loading-text, it needs to be set on its parent (#loading).
As for fading, innerText.fadeOut does nothing. I would suggest doing this with css by toggling appropriate classes with js.

Header is not in the correct position

Excuse me for my stupidity. I'm trying to merge two different files but they're messed up and I'm sweating while thinking about the solution. Really appreciate someone taking the time to review my case T^T
Drive of header video if you want.
Oh, the system forced me to add more details to the post but I think with this dense code, it must be very detailed....
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu+Condensed&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
header {
z-index: 999;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 200px;
transition: 0.5s ease;
}
header .brand {
color: #fff;
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
}
header .navigation {
position: relative;
}
header .navigation .navigation-items a {
position: relative;
color: #fff;
font-size: 1em;
font-weight: 500;
text-decoration: none;
margin-left: 30px;
transition: 0.3s ease;
}
header .navigation .navigation-items a:before {
content: '';
position: absolute;
background: #fff;
width: 0;
height: 3px;
bottom: 0;
left: 0;
transition: 0.3s ease;
}
header .navigation .navigation-items a:hover:before {
width: 100%;
}
section {
padding: 100px 200px;
}
.home {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
background: #2696E9;
}
.home:before {
z-index: 777;
content: '';
position: absolute;
background: rgba(3, 94, 251, 0.144);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.home .content {
z-index: 888;
color: #fff;
width: 70%;
margin-top: 50px;
display: none;
}
.home .content.active {
display: block;
}
.home .content h1 {
font-size: 4em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 5px;
line-height: 75px;
margin-bottom: 40px;
}
.home .content h1 span {
font-size: 1.2em;
font-weight: 600;
}
.home .content p {
margin-bottom: 65px;
}
/* .home .content a{
background: #fff;
padding: 15px 35px;
color: #1680AC;
font-size: 1.1em;
font-weight: 500;
text-decoration: none;
border-radius: 2px;
} */
.home .media-icons {
z-index: 888;
position: absolute;
right: 30px;
display: flex;
flex-direction: column;
transition: 0.5s ease;
}
.home .media-icons a {
color: #fff;
font-size: 1.6em;
transition: 0.3s ease;
}
.home .media-icons a:not(:last-child) {
margin-bottom: 20px;
}
.home .media-icons a:hover {
transform: scale(1.3);
}
.home video {
z-index: 000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-navigation {
z-index: 888;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(80px);
margin-bottom: 12px;
}
.slider-navigation .nav-btn {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
transition: 0.3s ease;
}
.slider-navigation .nav-btn.active {
background: #2696E9;
}
.slider-navigation .nav-btn:not(:last-child) {
margin-right: 20px;
}
.slider-navigation .nav-btn:hover {
transform: scale(1.2);
}
.video-slide {
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.video-slide.active {
clip-path: circle(150% at 0 50%);
transition: 2s ease;
transition-property: clip-path;
}
#media (max-width: 1040px) {
header {
padding: 12px 20px;
}
section {
padding: 100px 20px;
}
.home .media-icons {
right: 15px;
}
header .navigation {
display: none;
}
header .navigation.active {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(1, 1, 1, 0.5);
}
header .navigation .navigation-items a {
color: #222;
font-size: 1.2em;
margin: 20px;
}
header .navigation .navigation-items a:before {
background: #222;
height: 5px;
}
header .navigation.active .navigation-items {
background: #fff;
width: 600px;
max-width: 600px;
margin: 20px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 5px;
box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
}
.menu-btn {
background: url(menu.png)no-repeat;
background-size: 30px;
background-position: center;
width: 40px;
height: 40px;
cursor: pointer;
transition: 0.3s ease;
}
.menu-btn.active {
z-index: 999;
background: url(close.png)no-repeat;
background-size: 25px;
background-position: center;
transition: 0.3s ease;
}
}
#media (max-width: 560px) {
.home .content h1 {
font-size: 3em;
line-height: 60px;
}
}
body .bod {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3c2864;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px;
}
.card {
position: relative;
width: 320px;
height: 450px;
margin: 30px;
background: #287bff;
border-radius: 20px;
border-bottom-left-radius: 160px;
border-bottom-right-radius: 160px;
box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25), 0 45px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
}
.card::before {
content: '';
position: absolute;
top: -140px;
left: -40%;
width: 100%;
height: 120%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
transform: rotate(35deg);
pointer-events: none;
filter: blur(5px);
}
.card:nth-child(1) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.card:nth-child(2) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.card:nth-child(3) {
background: linear-gradient(to bottom, #24ff72, #9a4eff);
}
.icon {
position: relative;
width: 140px;
height: 120px;
background: #3c2864;
;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0 #fff;
z-index: 1000;
display: flex;
justify-content: center;
}
.icon::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 50px;
background: transparent;
border-top-right-radius: 50px;
box-shadow: 15px -15px 0 15px #3c2864;
}
.icon::after {
content: '';
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 50px;
background: transparent;
border-top-left-radius: 50px;
box-shadow: -15px -15px 0 15px #3c2864;
}
.icon ion-icon {
color: #fff;
position: relative;
font-size: 6em;
z-index: 10000;
--ionicon-stroke-width: 10px;
}
.cont {
position: absolute;
width: 100%;
padding: 30px;
padding-top: 140px;
text-align: center;
}
.cont h2 {
font-size: 1.75em;
color: #fff;
margin-bottom: 10px;
}
.cont p {
color: #fff;
line-height: 1.5em;
}
.cont a {
color: #000000;
;
line-height: 1.5em;
}
footer {
background-color: #000000;
background-position: center;
color: #fff;
line-height: 1.5em;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KHXH&NV</title>
<link rel="stylesheet" href="nthuuyen.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body class="bod">
<div class="container">
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Phạm Thanh Loan</h2>
<p>Điểm học tập: 9.1 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br>
<!-- Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br> -->
Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br>
Read more
</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Đỗ Thanh Tây</h2>
<p>Điểm học tập: 9 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
<!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
Read more
</p>
</div>
</div>
<div class="card">
<div class="icon">
<ion-icon name="star-half-outline"></ion-icon>
</div>
<div class="cont">
<h2>Nguyễn Ngọc Phương Uyên</h2>
<p>Điểm học tập: 8.6 <br> Điểm rèn luyện: 81 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
<!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
Read more
</p>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
<body class="bod">
<header>
ĐOÀN HỘI SINH VIÊN
<div class="menu-btn"></div>
<div class="navigation">
<div class="navigation-items">
Trang chủ
Giới thiệu
Hướng dẫn
Thông báo
Liên hệ
</div>
</div>
</header>
<section class="home">
<video class="video-slide active" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="head.mp4" autoplay muted loop></video>
<video class="video-slide" src="hea.mp4" autoplay muted loop></video>
<div class="content active">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="content">
<h1>ㅤㅤㅤㅤㅤ<br><span>ㅤㅤㅤㅤ</span></h1>
<p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</p>
<!-- Read More -->
</div>
<div class="media-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
<div class="slider-navigation">
<div class="nav-btn active"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
<div class="nav-btn"></div>
</div>
</section>
<script type="text/javascript">
//Javacript for responsive navigation menu
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
menuBtn.addEventListener("click", () => {
menuBtn.classList.toggle("active");
navigation.classList.toggle("active");
});
//Javacript for video slider navigation
const btns = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".video-slide");
const contents = document.querySelectorAll(".content");
var sliderNav = function(manual) {
btns.forEach((btn) => {
btn.classList.remove("active");
});
slides.forEach((slide) => {
slide.classList.remove("active");
});
contents.forEach((content) => {
content.classList.remove("active");
});
btns[manual].classList.add("active");
slides[manual].classList.add("active");
contents[manual].classList.add("active");
}
btns.forEach((btn, i) => {
btn.addEventListener("click", () => {
sliderNav(i);
});
});
</script>
</body>
<footer>
<p>
Group 3 <br> Phone: 0374040XXX <br> Class:xyz
</p>
</footer>
</html>

Next button to change slide in html

var TIMEOUT = 6000;
var interval = setInterval(handleNext, TIMEOUT);
function handleNext() {
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex >= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.next('input[class*="slide-radio"]')
.attr('checked', true);
}
}
* {
box-sizing: border-box;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
/* Navigation */
.navigation {
position: absolute;
width: 100%;
height: 100px;
padding: 0 100px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.navigation-left {
margin-left: -33px;
}
.navigation-left a {
text-decoration: none;
text-transform: uppercase;
color: #333745;
font-size: 12px;
font-weight: bold;
width: 107px;
height: 30px;
border: 2px solid transparent;
border-radius: 15px;
display: inline-block;
text-align: center;
line-height: 25px;
transition: all .2s;
}
.navigation-left a:hover,
.navigation-left a:focus {
border-color: rgb(234, 46, 73);
background-color: rgba(44, 45, 47, 0);
}
.navigation-center {
margin-right: 85px;
}
.navigation-right {
display: flex;
align-items: center;
}
.login-btn {
background-color: #b8b8b9;
width: 97px;
height: 30px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
border-radius: 15px;
border: none;
color: #333745;
text-transform: uppercase;
margin-left: 20px;
transition: all .2s;
cursor: pointer;
}
.login-btn:hover {
transform: scale(1.06);
}
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* Slides Background Color */
.slide-1 {
background: #fbad99;
left: 0;
}
.slide-2 {
background: #a9785c;
left: 100%
}
.slide-3 {
background: #9ea6b3;
left: 200%
}
.slide-4 {
background: #b1a494;
left: 300%;
}
.slider {
display: flex;
justify-content: flex-start;
}
.slider-content {
width: 635px;
padding-left: 100px;
}
/* Slider Inner Slide Effect */
.slider h2 {
color: #333333;
font-weight: 900;
text-transform: capitalize;
font-size: 60px;
font-weight: 300;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
margin-top: 0;
letter-spacing: 2px;
}
.slider h4 {
font-size: 22px;
font-family: "Oswald";
color: rgba(51, 51, 51, 0.349);
font-weight: bold;
text-transform: uppercase;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider>img {
position: absolute;
right: 10%;
bottom: 0;
height: 100%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slide-1>img {
right: 0;
}
.buy-now-btn {
background-color: #ea2e49;
width: 130px;
height: 50px;
border-radius: 30px;
border: none;
font-family: Montserrat;
font-size: 20px;
font-weight: 100;
color: #fff;
text-align: left;
padding-left: 35px;
position: relative;
cursor: pointer;
transition: all .2s;
}
.buy-now-btn:hover {
box-shadow: 0px 0px 60px -17px rgba(51, 51, 51, 1);
}
.slider .buy-now-btn:focus,
.navigation .login-btn:focus {
outline: none;
}
/* Animations */
.slider h2 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s;
/* Safari */
transition-delay: 1s;
}
.slider h4 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.4s;
/* Safari */
transition-delay: 1.4s;
}
.slider>img {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.2s;
/* Safari */
transition-delay: 1.2s;
}
/* Number Pagination */
.number-pagination {
position: absolute;
bottom: 30px;
right: 100px;
font-family: "Oswald";
font-weight: bold;
}
.number-pagination span {
font-size: 30px;
color: #ea2e49;
letter-spacing: 4px;
}
.number-pagination span:after {
content: "/4";
font-size: 16px;
color: #fff;
}
/* Slider Pagger */
.slider-pagination {
position: absolute;
bottom: 30px;
width: 575px;
left: 100px;
z-index: 1000;
display: flex;
align-items: center;
}
.slider-pagination label {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: #fff;
margin: 0 10px;
cursor: pointer;
}
/* Slider Pagger Event */
.slide-radio1:checked~.slider-pagination .page1,
.slide-radio2:checked~.slider-pagination .page2,
.slide-radio3:checked~.slider-pagination .page3,
.slide-radio4:checked~.slider-pagination .page4 {
width: 14px;
height: 14px;
border: 2px solid #ea2e49;
background: transparent;
}
/* Slider Slide Effect */
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked~.slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked~.slide-1 h2,
.slide-radio2:checked~.slide-2 h2,
.slide-radio3:checked~.slide-3 h2,
.slide-radio4:checked~.slide-4 h2,
.slide-radio1:checked~.slide-1 h4,
.slide-radio2:checked~.slide-2 h4,
.slide-radio3:checked~.slide-3 h4,
.slide-radio4:checked~.slide-4 h4,
.slide-radio1:checked~.slide-1>img,
.slide-radio2:checked~.slide-2>img,
.slide-radio3:checked~.slide-3>img,
.slide-radio4:checked~.slide-4>img {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
/* Responsive */
#media only screen and (max-width: 768px) {
.slider h2 {
font-size: 20px;
}
.slider h4 {
font-size: 16px;
}
.slider-content {
padding: 0 2%
}
.number-pagination {
right: 2%;
}
.slider-pagination {
left: 2%;
}
.slider .buy-now-btn {
padding: 0 15px;
width: 90px;
height: 42px;
position: absolute;
right: 0;
bottom: 0;
margin: 0 0 100px 0;
}
.slider .buy-now-btn:after {
top: 15px;
}
.slider>img {
right: 2%;
}
.slide-1>img {
right: -110px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider</title>
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="robots" content="noindex,follow" />
</head>
<body>
<!-- Navigation -->
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<!-- Slider Pagination -->
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<!-- Slider #1 -->
<div class="slider slide-1" id="tab1">
<img src="images/model-1.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>1</span>
</div>
</div>
<!-- Slider #2 -->
<div class="slider slide-2" id="tab2">
<img src="images/model-2.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="btn" name="button" onclick="prev()">Previous</button>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>2</span>
</div>
</div>
<!-- Slider #3 -->
<div class="slider slide-3" id="tab3">
<img src="images/model-3.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>3</span>
</div>
</div>
<!-- Slider #4 -->
<div class="slider slide-4" id="tab4">
<img src="images/model-4.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>4</span>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
Hi,
I created a small html snippet of slideshow .I created this code using CSS and Java script .I need to know the button I created ,when we click it should move to another next slides and previous slides same as input buttons. Can it be done only using CSS or need to use JavaScript . I am newbie to JavaScript. Answer to this would be helpful .Thanks in advance

TLDR;
To answer your question:
You will need JavaScript for all your functional requirements. You can use the onclick handler to capture the click event and call a function that changes the active slide.
HTML, CSS, and JS Usage
An Overview
HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
CSS is used to control presentation, formatting, and layout.
JavaScript is used to control the behavior of different elements.

You can just use similar function to next() and use .prev instead of .next, which will make sure it will select previous sibling.
var TIMEOUT = 6000;
var interval = setInterval(handleNext, TIMEOUT);
function handleNext() {
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex >= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.next('input[class*="slide-radio"]')
.attr('checked', true);
}
}
function next() {
clearInterval(interval); //To make sure it doesn't interfere when slide is manually changed
handleNext();
interval = setInterval(handleNext, TIMEOUT); //Again Set the interval
}
function prev() {
clearInterval(interval); //To make sure it doesn't interfere when slide is manually changed
var $radios = $('input[class*="slide-radio"]');
var $activeRadio = $('input[class*="slide-radio"]:checked');
var currentIndex = $activeRadio.index();
var radiosLength = $radios.length;
$radios
.attr('checked', false);
if (currentIndex >= radiosLength - 1) {
$radios
.first()
.attr('checked', true);
} else {
$activeRadio
.prev('input[class*="slide-radio"]')
.attr('checked', true);
}
interval = setInterval(handleNext, TIMEOUT); //Again Set the interval
}
* {
box-sizing: border-box;
}
body {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
/* Navigation */
.navigation {
position: absolute;
width: 100%;
height: 100px;
padding: 0 100px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.navigation-left {
margin-left: -33px;
}
.navigation-left a {
text-decoration: none;
text-transform: uppercase;
color: #333745;
font-size: 12px;
font-weight: bold;
width: 107px;
height: 30px;
border: 2px solid transparent;
border-radius: 15px;
display: inline-block;
text-align: center;
line-height: 25px;
transition: all .2s;
}
.navigation-left a:hover,
.navigation-left a:focus {
border-color: rgb(234, 46, 73);
background-color: rgba(44, 45, 47, 0);
}
.navigation-center {
margin-right: 85px;
}
.navigation-right {
display: flex;
align-items: center;
}
.login-btn {
background-color: #b8b8b9;
width: 97px;
height: 30px;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
border-radius: 15px;
border: none;
color: #333745;
text-transform: uppercase;
margin-left: 20px;
transition: all .2s;
cursor: pointer;
}
.login-btn:hover {
transform: scale(1.06);
}
/* Slider wrapper*/
.css-slider-wrapper {
display: block;
background: #FFF;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Slider */
.slider {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 1;
z-index: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* Slides Background Color */
.slide-1 {
background: #fbad99;
left: 0;
}
.slide-2 {
background: #a9785c;
left: 100%
}
.slide-3 {
background: #9ea6b3;
left: 200%
}
.slide-4 {
background: #b1a494;
left: 300%;
}
.slider {
display: flex;
justify-content: flex-start;
}
.slider-content {
width: 635px;
padding-left: 100px;
}
/* Slider Inner Slide Effect */
.slider h2 {
color: #333333;
font-weight: 900;
text-transform: capitalize;
font-size: 60px;
font-weight: 300;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
margin-top: 0;
letter-spacing: 2px;
}
.slider h4 {
font-size: 22px;
font-family: "Oswald";
color: rgba(51, 51, 51, 0.349);
font-weight: bold;
text-transform: uppercase;
line-height: 1.2;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slider>img {
position: absolute;
right: 10%;
bottom: 0;
height: 100%;
opacity: 0;
-webkit-transform: translateX(500px);
transform: translateX(500px);
}
.slide-1>img {
right: 0;
}
.buy-now-btn {
background-color: #ea2e49;
width: 130px;
height: 50px;
border-radius: 30px;
border: none;
font-family: Montserrat;
font-size: 20px;
font-weight: 100;
color: #fff;
text-align: left;
padding-left: 35px;
position: relative;
cursor: pointer;
transition: all .2s;
}
.buy-now-btn:hover {
box-shadow: 0px 0px 60px -17px rgba(51, 51, 51, 1);
}
.slider .buy-now-btn:focus,
.navigation .login-btn:focus {
outline: none;
}
/* Animations */
.slider h2 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1s;
/* Safari */
transition-delay: 1s;
}
.slider h4 {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.4s;
/* Safari */
transition-delay: 1.4s;
}
.slider>img {
-webkit-transition: opacity 800ms, -webkit-transform 800ms;
transition: transform 800ms, opacity 800ms;
-webkit-transition-delay: 1.2s;
/* Safari */
transition-delay: 1.2s;
}
/* Number Pagination */
.number-pagination {
position: absolute;
bottom: 30px;
right: 100px;
font-family: "Oswald";
font-weight: bold;
}
.number-pagination span {
font-size: 30px;
color: #ea2e49;
letter-spacing: 4px;
}
.number-pagination span:after {
content: "/4";
font-size: 16px;
color: #fff;
}
/* Slider Pagger */
.slider-pagination {
position: absolute;
bottom: 30px;
width: 575px;
left: 100px;
z-index: 1000;
display: flex;
align-items: center;
}
.slider-pagination label {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: #fff;
margin: 0 10px;
cursor: pointer;
}
/* Slider Pagger Event */
.slide-radio1:checked~.slider-pagination .page1,
.slide-radio2:checked~.slider-pagination .page2,
.slide-radio3:checked~.slider-pagination .page3,
.slide-radio4:checked~.slider-pagination .page4 {
width: 14px;
height: 14px;
border: 2px solid #ea2e49;
background: transparent;
}
/* Slider Slide Effect */
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.slide-radio4:checked~.slider {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.slide-radio1:checked~.slide-1 h2,
.slide-radio2:checked~.slide-2 h2,
.slide-radio3:checked~.slide-3 h2,
.slide-radio4:checked~.slide-4 h2,
.slide-radio1:checked~.slide-1 h4,
.slide-radio2:checked~.slide-2 h4,
.slide-radio3:checked~.slide-3 h4,
.slide-radio4:checked~.slide-4 h4,
.slide-radio1:checked~.slide-1>img,
.slide-radio2:checked~.slide-2>img,
.slide-radio3:checked~.slide-3>img,
.slide-radio4:checked~.slide-4>img {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
/* Responsive */
#media only screen and (max-width: 768px) {
.slider h2 {
font-size: 20px;
}
.slider h4 {
font-size: 16px;
}
.slider-content {
padding: 0 2%
}
.number-pagination {
right: 2%;
}
.slider-pagination {
left: 2%;
}
.slider .buy-now-btn {
padding: 0 15px;
width: 90px;
height: 42px;
position: absolute;
right: 0;
bottom: 0;
margin: 0 0 100px 0;
}
.slider .buy-now-btn:after {
top: 15px;
}
.slider>img {
right: 2%;
}
.slide-1>img {
right: -110px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slider</title>
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="robots" content="noindex,follow" />
</head>
<body>
<!-- Navigation -->
<!-- Slider Wrapper -->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<input type="radio" name="slider" class="slide-radio4" id="slider_4">
<!-- Slider Pagination -->
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
<label for="slider_4" class="page4"></label>
</div>
<!-- Slider #1 -->
<div class="slider slide-1" id="tab1">
<img src="images/model-1.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>1</span>
</div>
</div>
<!-- Slider #2 -->
<div class="slider slide-2" id="tab2">
<img src="images/model-2.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="btn" name="button" onclick="prev()">Previous</button>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>2</span>
</div>
</div>
<!-- Slider #3 -->
<div class="slider slide-3" id="tab3">
<img src="images/model-3.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="btn" name="button" onclick="prev()">Previous</button>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>3</span>
</div>
</div>
<!-- Slider #4 -->
<div class="slider slide-4" id="tab4">
<img src="images/model-4.png" alt="">
<div class="slider-content">
<h4>New Product</h4>
<h2>Denim Longline T-Shirt Dress With Split</h2>
<button type="button" class="buy-now-btn" name="button" onclick="next()">NEXT</button>
</div>
<div class="number-pagination">
<span>4</span>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js" charset="utf-8"></script>
</body>
</html>

Contact form sending message to specified address

I was wondering how would I be able to send the message entered from the form box above, to a specific email address, while using the users entered email as the sending address? Is this possible to accomplish through html or would I have to use some sort of JavaScript to accomplish this? Anything helps and thanks in advance!
<script>
const inputs = document.querySelectorAll(".input");
function focusFunc() {
let parent = this.parentNode;
parent.classList.add("focus");
}
function blurFunc() {
let parent = this.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", focusFunc);
input.addEventListener("blur", blurFunc);
});
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
#font-face { font-family: Raleway; src: url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
input,
textarea {
font-family: Raleway;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
padding: 2rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.form {
width: 100%;
max-width: 820px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-form {
background-color: #3A81B4;
position: relative;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #2d6a96);
position: absolute;
}
.circle.one {
width: 130px;
height: 130px;
top: 130px;
right: -40px;
}
.circle.two {
width: 80px;
height: 80px;
top: 10px;
right: 30px;
}
.contact-form:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
background-color: #3A81B4;
transform: rotate(45deg);
top: 50px;
left: -13px;
}
form {
padding: 2.3rem 2.2rem;
z-index: 10;
overflow: hidden;
position: relative;
}
.title {
color: #fff;
font-weight: 500;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0.7rem;
}
.input-container {
position: relative;
margin: 1rem 0;
}
.input {
width: 100%;
outline: none;
border: 2px solid #fafafa;
background: none;
padding: 0.6rem 1.2rem;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: 7px;
transition: 0.3s;
}
textarea.input {
padding: 0.8rem 1.2rem;
min-height: 150px;
border-radius: 7px;
resize: none;
overflow-y: auto;
}
.input-container label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
padding: 0 0.4rem;
color: #fafafa;
font-size: 0.9rem;
font-weight: 400;
pointer-events: none;
z-index: 1000;
transition: 0.5s;
}
.input-container.textarea label {
top: 1rem;
transform: translateY(0);
}
.btn {
padding: 0.6rem 1.3rem;
background-color: #fff;
border: 2px solid #fafafa;
font-size: 0.95rem;
color: #1880c9;
line-height: 1;
border-radius: 25px;
outline: none;
cursor: pointer;
transition: 0.3s;
margin: 0;
}
.btn:hover {
background-color: transparent;
color: #fff;
}
.input-container span {
position: absolute;
top: 0;
left: 25px;
transform: translateY(-50%);
font-size: 0.8rem;
padding: 0 0.4rem;
color: transparent;
pointer-events: none;
z-index: 500;
}
.input-container span:before,
.input-container span:after {
content: "";
position: absolute;
width: 10%;
opacity: 0;
transition: 0.3s;
height: 5px;
background-color: #3A81B4;
top: 50%;
transform: translateY(-50%);
}
.input-container span:before {
left: 50%;
}
.input-container span:after {
right: 50%;
}
.input-container.focus label {
top: 0;
transform: translateY(-50%);
left: 25px;
font-size: 0.8rem;
}
.input-container.focus span:before,
.input-container.focus span:after {
width: 50%;
opacity: 1;
}
.contact-info {
padding: 2.3rem 2.2rem;
position: relative;
}
.contact-info .title {
color: #1880c9;
}
.text {
color: #333;
margin: 1.5rem 0 2rem 0;
}
.information {
display: flex;
color: #555;
margin: 0.7rem 0;
align-items: center;
font-size: 0.95rem;
}
.icon {
width: 28px;
margin-right: 0.7rem;
}
.social-media {
padding: 2rem 0 0 0;
}
.social-media p {
color: #333;
}
.social-icons {
display: flex;
margin-top: 0.5rem;
}
.social-icons a {
width: 35px;
height: 35px;
border-radius: 5px;
background: linear-gradient(45deg, #3A81B4, #2d6a96);
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 0.5rem;
transition: 0.3s;
}
.social-icons a:hover {
transform: scale(1.05);
}
.square {
position: absolute;
height: 400px;
top: 50%;
left: 50%;
transform: translate(181%, 11%);
opacity: 0.2;
}
#media (max-width: 850px) {
.form {
grid-template-columns: 1fr;
}
.contact-info:before {
bottom: initial;
top: -75px;
right: 65px;
transform: scale(0.95);
}
.contact-form:before {
top: -13px;
left: initial;
right: 70px;
}
.square {
transform: translate(140%, 43%);
height: 350px;
}
.big-circle {
bottom: 75%;
transform: scale(0.9) translate(-40%, 30%);
right: 50%;
}
.text {
margin: 1rem 0 1.5rem 0;
}
.social-media {
padding: 1.5rem 0 0 0;
}
}
#media (max-width: 480px) {
.container {
padding: 1.5rem;
}
.contact-info:before {
display: none;
}
.square,
.big-circle {
display: none;
}
form,
.contact-info {
padding: 1.7rem 1.6rem;
}
.text,
.information,
.social-media p {
font-size: 0.8rem;
}
.title {
font-size: 1.15rem;
}
.social-icons a {
width: 30px;
height: 30px;
line-height: 30px;
}
.icon {
width: 23px;
}
.input {
padding: 0.45rem 1.2rem;
}
.btn {
padding: 0.45rem 1.2rem;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
</head>
<body>
<div class="container">
<span class="big-circle"></span>
<img class="square" alt="" />
<div class="form">
<div class="contact-info">
<h3 class="title">Let's get <b>in touch</b></h3>
<p class="text">
Feel free to send us an email with any inquiries; one of our receptionists will reach out to you as sson as possible.
</p>
<div class="info">
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/location.png " class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/email.png" class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/phone.png" class="icon" alt="" />
<p></p>
</div>
</div>
<div class="social-media">
<p>Connect with us :</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="contact-form">
<span class="circle one"></span>
<span class="circle two"></span>
<form action="index.html" autocomplete="off">
<h3 class="title">Contact us</h3>
<div class="input-container">
<input type="text" name="name" class="input" />
<label for="">Username</label>
<span>Username</span>
</div>
<div class="input-container">
<input type="email" name="email" class="input" />
<label for="">Email</label>
<span>Email</span>
</div>
<div class="input-container">
<input type="tel" name="phone" class="input" />
<label for="">Phone</label>
<span>Phone</span>
</div>
<div class="input-container textarea">
<textarea name="message" class="input"></textarea>
<label for="">Message</label>
<span>Message</span>
</div>
<input type="submit" value="Send" class="btn" />
</form>
</div>
</div>
</div>
</body>
</html>

yes just use some link like this for in html to send an email:
<a id="email-link" href="mailto:email#example.com?cc=secondemail#example.com, anotheremail#example.com, &bcc=lastemail#example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>
and you can make it change when user change the box message:
function changeLinkHref(){
let message_content = document.getElementById("message-text-area").value;
let name = document.getElementById("name-input").value;
document.getElementById("email-link").href = "mailto:yourmail#yourdomain.zone?&subject=subject&body=" + name + "%0A" + message_content ;
}
and call the function when text-area and text input get changed.
in a tag href attribute body section you can append your email text with htmlEncodedNewLine (%0A)

How do add an animated button in my css and html

I am new to CSS and downloaded a pre-made login page online.
I wanted to customize and add some effects when the user clicks the button and after 2 days of research but I got nothing.
It would be great if could get some tips on how do I set up.
this is the animation I am trying to achieve: "https://codemyui.com/submit-button-loading-animation-click/"
here's my HTML.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form id="signup-form">
<h1>Create Account</h1>
<span><br>Use your Email for Registration</span>
<input type="text" placeholder="Name" id="up_name" />
<input type="email" placeholder="Email" id="up_email"/>
<input type="password" placeholder="Password" id="up_password"/>
<button id="signUpBtn">Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form id="signin-form">
<h1>Sign in</h1>
<span><br>Use your Email Account to Login</span>
<input type="email" placeholder="Email" id="in_email"/>
<input type="password" placeholder="Password" id="in_password"/>
<button id="signInBtn">Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="gotoSignIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="gotoSignUp">Sign Up</button>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyBCmpcDvnsftFfAIIodb5IgGUdpsiSAjwQ",
authDomain: "feb-ekka.firebaseapp.com",
databaseURL: "https://feb-ekka.firebaseio.com",
projectId: "feb-ekka",
appId: "1:454540852080:web:0285ef92b9a933b28dedb5",
measurementId: "G-Z8MLYNTN54"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const auth = firebase.auth();
const db = firebase.firestore();
</script>
<script src="script.js"></script>
<script src="authen.js"></script>
</body>
</html>
here's my CSS.
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: 0px;
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
min-height: 100%;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}
my Script.js
const gotoSignUpButton = document.getElementById('gotoSignUp');
const gotoSignInButton = document.getElementById('gotoSignIn');
const container = document.getElementById('container');
gotoSignUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
gotoSignInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
and my authen.js (which I think isn't needed)
//listen for auth status changes
auth.onAuthStateChanged(user => {
if(user != null){
JavascriptInterface.toast("Login Successful!!");
JavascriptInterface.openMain(user.uid);
}
})
////logout
//const logout = document.querySelector('#lgout');
//logout.addEventListener('click',(e) => {
// e.preventDefault();
// auth.signOut();
//});
//signup
const signupForm = document.querySelector('#signup-form');
const signinForm = document.querySelector('#signin-form');
signupForm.addEventListener('submit',(e) => {
e.preventDefault();
//get user Info
const name = signupForm['up_name'].value;
const email = signupForm['up_email'].value;
const password = signupForm['up_password'].value;
//signup the user
auth.createUserWithEmailAndPassword(email,password).then(cred => {
return db.collection('users').doc(cred.user.uid).set({
name: signupForm['up_name'].value,
email: signupForm['up_email'].value,
password: signupForm['up_password'].value
})
}).then(() => {
signupForm.reset();
container.classList.remove("right-panel-active");
});
});
signinForm.addEventListener('submit',(e) => {
e.preventDefault();
//get user Info
const email = signinForm['in_email'].value;
const password = signinForm['in_password'].value;
//signin the user
auth.signInWithEmailAndPassword(email,password).then(cred => {
signinForm.reset();
});
});
auth.setPersistence(firebase.auth.Auth.Persistence.NONE)
Well Thanks in advance :)

Something like this?
You can just change the styling and make it more appealing.
var button = document.getElementById("button");
button.addEventListener('click', function(){
button.innerHTML = "Wait...";
button.classList.add("loading");
button.classList.remove("submit");
setTimeout(function()
{
if(button.classList.contains("loading"))
{
button.classList.remove("loading");
button.innerHTML = "Success";
button.classList.add("success");
}
}, 3000);
});
#keyframes rotate{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
.container{
width: 180px;
}
div#button{
box-sizing: border-box;
width: 100%;
margin: 0 auto;
}
.loading{
max-width: 50px;
height: 50px;
border-width: 5px;
border-color: transparent #27a80c transparent #27a80c;
border-style: solid;
border-radius: 25px;
background-color: transparent;
font-size: 10px;
text-align: center;
line-height: 40px;
color: #27a80c;
animation: rotate 1s infinite;
}
.submit, .success{
text-align: center;
max-width: 120px;
padding: 15px;
border: thin solid transparent;
background-color: white;
transition: background-color color .25s ease;
border-radius: 5px;
cursor: pointer;
height: 50px;
}
.submit{
border-color: red;
color: red;
}
.success{
border-color: #27a80c;
color: white;
background-color: #27a80c;
}
.submit:hover{
background-color: red;
color: white;
}
<div class="container">
<div class="submit" id="button">
Submit
</div>
</div>