How to make Profile Settings Design using HTML and CSS.[Source Code]
To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
/**
Hello Future Developer Thanks for Using learningrobo.com,
Check our website Regularly For New Snippets Post.
Share & Support us
**/
*{
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
margin: 0%;
background-color: azure;
}
.container{
height: 100vh;
}
.box{
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
}
.c1{
width: 25%;
background-color: darkseagreen;
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 30px;
}
p{
margin: 0%;
margin-left: 40px;
font-size: 20px;
font-weight: bold;
color: white;
letter-spacing: 1px;
}
p:hover{
color: black;
cursor: pointer;
transition: 0.5s;
}
i{
margin-right: 20px;
}
.c2{
width: 75%;
display: flex;
flex-direction: row;
}
.s1{
width: 30%;
display: flex;
flex-direction: column;
}
span{
font-size: 30px;
font-weight: bolder;
color: grey;
margin: 80px 0px 30px 30px;
}
img{
width: 150px;
height: 150px;
object-fit: cover;
margin: 0px 30px;
}
a{
text-decoration: none;
font-size: 18px;
color: grey;
font-weight: bold;
margin: 20px 55px;
}
a:hover{
color: darkslategrey;
transition: 0.5s;
}
.s2{
width: 70%;
display: flex;
flex-direction: column;
}
form{
margin-top: 110px;
}
label{
font-size: 18px;
font-weight: bold;
color: grey;
margin-left: 65px;
}
input{
background-color: none;
background: transparent;
outline: none;
border: none;
border-bottom: 1px solid grey;
width: 80%;
margin-bottom: 40px;
padding: 10px;
font-size: 18px;
margin-left: 65px;
}
button{
width: 40%;
padding: 12px;
border: none;
font-size: 16px;
font-weight: bolder;
border-radius: 5px;
}
.but{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
button:hover{
cursor: pointer;
color: seashell;
transition: 0.5s;
}
.save{
background-color: darkseagreen;
color: white;
letter-spacing: 1px;
}
.exit{
background-color: gray;
color: rgb(61, 61, 61);
letter-spacing: normal;
}
.credit a {
text-decoration: none;
color: black;
font-weight: 800;
margin: 0;
}
.credit{
color: black;
text-align: center;
margin-top: 10px;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
color:tomato;
font-size:20px;
margin: 0;
}
@media screen and (max-width:1024px){
.container{
height: fit-content;
}
.box{
height: fit-content;
flex-direction: column;
}
.c1{
width: 100%;
height: fit-content;
flex-direction: row;
padding: 20px;
}
.c2{
width: 100%;
height: fit-content;
}
.s1{
width: fit-content;
}
.s2{
width: 100%;
}
}
@media screen and (max-width:630px){
.container{
width: 100%;
height: fit-content;
}
.box{
width: 100%;
height: fit-content;
}
.c1{
width: 100%;
height: fit-content;
flex-direction: column;
align-items: start;
}
.c2{
width: 100%;
height: fit-content;
flex-direction: column;
}
.s1{
flex-direction: column;
width: 100%;
align-items: center;
}
.s2{
width: 100%;
}
}
Thank you for reading our blog. If you face any problem in Creating a Profile Settings Design using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Explore
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
In Our older post it doesnot work we working on that.
Post a Comment
Thank you
Learning robo team