🌐 Welcome to this hands-on tutorial where we'll be delving into the exciting realm of web development! In this step-by-step guide, we'll walk you through the process of creating a stunning profile card using HTML and CSS. Whether you're a seasoned developer looking to add to your skillset or an absolute beginner eager to learn, you're in the right place.
Introduction:
A profile card is a versatile and visually appealing way to showcase your personal or professional information. With a combination of HTML for structure and CSS for styling, you can create a captivating online presence that leaves a lasting impression.
-
Getting Started
To kick off our journey, let's set up the basic structure of our HTML document. Here's what the initial code looks like:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Profile Card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Your profile card content goes here --> </body> </html>We're also including Font Awesome icons for our social media links and linking an external CSS file called style.css to keep our styling organized.
-
Creating the Profile Card
Inside the `body` tag of our HTML document, we'll create the structure of our profile card. Here's what it looks like:
<div class="card"> <div class="card-details"> <div class="profile-img"> <img src="./profile.png" alt="Profile Pic"> </div> <div class="card-text"> <h3>Coding Buddy</h3> <p>Web Design | Javascript | Java</p> </div> </div> <div class="links"> <a href="#"><i class="fa-brands fa-facebook"></i></a> <a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i class="fa-brands fa-square-x-twitter"></i></a> <a href="#"><i class="fa-brands fa-github"></i></a> </div> </div>We've structured our profile card into different sections: the card details containing the profile image and text, and the links section containing social media icons.
-
Designing the Profile Card
Let's move on to crafting the visual aspect of our profile card. Here's what the 'style.css' file contains:
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,300;1,400&family=Poppins:ital,wght@0,200;0,400;1,200;1,300&display=swap'); /* Global Styles */ /* ... (see the full CSS code above) ... */In this CSS code, we're importing Google Fonts for our text, defining global styles, and setting up the basic layout of our profile card.
-
Styling the Profile Card
The CSS code we've written in the `style.css` file carefully styles each element of our profile card, making it visually appealing and responsive. From sizing and positioning to hover effects, the CSS ensures your card looks polished and engaging.
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; background: #E25E3E; display: flex; align-items: center; justify-content: center; color: #fff; } .card{ width: 300px; height: 300px; position: relative; display: flex; justify-content: center; overflow: hidden; cursor: pointer; transition: .5s; } .card-details{ width: 300px; height: 250px; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 10px; } .profile-img{ width: 120px; height: 120px; border-radius: 50%; border: 3px solid #E25E3E; padding: 3px; } .profile-img img{ width: 100%; height: 100%; border-radius: 50%; } .card-text{ margin-top: .5rem; font-family: 'Poppins', sans-serif; } .card-text h3{ color: #E25E3E; letter-spacing: 2px; } .card-text p{ color: #cccccc8d; } .links{ position: absolute; height: 40px; width: 200px; background: #961f02; border-radius: 50px; display: flex; align-items: center; justify-content: space-around; bottom: -50px; font-size: 18px; transition: .5s; } .links a{ text-decoration: none; color: #fff; } .fa-facebook:hover{ color: #4267B2; } .fa-instagram:hover{ background: -webkit-linear-gradient(bottom left, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fa-square-x-twitter:hover{ color: #000; } .fa-github:hover{ color: #000; } .card:hover .links{ bottom: 30px; transition: .5s; }
Conclusion
And there you have it! By combining HTML and CSS, you've created a stunning profile card that's sure to impress. This project serves as a great starting point for learning web development and enhancing your coding skills. Feel free to customize and expand upon this project as you continue on your coding journey.
Thank you for joining us in this tutorial. If you found this guide helpful, don't forget to like, subscribe, and share with others who might benefit from it. Happy coding! 🎨💻🚀
Posts
No comments: