Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "Create a Personal Portfolio Website Using HTML & CSS Only!", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website Using HTML and CSS</title>
</head>
<body>
<div class="background-image"></div>
<main>
<!-- Hidden Checkbox -->
<input type="checkbox" hidden id="menuToggle">
<!-- Menu Icon -->
<label class="menu-icon" for="menuToggle"><ion-icon name="menu-outline"></ion-icon></label>
<!-- Navigation -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#comment">Comments</a></li>
<li><a href="#client">Clients</a></li>
</ul>
</nav>
<!-- Hero -->
<div class="hero">
<div class="hero-1">
<div class="image-div">
<img src="./images/profile.jpg" alt="">
<div class="social-icons">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-github"></ion-icon>
</div>
</div>
<div class="text-div">
<span>Hello Everyone 👋</span>
<h1>I'm David Fincher</h1>
<h1>I'm a <span>Web Developer</span></h1>
<div class="text-info">
<div><ion-icon name="calendar-outline"></ion-icon><span>19.03.1988</span></div>
<div><ion-icon name="logo-whatsapp"></ion-icon><span>987-654-321</span></div>
<div><ion-icon name="at-outline"></ion-icon><span>example@email.com</span></div>
<div><ion-icon name="location-outline"></ion-icon><span>New York, United States</span></div>
</div>
</div>
</div>
<div class="hero-2">
<p>I'm a Creative Developer for interactive projects that usually are apps, VR and Creative websites. I Spend most of time coding outstanding projects or studying new technologies. to improve my development stack. I develop compelling designs that spring to life using transition and animations that suit my clients, using the most sophisticated technologies available today for fully interactive and responsive websites and apps.</p>
</div>
</div>
<!-- Services -->
<div class="service">
<h2>What i do</h2>
<div class="services">
<div>
<ion-icon name="logo-web-component"></ion-icon>
<span>Web Sites and Platforms</span>
</div>
<div>
<ion-icon name="apps-outline"></ion-icon>
<span>Mobile Applications</span>
</div>
<div>
<ion-icon name="stats-chart-outline"></ion-icon>
<span>Strategy and Branding</span>
</div>
<div>
<ion-icon name="camera-outline"></ion-icon>
<span>Product Photography</span>
</div>
<div>
<ion-icon name="briefcase-outline"></ion-icon>
<span>Seo Optimization</span>
</div>
<div>
<ion-icon name="pulse-outline"></ion-icon>
<span>Social Media Management</span>
</div>
</div>
</div>
<!-- Comments -->
<div class="comment">
<h2>What The People Say</h2>
<div class="comments">
<div>
<p>I would gladly pay over 600 dollars for tavonline. Tavonline has really helped our business. I like tavonline more and more each day because it makes my life a lot easier.</p>
<div>
<img src="./images/comment-1.jpg" alt="">
<h3>Louis L. Marin <span>Founder</span></h3>
</div>
</div>
<div>
<p>I would gladly pay over 600 dollars for tavonline. Tavonline has really helped our business. I like tavonline more and more each day because it makes my life a lot easier.</p>
<div>
<img src="./images/comment-3.jpg" alt="">
<h3>Louis L. Marin <span>Founder</span></h3>
</div>
</div>
<div>
<p>I would gladly pay over 600 dollars for tavonline. Tavonline has really helped our business. I like tavonline more and more each day because it makes my life a lot easier.</p>
<div>
<img src="./images/comment-4.jpg" alt="">
<h3>Louis L. Marin <span>Founder</span></h3>
</div>
</div>
</div>
</div>
<!-- Clients -->
<div class="client">
<div class="client-slide">
<img src="./images/client-1d.png" alt="">
<img src="./images/client-2d.png" alt="">
<img src="./images/client-3d.png" alt="">
<img src="./images/client-4d.png" alt="">
<img src="./images/client-5d.png" alt="">
<img src="./images/client-6d.png" alt="">
<img src="./images/client-7d.png" alt="">
</div>
</div>
</main>
<!-- Footer -->
<footer>
<p>© Copyright 2025 - All right reserved</p>
<div class="footer-icons">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-github"></ion-icon>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>
Next, add the following CSS codes to your style.css file to make your website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.background-image {
width: 100%;
height: 100vh;
background-image: url("./images/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: fixed;
top: 0;
left: 0;
}
main {
max-width: 1300px;
width: 95%;
margin: 0 auto;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
padding: 50px;
position: relative;
top: 60px;
border-radius: 10px;
}
.menu-icon {
position: absolute;
top: 50px;
right: 50px;
font-size: 2em;
width: 50px;
height: 50px;
border-radius: 50%;
background: #E6FF00;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: none;
}
nav {
position: absolute;
top: 100px;
right: 50px;
display: none;
transition: right 2s ease-in-out;
}
nav ul {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
color: #fff;
text-decoration: none;
margin: 15px 0;
transition: all 0.5s ease;
}
nav ul li a:hover {
color: #E6FF00;
}
#menuToggle:checked ~ nav {
display: block;
}
.hero-1 {
display: flex;
align-items: center;
gap: 2em;
}
.image-div {
position: relative;
}
.image-div img {
border-top-right-radius: 10em;
border-bottom-left-radius: 10em;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.image-div .social-icons {
position: absolute;
bottom: 0;
left: 0;
background: #fff;
display: flex;
align-items: center;
gap: 15px;
padding: 15px 30px;
font-size: 1.5em;
border-radius: 50px;
}
.image-div .social-icons ion-icon {
color: #000;
cursor: pointer;
transition: all 0.5s ease;
}
.image-div .social-icons ion-icon:hover {
color: #E6FF00;
transform: translateY(-5px);
}
.text-div {
width: 100%;
}
.text-div > span {
font-size: 1.5em;
color: #fff;
display: block;
margin-bottom: 20px;
}
.text-div > h1 {
color: #fff;
font-size: 3em;
font-weight: 400;
}
.text-div h1 span {
color: #E6FF00;
}
.text-info {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 50px;
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, .2);
padding-top: 40px;
}
.text-info > div {
font-size: 1.3em;
color: #fff;
display: flex;
align-items: center;
gap: 7px;
}
.text-info > div ion-icon {
color: #E6FF00;
}
.hero-2 {
margin-top: 40px;
color: rgba(255, 255, 255, .5);
font-size: 1.2em;
line-height: 1.9;
}
.service {
margin-top: 100px;
color: #fff;
}
.service > h2 {
text-decoration: underline;
text-decoration-color: #E6FF00;
}
.services {
margin: 40px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 50px;
}
.services > div {
display: flex;
align-items: center;
gap: 50px;
font-size: 1.1em;
max-width: 250px;
width: 100%;
}
.services > div ion-icon {
font-size: 3.7em;
}
.comment {
margin-top: 100px;
color: #fff;
}
.comment > h2 {
text-decoration: underline;
text-decoration-color: #E6FF00;
}
.comments {
margin: 40px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.comments > div {
color: rgba(255, 255, 255, .5);
}
.comments > div > p {
max-width: 400px;
width: 100%;
margin: auto;
}
.comments > div > div {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .5);
display: flex;
align-items: center;
gap: 20px;
}
.comments > div > div img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.comments > div > div h3 {
color: #fff;
}
.comments > div > div h3 span {
display: block;
font-weight: 100;
font-size: 0.9em;
}
.client {
overflow: hidden;
margin-top: 150px;
padding-top: 2rem;
position: relative;
border-top: 1px solid rgba(255, 255, 255, .2);
}
.client-slide {
display: flex;
width: calc(250px * 8);
animation: scroll 20s linear infinite;
}
.client-slide > img {
height: 150px;
width: 300px;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
footer {
position: relative;
padding: 30px 50px;
background: #000;
max-width: 1300px;
width: 90%;
margin: 0 auto;
margin-top: 68px;
color: rgba(255, 255, 255, .5);
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
font-size: 0.9em;
}
.footer-icons {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
.footer-icons ion-icon {
color: #fff;
cursor: pointer;
transition: all 0.5s ease;
}
.footer-icons ion-icon:hover {
color: #E6FF00;
transform: translateY(-5px);
}
@media (max-width: 768px) {
main {
padding: 20px;
}
.hero-1 {
flex-direction: column;
}
.image-div img {
width: 100%;
}
.image-div .social-icons {
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
}
.text-div > span {
font-size: 1em;
}
.text-div > h1 {
font-size: 2em;
}
.text-info > div {
font-size: 1.1em;
}
.hero-2 {
font-size: 1em;
}
footer {
flex-direction: column;
text-align: center;
gap: 20px;
padding: 40px 0;
}
}
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "a Personal Portfolio Website Using HTML & CSS Only!". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.