Simple Dark Theme Profile Card using HTML, CSS & JavaScript

Simple Dark Theme Profile Card using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create a Simple Dark Theme Profile Card using HTML, CSS & JavaScript.

A profile is an outline of a person. A profile card contains the person's details like photos, designation, about, and some social media icons. A Profile card is used to get the contact of a person.

In this blog(Simple Dark Theme Profile Card), there is a profile card with the photo, name, designation, about of the person with some social media icons. There is a toggle button at the top right of the card.

A toggle button allows the user to change a setting between two states. Here toggle button is used to change the card to night mode. At first, the card will be in light mode, by clicking the toggle button, the card background color changes to dark mode. This day-night mode is made by using JavaScript code.

The source code of this Simple Dark Theme Profile Card is given below, if you want the source code of this program, you can copy it. You can use this Simple Dark Theme Profile Card design on your project.

Simple Dark Theme Profile Card [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Simple Dark theme profile card || Learningrobo</title> <link rel="stylesheet" href="style.css"> </head> <body> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <input type="checkbox" id="checkbox" onchange="toggle()"> <div class="img"></div> <p class="name">Learningrobo</p> <p class="text">Web Developer</p> <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> <div class="link"> <a href="#"><i class="fa fa-codepen" aria-hidden="true"></i> </a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i> </a> </div> <div class="credit">Made with <span style="color:#fff;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css extension.


*{
    margin:0;
    padding:0;
}
html{
    background: #8A2387;  
background: -webkit-linear-gradient(to right, #F27121, #E94057, #8A2387); 
background: linear-gradient(to right, #F27121, #E94057, #8A2387); 
    width:100%;
    height:100%;
}
:root{
    --bgcolor:#F27121;
    --text-color:#000;
    --secBgcolor:#dbdbdb;
    --icon-hover:#000;

}
.dark{
    --bgcolor:#26242e;
    --text-color:#fff;
    --shadow-color:#000;
    --secBgcolor:#fff;
    --icon-hover:#b7df69;
}

.container{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:40%;
    height:400px;
    border-radius:5px;
    background-color: var(--bgcolor);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow: hidden;
}
.container::before, .container::after{
    content:"";
    position:absolute;
    top:-40px;
    left:-40px;
    border-radius:50%;
    background-color:#bfbfbf;
    z-index:-1;
}
.container::before{
    width:160px;
    height:160px;
    opacity: .5;
   
}
.container::after{
    width:100px;
    height:100px;
    opacity:.8;
}
input{
    position:absolute;
    right:5px;
    top:5px;
  cursor:pointer;
    -webkit-appearance:none;
    width:38px;
    height:18px;
    background-color:var(--secBgcolor);
    border-radius:10px;
    outline:none;
}
input::before{
    content:"";
    position: absolute;
    top:2px;
    left:2px;
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:var(--bgcolor);
    transition: .5s ease;
}

input:checked::before{
    transform:translate(20px);
}
.img{
    width:250px;
    height:220px;
    background:url('https://cdn.pixabay.com/photo/2021/07/21/12/50/wifi-6482990__480.png') top/cover;
    object-fit:cover;
    border-radius:93% 58% 41% 87%/ 90% 90% 51% 53%;
    margin:20px 0 0  0;
}
.name{
    margin-top:5px;
    padding:5px;
    color: var(--text-color);
}
.text{
    text-align:center;
    padding:5px;
    color:var(--text-color);
    font-size:.8rem;
}
.link{
    margin-top:30px;

}
.link a{
    text-decoration:none;
    padding:5px;
    font-size:1.3rem;
    color:var(--text-color);
    transition: 2.s ease;
}
a:hover{
    color:var(--icon-hover);
}
.credit a{
    text-decoration: none;
    color: #ddd;
    font-weight: 800;
    }
    
    .credit {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      margin: 10px;
      color:#ddd;
      text-align: center;
    }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


let checkBox =document.getElementById("checkbox");
        function toggle(){
            if(checkBox){
                document.body.classList.add('dark');
                checkBox = false;
            }
            else{
                document.body.classList.remove('dark');
                checkBox = true;
            }
        }
We hope you will like this Simple Dark Theme Profile Card using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem creating this Simple Dark Theme Profile Card using HTML, CSS & JavaScript, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome