<aside> 💡 This is a basic portfolio layout. Try changing some of the CSS to understand what each component does
</aside>
index.html
<!--DOCTYPE html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--==title============================-->
<title>Portfolio Website HTML</title>
<!--==CSS==============================-->
<link rel="stylesheet" href="css/style.css">
<!--==fav-icon=========================-->
<link rel="shortcut icon" href="images/fav-icon.png">
<!--==poppins==========================-->
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>"
rel="stylesheet">
<!--==font-Awesome=====================-->
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css>">
</head>
<body>
<!--==main===========================-->
<section id="main">
<!--==Navigation==========================-->
<header id="header">
<nav class="navigation">
<!--**menu-btn*******-->
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon">
<span class="nav-icon"></span>
</label>
<!--**logo***********-->
<a href="#" class="logo">
A
</a>
<!--**menu***********-->
<ul class="menu">
<li><a href="#main">Home</a></li>
<li><a href="#about-me">About Me</a></li>
<li><a href="#our-services">Our Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!--**contact-btn****-->
<div class="nav-social">
<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</nav><!--end-nav-->
</header>
<!--==main-content=========================-->
<div class="main-content">
<img alt="Alex" class="main-img" src="images/main.avif">
<strong>Hi, I'm Alex</strong>
<span>I'm A Front-End Developer</span>
<h1>Passionate to create a amazing websites.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis repellendus, asperiores, non nostrum
facilis aperiam velit adipisci distinctio aliquam esse ratione.</p>
</div>
</section>
<!--==About-Me===============================-->
<section id="about-me">
<strong>About Me</strong>
<h2>Hello, I'm A FrontEnd Developer.</h2>
<div class="about-text">
<h3>Passionate to create a amazing websites.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste eos explicabo obcaecati ipsum
vero consectetur velit magnam aperiam nulla, assumenda, praesentium ipsa quod expedita fugit in
asperiores vitae veritatis?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum fugiat cumque perferendis enim. <b>4 Years
Experice</b> odio Delectus ad est facilis eius. Voluptates expedita atque cupiditate fugit est ea.
Quis!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ratione veniam minima explicabo id nostrum
incidunt voluptas ipsum omnis veritatis rem obcaecati in, vero iusto at nulla Veritatis!</p>
<a href="cv/cv.docx" download="cv">Download My CV <i class="fa-solid fa-download"></i></a>
</div>
</section><!--about-end-->
<!--==Our-Services======================-->
<section id="our-services">
<!--**heading********************-->
<div class="services-heading">
<!--text-->
<div class="services-heading-text">
<strong>Our Services</strong>
<h2>High Quality Services For You</h2>
</div>
</div>
<!--**container*******************-->
<div class="services-box-container">
<!--**box1**-->
<div class="service-box s-box1">
<!--icon-->
<i class="fa-solid fa-desktop"></i>
<!--title-->
<strong>Web Designing</strong>
<!--details-->
<p>We create visually stunning and intuitive websites that leave a lasting impression. Contact us now.
</p>
<!--read more-->
<a href="#contact">Contact Us</a>
</div><!--box-end-->
<!--**box2**-->
<div class="service-box s-box1">
<!--icon-->
<i class="fa-solid fa-code"></i>
<!--title-->
<strong>Font-End Developing</strong>
<!--details-->
<p>Our frontend development team uses the latest technologies to create fast and responsive websites.
</p>
<!--read more-->
<a href="#contact">Contact Us</a>
</div><!--box-end-->
<!--**box3**-->
<div class="service-box s-box1">
<!--icon-->
<i class="fa-solid fa-ranking-star"></i>
<!--title-->
<strong>SEO Ranking</strong>
<!--details-->
<p>Our SEO experts use proven strategies to improve your website's search engine rankings and
visibility.</p>
<!--read more-->
<a href="#contact">Contact Us</a>
</div><!--box-end-->
</div>
<!--btn-->
<span class="service-btn">Contact Us For Need Any Help And Services <a href="#contact">Let's get
Started</a></span>
</section>
<!--==contact============================================-->
<section id="contact" class="contact">
<strong>WHATS NEXT</strong>
<h3>Lets work together!</h3>
<p>f you'd like to talk about a project you want help with or need an advice about product design, just drop me
a message at <b>[email protected]</b> I will contact you soon.</p>
<a href="mailto:[email protected]" class="contact-btn">Write Me An Email <i class="far fa-envelope"></i></a>
</section>
<!--==footer=============================================-->
<footer>
<span>Copyright 2023 - Alex Portfolio</span>
<a href="index.html" class="footer-logo">Alex Portfolio</a>
</footer>
</body>
</html>
css/style.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: poppins;
scroll-behavior: smooth;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*==main================================*/
#main{
width: 100%;
display: flex;
flex-direction: column;
min-height: 400px;
background-color: #131313;
}
/*==nav-bar=============================*/
.navigation{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
width: 90%;
margin: 0px auto;
padding: 30px 0px;
}
.logo{
font-size: 1.2rem;
text-transform: uppercase;
font-weight: 700;
color: #1a1a1a;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
.menu{
display: flex;
align-items: center;
}
.menu li a{
margin: 0px 30px;
color: #c9c9c9;
letter-spacing: 0.5px;
font-weight: 400;
transition: all ease 0.3s;
}
.nav-social{
display: flex;
justify-content: center;
align-items: center;
}
.nav-social a{
color: #c9c9c9;
margin-left: 20px;
transition: all ease 0.3s;
}
.nav-social a:first-child{
margin-left: 0px;
}
.menu li a:hover,
.nav-social a:hover{
color: #ffffff;
}
/*==main-content=========================*/
.main-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 50px auto;
max-width: 500px;
text-align: center;
}
.main-img{
width: 100px;
height: 100px;
object-fit: cover;
object-position: center;
border-radius: 50%;
margin-bottom: 10px;
}
.main-content strong{
color: #fefefe;
font-size: 1.6rem;
font-weight: 700;
}
.main-content span{
color: #8d94b4;
font-weight: 400;
font-size: 0.9rem;
}
.main-content h1{
font-size: 3rem;
color: #ffffff;
line-height: 3.4rem;
margin-top: 20px;
}
.main-content p{
color: #5e5e5e;
margin-top: 20px;
letter-spacing: 0.3px;
}
/*==about-me================================*/
#about-me{
max-width: 800px;
width: 90%;
margin: 50px auto;
}
#about-me strong{
text-transform: uppercase;
letter-spacing: 10px;
font-weight: 600;
font-size: 0.9rem;
color: #8d94b4;
}
#about-me h2{
font-size: 4rem;
line-height: 4.4rem;
color: #272727;
font-weight: 800;
margin-top: 10px;
}
.about-text h3{
font-size: 3rem;
line-height: 3.4rem;
color: #272727;
font-weight: 300;
margin-bottom: 20px;
}
.about-text{
margin-top: 30px;
max-width: 85%;
margin-left: auto;
}
.about-text p{
color: #1a1a1a;
margin-bottom: 20px;
line-height: 1.4rem;
letter-spacing: 0.3px;
}
.about-text a{
width: 180px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
background-color: #8d94b43b;
color: #1a1a1a;
font-size: 0.9rem;
font-weight: 500;
}
.about-text a i{
margin-left: 10px;
}
/*==our-services=====================*/
#our-services{
width: 100%;
margin: 50px auto 0px auto;
background-color:#161616;
padding: 50px 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top: 1px solid #eeeeee;
}
.services-heading{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
width: 90%;
margin: auto;
}
.services-heading-text strong{
color: #8d94b4;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1px;
}
.services-heading-text h2{
font-size: 2.2rem;
color:#ffffff;
font-weight: 700;
max-width: 600px;
}
.services-box-container,
.team-box-container{
max-width: 1200px;
width: 90%;
margin: 40px auto;
overflow: hidden;
display: grid;
grid-gap: 30px;
grid-template-columns: 1fr 1fr 1fr;
}
.service-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
max-width: 100%;
border: 1px solid #242424;
padding: 30px;
background-color:#1a1a1a;
}
.service-box:hover{
border: 1px solid #8d94b4;
}
.service-box i{
font-size: 2rem;
color: #ffffff;
width: 60px;
height: 60px;
border-radius:5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #8d94b43b;
}
.service-box strong{
color:#ffffff;
font-size: 1.4rem;
margin-top: 20px;
font-weight: 600;
}
.service-box p{
font-size: 0.9rem;
line-height: 1.4rem;
color:#e7e7e7;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.service-box a{
height: 45px;
background-color:#8d94b43b;
color: #ffffff;
padding: 0px 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
font-weight: 500;
border-radius: 5px;
margin-top: 30px;
}
.service-btn{
color: #ffffff;
font-size: 0.9rem;
margin-top: 10px;
text-align: center;
padding: 0px 10px;
}
.service-btn a{
color: #8d94b4;
text-decoration: underline;
font-weight: 600;
}
/*==contact=============================*/
#contact{
width: 90%;
max-width: 950px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 80px auto;
text-align: center;
}
.contact strong{
color:#8d94b4;
font-size: 0.87rem;
letter-spacing: 1px;
font-weight: 600;
}
.contact h3{
color: #1d1d1d;
font-size: 2.37rem;
letter-spacing: 1px;
}
.contact p{
color: #202020;
max-width: 640px;
margin: 15px 0px;
letter-spacing: 1px;
}
.contact p b{
color: #252525;
font-weight: 500;
}
.contact a{
width: 200px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
background-color: #8d94b43b;
color: #1a1a1a;
font-weight: 600;
}
.contact a i{
margin-left: 10px;
}
/*==footer========================*/
footer{
display: flex;
justify-content: space-between;
align-items: center;
max-width: 950px;
width: 100%;
margin: 70px auto 0px auto;
padding: 20px;
text-align: center;
border-top: 1px solid #d8d8d8;
}
footer span{
color: #313131;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
}
footer .footer-logo{
color: #1f1f1f;
font-weight: 500;
letter-spacing: 3px;
font-size: 1.3rem;
}
/*==making-responsive============*/
.menu-icon,
.menu-btn{
display: none;
}
@media(max-width:1000px){
.navigation{
justify-content: space-between;
padding: 20px;
position: relative;
width: 100%;
z-index: 103;
}
.logo{
margin-right: auto;
margin-left: 20px;}
.navigation .menu{
display: none;
position: absolute;
left: 0px;
top:100%;
background-color: #131313;
width: 100%;
padding: 0px;
margin: 0px;
box-shadow: 2px 30px 30px rgba(0,0,0,0.05);
}
.navigation .menu li{
width:100%;
margin: 0px;
padding: 0px;
}
.navigation .menu li a{
width: 100%;
display: flex;
align-items: center;
margin: 0px;
padding: 20px;
border-bottom: 1px solid #161616;
}
.menu-icon{
display: block;
}
.navigation .menu-icon{
cursor: pointer;
float: right;
padding: 10px 0px;
position: relative;
user-select: none;
z-index: 106;
}
.navigation .menu-icon .nav-icon{
background-color: #ffffff;
display: block;
position: relative;
height: 2px;
transition: background 0.2s ease-out;
width: 25px;
}
.navigation .menu-icon .nav-icon::before,
.navigation .menu-icon .nav-icon::after{
background-color: #ffffff;
content: '';
position: absolute;
height: 100%;
transition: all ease-out 0.2s;
width: 100%;
}
.navigation .menu-icon .nav-icon::before{
top: 9px;
}
.navigation .menu-icon .nav-icon::after{
top: -9px;
}
.navigation .menu-icon:checked ~ .menu-icon .nav-icon,
.navigation .menu-btn:checked ~ .menu-icon .nav-icon{
background-color: transparent;
}
.navigation .menu-btn:checked ~ .menu-icon .nav-icon::before{
transform: rotate(-45deg);
top: 0px;
}
.navigation .menu-btn:checked ~ .menu-icon .nav-icon::after{
transform: rotate(45deg);
top: 0px;
}
.navigation .menu-btn:checked ~ .menu{
display: block;
}
}
@media(max-width:850px){
.services-box-container{
grid-template-columns: 1fr;
}
}
@media(max-width:724px){
.main-content h1{
font-size: 1.8rem;
line-height: 2.2rem;
max-width: 80%;
letter-spacing: 0.3px;
}
}
@media(max-width:724px){
#about-me h2{
font-size: 1.8rem;
line-height: 2.2rem;
}
.about-text h3{
font-size: 2rem;
line-height: 2.4rem;
}
}
@media(max-width:724px){
.services-heading h2{
font-size: 1.8rem;
line-height: 2.2rem;
}
}
@media(max-width:724px){
.contact h3{
font-size: 2rem;
line-height: 2.5rem;
}
}
images
