Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile -->
        <title>Simplified - High Quality - Images</title>
        
        <!-- CSS links -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/custom.css">
        <link rel="stylesheet" type="text/css" href="css/animation.css">
        <!----> 
        <!-- Javascript links -->
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <!---->
        <!-- some specific CSS style for this page only -->
        <style>
            html, body { 
                height: 100%;
                width: 100%;
            }
        </style>       
        <!---->
        
    </head>
    
    <body id="demo">
        <!-- Header/Navigation Bar ----------------------->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"><img src="img/logo_header.png" width="402" height="88" alt=""/></a>
                </div>
        </nav>
        
        <!-- Body ---------------------------------------->    
        <section id="demo_section">
        
            <!---------------- Left hand side texture ------------>
            <div class="texture"></div>
            <!---------------------------------------------------->
            
            <div id="demo_body" class="container">
                <div class="row col-lg-5">
                    <div class="row content_box">
                        <img class="img-cen img-circle img-responsive" src="img/1006.jpg" width="220" height="220" alt=""/>
                        <p class="p-align">
                            <br>
                            Suspendisse tincidunt efficitur hendrerit. Maecenas vel nibh quis nunc molestie sodales non at felis. Vestibulum urna ligula, dictum sed ex ut, commodo bibendum est. Pellentesque fringilla justo eget nunc fringilla, id facilisis ipsum blandit.
                        </p>
                    </div>
                </div>
                <div class="row col-lg-7">
                    <div id="demo_video">
                        <video width="82%" controls poster="video/Naughty Boy-screenshot.jpg">
                            <source src="video/Naughty Boy.mp4" type="video/mp4">
                            <source src="video/Naughty Boy.mp4" type="video/ogg">
                            Your browser does not support HTML5 video.
                        </video>
                    </div>
                </div>
            </div>
                    <!-- End of right-hand side panel --------->
        </section>
    </body>
</html>
​
​
 
zbody {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 2em;
}
​
.full-page {
    width: 100%;
    position: relative;
    display: table;
    float: inherit;
    min-height: 1080px;
​
}
​
.mainnav {
    padding-top: 65px;
    width: 40%;
    text-align: center;
​
}
.signup-btn {
    margin-top: 350px;
    margin-right: 150px;
    text-align: center;
    vertical-align: middle;
}
.mainnav .glyphicon   {
    font-size: 1.8em;
    padding-bottom: 15px;
}
#page1 .custom-body {
    padding-top: 150px;
}
#page1 {
    background-color: #2c3e50;
    color: #FFFFFF;
    text-align: justify;
}
#page2 .p-align {
    text-align: justify;
    margin: 0 45px;
}
.img-cen  {
    margin: auto;
}
#page2  h2 {
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 15px;
    color: #e74c3c;
    font-weight: bold;
}
#page2 {
    padding-top: 150px;
    background-color: #eee;
}
.mainnav .active   {
    text-decoration: underline;
}
footer  {
    background-color: #2c3e50;
    display: table-footer-group;
    height: 100px;
}
​
#logo_footer{
    padding-top : 20px;
    padding-bottom : 20px;
    float: left;
}
#logo_header{
    padding-top : 20px;
    padding-bottom : 20px;
}
​
#copyright{
    color: #FFFFFF;
    margin: 25px;
    float: left;    
}
​
.custom_header{
    height: 150px;
    color: #FFFFFF;
}
.full-width {
    width: 100%;
    background-color: #2c3e50;
    display: table;
}
​
body{
    background-color:#eee;  
}
#tabs li {
    display: inline;
}
.form-group {
    width: 80%;
}
.nav-tabs{
    margin-top:100px;
}
.nav-tabs li.active a {
    border: none;
    background-color: #e74c3c;
    color: #FFFFFF;
    border-radius:20px 20px 0px 0px;
}
.nav-tabs.nav-justified li a {
    border-radius:20px 20px 0px 0px;
}
.nav-tabs li a{
    background-color:#BBBBBB;
    border:none;
    margin:auto;    
    color:#FFFFFF;
}
.tab-pane{
    background-color:#FFFFFF;
    height:500px;   
    padding-top:40px;
}
​
#submit_btn {
    width:80%;
    margin-top:50px;
}
​
.nav-tabs.nav-justified .active a:hover {
    background-color: #f1c40f;
    font-weight:bolder;
}
​
.nav-tabs.nav-justified a:hover{
    background-color: #DCDCDC;
    font-weight:bolder;
}
.custom-btn {
    border-radius:0;
}
.navbar-brand {
    margin-top: 15px;
}
.navbar.navbar-default {
    height: 150px;
    background-color: #2C3E50;
    border-bottom-color: #7C7C7C;
    border-style: none none solid;
    border-bottom-width: medium;
}
.navbar {
    border-radius: 0;
}
#demo .navbar {
    border-radius: 0;
    padding-left: 25px;
    margin-bottom:0;
    position:fixed;
}
#pic1 {
    margin-top: 100px;
}
.btn-style {
    border:0;
    -moz-box-shadow:inset 0px -3px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:inset 0px -3px 0px rgba(0, 0, 0, 0.1);
    box-shadow:inset 0px -3px 0px rgba(0, 0, 0, 0.1);
}
#demo_body {
    width: 100%;
    height: 100%;
}
#demo_body .row.col-lg-5, #demo_body .col-lg-7 {
    float: none;
    display: inline-block;
    vertical-align: middle;
    z-index: 25;
    height: 100%;
}
#demo_body .col-lg-7{
    padding-left:200px;
}
#demo .row.content_box {
    width: 50%;
    margin: 25px auto;
    text-align: justify;
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
#demo section .texture {
    height: 100%;
    width: 40%;
    background-color: #ecf0f1;
    position: fixed;
    z-index: 5;
}
#demo{
    background-color:#FFFFFF;
}
#demo #demo_section {
    height:100%;
}
​
#demo #demo_video{
    position:relative;
    top:50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);    
}
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers