Simple Portfolio Card in html and css
In this post, I’ll walk you through the complete process of creating a simple portfolio card using html and css only this will provide you with more knowledge on how to manipulate codes and some cool css features.
Note: This tutorial is a simple portfolio card in html and css, meaning it might not contain all the necessary features you might expect, so you are free to expand or add more features to it.
Also there are many ways of doing this, and this is just one of those ways, so don’t get confused if you discover another method somewhere else.
In other to create a simple portfolio card, you need to know knowledge on front end designs this goes with great fiction of thinking. Programing real world entities and representations make good use of simple html and css skills blended with JavaScript.
In this project, the html code consist of and external styling coupled with bootstrap icons and google font
In close, it consist of div ellements and arranged in an organized manner for easy reading and manipulation
html codes
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”markup” wrapped=”yes” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
<body>
<div class="container">
<div class="card">
<div class="content">
<span class="background-span">hello I Am</span>
<h1>YUVEN CARLSON</h1>
<span>FrontEnd Developer</span>
<div class="icons">
<i class="bi bi-github"></i>
<i class="bi bi-instagram"></i>
<i class="bi bi-telegram"></i>
<i class="bi bi-whatsapp"></i>
</div>
</div>
<div class="circle c1">
<div class="circle c3">
<div class="circle c2">
<div class="circle c4">
<img src="carl.PNG" alt="" width="100px" height="140px" srcset="">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/dm_code_snippet]
css codes
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” bg-color=”#abb8c3″ theme=”dark” language=”css” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Nanum+Pen+Script&family=Poppins:wght@200;300;400&family=Roboto:ital,wght@0,400;1,300&family=Shizuru&display=swap');
*{
margin: 0;
padding: 0;
}
.container{
background-color: rgb(25, 171, 255);
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
}
.card{
width: 60%;
height: 350px;
background-color: rgb(0, 0, 0);
border-radius: 30px;
position: relative;
display: flex;
flex-direction: row;
color: white;
align-items:center;
justify-content: space-around;
flex-wrap: wrap;
}
.circle{
border-radius: 50%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 3px 2px white;
}
.c1{
z-index: 1;
position: relative;
float: right;
top: px;
right: 3%;
width: 300px;
height: 300px;
background-color: rgba(255, 255, 255, 0.705);
display: flex;
justify-content: center;
align-items: center;
}
.c2{
z-index: 3;
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.651);
display: flex;
justify-content: center;
align-items: center;
}
.c3{
z-index: 2;
width: 250px;
height: 250px;
background-color: rgba(255, 255, 255, 0.486);
display: flex;
justify-content: center;
align-items: center;
}
.c4{
z-index: 4;
width: 150px;
height: 150px;
background-color: rgba(255, 255, 255, 0.973);
display: flex;
justify-content: center;
align-items: center;
}
.background-span{
background-color: rgb(25, 171, 255);
padding: 5px;
border-radius: 10px;
margin-bottom: 10px;
}
h1{
margin-top: 30px;
}
.icons{
margin-top: 20px;
font-size: 1.5rem;
}
.bi{
margin-left: 10px;
}
.content{
height: 200px;
}
[/dm_code_snippet]
if this was helpful to you, please shear
"To be come a content creator and a writer or contributor to the word wide web, you must chose a domain of specialty and what domain to relay on starting up a website will require a hosting service and a domain name, some basic skills of creating a responsive website and design skill. bellow are some resources to help you start up a self blog as a web editor"
Bluehost