Make Your Own Portfolio Using HTML and CSS - CodeTextPro | Web Tutorial | Technology

CodeTextPro.com Provides - Web design, Technology gyan, Digital marketing, Online earnings, Seo, Adsense, Technology news, Motivation and inspiration, Latest Technology Affairs, Gadgets, Blogging

Wednesday, July 3, 2019

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







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;
 }   
}


No comments:

Post a Comment