Scribd
Upload
29 views6 pages

Lab Task 6 Ahsan

Uploaded by

nomanpakistan0332
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views6 pages

Lab Task 6 Ahsan

Uploaded by

nomanpakistan0332
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Lab task 6

Ahsan Ahmed
FSD-FL-140

Create a Personal portfolio page in HTML and CSS like following


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css">
<link rel="stylesheet" href="style.css">
<title>Portfolio</title>
</head>
<body>
<header>
<p><img src="logo.jpeg" alt=""><span>Alex</span> Smith </p>
<nav>
<ul>
<a href="">About me</a>
<a href="">Resume</a>
<a href="">Portfolio</a>
<a href="">Blog</a>
<a href="">Contact</a>
<a href="">Extra</a>
<a href="">Get it Now</a>
</ul>
</nav>
</header>
<section>
<div class="one">
<img src="/mimi.jpeg" alt="" width="200px" >
</div>
<div class="two">
<p>Frontend Developer</p>
<h1>Alex Smith</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolore maiores harum vitae adipisci dicta rem. Incidunt magni quisquam
vero, dicta delectus vel eius et officiis? Iste fugiat vitae sequi
itaque?</p>
<button>Download CV</button>
<button>Contact</button>
</div>
</section>
<section>
<div class="container">
<h2>What I Do</h2>
<div class="services">
<div class=" item" >
<i class="fas fa-pencil-alt "></i>
<div class=" content">
<h3>Copywrite</h3>
<p>Mauris neque libero, aliquet vel mollis nec,
euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus
blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a
tincidunt turpis turpis tempus ex.</p>
</div>
</div>
<div class=" item">
<i class="fas fa-store "></i>
<div class=" content">
<h3>Ecommerce</h3>
<p>Mauris neque libero, aliquet vel mollis nec,
euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus
blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a
tincidunt turpis turpis tempus ex.</p>
</div>
</div>
<div class=" item">
<i class="fas fa-desktop "></i>
<div class=" content">
<h3>Web Design</h3>
<p>Mauris neque libero, aliquet vel mollis nec,
euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus
blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a
tincidunt turpis turpis tempus ex.</p>
</div>
</div>
<div class=" item">
<i class="fas fa-bullhorn "></i>
<div class=" content">
<h3>Marketing</h3>
<p>Mauris neque libero, aliquet vel mollis nec,
euismod sed tellus. Mauris convallis dictum elit id volutpat. Vivamus
blandit, dolor vitae lacinia maximus, risus velit vehicula odio, a
tincidunt turpis turpis tempus ex.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS:
body{
background-color: yellow;
}
header{
background-color: white;
height: 100px;
display: flex;
margin: 30px;
border-top-left-radius: 25px;
border-top-right-radius:25px;
}
header>nav>ul>a{
text-decoration: none;
color: rgb(112, 98, 98);
font-size: 20px;
margin-right: 20px;
}
header>nav>ul>a:hover{
color: black;
font-weight: bold;
}
nav{
margin-left: 380px;
margin-top: 20px;
}
p{
font-size: 20px;
font-weight: 300;
}
span{
font-size: 30px;
font-weight: 800;
}
img{
margin-top: 5px;
}
section{
display: flex;
margin-left: 30px;
margin-right: 30px;
background-color: white;
margin-top: -30px;
padding-top: 80px;
}
.one{
width: 40%;
}
.two{
width: 50%;
}
.one>img{
margin-left: 250px;
}
p{
color: rgb(58, 43, 43);
}
.two>h1{
font-size: 30px;
line-height: none;
}
button{
width: 150px;
height: 40px;
border-radius: 25px;
border: 2px solid yellow;
font-weight: bold;
}
button:hover{
color: white;
background-color:yellow ;
}

/* last section */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

h2 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}

.services {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.item {
flex: 0 0 48%;
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}

i{
font-size: 2rem;
color: yellow;
}

.content h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}

.content p {
color: #4b5563;
margin: 5px 0 0 0;
}

OUTPUT:

You might also like