Dark Light

 

<!DOCTYPE html>
<html>
<head>
<title>Dark Light</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="sec">
<div class="card">
<div class="toggle"></div>
<div class="content">
<div class="imgText">
<div class="imgBx">
<img src="img.jpeg">
</div>
<h3>Varun Saini <br><span>Web designer</span></h3>
</div>
<div class="sci">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
<script type="text/javascript">
const sec = document.querySelector('.sec');
const toggle = document.querySelector('.toggle');
toggle.onclick = function () {
sec.classList.toggle('dark')
}
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: arial;
}
section
{
position: relative;
background-color: #f0f8ff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.5s;
}
section.dark{
background-color: #24292d;
}
section .card{
position: relative;
width: 300px;
height: 400px;
background: #fff;
box-shadow: 0 15px 25px rgba(0,0,0,0.025);
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.5s;
}
section.dark .card{
background-color: #323840;
}
section.dark .card .sci li a{
background-color: #404852;
}
section.dark .card .imgText h3 span{
color: #ccc;
}
section .card .content,
section .card .imgText
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section .card .imgText .imgBx{
position: relative;
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 50%;
margin-bottom: 15px;
}
section .card .imgText .imgBx img{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
}
section .card .imgText h3{
font-weight: 500;
font-size: 1.4em;
line-height: 1.2em;
text-align: center;
color: #2fa1ff;
}
section .card .imgText h3 span{
font-weight: 400;
color: #777;
font-size: 0.75em;
}
section .card .sci{
display: flex;
margin-top: 15px;
}
section .card .sci li{
list-style: none;
display: inline-block;
}
section .card .sci li a{
position: relative;
width: 50px;
height: 50px;
background-color: #e9f5ff;
color: #2fa1ff;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border-radius: 50%;
transition: 0.5s;
font-size: 20px;
}
section .card .sci li a:hover{
color: #fff;
}
section .card .sci li a .fa{
position: relative;
z-index: 1000;
}
section .card .sci li a:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #2fa1ff;
border-radius: 50%;
transform: scale(0);
transition: 0.5s;
}
section .card .sci li a:hover:before{
transform: scale(1);
}
.toggle{position: absolute; top:20px; right: 20px; background-color: #e9f5ff; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer;}
section.dark .toggle{
background-color: #404852;
}
.toggle:before{
content: '\f186';
font-family: fontAwesome;
color: #2fa1ff;
}
section.dark .toggle:before{
content: '\f185';
color: #fff;
}
</style>

Comments

Post a Comment

Popular posts from this blog

Call Desktop

 <div class="phone_lefts-side glow" data-target="html">     <a title="Contact Us" href="tel:+91 "><i class="fa fa-phone"></i></a> </div> /*Call Me*/ .phone_lefts-side{position:relative;} .phone_lefts-side a{ position: fixed;    bottom: 50px;    color:white;    background-color:#03a84e;   animation: topBottom 4s infinite;    z-index: 11111;    left: 20px;    background-color: #0000ff;    color: white;    padding: 11px 16px;    border-radius: 50%;    font-size: 20px;    animation: bounce 4s infinite alternate;} .glow {  font-size: 80px;  color: #fff;  text-align: center;  -webkit-animation: glow 1s ease-in-out infinite alternate;  -moz-animation: glow 1s ease-in-out infinite alternate;  animation: glow 1s ease-in-out infinite alternate;} @-webkit-keyframes glow { from {text-shadow: 0 0 10px ...
Read more

Right click disable

 <body class="tg-home" onLoad="disableClick()" oncontextmenu="return false"> //hide code// document.onkeydown = function(e) {     if(e.keyCode == 123) {      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){      return false;     }        }  ///F12//  //------------------------------ function unloadJS(scriptName) {   var head = document.getElementsByTagName('head').item(0);   var js = document.getElementById(sc...
Read more

soft button

Image
<!DOCTYPE html> <html> <head> <title>Soft Button</title> </head> <body> <a href="#"><span>Button</span></a> </body> </html> <style type="text/css"> *{ margin: 0px; padding: 0px; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f2f3f7; } a{ position: relative; display: inline-block; padding: 10px 30px; text-decoration: none; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; color: #5a84a2; font-size: 18px; border-radius: 40px; box-shadow: -2px -2px 8px rgba(255,255,255,1), -2px -2px 12px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0,0,0,0.15); } a:hover{ box-shadow: inset -2px -2px 8px rgba(255,255,255,1), inset -2px -2px 12px rgba(255,255,255,0.5), inset 2...
Read more