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.
*{
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;
}
let checkBox =document.getElementById("checkbox");
function toggle(){
if(checkBox){
document.body.classList.add('dark');
checkBox = false;
}
else{
document.body.classList.remove('dark');
checkBox = true;
}
}
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.
Post a Comment
Thank you
Learning robo team