|
| <!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