HTML Structure
The HTML structure of our Instagram profile card is straightforward and well-organized. Here's what the code looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* CSS goes here and use .css file extention to link new css file */
</style>
</head>
<body>
<h1 class="app"><a href="https://instagram.com/developer.manoj">INSTAGRAM</a></h1>
<div class="OutCover outbox">
<div class="profile" id="pic"></div>
<div class="userDetail">
<h1>developer.manoj</h1>
<hr>
<div class="getdata">
<h3 class="textstyle">Post</h3>
<h3 class="textstyle">Follower</h3>
<h3 class="textstyle">Following</h3>
</div>
</div>
</div>
</body>
</html>
2. Head Section :
Meta Tags : The `<meta>` tags ensure proper rendering and touch zooming, with `viewport` allowing the content to fit on the device screen properly.
Title : The `<title>` tag sets the title of the webpage.
- Style Tag : All the CSS for styling the page is embedded within the `<style>` tag.
3. Body Section :
Instagram Link :
The `<h1 class="app"><a href="https://instagram.com/developer.manoj">INSTAGRAM</a></h1>` creates a stylized link to an Instagram profile.
Profile Card :
The profile card is created using the `<div>` elements with classes such as `OutCover outbox`, `profile`, and `userDetail`.
User Details :
The user’s name, post count, follower count, and following count are displayed in this section.
CSS Styling
The magic happens with CSS, which transforms the plain HTML into a visually appealing card. Here's the complete CSS used:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
color: white;
}
body {
min-height: 100vh;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6gd-lBDNILWVO6xn6Msw_T20z-fO-Xr3xOh1VImVV62uZe05hZv2f9rZX3kHUDTowDzrff0v4RSiuv1wDHXt3BGITSYCdVe3HFIBm93MFMQoGzzS2rmHxrPwYCtoQivL1SXQNMzyO1S34t3Ym3z6U7myVmwWdCGdaXguDTuFjtD3DEt_-x_NyDMbOfU/s474/OIP.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.app {
position: absolute;
top: 2%;
transform: rotateZ(-6deg) rotateX(-50deg) rotateY(-2deg);
font-size: calc(10px + 1.5vw);
}
.app>a {
text-decoration: none;
background: linear-gradient(to right, red, deeppink, orange);
background-clip: text;
color: transparent;
}
.outbox {
height: 90vh;
width: 80vw;
max-width: 1200px;
max-height: 800px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: rotateY(0deg) rotateX(-40deg) rotateZ(-8deg);
}
.OutCover, .profile {
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
border: 5px solid rgba(255, 255, 255, 0.8);
box-shadow: inset 1px -10px 14px hotpink, inset 20px 2px 14px deepskyblue, inset -20px 20px 14px white;
}
#pic {
background: orangered;
height: 30%;
aspect-ratio: 1/1;
max-width: 200px;
max-height: 200px;
position: absolute;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPP63zMUUXCMlkaq13jRHUZx5U7egext30MKX_KQOm9qYxjqKt0gG2_2pwML3Le9XyVjnLigK5zsC5g7-H-27C6o7SNS3CaucoHP94KNZ4Nm4ha5QSa_HMGg_wJNxqCToevsx19H5v9ePKo4U7agOV01Kxt_XJJb27o0v85-k1qagGso8ZyuDB_xHkwlE/s1079/true.png);
border-radius: 50%;
background-size: cover;
box-shadow: inset 1px -1px 5px hotpink, inset 2px 2px 5px deepskyblue;
top: 20%;
}
.userDetail {
width: 95%;
position: absolute;
bottom: 10%;
text-align: center;
}
.userDetail>h1 {
font-weight: bold;
background: black;
color: white;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
font-size: calc(10px + 1.5vw);
}
.getdata {
display: flex;
justify-content: space-evenly;
}
.textstyle {
position: relative;
transform: translate(0%, 100%);
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
font-size: calc(8px + 1vw);
}
.textstyle:before {
content: "";
position: absolute;
transform: translate(-50%, -70%);
}
h3:nth-child(1):before {
content: "12";
}
h3:nth-child(2):before {
content: "1M";
}
h3:nth-child(3):before {
content: "1";
}
Explanation: 1. Global Styles : The universal selector `*` is used to reset padding, margin, and box-sizing across all elements, and the text color is set to white.
2. Body Styling : The body is styled with a background image, and the content is centered using Flexbox. The font family is set to Arial.
3. Instagram Header :
The `.app` class is used to position the Instagram header and apply a 3D rotation for a dynamic look.
The gradient background and text transparency give the Instagram link a modern and vibrant appearance.
4. Profile Card :
The `.outbox` class styles the card container, giving it a rotated 3D effect.
The `.OutCover` and `.profile` classes apply a frosted glass effect using `backdrop-filter`, along with border styling and shadows to create depth.
The `#pic` ID styles the profile picture with a circular shape, background image, and additional shadow effects.
5. User Details :
The `.userDetail` class positions the user details at the bottom of the card and styles the text.
- The `.getdata` class organizes the stats (posts, followers, following) into a flex container, spacing them evenly.
The `.textstyle` class adds a semi-transparent background to the stats text for better readability, with custom CSS `::before` pseudo-elements used to add labels.
This code provides a visually appealing way to present an Instagram profile using just HTML and CSS. The use of CSS properties like `transform`, `backdrop-filter`, and `box-shadow` helps in creating a modern, 3D effect that makes the profile card stand out. This design can easily be adapted to suit other purposes, such as showcasing social media profiles, personal branding, or even as a fun project to practice your CSS skills.
0 comments:
Post a Comment