<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1.0"
>
<
link
rel
=
"stylesheet"
href
=
<
title
>
Design a Light/Dark Mode User Profile
Card using HTML CSS and JavaScript
</
title
>
<
style
>
body {
background-color: rgb(172, 178, 178);
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
color: antiquewhite;
}
.photo-container {
height: 180px;
width: 180px;
display: block;
border-radius: 100%;
background-image: url(
background-color: aliceblue;
background-repeat: no-repeat;
background-size: cover;
margin: 2px;
border: 10px solid wheat;
}
.container {
height: 514px;
width: 368px;
background-color: rgb(32, 31, 31);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
box-shadow: rgba(41, 40, 40, 0.2);
gap: 10px;
transition: transform 0.2s ease-in-out;
}
.container:hover {
transform: scale(1.2);
}
.cardutility {
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 10px;
}
.des {
text-align: center;
padding: 10px;
margin: 5px;
border-radius: 10px;
text-justify: auto;
}
.spaceicon {
gap: 10px;
}
#btnid {
border-radius: 100%;
height: 50px;
width: 50px;
position: relative;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container"
id
=
"idcontainer"
>
<
div
class
=
"photo"
>
<
div
class
=
"photo-container"
></
div
>
</
div
>
<
div
class
=
"cardcontainer"
>
<
div
class
=
"info front cardutility"
>
<
div
class
=
"myname"
>
Shivangi Joshi
</
div
>
<
div
class
=
"mycontact spaceicon"
>
<
i
class="fa-regular fa-phone
fa fa-sm light-icon dark-icon"></
i
>
9393939393
</
div
>
<
div
class
=
"myemail spaceicon"
>
<
i
class="fa-regular fa-envelope
fa fa-sm light-icon dark-icon">
</
i
>
shivangi@123.com
</
div
>
<
div
><
span
>Hobbies : </
span
>
<
i
class="fa-sharp fa-light fa
fa-music fa-sm light-icon dark-icon">
</
i
>
<
i
class="fa-regular fa fa-code
fa-sm light-icon dark-icon"></
i
>
</
div
>
</
div
>
<
div
class
=
"des back cardutility"
>
<
div
class
=
"aboutme"
>
Hi, i am Shivangi Joshi. I am a
computer science student. My skills
are: HTML, CSS, JavaScript, React.js,
Node.js, Mongodb, C++, Data
Structures and Algorithms
</
div
>
</
div
>
<
button
class
=
"btn"
id
=
"btnid"
>Light</
button
>
</
div
>
</
div
>
<
script
>
let button = document.querySelector("#btnid");
let boltogglebtn = false;
let container = document.querySelector("#idcontainer")
button.addEventListener("click", function () {
if (boltogglebtn) {
button.innerHTML = "Light";
button.style.cssText =
"background-color:white; color:black";
container.style.cssText =
"background-color:black; color:white"
}
else {
button.innerHTML = "Dark";
button.style.cssText =
"background-color:black; color:white";
container.style.cssText =
"background-color:white; color:black"
}
boltogglebtn = !boltogglebtn;
})
</
script
>
</
body
>
</
html
>