In this post, you will learn how to make a portfolio using HTML and 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;
}
}
0 Comments