header ads

Make Your Own Portfolio Using HTML and CSS

In this post, you will learn how to make a portfolio using HTML and CSS. 

create portfolio using html & css
CSS Design


<!DOCTYPE html>
<title>Hanif Miah | Designer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<h1>Hanif Miah</h1>
<ul id="hanif">
            <li><a class="homered" href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">CONTACT</a></li>

<div class="fwimage1">
<h1><font color="White">Brainware University</font></h1>
<div id="hm">
<footer><center>Copy@copywrite CodeTextPro-2019 Pvt.Ltd</center></footer>



@import url(',700');
@import url(',700');

body {
margin: 0;
header {
background: black;
color: white;
padding: 8px 0px 6px 40px;
height: 45px;
border-bottom: 5px solid red;
header h1 {
display: inline;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 32px;
float: left;
margin-top: 0px;
margin-right: 10px;


nav ul {
display: inline;
padding: 0px;
float: left;
nav ul li {
display: inline-block;
list-style-type: none;
color: white;
float: left;
margin-left: 12px;
nav ul li a {
color: white;
text-decoration: none;
padding: 30px 10px 16px 10px;
-moz-transition: 1s;
-webkit-transition: 1s;
-o-transition: 1s;
-ms-transition: 1s;
transition: 1s;
#hanif {
font-family: 'Montserrat', sans-serif;
.homered {
background: red;

nav ul li a:hover {
background: blue;

.fwimage1 {
background: url(images/m.jpg) ;
background-size: cover;
width: 100%;
min-height: 550px;
margin-top: -67px;

.fwimage1 > h1 {
font-size: 100px;
animation: 3s anim forwards;

.fwimage1 > h1+a {
text-decoration: none;
color: #fff;
background: cyan;
padding: 5px 10px;

@keyframes anim {
0% {
margin-left: -500px;
50% {
margin-left: 500px;
  background: yellow;
  color: white;
  padding: 10px;

Post a Comment