<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="ebrsng.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.2.0/css/fork-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/d3c9fc67a3.js" crossorigin="anonymous"></script>
<title>Lorem Ipsum</title>
</head>
<body>
<div class="container">
<div class="banner">
<div class="shadow">
<header>
<img src="https://blob.sololearn.com/avatars/2b358d51-d013-4252-9754-ee21def38174.jpg" class="logo" data-aos="flip-right">
<h2>lorem</h2>
<li class="dbtn" data-aos="fade-left">
<a href="#"> <i class="fa fa-sign-in"></i>Sign Up Now</a>
</li>
</header>
<div class="info">
<div class="headline">
<h3>Lorem Ipsum Dolor sit amet<br /> consectetur <span class="name">adipiscing </span> elit<br> donec felit sit amet egestas.</h3>
</div>
<div class="ill"></div>
</div>
</div>
</div>
<div class="sections">
<div class="title1" data-aos="flip-right">
<div class="secm1 secm"></div>
<h3>Lorem <span class="name">ipsum</span> dolor sit amet consectetur adipiscing elit</h3>
</div>
<div class="title1" data-aos="fade-right">
<div class="secm2 secm"></div>
<h3>Lorem Ipsum dolor sit amet<br> consectetur adipiscing elit</h3>
</div>
<div class="title1" data-aos="fade-left">
<div class="secm3 secm"></div>
<h3><span class="name">Lorem</span> ipsum dolor sit amet <i class="fa fa-lock"></i> consectetur adipiscing elit</h3>
</div>
</div>
<a href="#">
<div class="btn_for_banner">
</div>
</a>
<div class="footer">
<div class="contact">Contact Us:</div>
<ul>
<li>Email: <a href="#">loremipsum@lorem.com</a></li>
</ul>
<div class="contact follow">Follow Us:</div>
<ul>
<a href="#"><li>Facebook</li></a>
<a href="#"><li>Twitter</li></a>
</ul>
<div class="contact legal">Legal:</div>
<ul>
<li>Terms of Service</li>
<li>Privacy Policy</li>
</ul>
<div class="copyright">copyright© 2023 <span class="name">Lorem</span>. All Rights Reserved</div>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Poppins", sans-serif;
text-decoration:none;
}
html{
scroll-behavior:smooth;
}
:root{
--theme:dodgerblue;
--theme2:deepskyblue;
}
.container{
width:100vw;
min-height:100%;
background-size:cover;
overflow:hidden;
display:none;
}
header{
width:100vw;
height:auto;
display:flex;
align-items:center;
padding:10px;
overflow:hidden;
}
header .logo{
width:60px;
height:60px;
border-radius:50px;
margin:5px 10px 0 10px;
animation:rot .5s ease-in-out;
border:2px groove var(--theme);
}
.banner{
width:100vw;
height:auto;
background:purple;
color:#FFF;
background-size:cover;
background-position:center center;
}
.shadow{
width:100vw;
height:auto;
background:rgba(0,0,0,.65);
}
.dbtn{
list-style-type:none;
display:flex;
align-items:center;
padding:5px;
background:linear-gradient(to bottom left, var(--theme),var(--theme2));
width:auto;
border-radius:10px;
position:absolute;
right:0;
scale:.83;
box-shadow:inset 5px 5px 10px rgba(0,0,0,.3), 5px 5px 15px rgba(0,0,0,.15);
transition:.1s;
}
.dbtn:active{
scale:.865;
box-shadow:inset 5px 5px 10px rgba(0,0,0,.2), -5px -5px 15px rgba(0,0,0,0);
}
.dbtn i{
margin:0 5px;
}
.dbtn a{
text-decoration:none;
color:#fff;
font-size:16px;
padding:5px;
cursor:none;
font-weight:bold;
}
.info{
width:100vw;
height:auto;
padding:10px;
}
.headline{
width:auto;
height:auto;
padding:10px;
margin:0 auto;
margin-top:80px;
font-size:18px;
text-align:left;
text-transform:capitalize;
}
.name{
color:var(--theme2);
text-transform:lowercase;
text-shadow:1px 1px 2px rgba(0,0,0,.75);
}
.ill{
width:270px;
height:290px;
background:url(https://i.postimg.cc/630jbP6R/holding-phone-hand-gesture-6580690-5526756.png);
background-size:cover;
margin:0 auto;
margin-top:10px;
}
.sec1{
width:auto;
height:auto;
padding:10px;
margin:0 auto;
margin-top:60px;
background:rgba(0,0,0,.2);
backdrop-filter:blur(10px);
border-radius:15px;
font-size:16px;
text-align:left;
border-left:10px solid var(--theme2);
text-transform:capitalize;
}
.sections{
width:100%;
height:auto;
background:#fff;
padding:10px;
}
.title1{
width:auto;
height:auto;
padding:10px 7px 10px 6px;
margin:0 auto;
margin:20px;
background: linear-gradient(#ffffff, rgb(233, 241, 250));
font-size:14.5px;
text-align:left;
text-align:justify;
border-radius:15px;
text-transform:capitalize;
text-align:center;
transition:.5s;
box-shadow:2px 2px 10px rgba(205,205,205,.45);
color:#575757;
transition:1s;
}
.title1 h3{
margin-top:10px;
}
.title1:hover{
box-shadow: 20px 10px 40px #cdcdcd;
scale:1.03;
}
.btn_for_banner{
list-style-type:none; background:url(https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png);
background-position:center center;
background-size:cover;
width:180px;
height:35px;
transition:.1s;
cursor:pointer;
margin:0 auto;
margin-top:15px;
margin-bottom:25px;
}
.btn_for_banner:active{
scale:.965;
}
.btn_for_banner i{
margin:0 5px;
}
.btn_for_banner a{
text-decoration:none;
color:#fff;
font-size:16px;
padding:5px;
cursor:none;
font-weight:bold;
}
.secm{
width:130px;
height:150px;
background:url();
background-size:cover;
margin:0 auto;
margin-top:10px;
}
.secm1{
width:160px;
height:200px; background:url(https://static.vecteezy.com/system/resources/previews/010/987/077/original/3d-illustration-of-holding-phone-with-app-download-png.png);
background-size:cover;
background-position:center center;
}
.secm2{
width:200px;
height:180px; background:url(https://static.vecteezy.com/system/resources/previews/010/986/906/original/3d-illustration-of-thumb-up-profile-account-on-smartphone-png.png);
background-size:cover;
}
.secm3{
width:220px;
height:180px; background:url(https://static.vecteezy.com/system/resources/previews/010/974/073/original/mobile-data-security-concept-3d-render-illustration-mobile-security-app-on-smartphone-screen-secure-confidential-files-folder-with-paper-documents-access-and-private-lock-png.png);
background-size:cover;
}
.footer{
width:100vw;
height:350px;
background:#011221;
padding:10px;
color:#fff;
position:relative;
}
.contact{
width:200px;
margin-left:15px;
margin-top:20px;
font-size:17px;
font-size:15px;
color:var(--theme);
}
.footer li{
list-style-type:none;
padding:5px;
margin-left:20px;
color:green;
font-size:14px;
}
.footer a{
color:green;
}
.footer .copyright{
margin:0 auto;
font-size:13px;
bottom:0;
margin-left:25px;
position:absolute;
bottom:2.5%;
}
.legal{
margin-top:10px;
}
.follow{
margin-top:10px;
}
@media screen and (min-width:768px) and (max-width:1024px){
.sections{
display:flex;
align-items:center;
justify-content:center;
padding:220px 0px;
}
header{
height:110px;
}
.headline{
font-size:27px;
margin-left:30px;
}
.dbtn{
scale:.9;
margin:-5px 10px 0px 0px;
}
header .logo{
width:80px;
height:80px;
margin-top:15px;
}
header h2{
font-size:25px;
margin-top:10px;
}
.title1{
width:250px;
height:auto;
font-size:14px;
}
.ill{
width:380px;
height:400px;
margin:0;
margin-left:50px;
margin-top:10px;
}
.footer{
height:400px;
}
.secm2,.secm3{
height:200px;
width:220px;
}
.secm1{
scale:.9;
width:160px;
height:200px;
}
.footer li{
font-size:17px;
}
.footer .contact{
font-size:18px;
}
.footer .copyright{
bottom:20px;
margin-left:35px;
font-size:15px;
}
}
@media screen and (min-width:1224px){
.sections{
display:flex;
align-items:center;
justify-content:center;
padding:250px 0px;
}
header{
height:130px;
}
.headline{
font-size:33px;
margin-left:40px;
}
.dbtn{
scale:.9;
margin:-10px 10px 0px 0px;
}
header .logo{
width:100px;
height:100px;
margin-top:20px;
}
header h2{
font-size:27px;
margin-top:15px;
}
.title1{
width:280px;
height:auto;
font-size:18px;
}
.ill{
width:410px;
height:430px;
margin:0;
margin-left:60px;
margin-top:15px;
}
.footer{
height:420px;
}
.secm2,.secm3{
height:220px;
width:240px;
}
.secm1{
scale:1;
width:180px;
height:220px;
}
.footer li{
font-size:20px;
}
.footer .contact{
font-size:20px;
}
.footer .copyright{
bottom:20px;
margin-left:55px;
font-size:18px;
}
}
window.onload=()=>{
let i = 0;
let images = ["https://i.pinimg.com/originals/72/52/fe/7252fe803440fdfbe9012e2175639135.gif","https://i.pinimg.com/originals/36/82/fb/3682fb7b1417730c99dc75da73995eb0.gif","https://mir-s3-cdn-cf.behance.net/project_modules/2800_opt_1/aa8625109287767.5fd08439c7676.jpg"];
let speed = 8000;
let banner = document.querySelector(".banner");
function changePicture() {
banner.style.backgroundImage = "url(" + images[i] + ")";
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changePicture, speed);
}
document.querySelector(".container").style.display="block";
AOS.init({
duration: 800,
delay: 0,
});
changePicture();
}
