In this tutorial, we’ll dive deep into crafting a fully responsive portfolio card using the power of HTML, CSS, and Flexbox. We’ll cover everything from setting up the basic HTML structure to applying advanced CSS techniques, ensuring your portfolio card looks stunning on any device.
HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Rowdies:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css"
integrity="sha512-9xKTRVabjVeZmc+GUW8GgSmcREDunMM+Dt/GrzchfN8tkwHizc5RP4Ok/MXFFy5rIjJjzhndFScTceq5e6GvVQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
<title>Profile Card</title>
</head>
<body>
<div class="container">
<div
class="wrapper d-flex justify-content-center align-items-center h-100"
>
<div class="profile-card col-4">
<div class="profile-img">
<div class="smooth-image"></div>
</div>
<div class="card-inner-wrapper">
<div class="card-inner pt-4 fw-bold">
<div class="card-inner-cursor">
<i
class="fa-solid fa-chevron-up fs-3"
style="color: #eac96a"
></i>
</div>
<h1 class="lh-1">
Astra <br />
Script
</h1>
<div
class="d-flex justify-content-between align-items-center pt-2"
>
<h3 class="fs-6 m-0">UI/UX Designer / Full Stack Developer / Google Ads Specialist</h3>
</div>
<div
class="d-flex align-items-center justify-content-between pt-4"
>
<div class="d-flex flex-column lh-1">
<span class="fw-bolder fs-2">500</span>
<h3 class="fs-5 m-0">Projects</h3>
</div>
<div class="d-flex flex-column lh-1">
<span class="fw-bolder fs-2">4,8</span>
<h3 class="fs-5 m-0">Rating</h3>
</div>
<div class="d-flex flex-column lh-1">
<span class="fw-bolder fs-2">104</span>
<h3 class="fs-5 m-0">Customers</h3>
</div>
</div>
<div class="pt-4">
<button class="btn btn-hire">Hire Me</button>
</div>
<div class="d-flex gap-4 align-items-center pt-4">
<i class="fa-brands fa-github fs-4"></i>
<i class="fa-brands fa-linkedin fs-4"></i>
<i class="fa-brands fa-medium fs-4"></i>
</div>
<div class="d-flex flex-column pt-4">
<div>
<h3 class="pt-4 fw-bold">About <i class="fa-solid fa-user"></i></h3>
<p class="fw-light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Excepturi repudiandae ipsum itaque culpa quisquam aspernatur
quis libero facilis esse nobis pariatur nulla quae aut
minima quos, blanditiis modi minus. Vel tempora deserunt
officia velit maiores, alias quas repudiandae?
Exercitationem eos fugiat quos deleniti incidunt deserunt
eaque? Ipsa repellendus expedita mollitia fugit aspernatur
sint minus dolorem soluta
</p>
<div class="d-flex align-items-center gap-4">
<div class="d-flex flex-column align-items-center">
<i class="fa-solid fa-plane-departure fs-4"></i>
<p>Travel</p>
</div>
<div class="d-flex flex-column align-items-center">
<i class="fa-solid fa-music fs-4"></i>
<p>Music</p>
</div>
<div class="d-flex flex-column align-items-center">
<i class="fa-solid fa-basketball fs-4"></i>
<p>Sports</p>
</div>
<div class="d-flex flex-column align-items-center">
<i class="fa-solid fa-pencil fs-4"></i>
<p>Drawing</p>
</div>
</div>
</div>
<div>
<h3 class="pt-4 fw-bold">Projects <i class="fa-solid fa-computer"></i></h3>
<p class="fw-light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Excepturi repudiandae ipsum itaque culpa quisquam aspernatur
</p>
<div>
<div
class="d-flex justify-content-between align-items-center py-3"
>
<h4 class="fw-bold m-0">Project Name</h4>
<p class="m-0">2023</p>
</div>
<img src="p2.jpg" class="img-fluid" alt="" />
<p class="fw-light pt-3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro architecto temporibus nemo aspernatur, voluptate
facilis tenetur minus! Explicabo, aperiam ullam est eaque
sed maxime distinctio, nesciunt nobis, odio reiciendis
</p>
<div class="d-flex gap-4 align-items-center">
<ul class="">
<li>Front End</li>
<li>UI UX Design</li>
<li>Back End</li>
</ul>
<ul class="">
<li>React JS</li>
<li>Node Js</li>
<li>Mongo DB</li>
</ul>
</div>
</div>
<div>
<div
class="d-flex justify-content-between align-items-center py-3"
>
<h4 class="fw-bold m-0">Project Name</h4>
<p class="m-0">2024</p>
</div>
<img src="p3.jpg" class="img-fluid" alt="" />
<p class="fw-light pt-3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro architecto temporibus nemo aspernatur, voluptate
facilis tenetur minus! Explicabo, aperiam ullam est eaque
sed maxime distinctio, nesciunt nobis, odio reiciendis
</p>
<div class="d-flex gap-4 align-items-center">
<ul class="">
<li>Front End</li>
<li>UI UX Design</li>
<li>Back End</li>
</ul>
<ul class="">
<li>React JS</li>
<li>Node Js</li>
<li>Mongo DB</li>
</ul>
</div>
</div>
<div>
<div
class="d-flex justify-content-between align-items-center py-3"
>
<h4 class="fw-bold m-0">Project Name</h4>
<p class="m-0">2024</p>
</div>
<img src="p1.jpg" class="img-fluid" alt="" />
<p class="fw-light pt-3">
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro architecto temporibus nemo aspernatur, voluptate
facilis tenetur minus! Explicabo, aperiam ullam est eaque
sed maxime distinctio, nesciunt nobis, odio reiciendis
</p>
<div class="d-flex gap-4 align-items-center">
<ul class="">
<li>Front End</li>
<li>UI UX Design</li>
<li>Back End</li>
</ul>
<ul class="">
<li>React JS</li>
<li>Node Js</li>
<li>Mongo DB</li>
</ul>
</div>
</div>
</div>
<div>
<h3 class="pt-4 fw-bold">Skills <i class="fa-solid fa-toolbox"></i></h3>
<div class="d-flex gap-4 align-items-center pt-2">
<p class="fw-light m-0 col-3">Html</p>
<div class="dots d-flex gap-3 align-items-center col-9">
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span></span>
</div>
</div>
<div class="d-flex gap-4 align-items-center pt-2">
<p class="fw-light m-0 col-3">Css</p>
<div class="dots d-flex gap-3 align-items-center col-9">
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span></span>
</div>
</div>
<div class="d-flex gap-4 align-items-center pt-2">
<p class="fw-light m-0 col-3">Javascript</p>
<div class="dots d-flex gap-3 align-items-center col-9">
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span ></span>
<span ></span>
<span></span>
</div>
</div>
<div class="d-flex gap-4 align-items-center pt-2">
<p class="fw-light m-0 col-3">Node JS</p>
<div class="dots d-flex gap-3 align-items-center col-9">
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span ></span>
<span ></span>
<span ></span>
<span></span>
<span ></span>
<span ></span>
<span></span>
</div>
</div>
<div class="d-flex gap-4 align-items-center pt-2">
<p class="fw-light m-0 col-3">React</p>
<div class="dots d-flex gap-3 align-items-center col-9">
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span ></span>
<span></span>
<span ></span>
<span ></span>
<span></span>
</div>
</div>
<div class="d-flex gap-4 align-items-center pt-2">
<p class="fw-light m-0 col-3">Figma</p>
<div class="dots d-flex gap-3 align-items-center col-9">
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span ></span>
<span ></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="d-flex gap-4 align-items-center pt-2">
<p class="fw-light m-0 col-3">Photoshop</p>
<div class="dots d-flex gap-3 align-items-center col-9">
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span class="active-dot"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- <div class="d-flex justify-content-between">
<ul class="fw-light p-0">
<li>Adobe XD</li>
<li>Adobe Illustrator</li>
<li>Adobe Photoshop</li>
<li>Figma</li>
</ul>
<ul class="fw-light p-0">
<li>Adobe XD</li>
<li>Adobe Illustrator</li>
<li>Adobe Photoshop</li>
<li>Figma</li>
</ul>
</div> -->
</div>
<div class="pt-4">
<h3 class="fw-bold">Contact <i class="fa-solid fa-id-card"></i></h3>
<div class="d-flex gap-4 align-items-center my-4">
<button class="btn btn-hire">
<i class="fa-solid fa-phone"></i>
</button>
<button class="btn btn-hire">
<i class="fa-brands fa-whatsapp"></i>
</button>
<button class="btn btn-hire">
<i class="fa-regular fa-envelope"></i>
</button>
<button class="btn btn-2">
<i class="fa-solid fa-download"></i> Resume
</button>
</div>
</div>
<div class="text-center py-2">
<h5 class="fw-bold fs-6">Copyright © 2022 Astra Script</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script>
const btnMove = document.querySelector(".card-inner-cursor");
const btnCursor = document.querySelector(".card-inner-cursor i");
const cardInner = document.querySelector(".card-inner");
btnMove.addEventListener("click", () => {
cardInner.classList.toggle("active");
btnCursor.classList.toggle("fa-chevron-down");
});
</script>
</body>
</html>
CSS Styling:
body{
font-family: "PT Serif", serif;
background-color: #0c0c0c;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h1{
font-family: "Rowdies", sans-serif;
}
.profile-card{
background-color: #1b1c1b;
position: relative;
height: 800px;
width: 420px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.profile-img img{
border-radius: 20px 20px 0 0;
height: 500px;
width: 100%;
object-fit: cover;
-webkit-border-radius: 20px 20;
-moz-border-radius: 20px 20;
-ms-border-radius: 20px 20;
-o-border-radius: 20px 20;
}
.smooth-image {
border-radius: 20px 20px 0 0;
height: 500px;
width: 100%;
object-fit: cover;
-webkit-border-radius: 20px 20;
-moz-border-radius: 20px 20;
-ms-border-radius: 20px 20;
-o-border-radius: 20px 20;
background: linear-gradient(
to bottom,
rgba(27, 28, 27, 0) 60%, /* Şeffaf */
#1b1c1b 100% /* Arka plan rengi */
),
url('3.jpeg'); /* Resim dosyası */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.card-inner-wrapper{
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card-inner{
background: linear-gradient(180deg, #eac96a 0%, #ea9a6a 100%);
border-radius: 10px 10px 0 0;
height: 380px;
position: relative;
width: 85%;
-webkit-border-radius: 20px 20px 0 0;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: all 0.5s ease-in-out;
overflow: hidden;
padding-left: 32px;
padding-right: 32px;
}
.card-inner-cursor{
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
background: black;
border-radius: 0 18px 0 18px;
width: 80px;
height: 50px;
top: 0 ;
right: 0;
-webkit-border-radius: 0 18px 0 18px;
-moz-border-radius: 0 18px 0 18px;
-ms-border-radius: 0 18px 0 18px;
-o-border-radius: 0 18px 0 18px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.card-inner-cursor i{
animation: moveUpDown 2s infinite;
}
.btn-hire{
color: #eac96a;
background-color: #1b1c1b;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: all 0.5s ease-in-out;
}
.btn-hire:hover{
color: #1b1c1b;
background-color: #eac96a;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn-2{
transition: all 0.5s ease-in-out;
border-radius: 5px;
color: #1b1c1b;
background-color: #eac96a;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn-2:hover{
color: #eac96a;
background-color: #1b1c1b;
}
.active{
border-radius: 20px;
height: 800px;
position: relative;
width: 100%;
overflow-y: auto;
scrollbar-width: none;
}
@keyframes moveUpDown {
0% {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
}
50% {
transform: translateY(5px);
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
}
100% {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
}
}
/* ul li{
list-style: none;
} */
.dots span{
width: 9px;
height: 9px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-color: #d5d5d5;
}
.active-dot{
background-color: #1b1c1b !important;
}Flexbox Layout: Flexbox is a powerful CSS layout module that makes it easy to create flexible and responsive designs. Use Flexbox to arrange items within a container in a row or column. This will allow you to create dynamic and adaptable layouts that adjust to different screen sizes.
Responsive Design: Implement responsive design using media queries. This enables you to create different styles for various screen sizes, such as mobile, tablet, and desktop. By adjusting the layout and styles, you can ensure your portfolio card looks great on any device.
Advanced Techniques: Once you have a solid foundation, you can explore more advanced CSS features like CSS Grid for complex layouts, animations for a dynamic feel, and preprocessors like Sass or Less for better organization and maintainability.
Key Points to Remember:
- Semantic HTML: Use semantic HTML elements for better accessibility and SEO.
- CSS specificity: Understand how CSS specificity works to avoid styling conflicts.
- Browser compatibility: Test your portfolio card in different browsers to ensure cross-browser compatibility.
- Accessibility: Make sure your portfolio card is accessible to users with disabilities by following accessibility guidelines.
Conclusion: By following these steps and experimenting with different styles and layouts, you can create a professional and visually appealing portfolio card that showcases your work effectively. Remember, practice makes perfect, so don’t be afraid to try new things and create something truly unique.
Additional Tips:
- Consider using a CSS framework like Bootstrap or Tailwind CSS to speed up development and get consistent styling.
- Add a touch of personality by using custom fonts, colors, and illustrations.
- Optimize your images to improve loading times.
Happy coding!
