HTML Portfolio Website Template 2024

Open In Editor Publish Your Code Need a Website?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Portfolio Website</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <header id="masthead" class="site-header" data-anchor-target=".hero"
        data-top="background: rgba(255,255,255,0); padding: 30px 0; box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0);"
        data-top-bottom="background: rgba(255,255,255,1); padding: 10px 0; box-shadow: 0px 0px 20px 6px rgba(0, 0, 0, 0.2);">
        <nav id="primary-navigation" class="site-navigation">
            <div class="container">
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle collapsed" data-target="#portfolio-perfect-collapse"
                        aria-expanded="false">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

<a href="#hero" class="site-logo"><img src="" alt="logo" /></a>
                </div>
                <div class="main-menu" id="portfolio-perfect-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="page-scroll"><a href="#hero">Home</a></li>
                        <li class="page-scroll"><a href="#about">About</a></li>
                        <li class="page-scroll"><a href="#service">Service</a></li>
                        <li class="page-scroll"><a href="#portfolio">Portfolio</a></li>
                        <li class="page-scroll"><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div id="hero" class="hero">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>Your Name</h1>
                    <div class="page-scroll">
                        <p class="job-title">Full Stack Developer</p>
                        <a href="#contact" class="btn btn-fill">Reach Out</a>
                        <div class="clearfix visible-xxs"></div>
                        <a href="#portfolio" class="btn btn-border">Explore more</a>
                    </div>
                </div>
                <div class="col-md-6 text-right">
                    <img src="" alt="Your Picture" />
                </div>
            </div>
        </div>
    </div>
    <main id="main" class="site-main">
        <section id="about" class="site-section section-about text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <h2>About</h2>
                        <p style="margin-top: 30px;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Maecenas vel magna vel felis fermentum feugiat. Nunc facilisis,
                            tellus ut mollis sagittis, felis leo ultrices ipsum, vel pretium
                            est elit vel nisl. Maecenas magna tellus, posuere sed nisi et,
                            vestibulum sodales tortor. Donec sed sem accumsan, semper nulla
                            laoreet, dictum quam.
                        </p>
                        <a href=""
                            class="btn btn-fill" target="_blank" download>Download my cv</a>
                    </div>
                </div>
            </div>
        </section>
        <section class="site-section section-skills">
            <div class="container">
                <div class="text-center" style="margin-bottom: 40px;">
                    <h3>My Skills</h3>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="skill">
                            <h4>Html</h4>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" data-transitiongoal="90"></div>
                            </div>
                        </div>
                        <div class="skill">
                            <h4>CSS</h4>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="skill">
                            <h4>Javascript</h4>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" data-transitiongoal="80"></div>
                            </div>
                        </div>
                        <div class="skill">
                            <h4>Ruby</h4>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" data-transitiongoal="80"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="skill">
                            <h4>Php</h4>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" data-transitiongoal="90"></div>
                            </div>
                        </div>
                        <div class="skill">
                            <h4>Java</h4>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" data-transitiongoal="45"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="service" class="site-section section-services overlay text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12" style="margin-bottom: 40px;">
                        <h3>Services</h3>
                    </div>
                    <div class="col-sm-4">
                        <div class="service">
                            <img src="" alt="img" />
                            <h4>Front-end</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Maecenas vel magna vel felis fermentum feugiat. Nunc facilisis,
                                tellus ut mollis sagittis, felis leo ultrices ipsum, vel pretium
                                est elit vel nisl.
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="service">
                            <img src="" alt="img" />
                            <h4>Back-end</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Maecenas vel magna vel felis fermentum feugiat. Nunc facilisis,
                            tellus ut mollis sagittis, felis leo ultrices ipsum, vel pretium
                            est elit vel nisl.
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="service">
                            <img src="" alt="img" />
                            <h4>Design</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Maecenas vel magna vel felis fermentum feugiat. Nunc facilisis,
                                tellus ut mollis sagittis, felis leo ultrices ipsum, vel pretium
                                est elit vel nisl.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="portfolio" class="site-section section-portfolio">
            <div class="container">
                <div class="text-center" style="margin-bottom: 30px;">
                    <h3>My recent Works</h3>
                </div>
                <div class="row">
                    <div class="col-md-4 col-xs-6">
                        <div class="portfolio-item">
                            <img src="/assets/img/placeholder.webp" class="img-res" alt="" />
                            <div class="portfolio-item-info">
                                <h4>Project 1</h4>
                                <a href="#"><span class="glyphicon glyphicon-link"></span></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6">
                        <div class="portfolio-item">
                            <img src="/assets/img/placeholder.webp" class="img-res" alt="" />
                            <div class="portfolio-item-info">
                                <h4>Project 2</h4>
                                <a href="#"><span class="glyphicon glyphicon-link"></span></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6">
                        <div class="portfolio-item">
                            <img src="/assets/img/placeholder.webp" class="img-res" alt="" />
                            <div class="portfolio-item-info">
                                <h4>Project 3</h4>
                                <a href="#"><span class="glyphicon glyphicon-link"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="site-section section-counters text-center">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-xs-12">
                        <p class="counter start" data-to="5" data-speed="2000">0</p>
                        <h4>Years Experience</h4>
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        <p class="counter start" data-to="45" data-speed="2000">0</p>
                        <h4>Projects Delivered</h4>
                    </div>
                </div>
            </div>
        </section>
        <section id="contact" class="site-section section-form text-center">
            <div class="container">
                <h3>Contact</h3>
                <form style="margin-top: 40px;">
                    <div class="row">
                        <div class="col-sm-6">
                            <input type="text" name="name" class="form-control mt-x-0" placeholder="Name" required />
                        </div>
                        <div class="col-sm-6">
                            <input type="email" name="email" class="form-control" placeholder="Email" required />
                        </div>
                        <div class="col-sm-12">
                            <input name="message" id="mesaage" class="form-control" placeholder="Message" style="height: 200px;"
                                required />
                        </div>
                    </div>
                    <button href="#" class="btn btn-border" type="submit">
                        Send<span class="glyphicon glyphicon-send"></span>
                    </button>
                </form>
            </div>
        </section>
    </main>
    <footer style="background-color: black;color: white; text-align: center;height: 40px;display: flex;align-items: center;justify-content: center;">
        All Rights Reserverd. 2024
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/skrollr@0.6.26/dist/skrollr.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.9.0/bootstrap-progressbar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.1.0/jquery.countTo.min.js"
        integrity="sha512-ZbM86dAmjIe3nPA2k8j3G//NO/zBYNnZ8wi+yUKh8VH24CHr0aDhDHoEM4IvGl+Sz6ga7ONnGBDxS+BTVJ+K2g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

CSS

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?37927580');
  src: url('../fonts/fontello.eot?37927580#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff2?37927580') format('woff2'),
       url('../fonts/fontello.woff?37927580') format('woff'),
       url('../fonts/fontello.ttf?37927580') format('truetype'),
       url('../fonts/fontello.svg?37927580#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
    transition: color 0.25s ease-in-out;
    -moz-transition: color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out;
    -o-transition: color 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out;
}

a:focus,
a:hover {
    outline: 0 none;
    text-decoration: none;
}

h4 {
    font-size: 30px;
}
.btn {
    min-width: 145px;
    line-height: 50px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0;
    transition: box-shadow 0.25s ease-in-out;
    -moz-transition: box-shadow 0.25s ease-in-out;
    -webkit-transition: box-shadow 0.25s ease-in-out;
    -o-transition: box-shadow 0.25s ease-in-out;
    -ms-transition: box-shadow 0.25s ease-in-out;
}

.btn-fill {
    color: #fff;
    background-color: #212121;
}

.btn-border {
    background-color: transparent;
    color: #212121;
    border: 1px solid #212121; 
}

.btn-fill:hover,
.btn-fill:focus {
    color: #fff;
}

.btn:hover,
.btn:focus {
    box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.15);
}

/* Input fields */
.form-control {
    padding-left: 10px;
    border: 0;
    border-bottom: 1px solid #212121;
    border-radius: 0;
    background-color: transparent; 
    box-shadow: none;
    outline: 0 none transparent;
    -webkit-appearance:none;
 }
.form-control:focus {
    box-shadow: none;
    border-bottom-color: #e1e1e1;
}

::-moz-placeholder,
::-webkit-input-placeholder {
    font-size: 16px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #212121;
}

.img-res {
    display: block;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.visible-xxs {
    display: none;
}

.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: transparent;
    z-index: 5;
}

.site-logo img {
    padding-bottom: 2px;
}

.navbar-nav > li > a {
    padding: 5px 0;
    font-weight: 600;
    color: #212121;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    transition: border-color 0.25s ease-in-out;
    -moz-transition: border-color 0.25s ease-in-out;
    -webkit-transition: border-color 0.25s ease-in-out;
    -o-transition: border-color 0.25s ease-in-out;
    -ms-transition: border-color 0.25s ease-in-out;
}

.navbar-nav.navbar-right {
    margin-right: 0;
}

.navbar-nav > li + li > a {
    margin-left: 40px;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.nav > li > a:hover,
.nav > li.active > a {
    background-color: transparent;
    border-bottom: 2px solid #212121;
}

.nav > li > a:focus {
    background-color: transparent;
}
.hero { 
    background: url(/assets/img/placeholder.webp) no-repeat center / cover; 
    height: 100%;
    width: 100%;
    min-height: 700px;
}

.hero .container {
    position: relative;
    height: 100%;
}

.hero .col-md-6:first-child {
    position: absolute;
    top: 35%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 2;
}

.hero .col-md-6:last-child {
    position: absolute;
    right: 0;
    bottom: 0;
}

.hero h1 {
    font-size: 46px;
    font-weight: 700;
    margin: 0 0 15px;
    text-transform: uppercase;
}

.job-title {
    font-size: 22px;
    margin-bottom: 30px;
    line-height: 1;
}

.hero img {
    height: 600px;
}

.site-main {
    position: relative;
    margin-bottom: 100px;
    background-color: #fff;
    z-index: 1;
}
/* site-section */
.site-section {
   padding-top: 120px;
}

.site-section h2,
.site-section h3 {
    font-size: 36px;
    margin: 0;
    text-transform: uppercase;
}

.img-lines {
    margin: 15px 0 40px;
}

.site-section p {
    margin-bottom: 35px;
}

/* Section: Skills */
.section-skills {
    padding-bottom: 120px;
}

.skill + .skill {
    margin-top: 50px;
}

.skill h4 {
    font-size: 24px;
    text-transform: uppercase;
    margin: 0 0 15px;
}

.progress {
    height: 15px;
    margin-bottom: 0;
    border-radius: 0;
    background-color: #dfdfdf;
    box-shadow: none;
}

.progress-bar {
    background-color: #212121;  
}
.section-services {
    position: relative;
    padding-top: 220px;
}

.section-services:before {
    content: '';
    background: url(/assets/img/placeholder.webp) no-repeat fixed center / cover;
    width: 100%;
    height: 400px; 
    position: absolute;
    left: 0;
    top: 0;
}

.overlay:after {
    content: '';
    width: 100%;
    height: 400px; 
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    top: 0;
    left: 0;
    z-index: 0;
}

.section-services .container {
    padding: 120px 100px;
    position: relative;
    background-color: #fff;
    box-shadow: 0px 0px 40px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.service h4 {
    margin: 25px 0;
    font-size: 24px;
    font-weight: 700;
}

.service p {
    color: #000;
    margin-bottom: 0;
}

.section-portfolio {
    padding-bottom: 120px;
}

.portfolio-item {
    height: 280px;
    margin-bottom: 30px;
    position: relative;
}

.section-portfolio .col-md-4:nth-last-child(-n+3) .portfolio-item {
    margin-bottom: 0;
}

.portfolio-item:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: background-color 0.25s ease-in-out;
    -moz-transition: background-color 0.25s ease-in-out;
    -webkit-transition: background-color 0.25s ease-in-out;
    -o-transition: background-color 0.25s ease-in-out;
    -ms-transition: background-color 0.25s ease-in-out;
}

.portfolio-item:hover:before{
    background-color: rgba(33,33,33,0.6);
}

.portfolio-item-info {
    position: absolute;
    top: 150px;
    left: 0px;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.25s ease-in-out, left 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out, left 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out, left 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out, left 0.25s ease-in-out;
    -ms-transition: opacity 0.25s ease-in-out, left 0.25s ease-in-out;
}

.portfolio-item:hover .portfolio-item-info {
    left: 50px;
    opacity: 1;
}

.portfolio-item-info h4 {
    margin: 0 0 20px;
    font-weight: 700;
    color: #fff;
}

.portfolio-item-info a {
    padding: 6px 7px 4px;
    font-size: 12px;
    border: 1px solid #fff;
    border-radius: 50px;
    color: #fff;
    transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -moz-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -o-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
    -ms-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
}

.portfolio-item-info a:hover {
    color: #212121;
    background-color: #fff;
}

.section-portfolio .btn {
    margin-top: 10px;
}
.modal {
    z-index: 9999;
}

.modal-content {
    border-radius: 0;
    box-shadow: 0px 0px 40px 8px rgba(0, 0, 0, 0.2);
}

.modal-header {
    position: relative;
    padding: 0;
    height: 500px;
}

.modal-header .close {
    position: absolute;
    right: 0;
    padding: 10px 11px;
    margin-top: 0;
    background-color: #fff;
    font-size: 16px;
    color: #212121;
    border-left: 1px solid #212121;
    border-bottom: 1px solid #212121;
    opacity: 1;
    transition: box-shadow 0.25s ease-in-out;
    -moz-transition: box-shadow 0.25s ease-in-out;
    -webkit-transition: box-shadow 0.25s ease-in-out;
    -o-transition: box-shadow 0.25s ease-in-out;
    -ms-transition: box-shadow 0.25s ease-in-out;
}

.modal-header .close:hover {
    box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.2);
}

.modal-body h4 {
    font-weight: 700;
}

.modal-footer {
    text-align: center;
}
.section-counters {
    background: url(/assets/img/placeholder.webp) no-repeat fixed center / cover;
    width: 100%;
    padding: 100px 0;
    position: relative;
}

.section-counters:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.section-counters h4 {
    color: #fff;
    margin: 25px 0 0;
}

.site-section p.counter {
    font-size: 100px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    line-height: 0.8;
}

.section-form {
    padding-bottom: 120px;
}

.section-form .btn {
    margin-top: 40px;
}
.icon {
    line-height: 40px;
    padding: 9px 11px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
}

.icon + .icon {
    margin-left: 5px;
}

.icon i:before {
    margin:0;
}

.icon:hover {
    background-color: #fff;
}

@media only screen and (max-width : 1199px) {

.navbar-nav > li + li > a {
	    margin-left: 30px;
	}

.hero {
		min-height: 600px;
	}

.hero img {
		height: 500px;
	}

.modal-header {
		height: 400px;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {
	h4 {
		font-size: 24px;
	}

/* Buttons */ 
	.btn {
	    min-width: 120px;
	    line-height: 40px;
	    padding: 0 25px;
	    font-size: 14px;
	} 
	/* Navigation */
	.navbar-nav > li > a {
		font-size: 14px;
	}

.navbar-nav > li + li > a {
	    margin-left: 20px;
	}
	.hero h1 {
		font-size: 38px
	}

.job-title {
		font-size: 20px;
	}

.hero img {
		height: 420px;
	}
	.site-section {
		padding-top: 90px;
	}

.section-skills,
	.section-portfolio,
	.section-form {
	    padding-bottom: 90px;
	}

.site-section h2,
	.site-section h3 {
		font-size: 32px
	}

.section-skills .col-md-4 + .col-md-4,
	.skill + .skill {
		margin-top: 20px;
	}

.skill h4 {
		font-size: 22px;
	}

.section-services{
		padding-top: 200px;
	}

.section-services .container {
		padding: 70px 90px;
	}
	
	.service h4 {
		font-size: 22px; 
	}

.section-portfolio .col-md-4:nth-last-child(-n+3) .portfolio-item {
	    margin-bottom: 30px;
	}

.section-portfolio .col-md-4:nth-last-child(-n+2) .portfolio-item {
	    margin-bottom: 0;
	}

.section-counters {
		padding: 70px 0;
	}

.site-section p.counter {
		font-size: 80px;
	}

.modal-header {
		height: 350px;
	}
}

@media only screen and (max-width : 767px) {

h4 {
		font-size: 20px;
	}

/* Buttons */ 
	.btn {
	    min-width: 100px;
	    line-height: 30px;
	    padding: 0 20px;
	}

.form-control {
	 	margin-top: 25px;
	}

.mt-x-0 {
	    margin-top: 0;
	}

.site-logo {
		padding-left: 15px;
	}

.site-logo img {
		height: 22px;
	}

.navbar-toggle {
	    margin: 0 15px 0 0;
	    padding: 5px 0;
	   	border: 0;
	}

.navbar-toggle .icon-bar {
		height: 1px;
		width: 30px;
	    background-color: #212121;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	    -o-transition: all 0.3s;
	    transition: all 0.3s;
	}

.navbar-toggle .icon-bar + .icon-bar {
		margin-top: 6px; 
	}

.navbar-toggle.act .icon-bar:first-child, 
	.navbar-toggle.act .icon-bar:last-child  { 
	    position: absolute;
	    top: 10px;
	    height: 2px;
	    background-color: #fff;
	}

.navbar-toggle.act .icon-bar:first-child {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

.navbar-toggle.act .icon-bar:last-child  {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

.navbar-toggle.act .icon-bar:nth-child(2) {
		opacity: 0;
	}

.navbar-toggle.act .icon-bar + .icon-bar  {
	    margin-top: 0px;
	}

.navbar-nav > li > a,
	.navbar-nav > li + li > a {
		display: inline-block;
		margin: 0;
		color: #fff;
	}

.navbar-nav > li > a:hover,
	.navbar-nav > li.active > a,
	.nav > li > a:hover,
	.nav > li.active > a {
	    border-bottom: 2px solid #fff;
	}

.navbar-toggle.act {
		z-index: 9999;
		height: 25px;
	}

.main-menu {
		background-color: rgba(33,33,33,0.9);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		height: 100%;
		width: 100%;
		display: table;
		text-align: center;
		opacity: 0;
		-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
		transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
		-webkit-transform: scale(0);
		transform: scale(0);
	}

.main-menu.act {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

.main-menu.act ul li {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

.main-menu ul {
		display: table-cell;
		vertical-align: middle;
	}

.main-menu li {
		padding: 8px 0;
		-webkit-transition: all 400ms 510ms;
		transition: all 400ms 510ms;
		opacity: 0;
	}

.main-menu li:nth-child(odd) {
		-webkit-transform: translateX(30%);
		transform: translateX(30%);
	}

.main-menu li:nth-child(even) {
		-webkit-transform: translateX(-30%);
		transform: translateX(-30%);
	}

.hero .col-md-6:first-child {
		top: 30%;
	}

.hero h1 {
		font-size: 32px
		margin-bottom: 10px;
	}

.job-title {
		font-size: 18px;
		margin-bottom: 20px;
	}

.hero img {
		height: 360px
	}
	.site-main {
		margin-bottom: 140px;
	}

.site-section {
	   padding-top: 60px;
	}

.section-skills,
	.section-portfolio,
	.section-form {
	    padding-bottom: 60px;
	}

.site-section h2,
	.site-section h3 {
	    font-size: 28px;
	}

.img-lines {
	    margin: 10px 0 30px;
	}

.site-section p {
	    margin-bottom: 25px;
	}
	.skill h4 {
	    text-transform: uppercase;
	    margin-bottom: 10px;
	}
	.section-services {
		padding-top: 180px;
	}

.service h4 {
		margin: 10px 0;
	}

.section-portfolio .col-xs-6:nth-child(odd) {
		padding-right: 7.5px;
	}

.section-portfolio .col-xs-6:nth-child(even) {
		padding-left: 7.5px;
	}

.portfolio-item,
	.section-portfolio .col-md-4:nth-last-child(-n+3) .portfolio-item {
		margin-bottom: 15px; 
	}

.section-portfolio .col-md-4:nth-last-child(-n+2) .portfolio-item {
		margin-bottom: 0px;
	}

.section-services .container {
		width: 90%;
		padding: 40px 20px;
	}

.section-counters .col-xs-12 + .col-xs-12 {
		margin-top: 25px;
	}

.section-form .btn {
		margin-top: 25px;
	}

.modal-header {
		height: 250px;
	}
}

@media only screen and (max-width : 479px) {
	.visible-xxs {
		display: block;
	}

.hero .visible-xxs + .btn {
		margin-top: 10px;
	}

.site-main {
		margin-bottom: 180px;
	}

.section-portfolio .col-xs-6 {
		width: 100%;
		padding: 0;
	}

.section-portfolio .col-xs-6:nth-child(odd) {
		padding-right: 0px;
	}

.section-portfolio .col-xs-6:nth-child(even) {
		padding-left: 0px;
	}

.portfolio-item,
	.section-portfolio .col-md-4:nth-last-child(-n+3) .portfolio-item {
		margin-bottom: 0px; 
	}

.section-portfolio .btn {
		margin-top: 25px;
	}

}

JS

$(function() {

$('.navbar-toggle').click(function() {
        $(this).toggleClass('act');
            if($(this).hasClass('act')) {
                $('.main-menu').addClass('act');
            }
            else {
                $('.main-menu').removeClass('act');
            }
    });
    $(document).on('click', '.page-scroll a', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000, 'easeInOutExpo');
        event.preventDefault();
    });
    $('body').scrollspy({
        target: '.site-header',
        offset: 10
    });
    var $section = $('.section-skills');
    function loadDaBars() {
	    $('.progress .progress-bar').progressbar({
	        transition_delay: 500
	    });
    }

$(document).bind('scroll', function(ev) {
        var scrollOffset = $(document).scrollTop();
        var containerOffset = $section.offset().top - window.innerHeight;
        if (scrollOffset > containerOffset) {
            loadDaBars();
            $(document).unbind('scroll');
        }
    });
    if ($(".section-counters .start").length>0) {
        $(".section-counters .start").each(function() {
            var stat_item = $(this),
            offset = stat_item.offset().top;
            $(window).scroll(function() {
                if($(window).scrollTop() > (offset - 1000) && !(stat_item.hasClass('counting'))) {
                    stat_item.addClass('counting');
                    stat_item.countTo();
                }
            });
        });
    };
	$('#infinity').data('countToOptions', {
		onComplete: function (value) {
		  count.call(this, {
		    from: value,
		    to: value + 1
		  });
		}
	});

$('#infinity').each(count);

HTML Portfolio Website Template 2024

Recommended

HTML Dropdown Menu Code Snippet

Simplest Login Form Template

Glitch Effect Homepage: HTML, CSS, Tailwind

HTML

CSS

JS

Recommended

HTML Dropdown Menu Code Snippet

Simplest Login Form Template

Glitch Effect Homepage: HTML, CSS, Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS