<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<body>
<nav id="header" class="navbar navbar-fixed-top" style="background: rgba(31, 29, 29, 0.54);height: 60px;" >
<div id="header-container" class="container navbar-container" style="margin: 0;">
<div class="navbar-header"">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Навигация</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand" class="navbar-brand" href="Vestnik2.0.html" style="color: white; padding-bottom: 3%!important"><h4><b>Company</b></h4></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="transition: all 0.3s ease;">
<li></li>
<li></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="wrapper">
<div class="row mainHeading" style="background: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/itCjTBE/social-communication-icons-on-grey-wavy-animated-background-video-graphic-design-hd-1920x1080_enncwo2sl__F0011.png);background-size: cover; background-repeat: no-repeat; height: 600px; margin: 0!important;">
<div class="col-lg-12">
<h1 style="margin-top: 17%;padding: 10px;background: rgba(31, 29, 29, 0.54); color: white; text-align: center;">PROJECT NAME</h1>
</div>
</div>
<div class="container" ">
<div class="row">
<div class="col-lg-12">
<div class="line">
</div>
</div>
<div class="col-lg-12 pulse wow">
<h2 style="color: #0e182d!important;text-align: center;" >The project Goal</h2>
<hr>
<h4 style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse</h4> <br>
<hr>
<div class="line">
</div>
<h3 style="color: #0e182d; text-align: center;" class="pulse wow">Results</h3>
<hr>
<h4 style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</h4>
<h4 style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</h4>
<hr>
</div>
</div>
</div>
<div class="row pulse wow" style="color: #0e182d">
<div class="col-lg-12">
<h3 style="padding-top: 2.5%;text-align: center;">CURRENT PROGRESS</h3>
</div>
<div class="col-md-12">
<h3 style="text-align: center;">45%</h3>
<div id="seconds" class="seconds">
<div id="bar" class="bar animating"></div>
</div>
</div>
</div>
<br>
<h3 style="padding-top: 2.5%;text-align: center;" class="pulse wow">PROJECT TEAM</h3>
<div class="row zoomIn wow" style="background:#0e182d; color: white; " >
<div class="col-xs-4 team">
<div class="row">
<div class="col-xs-6" style="padding-left: 15px;">
<h4 style='padding-top: 5%;padding-left: 20px;'>TEAM LEADER</h4>
<p><b>John Malhof</b></p>
<br>
<p>Sr. Web Developer</p>
<p>IT Dept.</p>
<br>
<p><b>email:</b> kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6"><img src="images/profile1.jpg" style="height: 100%; width: 100%; padding:10px; "></div>
</div>
<div class="row">
<div >
</div>
</div>
</div>
<div class="col-xs-4 team">
<div class="row">
<div class="col-xs-6" style="padding-left: 15px;">
<h4 style='padding-top: 5%;padding-left: 20px;'>TEAM LEADER</h4>
<p><b>John Malhof</b></p>
<br>
<p>Sr. Web Developer</p>
<p>IT Dept.</p>
<br>
<p><b>email:</b> kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6"><img src="images/profile1.jpg" style="height: 100%; width: 100%; padding:10px; "></div>
</div>
<div class="row">
<div >
</div>
</div>
</div>
<div class="col-xs-4 team">
<div class="row">
<div class="col-xs-6" style="padding-left: 15px;">
<h4 style='padding-top: 5%;padding-left: 20px;'>TEAM LEADER</h4>
<p><b>John Malhof</b></p>
<br>
<p>Sr. Web Developer</p>
<p>IT Dept.</p>
<br>
<p><b>email:</b> kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6"><img src="images/profile1.jpg" style="height: 100%; width: 100%; padding:10px; "></div>
</div>
</div>
<div class="col-xs-4 team">
<div class="row">
<div class="col-xs-6" style="padding-left: 15px;">
<h4 style='padding-top: 5%;padding-left: 20px;'>TEAM LEADER</h4>
<p><b>John Malhof</b></p>
<br>
<p>Sr. Web Developer</p>
<p>IT Dept.</p>
<br>
<p><b>email:</b> kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6"><img src="images/profile1.jpg" style="height: 100%; width: 100%; padding:10px; "></div>
</div>
</div>
<div class="col-xs-4 team">
<div class="row">
<div class="col-xs-6" style="padding-left: 15px;">
<h4 style='padding-top: 5%;padding-left: 20px;'>TEAM LEADER</h4>
<p><b>John Malhof</b></p>
<br>
<p>Sr. Web Developer</p>
<p>IT Dept.</p>
<br>
<p><b>email:</b> kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6"><img src="images/profile1.jpg" style="height: 100%; width: 100%; padding:10px; "></div>
</div>
</div>
<div class="col-xs-4 team">
<div class="row">
<div class="col-xs-6" style="padding-left: 15px;">
<h4 style='padding-top: 5%;padding-left: 20px;'>TEAM LEADER</h4>
<p><b>John Malhof</b></p>
<br>
<p>Sr. Web Developer</p>
<p>IT Dept.</p>
<br>
<p><b>email:</b> kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6"><img src="images/profile1.jpg" style="height: 100%; width: 100%; padding:10px; "></div>
</div>
</div>
</div>
<br>
<div class="row pulse wow">
<h3 style="text-align: center;">We're looking for</h3>
<div class="col-xs-4" style="border: 1px solid #0e182d">
<div style="padding: 10px">
<h4>Position: <span style="font-size: 12px;">Front-end dev.</span> </h4>
<h4>Duties: <span style="font-size: 12px;">UI & UX</span></h4>
<p>Information: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<hr>
<div class="row">
<div class="col-xs-6">
<p>Contact us:</p>
<p><b>email: </b>kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6">
<a href="mailto:kusakinag@bsc.sibur.ru?subject=Заявка на новую позицию"><button class="btn btn-default" style="background:#0e182d!important; color: white!important; float: right; ">Подать заявку</button></a>
</div>
</div>
</div>
</div>
<div class="col-xs-4" style="border: 1px solid #0e182d">
<div style="padding: 10px">
<h4>Position: <span style="font-size: 12px;">Front-end dev.</span> </h4>
<h4>Duties: <span style="font-size: 12px;">UI & UX</span></h4>
<p>Information: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<hr>
<div class="row">
<div class="col-xs-6">
<p>Contact us:</p>
<p><b>email: </b>kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6">
<a href="mailto:kusakinag@bsc.sibur.ru?subject=Заявка на новую позицию"><button class="btn btn-default" style="background:#0e182d!important; color: white!important; float: right; ">Подать заявку</button></a>
</div>
</div>
</div>
</div>
<div class="col-xs-4" style="border: 1px solid #0e182d">
<div style="padding: 10px">
<h4>Position: <span style="font-size: 12px;">Front-end dev.</span> </h4>
<h4>Duties: <span style="font-size: 12px;">UI & UX</span></h4>
<p>Information: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<hr>
<div class="row">
<div class="col-xs-6">
<p>Contact us:</p>
<p><b>email: </b>kusakinag@bsc.sibur.ru</p>
<p><b>Тел:</b> +78314636400,1305</p>
</div>
<div class="col-xs-6">
<a href="mailto:kusakinag@bsc.sibur.ru?subject=Заявка на новую позицию"><button class="btn btn-default" style="background:#0e182d!important; color: white!important; float: right; ">Подать заявку</button></a>
</div>
</div>
</div>
</div>
</div>
<div class="line">
</div>
<div class="row pulse wow">
<h3 style="padding-top: 2.5%;text-align: center;">FEEDBACK</h3>
<hr>
<div class="col-lg-12" style="padding:3%;">
<input type="text" name="" style="height: 100px!important;width: 100%;" placeholder="Place to comment on">
</div>
<div class="col-lg-12" style="padding-left: 85%;">
<input type="submit" class="btn btn-default" name="" value="Add comment" style="margin-top: 1%;">
</div>
</div>
<div class="row" style="color: #0e182d; padding-top: 2.5%;">
<div class="col-xs-12" style="border:1px solid #0e182d ; margin-top: 1%">
<div class="row" style="padding:15px; ">
<div class="col-xs-1" style="border: 1px solid #0e182d;height:80px!important;"></div>
<div class="col-xs-10" style="padding-left: 5px;">
<h4>Megan Smith</h4>
<p style="font-size: 10px;">11 september 2017 11:33</p>
<p>Text message </p>
</div>
</div>
</div>
<div class="col-xs-12" style="border:1px solid #0e182d ; margin-top: 1%">
<div class="row" style="padding:15px; ">
<div class="col-xs-1" style="border: 1px solid #0e182d;height:80px!important;"></div>
<div class="col-xs-10" style="padding-left: 5px;">
<h4>Megan Smith</h4>
<p style="font-size: 10px;">11 september 2017 11:33</p>
<p>Text message </p>
</div>
</div>
</div>
<div class="col-xs-12" style="border:1px solid #0e182d ; margin-top: 1%">
<div class="row" style="padding:15px; ">
<div class="col-xs-1" style="border: 1px solid #0e182d;height:80px!important;"></div>
<div class="col-xs-10" style="padding-left: 5px;">
<h4>Megan Smith</h4>
<p style="font-size: 10px;">11 september 2017 11:33</p>
<p>Text message </p>
</div>
</div>
</div>
<div class="col-xs-12" style="border:1px solid #0e182d ; margin-top: 1%">
<div class="row" style="padding:15px; ">
<div class="col-xs-1" style="border: 1px solid #0e182d;height:80px!important;"></div>
<div class="col-xs-10" style="padding-left: 5px;">
<h4>Megan Smith</h4>
<p style="font-size: 10px;">11 september 2017 11:33</p>
<p>Text message </p>
</div>
</div>
</div>
<hr>
</div>
</div>
</div>
<a href="#" class="go-top" style="color: white!important;"><span class="glyphicon glyphicon-chevron-up"></span></a>
</body>
*:not(span) {
font-family: 'Exo 2', sans-serif!important;
}
.nav.nav-justified > li > a { position: relative; }
.nav.nav-justified > li > a:hover,
.nav.nav-justified > li > a:focus { background-color: transparent; }
.nav.nav-justified > li > a > .quote {
position: absolute;
right: 20px;
bottom: 0;
opacity: 0;
width: 30px;
height: 30px;
padding: 5px;
background-color: #13c0ba;
border-radius: 15px;
color: #fff;
}
.nav.nav-justified > li.active > a > .quote { opacity: 1; }
.nav.nav-justified > li > a > img { box-shadow: 0 0 0 5px silver; }
.nav.nav-justified > li > a > img {
max-width: 100%;
width: 100%;
opacity: .3;
-webkit-transform: scale(.8,.8);
transform: scale(.8,.8);
-webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img {
opacity: 1;
-webkit-transform: none;
transform: none;
-webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.clear:after {
content: "";
display: block;
clear: both;
}
.btnStep{
width: 30px;
height: 30px;
border-radius: 15px!important;
padding-right: 10px;
border:1px solid grey!important;
}
#stepbtn{
width: 15px;
height: 200px;
border-right: 1px solid grey;
padding-right: 10px!important;
}
a:visited{
color: white!important;
}
.mainHeading{
background: #008c95;
color: white;
margin-top: 5%;
height: 70px;
opacity: 0.8;
}
.searchTab td{
border:1px solid #008c95;
width: 100%;
}
.main-sec{
height: 100%;
padding-top: 130px;
padding-left: 20px;
transition: all 0.5s linear;
}
#colMenu{
width: 130px;
height: 90px;
color: black!important;
background: #f6f6f6!important;
padding-bottom:90px;
margin-bottom: 20px;
z-index: 9!important;
}
.turner{
background: transparent!important;
border: 1px solid white!important;
color: white!important;
}
.turner:hover{
background: white!important;
color: black!important;
}
.col-xs-4{
background-size: cover!important;
background-position: right bottom!important;
background-repeat: no-repeat!important;
transition: all 0.2s linear;
border:2px solid white;
}
.newHeader{
color: white;
padding:2%;
}
.scale:hover{
transform: scale(0.9);
}
.scale{
height: 320px!important;
}
p{
padding-right: 10px!important;
}
.line{
height: 200px;
border-right: 1px solid #0e182d;
padding-left:50%;
width: 1px;
margin-top: 20px;
}
.seconds {
background-color: #76c5c8;
height: 3px;
width: 600px;
margin: auto;
position: relative;
}
.bar {
background: #0e182d;
height: 3px;
width: 45%;
}
.animating {
-webkit-animation: progress 60s infinite linear;
}
.go-top {
left:1em;
bottom:2em;
color:#0e182d;
text-decoration:none;
background:#0e182d;
border-radius:5px;
border:1px solid white;
position:fixed;
width: 60px;
height: 60px;
font-size: 30px;
padding-top:10px;
padding-left: 16px;
}
.topad{
padding-left:10px!important;
padding-right:10px!important;
}
#navpills:hover{
text-decoration: underline;
}
$(document).ready(function() {
$('.go-top').hide(0)
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(300);
}
});
$('.go-top').click(function() {
event.preventDefault();
$('html , body').animate({scrollTop: 0}, 1000);
});
})
