What is causing this glitch in scrolling in chrome? (Details in description)
0
How to reproduce the problem:
Scroll to the end of the page, around the contact section (id="contact"). The page doesn't scroll and glitch can be seen.
Works fine everywhere except Chrome(Mobile View). Works fine on desktop.
Video here
Here's the style.css and HTML
@import "http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext";
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999
}
.preloader .item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -130px
}
html,
body {
font-family: product sans, lato, sans-serif;
font-size: 20px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #000;
font-weight: 400;
height: 100%
}
a {
text-decoration: none;
outline: none;
font-size: 14px
}
h1 {
font-size: 34px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2
}
p {
font-size: 14px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px
}
h1 span {
color: #2fa68e
}
::selection {
background: #2b388f;
color: #fff
}
::-moz-selection {
background: #2b388f;
color: #fff
}
.container {
position: absolute;
width: 100%;
height: 100%
}
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url(../img/background/start-page.jpg) silver bottom center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.start-page hr {
color: #fff;
margin-top: 30px;
background-color: #fff;
height: 1px;
width: 106px;
border: 0
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: 520px;
margin-top: 20px
}
.start-page .content .text .logo {
width: 197px;
height: 123px;
margin: 0 auto 50px
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #fff;
border-radius: 100px;
text-transform: uppercase;
color: #fff;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.start-page .content .text .read-more:hover {
color: #fff;
background: #2b388f;
border: 1px solid #2b388f
}
.start-page .content .arrow-down {
position: absolute;
bottom: 110px;
left: 50%;
margin-left: -10px;
width: 21px;
height: 29px;
background: url(../img/arrow-down.png) no-repeat center center;
display: block;
-webkit-animation: bounce-fade 1.2s infinite;
-moz-animation: bounce-fade 1.2s infinite;
-o-animation: bounce-fade 1.2s infinite;
animation: bounce-fade 1.2s infinite
}
@-webkit-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-moz-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-o-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
.menu-media {
position: relative;
width: 100%;
height: 90px;
background: #2b388f;
z-index: 1000;
display: none
}
.menu-media .menu-content {
width: 280px;
position: relative;
margin: 0 auto
}
.menu-media .menu-content .logo {
color: #fff;
font-weight: 700;
font-size: 24px;
width: 200px;
line-height: 90px;
float: left;
list-style: none
}
.menu-media .menu-content .icon {
width: 41px;
height: 23px;
float: right;
line-height: 100px
}
.menu-click {
display: none
}
.menu-click li {
position: relative;
width: 100%;
height: 70px;
color: #333;
font-size: 18px;
text-align: center;
line-height: 70px;
z-index: 1000;
border-bottom: 1px solid #f2f2f2;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-click li:hover {
color: #2b388f
}
.menu {
position: relative;
width: 100%;
height: 60px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
z-index: 1000
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto
}
.menu-content .logo {
color: #333;
font-weight: 700;
font-size: 24px;
width: 300px;
line-height: 60px;
float: left;
list-style: none
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none
}
.menu-content li {
display: inline-block;
position: relative
}
.menu-content li a {
color: #333;
font-size: 18px;
display: block;
padding: 0 20px;
line-height: 60px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-content li.active a {
color: #2b388f
}
.menu-content li a:hover {
color: #2b388f
}
.about-us {
position: relative;
width: 100%;
background: #fff;
z-index: 10
}
.about-us .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden
}
.about-us h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.about-us hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.about-us p.title {
color: #a4a4a4;
margin: 40px auto;
width: auto;
line-height: 26px;
letter-spacing: 0;
font-size: 20px;
font-weight: 300;
text-align: center
}
.about-us h2 {
text-align: center;
margin-top: 50px;
font-size: 26px;
color: #000;
line-height: 1.2;
letter-spacing: 6px;
width: 100%;
position: relative;
font-weight: 400
}
.about-us p {
text-align: center;
font-size: 14px;
width: auto;
margin: 30px auto;
color: #a4a4a4;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300
}
.about-us .column-one {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-one .circle-one {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/codexel.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-one .circle-one:hover {
border: 2px solid #2b388f
}
.about-us .column-two {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-two .circle-two {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/media.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-two .circle-two:hover {
border: 2px solid #2b388f
}
.about-us .column-three {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-three .circle-three {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/health.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-three .circle-three:hover {
border: 2px solid #2b388f
}
.portfolio {
position: relative;
width: 100%;
background: #f3f3f3;
z-index: 10
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto
}
.portfolio .portfolio-margin .read-more {
width: 183px;
height: 47px;
position: relative;
margin: 50px auto 100px;
line-height: 47px;
border: 1px solid #333;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
color: #333;
cursor: pointer;
font-size: 14px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
letter-spacing: 1px
}
.portfolio .portfolio-margin .read-more:hover {
background: #2b388f;
color: #fff;
border: 1px solid #2b388f
}
.portfolio .portfolio-margin h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.portfolio .portfolio-margin hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.grid {
margin-top: 70px;
width: 100%;
position: relative;
margin-bottom: 70px;
overflow: hidden
}
.grid li {
width: 285px;
margin: 0 15px 15px 0;
float: left;
position: relative;
overflow: hidden
}
.grid img {
width: 285px;
float: left;
position: relative
}
.grid .text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.grid .text:hover {
opacity: 1
}
.grid .no-text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-ms-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in
}
.grid .no-text:hover {
opacity: 1
}
.grid p {
font-size: 18px;
text-align: center;
line-height: 26px;
margin-top: 40px;
font-weight: 700;
letter-spacing: 1px;
color: #fff
}
.grid p.description {
font-size: 12px;
width: 300px;
margin-top: 20px;
text-align: center;
line-height: 20px;
font-weight: 400;
color: #fff;
position: relative;
width: 100%
}
.clear {
clear: both
}
.partners {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background: url(../img/background/partners.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.partners .opacity {
position: absolute;
width: 100%;
height: 400px
}
.partners .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.partners h2 {
color: #fff;
letter-spacing: 1px;
font-size: 32px;
font-weight: 300;
text-align: center
}
.partners .logo {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center
}
.partners .logo img {
opacity: .5;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.partners .logo img:hover {
opacity: 1
}
.contact {
position: relative;
width: 100%;
background: #fff;
z-index: 10;
overflow: hidden;
margin-bottom: 300px
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px
}
.contact h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.contact hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.contact .content .form {
width: 455px;
overflow: hidden;
height: auto;
float: left
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px
}
.contact .content .contact-text {
width: 405px;
overflow: hidden;
height: auto;
font-weight: 300;
float: left;
padding-left: 40px;
color: #000;
font-size: 14px;
line-height: 26px
}
strong {
font-weight: 700
}
input {
width: 180px;
height: 40px;
background: #f8f7f7;
border-top: 1px solid #333;
border-bottom: 0;
border-left: 0;
border-right: 0;
color: #333;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
input:focus {
background: #f4f4f4
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #333;
border-bottom: 0;
line-height: 20px;
border-left: 0;
border-right: 0;
background: #f8f7f7;
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
textarea:focus {
background: #f4f4f4
}
input.submit {
width: 100px;
height: 34px;
float: right;
margin: 20px 10px 0 0;
border: 0;
font-weight: 700;
text-align: right;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #2b388f
}
.footer .logo {
position: relative;
width: 58px;
height: 58px;
margin: 0 auto;
padding-top: 50px
}
.footer .menu-footer {
width: 80%;
text-align: center;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
position: relative
}
.footer .menu-footer a {
line-height: 46px;
padding: 10px;
color: #a4a4a4;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.footer .menu-footer a:hover {
color: #2b388f
}
.footer .copyright {
width: 80%;
position: relative;
font-weight: 300;
margin: 0 auto;
padding: 30px 0 50px;
text-align: center;
font-size: 14px;
line-height: 36px;
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="preloader" id="preloader" style="display: none;">
<div class="item">
<img src="img/loading.gif">
</div>
</div>
<div class="container">
<section class="start-page parallax-background" id="home" style="background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<div class="text">
<div class="logo"><img style="width: 100%" src="img/logo.png"></div>
<h1>Lorem Ipsum</h1>
<hr>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<a href="#about-us">
<div class="read-more">Read more</div>
</a>
</div>
<div class="arrow-down"></div>
</div>
</section>
<section class="menu-media">
<div class="menu-content">
<div class="logo">Company Name</div>
<div class="icon">
<a href="#"><img src="img/icons/menu-media.png"></a>
</div>
</div>
</section>
<ul class="menu-click">
<a href="#home">
<li href="#home">HOME</li>
</a>
<a href="#about-us">
<li href="#about-us">ABOUT US</li>
</a>
<a href="#portfolio">
<li href="#portfolio">SERVICES</li>
</a>
<a href="#contact">
<li href="#contact">CONTACT</li>
</a>
</ul>
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 61px;">
<section class="menu">
<div class="menu-content">
<div class="logo">Company Name</div>
<ul id="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#portfolio">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</section>
</div>
<section class="about-us" id="about-us">
<div class="content">
<h1>ABOUT US</h1>
<hr>
<p class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="column-one">
<div class="circle-one"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-two">
<div class="circle-two"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-three">
<div class="circle-three"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</section>
<div class="clear"></div>
<section class="portfolio" id="portfolio">
<div class="portfolio-margin">
<h1>SERVICES</h1>
<hr>
<ul class="grid" style="position: relative; height: 1229.17px;">
<li style="position: absolute; left: 0px; top: 0px;">
<a href="#">
<img src="img/portfolio/1.png" alt="EVENT HOSTING">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">From event planning to managing custom events for our customers and providing best services timely and efficiently with our skilled and experienced team.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 204px;">
<a href="#">
<img src="img/portfolio/4.png" alt="STUDENT SERVICES">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Our student recruiting strategy includes a multi-channel approach and a strong agent network on the ground in the target market. Our dedicated team provides students and recruiters/agents with extensive support. Our online marketing builds
brand presence all over.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 410px;">
<a href="#">
<img src="img/portfolio/2.png" alt="LINKUP">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 614px;">
<a href="#">
<img src="img/portfolio/3.png" alt="SOFTWARE">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 820px;">
<a href="#">
<img src="img/portfolio/5.png" alt="CONSULTANCY">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 1024px;">
<a href="#">
<img src="img/portfolio/6.png" alt="LOCAL REPRESENTATION">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<div class="clear"></div>
<section class="partners parallax-background-partners" id="partners" style="display: none; background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<h2>OUR PARTNERS</h2>
<div class="logo">
<a href="#"><img src="img/logos/alex1.png"></a>
<a href="#"><img src="img/logos/archiq.png"></a>
<a href="#"><img src="img/logos/thomsoon.png"></a>
<a href="#"><img src="img/logos/alex2.png"></a>
</div>
</div>
</section>
<div>
<section class="contact" id="contact">
<h1>Contact</h1>
<hr>
<div class="content">
<div class="form">
<form method="post" action="mail.php" name="contact">
<div class="column">
YOUR NAME<br><br>
<input name="name" id="name" value="">
</div>
<div class="column-2">
YOUR E-MAIL<br><br>
<input name="email" id="email" value="">
</div>
<div class="column-3">
MESSAGE<br><br>
<textarea id="message" name="message"></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="SEND"></span>
</div>
</form>
</div>
<div class="contact-text">
EMAIL: @@<br> PHONE: +1234<br><br>
<h2><strong>SOCIAL</strong></h2>
Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum
</div>
</div>
</section>
</div>
<div class="clear"></div>
<div>
<section class="footer">
<div class="logo"><img style="width: 100%" src="img/logo-footer.png"></div>
<div class="copyright">© 2018. All Rights Reserved</div>
</section>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: 'li'
});
});
});
</script>
<script src="js/jquery.parallax.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>Other files
script.js
style-responsive.css
javascript html css
google-chrome asked Nov 21 '18 at 11:40
Blue Fiend
3519
add a comment |
0
How to reproduce the problem:
Scroll to the end of the page, around the contact section (id="contact"). The page doesn't scroll and glitch can be seen.
Works fine everywhere except Chrome(Mobile View). Works fine on desktop.
Video here
Here's the style.css and HTML
@import "http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext";
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999
}
.preloader .item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -130px
}
html,
body {
font-family: product sans, lato, sans-serif;
font-size: 20px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #000;
font-weight: 400;
height: 100%
}
a {
text-decoration: none;
outline: none;
font-size: 14px
}
h1 {
font-size: 34px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2
}
p {
font-size: 14px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px
}
h1 span {
color: #2fa68e
}
::selection {
background: #2b388f;
color: #fff
}
::-moz-selection {
background: #2b388f;
color: #fff
}
.container {
position: absolute;
width: 100%;
height: 100%
}
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url(../img/background/start-page.jpg) silver bottom center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.start-page hr {
color: #fff;
margin-top: 30px;
background-color: #fff;
height: 1px;
width: 106px;
border: 0
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: 520px;
margin-top: 20px
}
.start-page .content .text .logo {
width: 197px;
height: 123px;
margin: 0 auto 50px
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #fff;
border-radius: 100px;
text-transform: uppercase;
color: #fff;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.start-page .content .text .read-more:hover {
color: #fff;
background: #2b388f;
border: 1px solid #2b388f
}
.start-page .content .arrow-down {
position: absolute;
bottom: 110px;
left: 50%;
margin-left: -10px;
width: 21px;
height: 29px;
background: url(../img/arrow-down.png) no-repeat center center;
display: block;
-webkit-animation: bounce-fade 1.2s infinite;
-moz-animation: bounce-fade 1.2s infinite;
-o-animation: bounce-fade 1.2s infinite;
animation: bounce-fade 1.2s infinite
}
@-webkit-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-moz-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-o-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
.menu-media {
position: relative;
width: 100%;
height: 90px;
background: #2b388f;
z-index: 1000;
display: none
}
.menu-media .menu-content {
width: 280px;
position: relative;
margin: 0 auto
}
.menu-media .menu-content .logo {
color: #fff;
font-weight: 700;
font-size: 24px;
width: 200px;
line-height: 90px;
float: left;
list-style: none
}
.menu-media .menu-content .icon {
width: 41px;
height: 23px;
float: right;
line-height: 100px
}
.menu-click {
display: none
}
.menu-click li {
position: relative;
width: 100%;
height: 70px;
color: #333;
font-size: 18px;
text-align: center;
line-height: 70px;
z-index: 1000;
border-bottom: 1px solid #f2f2f2;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-click li:hover {
color: #2b388f
}
.menu {
position: relative;
width: 100%;
height: 60px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
z-index: 1000
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto
}
.menu-content .logo {
color: #333;
font-weight: 700;
font-size: 24px;
width: 300px;
line-height: 60px;
float: left;
list-style: none
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none
}
.menu-content li {
display: inline-block;
position: relative
}
.menu-content li a {
color: #333;
font-size: 18px;
display: block;
padding: 0 20px;
line-height: 60px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-content li.active a {
color: #2b388f
}
.menu-content li a:hover {
color: #2b388f
}
.about-us {
position: relative;
width: 100%;
background: #fff;
z-index: 10
}
.about-us .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden
}
.about-us h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.about-us hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.about-us p.title {
color: #a4a4a4;
margin: 40px auto;
width: auto;
line-height: 26px;
letter-spacing: 0;
font-size: 20px;
font-weight: 300;
text-align: center
}
.about-us h2 {
text-align: center;
margin-top: 50px;
font-size: 26px;
color: #000;
line-height: 1.2;
letter-spacing: 6px;
width: 100%;
position: relative;
font-weight: 400
}
.about-us p {
text-align: center;
font-size: 14px;
width: auto;
margin: 30px auto;
color: #a4a4a4;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300
}
.about-us .column-one {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-one .circle-one {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/codexel.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-one .circle-one:hover {
border: 2px solid #2b388f
}
.about-us .column-two {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-two .circle-two {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/media.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-two .circle-two:hover {
border: 2px solid #2b388f
}
.about-us .column-three {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-three .circle-three {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/health.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-three .circle-three:hover {
border: 2px solid #2b388f
}
.portfolio {
position: relative;
width: 100%;
background: #f3f3f3;
z-index: 10
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto
}
.portfolio .portfolio-margin .read-more {
width: 183px;
height: 47px;
position: relative;
margin: 50px auto 100px;
line-height: 47px;
border: 1px solid #333;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
color: #333;
cursor: pointer;
font-size: 14px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
letter-spacing: 1px
}
.portfolio .portfolio-margin .read-more:hover {
background: #2b388f;
color: #fff;
border: 1px solid #2b388f
}
.portfolio .portfolio-margin h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.portfolio .portfolio-margin hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.grid {
margin-top: 70px;
width: 100%;
position: relative;
margin-bottom: 70px;
overflow: hidden
}
.grid li {
width: 285px;
margin: 0 15px 15px 0;
float: left;
position: relative;
overflow: hidden
}
.grid img {
width: 285px;
float: left;
position: relative
}
.grid .text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.grid .text:hover {
opacity: 1
}
.grid .no-text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-ms-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in
}
.grid .no-text:hover {
opacity: 1
}
.grid p {
font-size: 18px;
text-align: center;
line-height: 26px;
margin-top: 40px;
font-weight: 700;
letter-spacing: 1px;
color: #fff
}
.grid p.description {
font-size: 12px;
width: 300px;
margin-top: 20px;
text-align: center;
line-height: 20px;
font-weight: 400;
color: #fff;
position: relative;
width: 100%
}
.clear {
clear: both
}
.partners {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background: url(../img/background/partners.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.partners .opacity {
position: absolute;
width: 100%;
height: 400px
}
.partners .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.partners h2 {
color: #fff;
letter-spacing: 1px;
font-size: 32px;
font-weight: 300;
text-align: center
}
.partners .logo {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center
}
.partners .logo img {
opacity: .5;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.partners .logo img:hover {
opacity: 1
}
.contact {
position: relative;
width: 100%;
background: #fff;
z-index: 10;
overflow: hidden;
margin-bottom: 300px
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px
}
.contact h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.contact hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.contact .content .form {
width: 455px;
overflow: hidden;
height: auto;
float: left
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px
}
.contact .content .contact-text {
width: 405px;
overflow: hidden;
height: auto;
font-weight: 300;
float: left;
padding-left: 40px;
color: #000;
font-size: 14px;
line-height: 26px
}
strong {
font-weight: 700
}
input {
width: 180px;
height: 40px;
background: #f8f7f7;
border-top: 1px solid #333;
border-bottom: 0;
border-left: 0;
border-right: 0;
color: #333;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
input:focus {
background: #f4f4f4
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #333;
border-bottom: 0;
line-height: 20px;
border-left: 0;
border-right: 0;
background: #f8f7f7;
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
textarea:focus {
background: #f4f4f4
}
input.submit {
width: 100px;
height: 34px;
float: right;
margin: 20px 10px 0 0;
border: 0;
font-weight: 700;
text-align: right;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #2b388f
}
.footer .logo {
position: relative;
width: 58px;
height: 58px;
margin: 0 auto;
padding-top: 50px
}
.footer .menu-footer {
width: 80%;
text-align: center;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
position: relative
}
.footer .menu-footer a {
line-height: 46px;
padding: 10px;
color: #a4a4a4;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.footer .menu-footer a:hover {
color: #2b388f
}
.footer .copyright {
width: 80%;
position: relative;
font-weight: 300;
margin: 0 auto;
padding: 30px 0 50px;
text-align: center;
font-size: 14px;
line-height: 36px;
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="preloader" id="preloader" style="display: none;">
<div class="item">
<img src="img/loading.gif">
</div>
</div>
<div class="container">
<section class="start-page parallax-background" id="home" style="background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<div class="text">
<div class="logo"><img style="width: 100%" src="img/logo.png"></div>
<h1>Lorem Ipsum</h1>
<hr>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<a href="#about-us">
<div class="read-more">Read more</div>
</a>
</div>
<div class="arrow-down"></div>
</div>
</section>
<section class="menu-media">
<div class="menu-content">
<div class="logo">Company Name</div>
<div class="icon">
<a href="#"><img src="img/icons/menu-media.png"></a>
</div>
</div>
</section>
<ul class="menu-click">
<a href="#home">
<li href="#home">HOME</li>
</a>
<a href="#about-us">
<li href="#about-us">ABOUT US</li>
</a>
<a href="#portfolio">
<li href="#portfolio">SERVICES</li>
</a>
<a href="#contact">
<li href="#contact">CONTACT</li>
</a>
</ul>
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 61px;">
<section class="menu">
<div class="menu-content">
<div class="logo">Company Name</div>
<ul id="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#portfolio">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</section>
</div>
<section class="about-us" id="about-us">
<div class="content">
<h1>ABOUT US</h1>
<hr>
<p class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="column-one">
<div class="circle-one"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-two">
<div class="circle-two"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-three">
<div class="circle-three"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</section>
<div class="clear"></div>
<section class="portfolio" id="portfolio">
<div class="portfolio-margin">
<h1>SERVICES</h1>
<hr>
<ul class="grid" style="position: relative; height: 1229.17px;">
<li style="position: absolute; left: 0px; top: 0px;">
<a href="#">
<img src="img/portfolio/1.png" alt="EVENT HOSTING">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">From event planning to managing custom events for our customers and providing best services timely and efficiently with our skilled and experienced team.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 204px;">
<a href="#">
<img src="img/portfolio/4.png" alt="STUDENT SERVICES">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Our student recruiting strategy includes a multi-channel approach and a strong agent network on the ground in the target market. Our dedicated team provides students and recruiters/agents with extensive support. Our online marketing builds
brand presence all over.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 410px;">
<a href="#">
<img src="img/portfolio/2.png" alt="LINKUP">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 614px;">
<a href="#">
<img src="img/portfolio/3.png" alt="SOFTWARE">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 820px;">
<a href="#">
<img src="img/portfolio/5.png" alt="CONSULTANCY">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 1024px;">
<a href="#">
<img src="img/portfolio/6.png" alt="LOCAL REPRESENTATION">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<div class="clear"></div>
<section class="partners parallax-background-partners" id="partners" style="display: none; background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<h2>OUR PARTNERS</h2>
<div class="logo">
<a href="#"><img src="img/logos/alex1.png"></a>
<a href="#"><img src="img/logos/archiq.png"></a>
<a href="#"><img src="img/logos/thomsoon.png"></a>
<a href="#"><img src="img/logos/alex2.png"></a>
</div>
</div>
</section>
<div>
<section class="contact" id="contact">
<h1>Contact</h1>
<hr>
<div class="content">
<div class="form">
<form method="post" action="mail.php" name="contact">
<div class="column">
YOUR NAME<br><br>
<input name="name" id="name" value="">
</div>
<div class="column-2">
YOUR E-MAIL<br><br>
<input name="email" id="email" value="">
</div>
<div class="column-3">
MESSAGE<br><br>
<textarea id="message" name="message"></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="SEND"></span>
</div>
</form>
</div>
<div class="contact-text">
EMAIL: @@<br> PHONE: +1234<br><br>
<h2><strong>SOCIAL</strong></h2>
Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum
</div>
</div>
</section>
</div>
<div class="clear"></div>
<div>
<section class="footer">
<div class="logo"><img style="width: 100%" src="img/logo-footer.png"></div>
<div class="copyright">© 2018. All Rights Reserved</div>
</section>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: 'li'
});
});
});
</script>
<script src="js/jquery.parallax.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>Other files
script.js
style-responsive.css
javascript html css
google-chrome asked Nov 21 '18 at 11:40
Blue Fiend
3519
Mobile Chrome has known issues with scrolling because it hides the top bar when you start scrolling down a page.
– Chris G
Nov 21 '18 at 11:43
@ChrisG Any workaround or fix to that?
– Blue Fiend
Nov 21 '18 at 11:44
Could be crbug.com/898757, try a newer version of of Chrome to see.
– Josh Lee
Nov 21 '18 at 17:04
add a comment |
0
0
0
How to reproduce the problem:
Scroll to the end of the page, around the contact section (id="contact"). The page doesn't scroll and glitch can be seen.
Works fine everywhere except Chrome(Mobile View). Works fine on desktop.
Video here
Here's the style.css and HTML
@import "http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext";
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999
}
.preloader .item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -130px
}
html,
body {
font-family: product sans, lato, sans-serif;
font-size: 20px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #000;
font-weight: 400;
height: 100%
}
a {
text-decoration: none;
outline: none;
font-size: 14px
}
h1 {
font-size: 34px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2
}
p {
font-size: 14px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px
}
h1 span {
color: #2fa68e
}
::selection {
background: #2b388f;
color: #fff
}
::-moz-selection {
background: #2b388f;
color: #fff
}
.container {
position: absolute;
width: 100%;
height: 100%
}
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url(../img/background/start-page.jpg) silver bottom center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.start-page hr {
color: #fff;
margin-top: 30px;
background-color: #fff;
height: 1px;
width: 106px;
border: 0
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: 520px;
margin-top: 20px
}
.start-page .content .text .logo {
width: 197px;
height: 123px;
margin: 0 auto 50px
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #fff;
border-radius: 100px;
text-transform: uppercase;
color: #fff;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.start-page .content .text .read-more:hover {
color: #fff;
background: #2b388f;
border: 1px solid #2b388f
}
.start-page .content .arrow-down {
position: absolute;
bottom: 110px;
left: 50%;
margin-left: -10px;
width: 21px;
height: 29px;
background: url(../img/arrow-down.png) no-repeat center center;
display: block;
-webkit-animation: bounce-fade 1.2s infinite;
-moz-animation: bounce-fade 1.2s infinite;
-o-animation: bounce-fade 1.2s infinite;
animation: bounce-fade 1.2s infinite
}
@-webkit-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-moz-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-o-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
.menu-media {
position: relative;
width: 100%;
height: 90px;
background: #2b388f;
z-index: 1000;
display: none
}
.menu-media .menu-content {
width: 280px;
position: relative;
margin: 0 auto
}
.menu-media .menu-content .logo {
color: #fff;
font-weight: 700;
font-size: 24px;
width: 200px;
line-height: 90px;
float: left;
list-style: none
}
.menu-media .menu-content .icon {
width: 41px;
height: 23px;
float: right;
line-height: 100px
}
.menu-click {
display: none
}
.menu-click li {
position: relative;
width: 100%;
height: 70px;
color: #333;
font-size: 18px;
text-align: center;
line-height: 70px;
z-index: 1000;
border-bottom: 1px solid #f2f2f2;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-click li:hover {
color: #2b388f
}
.menu {
position: relative;
width: 100%;
height: 60px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
z-index: 1000
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto
}
.menu-content .logo {
color: #333;
font-weight: 700;
font-size: 24px;
width: 300px;
line-height: 60px;
float: left;
list-style: none
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none
}
.menu-content li {
display: inline-block;
position: relative
}
.menu-content li a {
color: #333;
font-size: 18px;
display: block;
padding: 0 20px;
line-height: 60px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-content li.active a {
color: #2b388f
}
.menu-content li a:hover {
color: #2b388f
}
.about-us {
position: relative;
width: 100%;
background: #fff;
z-index: 10
}
.about-us .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden
}
.about-us h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.about-us hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.about-us p.title {
color: #a4a4a4;
margin: 40px auto;
width: auto;
line-height: 26px;
letter-spacing: 0;
font-size: 20px;
font-weight: 300;
text-align: center
}
.about-us h2 {
text-align: center;
margin-top: 50px;
font-size: 26px;
color: #000;
line-height: 1.2;
letter-spacing: 6px;
width: 100%;
position: relative;
font-weight: 400
}
.about-us p {
text-align: center;
font-size: 14px;
width: auto;
margin: 30px auto;
color: #a4a4a4;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300
}
.about-us .column-one {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-one .circle-one {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/codexel.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-one .circle-one:hover {
border: 2px solid #2b388f
}
.about-us .column-two {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-two .circle-two {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/media.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-two .circle-two:hover {
border: 2px solid #2b388f
}
.about-us .column-three {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-three .circle-three {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/health.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-three .circle-three:hover {
border: 2px solid #2b388f
}
.portfolio {
position: relative;
width: 100%;
background: #f3f3f3;
z-index: 10
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto
}
.portfolio .portfolio-margin .read-more {
width: 183px;
height: 47px;
position: relative;
margin: 50px auto 100px;
line-height: 47px;
border: 1px solid #333;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
color: #333;
cursor: pointer;
font-size: 14px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
letter-spacing: 1px
}
.portfolio .portfolio-margin .read-more:hover {
background: #2b388f;
color: #fff;
border: 1px solid #2b388f
}
.portfolio .portfolio-margin h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.portfolio .portfolio-margin hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.grid {
margin-top: 70px;
width: 100%;
position: relative;
margin-bottom: 70px;
overflow: hidden
}
.grid li {
width: 285px;
margin: 0 15px 15px 0;
float: left;
position: relative;
overflow: hidden
}
.grid img {
width: 285px;
float: left;
position: relative
}
.grid .text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.grid .text:hover {
opacity: 1
}
.grid .no-text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-ms-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in
}
.grid .no-text:hover {
opacity: 1
}
.grid p {
font-size: 18px;
text-align: center;
line-height: 26px;
margin-top: 40px;
font-weight: 700;
letter-spacing: 1px;
color: #fff
}
.grid p.description {
font-size: 12px;
width: 300px;
margin-top: 20px;
text-align: center;
line-height: 20px;
font-weight: 400;
color: #fff;
position: relative;
width: 100%
}
.clear {
clear: both
}
.partners {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background: url(../img/background/partners.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.partners .opacity {
position: absolute;
width: 100%;
height: 400px
}
.partners .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.partners h2 {
color: #fff;
letter-spacing: 1px;
font-size: 32px;
font-weight: 300;
text-align: center
}
.partners .logo {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center
}
.partners .logo img {
opacity: .5;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.partners .logo img:hover {
opacity: 1
}
.contact {
position: relative;
width: 100%;
background: #fff;
z-index: 10;
overflow: hidden;
margin-bottom: 300px
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px
}
.contact h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.contact hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.contact .content .form {
width: 455px;
overflow: hidden;
height: auto;
float: left
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px
}
.contact .content .contact-text {
width: 405px;
overflow: hidden;
height: auto;
font-weight: 300;
float: left;
padding-left: 40px;
color: #000;
font-size: 14px;
line-height: 26px
}
strong {
font-weight: 700
}
input {
width: 180px;
height: 40px;
background: #f8f7f7;
border-top: 1px solid #333;
border-bottom: 0;
border-left: 0;
border-right: 0;
color: #333;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
input:focus {
background: #f4f4f4
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #333;
border-bottom: 0;
line-height: 20px;
border-left: 0;
border-right: 0;
background: #f8f7f7;
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
textarea:focus {
background: #f4f4f4
}
input.submit {
width: 100px;
height: 34px;
float: right;
margin: 20px 10px 0 0;
border: 0;
font-weight: 700;
text-align: right;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #2b388f
}
.footer .logo {
position: relative;
width: 58px;
height: 58px;
margin: 0 auto;
padding-top: 50px
}
.footer .menu-footer {
width: 80%;
text-align: center;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
position: relative
}
.footer .menu-footer a {
line-height: 46px;
padding: 10px;
color: #a4a4a4;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.footer .menu-footer a:hover {
color: #2b388f
}
.footer .copyright {
width: 80%;
position: relative;
font-weight: 300;
margin: 0 auto;
padding: 30px 0 50px;
text-align: center;
font-size: 14px;
line-height: 36px;
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="preloader" id="preloader" style="display: none;">
<div class="item">
<img src="img/loading.gif">
</div>
</div>
<div class="container">
<section class="start-page parallax-background" id="home" style="background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<div class="text">
<div class="logo"><img style="width: 100%" src="img/logo.png"></div>
<h1>Lorem Ipsum</h1>
<hr>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<a href="#about-us">
<div class="read-more">Read more</div>
</a>
</div>
<div class="arrow-down"></div>
</div>
</section>
<section class="menu-media">
<div class="menu-content">
<div class="logo">Company Name</div>
<div class="icon">
<a href="#"><img src="img/icons/menu-media.png"></a>
</div>
</div>
</section>
<ul class="menu-click">
<a href="#home">
<li href="#home">HOME</li>
</a>
<a href="#about-us">
<li href="#about-us">ABOUT US</li>
</a>
<a href="#portfolio">
<li href="#portfolio">SERVICES</li>
</a>
<a href="#contact">
<li href="#contact">CONTACT</li>
</a>
</ul>
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 61px;">
<section class="menu">
<div class="menu-content">
<div class="logo">Company Name</div>
<ul id="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#portfolio">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</section>
</div>
<section class="about-us" id="about-us">
<div class="content">
<h1>ABOUT US</h1>
<hr>
<p class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="column-one">
<div class="circle-one"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-two">
<div class="circle-two"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-three">
<div class="circle-three"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</section>
<div class="clear"></div>
<section class="portfolio" id="portfolio">
<div class="portfolio-margin">
<h1>SERVICES</h1>
<hr>
<ul class="grid" style="position: relative; height: 1229.17px;">
<li style="position: absolute; left: 0px; top: 0px;">
<a href="#">
<img src="img/portfolio/1.png" alt="EVENT HOSTING">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">From event planning to managing custom events for our customers and providing best services timely and efficiently with our skilled and experienced team.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 204px;">
<a href="#">
<img src="img/portfolio/4.png" alt="STUDENT SERVICES">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Our student recruiting strategy includes a multi-channel approach and a strong agent network on the ground in the target market. Our dedicated team provides students and recruiters/agents with extensive support. Our online marketing builds
brand presence all over.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 410px;">
<a href="#">
<img src="img/portfolio/2.png" alt="LINKUP">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 614px;">
<a href="#">
<img src="img/portfolio/3.png" alt="SOFTWARE">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 820px;">
<a href="#">
<img src="img/portfolio/5.png" alt="CONSULTANCY">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 1024px;">
<a href="#">
<img src="img/portfolio/6.png" alt="LOCAL REPRESENTATION">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<div class="clear"></div>
<section class="partners parallax-background-partners" id="partners" style="display: none; background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<h2>OUR PARTNERS</h2>
<div class="logo">
<a href="#"><img src="img/logos/alex1.png"></a>
<a href="#"><img src="img/logos/archiq.png"></a>
<a href="#"><img src="img/logos/thomsoon.png"></a>
<a href="#"><img src="img/logos/alex2.png"></a>
</div>
</div>
</section>
<div>
<section class="contact" id="contact">
<h1>Contact</h1>
<hr>
<div class="content">
<div class="form">
<form method="post" action="mail.php" name="contact">
<div class="column">
YOUR NAME<br><br>
<input name="name" id="name" value="">
</div>
<div class="column-2">
YOUR E-MAIL<br><br>
<input name="email" id="email" value="">
</div>
<div class="column-3">
MESSAGE<br><br>
<textarea id="message" name="message"></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="SEND"></span>
</div>
</form>
</div>
<div class="contact-text">
EMAIL: @@<br> PHONE: +1234<br><br>
<h2><strong>SOCIAL</strong></h2>
Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum
</div>
</div>
</section>
</div>
<div class="clear"></div>
<div>
<section class="footer">
<div class="logo"><img style="width: 100%" src="img/logo-footer.png"></div>
<div class="copyright">© 2018. All Rights Reserved</div>
</section>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: 'li'
});
});
});
</script>
<script src="js/jquery.parallax.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>Other files
script.js
style-responsive.css
javascript html css
google-chrome asked Nov 21 '18 at 11:40
Blue Fiend
3519
How to reproduce the problem:
Scroll to the end of the page, around the contact section (id="contact"). The page doesn't scroll and glitch can be seen.
Works fine everywhere except Chrome(Mobile View). Works fine on desktop.
Video here
Here's the style.css and HTML
@import "http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext";
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999
}
.preloader .item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -130px
}
html,
body {
font-family: product sans, lato, sans-serif;
font-size: 20px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #000;
font-weight: 400;
height: 100%
}
a {
text-decoration: none;
outline: none;
font-size: 14px
}
h1 {
font-size: 34px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2
}
p {
font-size: 14px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px
}
h1 span {
color: #2fa68e
}
::selection {
background: #2b388f;
color: #fff
}
::-moz-selection {
background: #2b388f;
color: #fff
}
.container {
position: absolute;
width: 100%;
height: 100%
}
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url(../img/background/start-page.jpg) silver bottom center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.start-page hr {
color: #fff;
margin-top: 30px;
background-color: #fff;
height: 1px;
width: 106px;
border: 0
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: 520px;
margin-top: 20px
}
.start-page .content .text .logo {
width: 197px;
height: 123px;
margin: 0 auto 50px
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #fff;
border-radius: 100px;
text-transform: uppercase;
color: #fff;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.start-page .content .text .read-more:hover {
color: #fff;
background: #2b388f;
border: 1px solid #2b388f
}
.start-page .content .arrow-down {
position: absolute;
bottom: 110px;
left: 50%;
margin-left: -10px;
width: 21px;
height: 29px;
background: url(../img/arrow-down.png) no-repeat center center;
display: block;
-webkit-animation: bounce-fade 1.2s infinite;
-moz-animation: bounce-fade 1.2s infinite;
-o-animation: bounce-fade 1.2s infinite;
animation: bounce-fade 1.2s infinite
}
@-webkit-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-moz-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-o-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
.menu-media {
position: relative;
width: 100%;
height: 90px;
background: #2b388f;
z-index: 1000;
display: none
}
.menu-media .menu-content {
width: 280px;
position: relative;
margin: 0 auto
}
.menu-media .menu-content .logo {
color: #fff;
font-weight: 700;
font-size: 24px;
width: 200px;
line-height: 90px;
float: left;
list-style: none
}
.menu-media .menu-content .icon {
width: 41px;
height: 23px;
float: right;
line-height: 100px
}
.menu-click {
display: none
}
.menu-click li {
position: relative;
width: 100%;
height: 70px;
color: #333;
font-size: 18px;
text-align: center;
line-height: 70px;
z-index: 1000;
border-bottom: 1px solid #f2f2f2;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-click li:hover {
color: #2b388f
}
.menu {
position: relative;
width: 100%;
height: 60px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
z-index: 1000
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto
}
.menu-content .logo {
color: #333;
font-weight: 700;
font-size: 24px;
width: 300px;
line-height: 60px;
float: left;
list-style: none
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none
}
.menu-content li {
display: inline-block;
position: relative
}
.menu-content li a {
color: #333;
font-size: 18px;
display: block;
padding: 0 20px;
line-height: 60px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-content li.active a {
color: #2b388f
}
.menu-content li a:hover {
color: #2b388f
}
.about-us {
position: relative;
width: 100%;
background: #fff;
z-index: 10
}
.about-us .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden
}
.about-us h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.about-us hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.about-us p.title {
color: #a4a4a4;
margin: 40px auto;
width: auto;
line-height: 26px;
letter-spacing: 0;
font-size: 20px;
font-weight: 300;
text-align: center
}
.about-us h2 {
text-align: center;
margin-top: 50px;
font-size: 26px;
color: #000;
line-height: 1.2;
letter-spacing: 6px;
width: 100%;
position: relative;
font-weight: 400
}
.about-us p {
text-align: center;
font-size: 14px;
width: auto;
margin: 30px auto;
color: #a4a4a4;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300
}
.about-us .column-one {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-one .circle-one {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/codexel.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-one .circle-one:hover {
border: 2px solid #2b388f
}
.about-us .column-two {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-two .circle-two {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/media.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-two .circle-two:hover {
border: 2px solid #2b388f
}
.about-us .column-three {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-three .circle-three {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/health.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-three .circle-three:hover {
border: 2px solid #2b388f
}
.portfolio {
position: relative;
width: 100%;
background: #f3f3f3;
z-index: 10
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto
}
.portfolio .portfolio-margin .read-more {
width: 183px;
height: 47px;
position: relative;
margin: 50px auto 100px;
line-height: 47px;
border: 1px solid #333;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
color: #333;
cursor: pointer;
font-size: 14px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
letter-spacing: 1px
}
.portfolio .portfolio-margin .read-more:hover {
background: #2b388f;
color: #fff;
border: 1px solid #2b388f
}
.portfolio .portfolio-margin h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.portfolio .portfolio-margin hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.grid {
margin-top: 70px;
width: 100%;
position: relative;
margin-bottom: 70px;
overflow: hidden
}
.grid li {
width: 285px;
margin: 0 15px 15px 0;
float: left;
position: relative;
overflow: hidden
}
.grid img {
width: 285px;
float: left;
position: relative
}
.grid .text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.grid .text:hover {
opacity: 1
}
.grid .no-text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-ms-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in
}
.grid .no-text:hover {
opacity: 1
}
.grid p {
font-size: 18px;
text-align: center;
line-height: 26px;
margin-top: 40px;
font-weight: 700;
letter-spacing: 1px;
color: #fff
}
.grid p.description {
font-size: 12px;
width: 300px;
margin-top: 20px;
text-align: center;
line-height: 20px;
font-weight: 400;
color: #fff;
position: relative;
width: 100%
}
.clear {
clear: both
}
.partners {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background: url(../img/background/partners.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.partners .opacity {
position: absolute;
width: 100%;
height: 400px
}
.partners .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.partners h2 {
color: #fff;
letter-spacing: 1px;
font-size: 32px;
font-weight: 300;
text-align: center
}
.partners .logo {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center
}
.partners .logo img {
opacity: .5;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.partners .logo img:hover {
opacity: 1
}
.contact {
position: relative;
width: 100%;
background: #fff;
z-index: 10;
overflow: hidden;
margin-bottom: 300px
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px
}
.contact h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.contact hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.contact .content .form {
width: 455px;
overflow: hidden;
height: auto;
float: left
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px
}
.contact .content .contact-text {
width: 405px;
overflow: hidden;
height: auto;
font-weight: 300;
float: left;
padding-left: 40px;
color: #000;
font-size: 14px;
line-height: 26px
}
strong {
font-weight: 700
}
input {
width: 180px;
height: 40px;
background: #f8f7f7;
border-top: 1px solid #333;
border-bottom: 0;
border-left: 0;
border-right: 0;
color: #333;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
input:focus {
background: #f4f4f4
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #333;
border-bottom: 0;
line-height: 20px;
border-left: 0;
border-right: 0;
background: #f8f7f7;
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
textarea:focus {
background: #f4f4f4
}
input.submit {
width: 100px;
height: 34px;
float: right;
margin: 20px 10px 0 0;
border: 0;
font-weight: 700;
text-align: right;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #2b388f
}
.footer .logo {
position: relative;
width: 58px;
height: 58px;
margin: 0 auto;
padding-top: 50px
}
.footer .menu-footer {
width: 80%;
text-align: center;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
position: relative
}
.footer .menu-footer a {
line-height: 46px;
padding: 10px;
color: #a4a4a4;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.footer .menu-footer a:hover {
color: #2b388f
}
.footer .copyright {
width: 80%;
position: relative;
font-weight: 300;
margin: 0 auto;
padding: 30px 0 50px;
text-align: center;
font-size: 14px;
line-height: 36px;
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="preloader" id="preloader" style="display: none;">
<div class="item">
<img src="img/loading.gif">
</div>
</div>
<div class="container">
<section class="start-page parallax-background" id="home" style="background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<div class="text">
<div class="logo"><img style="width: 100%" src="img/logo.png"></div>
<h1>Lorem Ipsum</h1>
<hr>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<a href="#about-us">
<div class="read-more">Read more</div>
</a>
</div>
<div class="arrow-down"></div>
</div>
</section>
<section class="menu-media">
<div class="menu-content">
<div class="logo">Company Name</div>
<div class="icon">
<a href="#"><img src="img/icons/menu-media.png"></a>
</div>
</div>
</section>
<ul class="menu-click">
<a href="#home">
<li href="#home">HOME</li>
</a>
<a href="#about-us">
<li href="#about-us">ABOUT US</li>
</a>
<a href="#portfolio">
<li href="#portfolio">SERVICES</li>
</a>
<a href="#contact">
<li href="#contact">CONTACT</li>
</a>
</ul>
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 61px;">
<section class="menu">
<div class="menu-content">
<div class="logo">Company Name</div>
<ul id="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#portfolio">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</section>
</div>
<section class="about-us" id="about-us">
<div class="content">
<h1>ABOUT US</h1>
<hr>
<p class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="column-one">
<div class="circle-one"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-two">
<div class="circle-two"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-three">
<div class="circle-three"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</section>
<div class="clear"></div>
<section class="portfolio" id="portfolio">
<div class="portfolio-margin">
<h1>SERVICES</h1>
<hr>
<ul class="grid" style="position: relative; height: 1229.17px;">
<li style="position: absolute; left: 0px; top: 0px;">
<a href="#">
<img src="img/portfolio/1.png" alt="EVENT HOSTING">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">From event planning to managing custom events for our customers and providing best services timely and efficiently with our skilled and experienced team.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 204px;">
<a href="#">
<img src="img/portfolio/4.png" alt="STUDENT SERVICES">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Our student recruiting strategy includes a multi-channel approach and a strong agent network on the ground in the target market. Our dedicated team provides students and recruiters/agents with extensive support. Our online marketing builds
brand presence all over.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 410px;">
<a href="#">
<img src="img/portfolio/2.png" alt="LINKUP">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 614px;">
<a href="#">
<img src="img/portfolio/3.png" alt="SOFTWARE">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 820px;">
<a href="#">
<img src="img/portfolio/5.png" alt="CONSULTANCY">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 1024px;">
<a href="#">
<img src="img/portfolio/6.png" alt="LOCAL REPRESENTATION">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<div class="clear"></div>
<section class="partners parallax-background-partners" id="partners" style="display: none; background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<h2>OUR PARTNERS</h2>
<div class="logo">
<a href="#"><img src="img/logos/alex1.png"></a>
<a href="#"><img src="img/logos/archiq.png"></a>
<a href="#"><img src="img/logos/thomsoon.png"></a>
<a href="#"><img src="img/logos/alex2.png"></a>
</div>
</div>
</section>
<div>
<section class="contact" id="contact">
<h1>Contact</h1>
<hr>
<div class="content">
<div class="form">
<form method="post" action="mail.php" name="contact">
<div class="column">
YOUR NAME<br><br>
<input name="name" id="name" value="">
</div>
<div class="column-2">
YOUR E-MAIL<br><br>
<input name="email" id="email" value="">
</div>
<div class="column-3">
MESSAGE<br><br>
<textarea id="message" name="message"></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="SEND"></span>
</div>
</form>
</div>
<div class="contact-text">
EMAIL: @@<br> PHONE: +1234<br><br>
<h2><strong>SOCIAL</strong></h2>
Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum
</div>
</div>
</section>
</div>
<div class="clear"></div>
<div>
<section class="footer">
<div class="logo"><img style="width: 100%" src="img/logo-footer.png"></div>
<div class="copyright">© 2018. All Rights Reserved</div>
</section>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: 'li'
});
});
});
</script>
<script src="js/jquery.parallax.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>Other files
script.js
style-responsive.css
@import "http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext";
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999
}
.preloader .item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -130px
}
html,
body {
font-family: product sans, lato, sans-serif;
font-size: 20px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #000;
font-weight: 400;
height: 100%
}
a {
text-decoration: none;
outline: none;
font-size: 14px
}
h1 {
font-size: 34px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2
}
p {
font-size: 14px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px
}
h1 span {
color: #2fa68e
}
::selection {
background: #2b388f;
color: #fff
}
::-moz-selection {
background: #2b388f;
color: #fff
}
.container {
position: absolute;
width: 100%;
height: 100%
}
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url(../img/background/start-page.jpg) silver bottom center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.start-page hr {
color: #fff;
margin-top: 30px;
background-color: #fff;
height: 1px;
width: 106px;
border: 0
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: 520px;
margin-top: 20px
}
.start-page .content .text .logo {
width: 197px;
height: 123px;
margin: 0 auto 50px
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #fff;
border-radius: 100px;
text-transform: uppercase;
color: #fff;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.start-page .content .text .read-more:hover {
color: #fff;
background: #2b388f;
border: 1px solid #2b388f
}
.start-page .content .arrow-down {
position: absolute;
bottom: 110px;
left: 50%;
margin-left: -10px;
width: 21px;
height: 29px;
background: url(../img/arrow-down.png) no-repeat center center;
display: block;
-webkit-animation: bounce-fade 1.2s infinite;
-moz-animation: bounce-fade 1.2s infinite;
-o-animation: bounce-fade 1.2s infinite;
animation: bounce-fade 1.2s infinite
}
@-webkit-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-moz-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-o-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
.menu-media {
position: relative;
width: 100%;
height: 90px;
background: #2b388f;
z-index: 1000;
display: none
}
.menu-media .menu-content {
width: 280px;
position: relative;
margin: 0 auto
}
.menu-media .menu-content .logo {
color: #fff;
font-weight: 700;
font-size: 24px;
width: 200px;
line-height: 90px;
float: left;
list-style: none
}
.menu-media .menu-content .icon {
width: 41px;
height: 23px;
float: right;
line-height: 100px
}
.menu-click {
display: none
}
.menu-click li {
position: relative;
width: 100%;
height: 70px;
color: #333;
font-size: 18px;
text-align: center;
line-height: 70px;
z-index: 1000;
border-bottom: 1px solid #f2f2f2;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-click li:hover {
color: #2b388f
}
.menu {
position: relative;
width: 100%;
height: 60px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
z-index: 1000
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto
}
.menu-content .logo {
color: #333;
font-weight: 700;
font-size: 24px;
width: 300px;
line-height: 60px;
float: left;
list-style: none
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none
}
.menu-content li {
display: inline-block;
position: relative
}
.menu-content li a {
color: #333;
font-size: 18px;
display: block;
padding: 0 20px;
line-height: 60px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-content li.active a {
color: #2b388f
}
.menu-content li a:hover {
color: #2b388f
}
.about-us {
position: relative;
width: 100%;
background: #fff;
z-index: 10
}
.about-us .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden
}
.about-us h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.about-us hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.about-us p.title {
color: #a4a4a4;
margin: 40px auto;
width: auto;
line-height: 26px;
letter-spacing: 0;
font-size: 20px;
font-weight: 300;
text-align: center
}
.about-us h2 {
text-align: center;
margin-top: 50px;
font-size: 26px;
color: #000;
line-height: 1.2;
letter-spacing: 6px;
width: 100%;
position: relative;
font-weight: 400
}
.about-us p {
text-align: center;
font-size: 14px;
width: auto;
margin: 30px auto;
color: #a4a4a4;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300
}
.about-us .column-one {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-one .circle-one {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/codexel.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-one .circle-one:hover {
border: 2px solid #2b388f
}
.about-us .column-two {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-two .circle-two {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/media.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-two .circle-two:hover {
border: 2px solid #2b388f
}
.about-us .column-three {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-three .circle-three {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/health.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-three .circle-three:hover {
border: 2px solid #2b388f
}
.portfolio {
position: relative;
width: 100%;
background: #f3f3f3;
z-index: 10
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto
}
.portfolio .portfolio-margin .read-more {
width: 183px;
height: 47px;
position: relative;
margin: 50px auto 100px;
line-height: 47px;
border: 1px solid #333;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
color: #333;
cursor: pointer;
font-size: 14px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
letter-spacing: 1px
}
.portfolio .portfolio-margin .read-more:hover {
background: #2b388f;
color: #fff;
border: 1px solid #2b388f
}
.portfolio .portfolio-margin h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.portfolio .portfolio-margin hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.grid {
margin-top: 70px;
width: 100%;
position: relative;
margin-bottom: 70px;
overflow: hidden
}
.grid li {
width: 285px;
margin: 0 15px 15px 0;
float: left;
position: relative;
overflow: hidden
}
.grid img {
width: 285px;
float: left;
position: relative
}
.grid .text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.grid .text:hover {
opacity: 1
}
.grid .no-text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-ms-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in
}
.grid .no-text:hover {
opacity: 1
}
.grid p {
font-size: 18px;
text-align: center;
line-height: 26px;
margin-top: 40px;
font-weight: 700;
letter-spacing: 1px;
color: #fff
}
.grid p.description {
font-size: 12px;
width: 300px;
margin-top: 20px;
text-align: center;
line-height: 20px;
font-weight: 400;
color: #fff;
position: relative;
width: 100%
}
.clear {
clear: both
}
.partners {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background: url(../img/background/partners.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.partners .opacity {
position: absolute;
width: 100%;
height: 400px
}
.partners .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.partners h2 {
color: #fff;
letter-spacing: 1px;
font-size: 32px;
font-weight: 300;
text-align: center
}
.partners .logo {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center
}
.partners .logo img {
opacity: .5;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.partners .logo img:hover {
opacity: 1
}
.contact {
position: relative;
width: 100%;
background: #fff;
z-index: 10;
overflow: hidden;
margin-bottom: 300px
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px
}
.contact h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.contact hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.contact .content .form {
width: 455px;
overflow: hidden;
height: auto;
float: left
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px
}
.contact .content .contact-text {
width: 405px;
overflow: hidden;
height: auto;
font-weight: 300;
float: left;
padding-left: 40px;
color: #000;
font-size: 14px;
line-height: 26px
}
strong {
font-weight: 700
}
input {
width: 180px;
height: 40px;
background: #f8f7f7;
border-top: 1px solid #333;
border-bottom: 0;
border-left: 0;
border-right: 0;
color: #333;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
input:focus {
background: #f4f4f4
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #333;
border-bottom: 0;
line-height: 20px;
border-left: 0;
border-right: 0;
background: #f8f7f7;
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
textarea:focus {
background: #f4f4f4
}
input.submit {
width: 100px;
height: 34px;
float: right;
margin: 20px 10px 0 0;
border: 0;
font-weight: 700;
text-align: right;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #2b388f
}
.footer .logo {
position: relative;
width: 58px;
height: 58px;
margin: 0 auto;
padding-top: 50px
}
.footer .menu-footer {
width: 80%;
text-align: center;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
position: relative
}
.footer .menu-footer a {
line-height: 46px;
padding: 10px;
color: #a4a4a4;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.footer .menu-footer a:hover {
color: #2b388f
}
.footer .copyright {
width: 80%;
position: relative;
font-weight: 300;
margin: 0 auto;
padding: 30px 0 50px;
text-align: center;
font-size: 14px;
line-height: 36px;
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="preloader" id="preloader" style="display: none;">
<div class="item">
<img src="img/loading.gif">
</div>
</div>
<div class="container">
<section class="start-page parallax-background" id="home" style="background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<div class="text">
<div class="logo"><img style="width: 100%" src="img/logo.png"></div>
<h1>Lorem Ipsum</h1>
<hr>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<a href="#about-us">
<div class="read-more">Read more</div>
</a>
</div>
<div class="arrow-down"></div>
</div>
</section>
<section class="menu-media">
<div class="menu-content">
<div class="logo">Company Name</div>
<div class="icon">
<a href="#"><img src="img/icons/menu-media.png"></a>
</div>
</div>
</section>
<ul class="menu-click">
<a href="#home">
<li href="#home">HOME</li>
</a>
<a href="#about-us">
<li href="#about-us">ABOUT US</li>
</a>
<a href="#portfolio">
<li href="#portfolio">SERVICES</li>
</a>
<a href="#contact">
<li href="#contact">CONTACT</li>
</a>
</ul>
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 61px;">
<section class="menu">
<div class="menu-content">
<div class="logo">Company Name</div>
<ul id="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#portfolio">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</section>
</div>
<section class="about-us" id="about-us">
<div class="content">
<h1>ABOUT US</h1>
<hr>
<p class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="column-one">
<div class="circle-one"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-two">
<div class="circle-two"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-three">
<div class="circle-three"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</section>
<div class="clear"></div>
<section class="portfolio" id="portfolio">
<div class="portfolio-margin">
<h1>SERVICES</h1>
<hr>
<ul class="grid" style="position: relative; height: 1229.17px;">
<li style="position: absolute; left: 0px; top: 0px;">
<a href="#">
<img src="img/portfolio/1.png" alt="EVENT HOSTING">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">From event planning to managing custom events for our customers and providing best services timely and efficiently with our skilled and experienced team.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 204px;">
<a href="#">
<img src="img/portfolio/4.png" alt="STUDENT SERVICES">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Our student recruiting strategy includes a multi-channel approach and a strong agent network on the ground in the target market. Our dedicated team provides students and recruiters/agents with extensive support. Our online marketing builds
brand presence all over.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 410px;">
<a href="#">
<img src="img/portfolio/2.png" alt="LINKUP">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 614px;">
<a href="#">
<img src="img/portfolio/3.png" alt="SOFTWARE">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 820px;">
<a href="#">
<img src="img/portfolio/5.png" alt="CONSULTANCY">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 1024px;">
<a href="#">
<img src="img/portfolio/6.png" alt="LOCAL REPRESENTATION">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<div class="clear"></div>
<section class="partners parallax-background-partners" id="partners" style="display: none; background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<h2>OUR PARTNERS</h2>
<div class="logo">
<a href="#"><img src="img/logos/alex1.png"></a>
<a href="#"><img src="img/logos/archiq.png"></a>
<a href="#"><img src="img/logos/thomsoon.png"></a>
<a href="#"><img src="img/logos/alex2.png"></a>
</div>
</div>
</section>
<div>
<section class="contact" id="contact">
<h1>Contact</h1>
<hr>
<div class="content">
<div class="form">
<form method="post" action="mail.php" name="contact">
<div class="column">
YOUR NAME<br><br>
<input name="name" id="name" value="">
</div>
<div class="column-2">
YOUR E-MAIL<br><br>
<input name="email" id="email" value="">
</div>
<div class="column-3">
MESSAGE<br><br>
<textarea id="message" name="message"></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="SEND"></span>
</div>
</form>
</div>
<div class="contact-text">
EMAIL: @@<br> PHONE: +1234<br><br>
<h2><strong>SOCIAL</strong></h2>
Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum
</div>
</div>
</section>
</div>
<div class="clear"></div>
<div>
<section class="footer">
<div class="logo"><img style="width: 100%" src="img/logo-footer.png"></div>
<div class="copyright">© 2018. All Rights Reserved</div>
</section>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: 'li'
});
});
});
</script>
<script src="js/jquery.parallax.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>@import "http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext";
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999
}
.preloader .item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -130px
}
html,
body {
font-family: product sans, lato, sans-serif;
font-size: 20px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #000;
font-weight: 400;
height: 100%
}
a {
text-decoration: none;
outline: none;
font-size: 14px
}
h1 {
font-size: 34px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2
}
p {
font-size: 14px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px
}
h1 span {
color: #2fa68e
}
::selection {
background: #2b388f;
color: #fff
}
::-moz-selection {
background: #2b388f;
color: #fff
}
.container {
position: absolute;
width: 100%;
height: 100%
}
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url(../img/background/start-page.jpg) silver bottom center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.start-page hr {
color: #fff;
margin-top: 30px;
background-color: #fff;
height: 1px;
width: 106px;
border: 0
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: 520px;
margin-top: 20px
}
.start-page .content .text .logo {
width: 197px;
height: 123px;
margin: 0 auto 50px
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #fff;
border-radius: 100px;
text-transform: uppercase;
color: #fff;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.start-page .content .text .read-more:hover {
color: #fff;
background: #2b388f;
border: 1px solid #2b388f
}
.start-page .content .arrow-down {
position: absolute;
bottom: 110px;
left: 50%;
margin-left: -10px;
width: 21px;
height: 29px;
background: url(../img/arrow-down.png) no-repeat center center;
display: block;
-webkit-animation: bounce-fade 1.2s infinite;
-moz-animation: bounce-fade 1.2s infinite;
-o-animation: bounce-fade 1.2s infinite;
animation: bounce-fade 1.2s infinite
}
@-webkit-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-moz-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-o-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
.menu-media {
position: relative;
width: 100%;
height: 90px;
background: #2b388f;
z-index: 1000;
display: none
}
.menu-media .menu-content {
width: 280px;
position: relative;
margin: 0 auto
}
.menu-media .menu-content .logo {
color: #fff;
font-weight: 700;
font-size: 24px;
width: 200px;
line-height: 90px;
float: left;
list-style: none
}
.menu-media .menu-content .icon {
width: 41px;
height: 23px;
float: right;
line-height: 100px
}
.menu-click {
display: none
}
.menu-click li {
position: relative;
width: 100%;
height: 70px;
color: #333;
font-size: 18px;
text-align: center;
line-height: 70px;
z-index: 1000;
border-bottom: 1px solid #f2f2f2;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-click li:hover {
color: #2b388f
}
.menu {
position: relative;
width: 100%;
height: 60px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
z-index: 1000
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto
}
.menu-content .logo {
color: #333;
font-weight: 700;
font-size: 24px;
width: 300px;
line-height: 60px;
float: left;
list-style: none
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none
}
.menu-content li {
display: inline-block;
position: relative
}
.menu-content li a {
color: #333;
font-size: 18px;
display: block;
padding: 0 20px;
line-height: 60px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-content li.active a {
color: #2b388f
}
.menu-content li a:hover {
color: #2b388f
}
.about-us {
position: relative;
width: 100%;
background: #fff;
z-index: 10
}
.about-us .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden
}
.about-us h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.about-us hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.about-us p.title {
color: #a4a4a4;
margin: 40px auto;
width: auto;
line-height: 26px;
letter-spacing: 0;
font-size: 20px;
font-weight: 300;
text-align: center
}
.about-us h2 {
text-align: center;
margin-top: 50px;
font-size: 26px;
color: #000;
line-height: 1.2;
letter-spacing: 6px;
width: 100%;
position: relative;
font-weight: 400
}
.about-us p {
text-align: center;
font-size: 14px;
width: auto;
margin: 30px auto;
color: #a4a4a4;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300
}
.about-us .column-one {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-one .circle-one {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/codexel.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-one .circle-one:hover {
border: 2px solid #2b388f
}
.about-us .column-two {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-two .circle-two {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/media.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-two .circle-two:hover {
border: 2px solid #2b388f
}
.about-us .column-three {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-three .circle-three {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/health.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-three .circle-three:hover {
border: 2px solid #2b388f
}
.portfolio {
position: relative;
width: 100%;
background: #f3f3f3;
z-index: 10
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto
}
.portfolio .portfolio-margin .read-more {
width: 183px;
height: 47px;
position: relative;
margin: 50px auto 100px;
line-height: 47px;
border: 1px solid #333;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
color: #333;
cursor: pointer;
font-size: 14px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
letter-spacing: 1px
}
.portfolio .portfolio-margin .read-more:hover {
background: #2b388f;
color: #fff;
border: 1px solid #2b388f
}
.portfolio .portfolio-margin h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.portfolio .portfolio-margin hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.grid {
margin-top: 70px;
width: 100%;
position: relative;
margin-bottom: 70px;
overflow: hidden
}
.grid li {
width: 285px;
margin: 0 15px 15px 0;
float: left;
position: relative;
overflow: hidden
}
.grid img {
width: 285px;
float: left;
position: relative
}
.grid .text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.grid .text:hover {
opacity: 1
}
.grid .no-text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-ms-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in
}
.grid .no-text:hover {
opacity: 1
}
.grid p {
font-size: 18px;
text-align: center;
line-height: 26px;
margin-top: 40px;
font-weight: 700;
letter-spacing: 1px;
color: #fff
}
.grid p.description {
font-size: 12px;
width: 300px;
margin-top: 20px;
text-align: center;
line-height: 20px;
font-weight: 400;
color: #fff;
position: relative;
width: 100%
}
.clear {
clear: both
}
.partners {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background: url(../img/background/partners.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.partners .opacity {
position: absolute;
width: 100%;
height: 400px
}
.partners .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.partners h2 {
color: #fff;
letter-spacing: 1px;
font-size: 32px;
font-weight: 300;
text-align: center
}
.partners .logo {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center
}
.partners .logo img {
opacity: .5;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.partners .logo img:hover {
opacity: 1
}
.contact {
position: relative;
width: 100%;
background: #fff;
z-index: 10;
overflow: hidden;
margin-bottom: 300px
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px
}
.contact h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.contact hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.contact .content .form {
width: 455px;
overflow: hidden;
height: auto;
float: left
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px
}
.contact .content .contact-text {
width: 405px;
overflow: hidden;
height: auto;
font-weight: 300;
float: left;
padding-left: 40px;
color: #000;
font-size: 14px;
line-height: 26px
}
strong {
font-weight: 700
}
input {
width: 180px;
height: 40px;
background: #f8f7f7;
border-top: 1px solid #333;
border-bottom: 0;
border-left: 0;
border-right: 0;
color: #333;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
input:focus {
background: #f4f4f4
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #333;
border-bottom: 0;
line-height: 20px;
border-left: 0;
border-right: 0;
background: #f8f7f7;
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
textarea:focus {
background: #f4f4f4
}
input.submit {
width: 100px;
height: 34px;
float: right;
margin: 20px 10px 0 0;
border: 0;
font-weight: 700;
text-align: right;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #2b388f
}
.footer .logo {
position: relative;
width: 58px;
height: 58px;
margin: 0 auto;
padding-top: 50px
}
.footer .menu-footer {
width: 80%;
text-align: center;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
position: relative
}
.footer .menu-footer a {
line-height: 46px;
padding: 10px;
color: #a4a4a4;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.footer .menu-footer a:hover {
color: #2b388f
}
.footer .copyright {
width: 80%;
position: relative;
font-weight: 300;
margin: 0 auto;
padding: 30px 0 50px;
text-align: center;
font-size: 14px;
line-height: 36px;
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="preloader" id="preloader" style="display: none;">
<div class="item">
<img src="img/loading.gif">
</div>
</div>
<div class="container">
<section class="start-page parallax-background" id="home" style="background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<div class="text">
<div class="logo"><img style="width: 100%" src="img/logo.png"></div>
<h1>Lorem Ipsum</h1>
<hr>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<a href="#about-us">
<div class="read-more">Read more</div>
</a>
</div>
<div class="arrow-down"></div>
</div>
</section>
<section class="menu-media">
<div class="menu-content">
<div class="logo">Company Name</div>
<div class="icon">
<a href="#"><img src="img/icons/menu-media.png"></a>
</div>
</div>
</section>
<ul class="menu-click">
<a href="#home">
<li href="#home">HOME</li>
</a>
<a href="#about-us">
<li href="#about-us">ABOUT US</li>
</a>
<a href="#portfolio">
<li href="#portfolio">SERVICES</li>
</a>
<a href="#contact">
<li href="#contact">CONTACT</li>
</a>
</ul>
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 61px;">
<section class="menu">
<div class="menu-content">
<div class="logo">Company Name</div>
<ul id="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#portfolio">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</section>
</div>
<section class="about-us" id="about-us">
<div class="content">
<h1>ABOUT US</h1>
<hr>
<p class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="column-one">
<div class="circle-one"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-two">
<div class="circle-two"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-three">
<div class="circle-three"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</section>
<div class="clear"></div>
<section class="portfolio" id="portfolio">
<div class="portfolio-margin">
<h1>SERVICES</h1>
<hr>
<ul class="grid" style="position: relative; height: 1229.17px;">
<li style="position: absolute; left: 0px; top: 0px;">
<a href="#">
<img src="img/portfolio/1.png" alt="EVENT HOSTING">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">From event planning to managing custom events for our customers and providing best services timely and efficiently with our skilled and experienced team.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 204px;">
<a href="#">
<img src="img/portfolio/4.png" alt="STUDENT SERVICES">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Our student recruiting strategy includes a multi-channel approach and a strong agent network on the ground in the target market. Our dedicated team provides students and recruiters/agents with extensive support. Our online marketing builds
brand presence all over.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 410px;">
<a href="#">
<img src="img/portfolio/2.png" alt="LINKUP">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 614px;">
<a href="#">
<img src="img/portfolio/3.png" alt="SOFTWARE">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 820px;">
<a href="#">
<img src="img/portfolio/5.png" alt="CONSULTANCY">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 1024px;">
<a href="#">
<img src="img/portfolio/6.png" alt="LOCAL REPRESENTATION">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<div class="clear"></div>
<section class="partners parallax-background-partners" id="partners" style="display: none; background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<h2>OUR PARTNERS</h2>
<div class="logo">
<a href="#"><img src="img/logos/alex1.png"></a>
<a href="#"><img src="img/logos/archiq.png"></a>
<a href="#"><img src="img/logos/thomsoon.png"></a>
<a href="#"><img src="img/logos/alex2.png"></a>
</div>
</div>
</section>
<div>
<section class="contact" id="contact">
<h1>Contact</h1>
<hr>
<div class="content">
<div class="form">
<form method="post" action="mail.php" name="contact">
<div class="column">
YOUR NAME<br><br>
<input name="name" id="name" value="">
</div>
<div class="column-2">
YOUR E-MAIL<br><br>
<input name="email" id="email" value="">
</div>
<div class="column-3">
MESSAGE<br><br>
<textarea id="message" name="message"></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="SEND"></span>
</div>
</form>
</div>
<div class="contact-text">
EMAIL: @@<br> PHONE: +1234<br><br>
<h2><strong>SOCIAL</strong></h2>
Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum
</div>
</div>
</section>
</div>
<div class="clear"></div>
<div>
<section class="footer">
<div class="logo"><img style="width: 100%" src="img/logo-footer.png"></div>
<div class="copyright">© 2018. All Rights Reserved</div>
</section>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: 'li'
});
});
});
</script>
<script src="js/jquery.parallax.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>javascript html css
google-chrome javascript html css
google-chrome asked Nov 21 '18 at 11:40
Blue Fiend
3519
asked Nov 21 '18 at 11:40
Blue Fiend
3519
asked Nov 21 '18 at 11:40
Blue Fiend
3519
asked Nov 21 '18 at 11:40
Blue Fiend
3519
asked Nov 21 '18 at 11:40
Blue Fiend
3519
3519
Mobile Chrome has known issues with scrolling because it hides the top bar when you start scrolling down a page.
– Chris G
Nov 21 '18 at 11:43
@ChrisG Any workaround or fix to that?
– Blue Fiend
Nov 21 '18 at 11:44
Could be crbug.com/898757, try a newer version of of Chrome to see.
– Josh Lee
Nov 21 '18 at 17:04
add a comment |
Mobile Chrome has known issues with scrolling because it hides the top bar when you start scrolling down a page.
– Chris G
Nov 21 '18 at 11:43
@ChrisG Any workaround or fix to that?
– Blue Fiend
Nov 21 '18 at 11:44
Could be crbug.com/898757, try a newer version of of Chrome to see.
– Josh Lee
Nov 21 '18 at 17:04
Mobile Chrome has known issues with scrolling because it hides the top bar when you start scrolling down a page.
– Chris G
Nov 21 '18 at 11:43
Mobile Chrome has known issues with scrolling because it hides the top bar when you start scrolling down a page.
– Chris G
Nov 21 '18 at 11:43
@ChrisG Any workaround or fix to that?
– Blue Fiend
Nov 21 '18 at 11:44
@ChrisG Any workaround or fix to that?
– Blue Fiend
Nov 21 '18 at 11:44
Could be crbug.com/898757, try a newer version of of Chrome to see.
– Josh Lee
Nov 21 '18 at 17:04
Could be crbug.com/898757, try a newer version of of Chrome to see.
– Josh Lee
Nov 21 '18 at 17:04
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411286%2fwhat-is-causing-this-glitch-in-scrolling-in-chrome-details-in-description%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411286%2fwhat-is-causing-this-glitch-in-scrolling-in-chrome-details-in-description%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Mobile Chrome has known issues with scrolling because it hides the top bar when you start scrolling down a page.
– Chris G
Nov 21 '18 at 11:43
@ChrisG Any workaround or fix to that?
– Blue Fiend
Nov 21 '18 at 11:44
Could be crbug.com/898757, try a newer version of of Chrome to see.
– Josh Lee
Nov 21 '18 at 17:04