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>
        <title>Ollie - Bike Sharing!!</title>
        <meta charset="UTF-8">
        <link href="main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="wrapper">
        <div class="head">
            <div class="header">
            <div style="clear:both;"></div>
                <h1>Ollie</h1>
            </div>
            <div class="navbar">
                <nav>
                    <ul>
                        <li>Sign Up</li>
                        <li>Search Bikes</li>
                        <li>Reserve a Bike</li>
                        <li>About Us</li>
                    </ul>
                </nav>
            </div>
        </div>
            <div class="title">
                <h2>Ollie Bike Sharing!!</h2>
                <h4>Share your wheels with the world.</h3>
            </div>
            <div class="content">
                <section class="para">
                    <p>Need a set of wheels while you're in town? Use Ollie
                    to pair your perfect vaction with an stylish, affordable
                    bike rental.</p> 
                    <p>Here is a <a href="#">list</a> of cities where
                    you can find us.</p>
                </section>
                <section class="vdo">
                    <video width="320" height="240" controls>
                        <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
                    </video>
                </section>
            </div><!-- content -->
            <div class="footer">
                <footer>
                    <p>&copy Ollie 2016</p>
                </footer>
            </div>
        </div><!-- wrapper -->
    </body>
</html>
 
body{
    background-color:#e6e6e6;
    margin:0;
    padding: 0;
    font-family:Arial;
}
.wrapper{
    max-width: 1020px;
    margin:0 auto;
}
.head{
    border: 2px solid black;
    border-radius: 7px;
}
.head:after{
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;    
}
.header{
    float: left;
    margin-left: 10px;
}
nav{
    float:right ;
}
nav ul li{
    display: inline;
    border: 1px solid pink;
    padding: 4px;
    border-radius:3px;
    margin-right: 10px;
}
.title{
    clear:both;
    text-align:center;
}
.title h2{
    font-size: 36px;
}
.title h4{
​
}
.para{
    float: left;
    max-width: 50%;
}
.vdo{
    float: right;
}
footer{
    clear: both;
    float: right;
}
Output 300px

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