header ads

Make Your Own Portfolio Using HTML and CSS

Hanif Miah July 03, 2019

In this post, you will learn how to make a portfolio using HTML and CSS. 
create portfolio using html & css
CSS Design




index.html

 <!DOCTYPE html>
<html>
<head>
<title>Hanif Miah | Designer</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<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>

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

 </body>
</html>






style.css

 @import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,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;
}
    
 .hm{
  background: yellow;
  color: white;
  padding: 10px;
 }   
}


Tags:
Hanif Miah

Posted by: Hanif Miah

Post a Comment

2 Comments