Build Your Own Portfolio
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.
Click Here To Copy The Html File
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="middle-page">
<!-- header -->
<div id="header">
<div>
<img src="https://img.icons8.com/external-bearicons-gradient-bearicons/50/000000/external-moon-halloween-bearicons-gradient-bearicons.png">
</div>
<div id="nav2">
<ul class="nav-list">
<li class="list1">Home</li>
<li class="list1">Profile</li>
<li class="list1">Blog</li>
<li class="list1">Portfolio</li>
<li class="list1">Contact</li>
</ul>
</div>
</div>
<!-- hero-section -->
<div id="main">
<h1 class="main-txt">Hello, World!</h1>
<h5 class="main-stxt">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br> Duis mollis, est non commodo luctus</h5>
</div>
<!-- second -->
<div id="second">
<h2 class="second-txt">The easiest way
<br>to build websites online</h2>
<h5 class="second-stxt">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a
<br>pharetra augue. Donec id elit non mi porta gravida at eget metus.</h5>
<!-- features -->
<div id="features">
<div class="features-box">
<img class="features-img" src="icons/animat-checkmark.gif">
<h4 class="features-topic">Simple And Clean</h4>
<p class="features-para">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h5 class="features-view">View Details</h5>
</div>
<div class="features-box">
<img class="features-img" src="icons/animat-customize.gif">
<h4 class="features-topic">Simple And Clean</h4>
<p class="features-para">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h5 class="features-view">View Details</h5>
</div>
<div class="features-box">
<img class="features-img" src="icons/animat-responsive.gif">
<h4 class="features-topic">Simple And Clean</h4>
<p class="features-para">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h5 class="features-view">View Details</h5>
</div>
</div>
</div>
</div>
<!-- trans -->
<div id="transprant">
<div class="transprant-block">
<h1 class="no">14</h1>
<h4 class="sub">Clients</h4>
</div>
<div class="transprant-block">
<h1 class="no">32</h1>
<h4 class="sub">Projects</h4>
</div>
<div class="transprant-block">
<h1 class="no">38</h1>
<h4 class="sub">Positive Feedbacks</h4>
</div>
<div class="transprant-block">
<h1 class="no">29</h1>
<h4 class="sub">Website Lauch</h4>
</div>
</div>
<!-- middle-page -->
<div id="middle-page">
<h2 class="second-txt extra">All the need that you want</h2>
<h5 class="second-stxt">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.<br>
pharetra augue. Donec id elit non mi porta gravida at eget metus.</h5>
<div class="third-setion">
<div class="third-sub">
<h4 class="features-topic">Easy to Customize</h4>
<p class="features-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
<div class="third-sub">
<h4 class="features-topic">Pixel Perfect</h4>
<p class="features-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
<div class="third-sub">
<h4 class="features-topic">Full Support</h4>
<p class="features-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
<div class="third-sub">
<h4 class="features-topic">Clean Design</h4>
<p class="features-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
<div class="third-sub">
<h4 class="features-topic">Ontime Project</h4>
<p class="features-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
<div class="third-sub">
<h4 class="features-topic">Built with SASS</h4>
<p class="features-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
</div>
<!-- profile -->
<div class="top-profile">
<h2 class="second-txt">Brand new social media,<br>
different than any other one</h2>
<p class="second-stxt">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.<br>
pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
<div class="profile">
<div>
<h2 class="profile-txt">Capture every moments and share it to all your friends</h2>
<p class="profile-para">
Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet.
</p>
</div>
<div>
<img class="profile-img" src="img/app-profile-mockup.png">
</div>
</div>
<div class="profile">
<div>
<img class="profile-img1" src="img/app-chat-mockup.png">
</div>
<div>
<h2 class="profile-txt">Capture every moments and share it to all your friends</h2>
<p class="profile-para">
Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet.
</p>
</div>
</div>
</div>
<!-- store -->
<div id="store">
<div class="store1">
<h2 class="store-txt">Ready to join our App for your advance social experience?</h2>
<p class="store-para">Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet.</p>
</div>
<div class="store1">
<img src="img/playstore-btn.png">
<img src="img/appstore-btn.png">
</div>
</div>
<!-- blog -->
<div class="blog">
<h1 class="second-txt">Latest News</h1>
<p class="second-stxt">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<div class="post">
<div class="details">
<img class="blog-img" src="img/blog-1.jpg">
<h5 class="code">CODE</h5>
<h2 class="blog-title">Amazing Blog Title</h2>
<h6 class="blog-timing">23 Jan 2022 / 56 Comments</h6>
<p class="blog-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h6 class="blog-author">By John Doe</h6>
</div>
<div class="details">
<img class="blog-img" src="img/blog-2.jpg">
<h5 class="code">CODE</h5>
<h2 class="blog-title">Amazing Blog Title</h2>
<h6 class="blog-timing">23 Jan 2022 / 56 Comments</h6>
<p class="blog-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h6 class="blog-author">By John Doe</h6>
</div>
<div class="details">
<img class="blog-img" src="img/blog-3.jpg">
<h5 class="code">CODE</h5>
<h2 class="blog-title">Amazing Blog Title</h2>
<h6 class="blog-timing">23 Jan 2022 / 56 Comments</h6>
<p class="blog-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h6 class="blog-author">By John Doe</h6>
</div>
</div>
</div>
<!-- gallery -->
<div id="gallery">
<h1 class="second-txt">My Projects</h1>
<p class="second-stxt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<div class="gallery-list">
<img class="g-img1" src="img/photo-1.jpg">
<img class="g-img1" src="img/photo-2.jpg">
<img class="g-img1" src="img/photo-3.jpg">
<img class="g-img2" src="img/photo-4.jpg">
<img class="g-img2" src="img/photo-5.jpg">
<img class="g-img2" src="img/photo-6.jpg">
</div>
</div>
<!-- company -->
<div id="company">
<h1 class="second-txt">Who love to work with us</h1>
<div>
<img class="client-1" src="img/client-1.png">
<img class="client-1" src="img/client-2.png">
<img class="client-1" src="img/client-3.png">
<img class="client-1" src="img/client-4.png">
<img class="client-1" src="img/client-5.png">
<img class="client-1" src="img/client-6.png">
</div>
</div>
<hr>
<div id="footer">
<h4 class="second-stxt">© 2022 Portfolio. All Right Reserved. Design by Coding-Stuff</h4>
<div>
<a href=""><img src="https://img.icons8.com/ios/25/000000/instagram-new--v1.png"></a>
<a href=""><img src="https://img.icons8.com/ios/25/000000/youtube-new--v1.png"></a>
<a href=""><img src="https://img.icons8.com/ios/25/000000/domain-new--v1.png"></a>
</div>
</div>
</div>
</body>
</html>
Click Here To Copy The CSS File
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url(img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 1.6rem;
}
body:after{
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
opacity: .8;
z-index: -1;
background: #f12711;
background: linear-gradient(to right, #f5af19, #f12711);
}
#middle-page{
width: auto;
height: auto;
background-color: #fff;
margin: 4% 11%;
border-radius: 5px;
box-shadow: 0 15px 30px 0 rgb(0 0 0 / 11%), 0 5px 15px 0 rgb(0 0 0 / 8%);
}
#header{
display: flex;
justify-content: space-between;
font-family: 'Lato', sans-serif;
padding: .5rem 1.5rem;
flex-wrap: wrap;
}
.nav-list{
display: flex;
list-style: none;
vertical-align: middle;
}
#nav2{
align-self: center;
font-weight: 100;
font-size: 1.1rem;
padding: .5rem;
}
.list1{
padding: 0 .5rem;
}
#main{
background-image: url(img/hero-2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 75vh;
position: relative;
}
.main-txt{
font-size: 4rem;
font-weight: 100;
line-height: 2;
text-align: center;
padding-top: 18%;
}
.main-stxt{
text-align: center;
font-size: 1rem;
font-weight: 100;
}
#second{
padding: 8%;
}
.second-txt{
text-align: center;
font-size: 2rem;
font-weight: 100;
line-height: 1.5;
}
.second-stxt{
text-align: center;
font-size: 1rem;
font-weight: 100;
line-height: 1.5;
padding-top: 2%;
}
#features{
display: flex;
justify-content: space-between;
padding: 2% 4%;
width: 100%;
flex-wrap: wrap;
}
.features-box{
padding: 0 1%;
width: 33%;
}
.features-img{
width: 80%;
padding-left: 20%;
}
.features-topic{
font-weight: 400;
text-align: center;
font-size: 1.4rem;
line-height: 2.5;
}
.features-para{
font-size: 1.2rem;
font-weight: 100;
text-align: center;
}
.features-view{
text-align: center;
font-size: 1.3rem;
line-height: 2.5;
color: #f12711;
}
#transprant{
width: auto;
height: auto;
margin: 4% 11%;
display: flex;
justify-content: space-around;
padding: 5%;
color: #fff;
flex-wrap: wrap;
text-align: center;
}
.third-setion{
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
padding: 4%;
}
.third-sub{
width: 33%;
padding: 2%;
}
.extra{
padding-top: 5%;
}
.top-profile{
padding-top: 5%;
}
.profile{
display: flex;
justify-content:center;
padding: 7% 20% 0 20%;
}
.profile-txt{
font-size: 2rem;
font-weight: 200;
}
.profile-para{
font-size: 1.2rem;
font-weight: 100;
padding: 8% 0 0 0;
}
.profile-img{
padding: 0 10%
}
.profile-img1{
height: 90%;
}
#store{
display: flex;
justify-content: space-around;
padding: 1% 20% 5% 20%;
}
.store-txt{
font-size: 1.5rem;
font-weight: 100;
}
.store-para{
font-weight: 100;
font-size: 1.1rem;
padding: 5% 0 0 0;
}
.store1{
padding: 0 7% 7% 7%;
}
.blog{
background-color: lightgray;
padding: 5% 2%;
}
.post{
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
padding-top: 5%;
}
.details{
padding: 1% 2%;
width: 33%;
}
.blog-img{
height: 250px;
width: 100%
}
.code{
font-weight: 100;
font-size: 1.1rem;
line-height: 2;
color: darkred;
}
.blog-title{
font-size: 1.7rem;
line-height: 2;
}
.blog-para{
font-weight: 100;
font-size: 1.2rem;
padding-top: 5%;
}
.blog-author{
line-height: 2;
color: darkred;
}
#gallery{
padding: 5%;
}
.gallery-list{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 5% 0;
}
.g-img1{
height: 450px;
width: 33%;
padding: 1%;
}
.g-img2{
height: 250px;
width: 33%;
padding: 1%;
}
#company{
padding: 5%;
}
.client-1{
padding: 2%;
width: 150px;
}
#footer{
padding: 2%;
display: flex;
justify-content: space-between;
}
Related Articles
-
Learn HTML It's Essential.
-
Basics Of CSS.
Adhuc quaerendum est ne, vis ut harum tantas noluisse, id suas iisque mei. Nec te inani ponderum vulputate, facilisi expetenda has et. Iudico dictas scriptorem an vim, ei alia mentitum est, ne has voluptua praesent.
Sumo euismod dissentiunt ne sit, ad eos iudico qualisque adversarium, tota falli et mei. Esse euismod urbanitas ut sed, et duo scaevola pericula splendide. Primis veritus contentiones nec ad, nec et tantas semper delicatissimi.
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.