Dear friends in this articles we learn about how to Design User Profile like Instagram using HTML, CSS only. If you like our article then visit more.
Mobile Profile Design using CSS
When utilizing a different portable applications that can be either Android application, iOS application or a window application, there may emerge a circumstance when we need to make a record of ourselves to get to the application.The fundamental models might be just a Facebook. css profile cards, bootstrap profile card like awesome profile card, material design user profile card using html, css and js can be very easier and proper to implement for a website card design. Before going inside the facebook application, we should sign in with certain accreditations that takes us inside the facebook application. Thus, we can likewise view our profile from internal side of the application. Along these lines, to plan such profile screen UI, here we talk about some of the best css user profile cards.
Profile Design
Profile screen contains different things on it. That might be User Profile Image of the client, name of the client, email or some different ids of the client, focuses or credits (bank application or other comparable application) and a lot more things that might be mystery or can be appeared to anybody. In such case, it is important to assemble the screen so that, it must be anything but difficult to imagine and simple to decipher.To plan such UI screen, we can take references from a few online locales that can assist us with providing thought regarding such screen. Those screens must contain every one of the components of the client that should be indicated with the end goal that it turns out to be simple for the client to see all his status from an equivalent page or same screen.
Collection of Amazing Profile Cards CSS Design Examples with source code. We can take many examples of Profile Cards Designs like Bootstrap User Profile Card‘, likewise ‘Interactive profile card’, and similarly ‘material design user profile card’ and many more. So in this article we will be talking about some of the greatest and most used CSS profile cards examples of all times.
HTML for make user profile
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for user profile project make a fast with visual studio code editor.
Now we will learn how to write html for user profile design. So let’s know that first you have to go to the body tag, after that you will take the div tag and together with the class whose name is to be named main. Then after that we will take div tag again and we will name its class as icons. Again we will take div tag and name its class as icon 1 after that we will take div tag again and we will name its class as icon 2. Again we will take div tag and name its class as icon 3, then again take div tag and name its class as icon 4. Now in the last we will take the div tag and name its class as center.
CSS for mobile icons design
Now we will design the user profile design using css. So let’s design, first of all you have to know how we write css. We write css in 3 ways first we can write inline and second we can write it internal and third we can write it external so that we have to create new css file but in this article we have used internal css so that We will not have to create css file separately and we can work inside the same file.
First of all we have to go inside the head section and going inside we have to take style tag then we will take * tag and by applying curly braces open and close in it we will keep margin as 0 and padding as 0. And will keep its box sizing border box. Then we will take the body tag and flex the display in it, then we will center the justify content, after that we will center the align items and also make the background color rgb.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(22, 22, 22);
}
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(233, 233, 223);
}
.card{
width: 240px;
height: 440px;
background-color: rgb(40,51,63);
border-radius: 7px;
padding: 10px;
}
.top-icons{
display: flex;
margin-top: 15px;
}
.top-icons ion-icon{
font-size: 17px;
color: rgb(245,245,245);
}
.top-icons .love ion-icon{
margin-left: 165px;
}
.top-icons .more ion-icon{
margin-left: 5px;
}
.user{
background-image: url(./beautiful-cute-girl-girly-wallpaper-preview.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 70px;
height: 70px;
border-radius: 50%;
margin: auto;
border: 1px solid white;
}
h3{
text-align: center;
margin-top: 15px;
color: rgb(173,173,173);
}
h6{
font-size: 10px;
text-align: center;
color: rgb(173,173,173);
font-weight: 100;
}
h5{
text-align: center;
color: rgb(245,245,245);
font-weight: 100;
margin: 10px 0 10px 0;
}
a{
text-decoration: none;
width: 100px;
height: 35px;
background: linear-gradient(to left, rgb(196,2,109), rgb(2,202,252));
border-radius: 20px;
font-size: 12px;
color: rgb(245,245,245);
padding: 5px 20px 5px 20px;
font-weight: 700;
letter-spacing: 2px;
margin-left: 60px;
}
.line{
width: 100%;
height: 1px;
margin: 20px 0 20px 0;
background: rgb(107,107,107);
}
.social-icons{
display: flex;
margin-left: 14px;
}
.social-icons .all{
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.social-icons .fb-logo{
background: rgb(0,38,255);
}
.social-icons .twt-logo{
margin-left: 20px;
background: rgb(2,202,255);
}
.social-icons .insta-logo{
margin-left: 20px;
background: rgb(255,2,158);
}
.social-icons .all ion-icon{
font-size: 25px;
color: rgb(245,245,245);
}
.social-icons h4{
margin: 10px 0 0 10px;
color: rgb(245,245,245);
font-weight: 500;
}
.social-icons .twitter h4{
margin-left: 30px;
}
.social-icons .insta h4{
margin-left: 30px;
}
.social-icons p{
color: rgb(146,146,146);
font-size: 11px;
}
.social-icons .twitter p{
margin-left: 20px;
}
.social-icons .insta p{
margin-left: 20px;
}
.light-btn{
position: absolute;
top: 14%;
left: 62%;
display: block;
}
.light-btn input[type="checkbox"]{
position: absolute;
opacity: 0;
cursor: pointer;
}
.light-btn .icon-box{
width: 60px;
height: 60px;
background: #e3e3e3;
display: flex;
justify-content: center;
align-items: center;
box-shadow: -2px -2px 5px rgb(248, 248, 248),
3px 3px 5px rgba(0, 0, 0, 0.24);
border-radius: 50%;
}
.light-btn ion-icon{
font-size: 30px;
color: #4d4d4d;
}
.light-btn input[type="checkbox"]:checked ~ .icon-box{
box-shadow: inset -2px -2px 5px rgb(248, 248, 248),
inset 3px 3px 5px rgba(0, 0, 0, 0.24);
}
.light-btn input[type="checkbox"]:checked ~ .icon-box ion-icon{
transform: scale(0.95);
}
.dark-btn{
position: absolute;
top: 14%;
left: 62%;
display: none;
}
.dark-btn input[type="checkbox"]{
position: absolute;
opacity: 0;
cursor: pointer;
}
.dark-btn .icon-box-2{
width: 60px;
height: 60px;
background: #3b3b3b;
display: flex;
justify-content: center;
align-items: center;
box-shadow: -2px -2px 5px rgb(207, 207, 207),
3px 3px 5px rgba(0, 0, 0, 0.24);
border-radius: 50%;
}
.dark-btn ion-icon{
font-size: 30px;
color: #ffffff;
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="moon-outline"></ion-icon>
</div>
</div>
<div>
<input type="checkbox" name="checkbox">
<div>
<ion-icon name="moon-outline"></ion-icon>
</div>
</div>
<div>
<div>
<div><ion-icon name="return-up-back-outline"></ion-icon></div>
<div><ion-icon name="heart-outline"></ion-icon></div>
<div><ion-icon name="ellipsis-vertical-outline"></ion-icon></div>
</div>
<div></div>
<h3>Ann Daniel</h3>
<h6>SENIOR PRODUCT DESIGNER</h6>
<h5>Create usable interface and designs @GraficSpark </h5>
<a href="#">Hire Me</a>
<div></div>
<div>
<div>
<div>
<ion-icon name="logo-facebook"></ion-icon>
</div>
<h4>12.8k</h4>
<p>Followers</p>
</div>
<div>
<div>
<ion-icon name="logo-twitter"></ion-icon>
</div>
<h4>12.8k</h4>
<p>Followers</p>
</div>
<div>
<div>
<ion-icon name="logo-instagram"></ion-icon>
</div>
<h4>12.8k</h4>
<p>Followers</p>
</div>
</div>
</div>
<script>
var getbox = document.querySelector('.light');
getbox.onclick = function(){
document.querySelector('.dark').style.display='block';
document.querySelector('.light').style.display='none';
}
var getSecond = document.querySelector('.dark');
getSecond.ondblclick = function(){
document.querySelector('.dark').style.display='none';
document.querySelector('.light').style.display='block';
}
</script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>Watch video related this article…
