Personal portfolio hero banner fully responsive

Personal portfolio hero banner fully responsive snipp made with bootstrap framework, you can use this as your website hero header on top, simple div structure easy to implement.



<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<title>Personal portfolio hero header</title>
<style>
body {
    font-family: 'Roboto', sans-serif;
}
a {
    transition: all 0.3s ease;
}
.weight-500 {
    font-weight: 500;
}
.navbar-nav {
    font-weight: 600;
}
.btn {
    position: relative;
    padding: 13.5px 36px;
    font-weight: 700;
    border-radius: 30px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.banner-image{
background-image:url(img/portrait-photo.png);
background-repeat:no-repeat;
background-position:right;
background-size:contain;
}
.social-icons a{
margin-right:15px;
color:#999;    
}
.social-icons a:hover{
color:#333;    
}
@media(max-width:768px){    
    .banner-image{
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(img/portrait-photo.png);
    background-repeat:no-repeat;
background-position:right;
background-size:contain;    
    }  
}
</style>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand font-weight-bold" href="#">PortfolioSite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto mr-md-5">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li>
      <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
    </ul>
    <a href="" class="btn btn-light">Hire Me</a> </div>
</nav>
<div class="container pt-5">
<div class="banner-image">
  <div class="container py-5">
    <div class="row py-5">
      <div class="col-lg-6 col-md-12 mr-auto pt-5">
        <h1 class="display-4 pb-4 weight-500 ">Hi, Hi, I'm John Deo.</h1>
        <p class="text-muted lead">A freelance Web developer from London. I convert custom  web designs to bootstrap templates. </p>
        <p class="text-muted lead pb-5">I make YouTube videos and write Blog. </p>
        <a href="#" class="btn btn-primary btn-lg"> I'M AVAILABLE </a> 
        <div class="social-icons mt-5">
        <a href="#"><i class="lni lni-facebook-filled"></i></a>
        <a href="#"><i class="lni lni-twitter-filled"></i></a>
        <a href="#"><i class="lni lni-instagram-filled"></i></a>
        <a href="#"><i class="lni lni-github-original"></i></a>
        </div>
        </div>
    </div>
  </div>
</div>
</div>
</div>
<!-- Optional JavaScript --> 
<!-- jQuery first, then Popper.js, then Bootstrap JS --> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script> 
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>

</body>
</html>
Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top