<!DOCTYPE html>
<html>
  <head>
	<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
  
    <div class="header">
        <div class="container">
            <img src="http://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg">
            <form class="form-inline pull-right" role="form">
                <div class="form-group">
                    <div class="input-group">
                        <label class="sr-only" for="input-search">Search</label>
                        <input type="search" class="form-control" id="input-search" placeholder="Search NewsRoom">
                    </div>
                </div>
                <button type="submit" class="btn btn-default">Search</button>
            </form>
        </div>
    </div>
    
    <div class="nav">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a href="#" class="selected">Top Stories</a></li>
                <li><a href="#">World</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Entertainment</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Health</a></li>
            </ul>
        </div>
    </div>
    
    <div class="main">
        <div class="container">
            <div class="col-md-6">
            <p class="date">November 7, 2014</date></p>
            <h1>Introducing</h1> <br>
            <h1>Bass</h1>
            <!--<h1><span>Introducing Bass</span></h1>-->
            <p>A new app by the creators of Shutterbugg that lets you enjoy your favorite music everywhere you go.</p>
            </div>
        </div>
    </div>
    
    <div class="supporting">
        <div class="container">
            <div class="row">
                <div class="col-md-8 latest">
                    <h1>Latest News</h1>
                    <p>November 5, 2014</p>
                    <h2>MOVE Launches in London</h2>
                    <p>November 4, 2014</p>
                    <h2>Introducing Excursion</h2>
                    <p>November 2, 2014</p>
                    <h2>Improvements to Shutterbugg Arrive</h2>
                </div>
                <div class="col-md-4 upcoming">
                    <h1>Upcoming Events</h1>
                    <p>November 8-12, 2014</p>
                    <h2>Innovation Cloud 2014</h2>
                    <p>November 21, 2014</p>
                    <h2>LL Retrospective</h2>
                    <p>December 5, 2014</p>
                    <h2>M.O.N.E.Y. Launch Event</h2>
                </div>
            </div>

            <div class="banner">
                <div class="row">
                    <img src="http://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg">
                </div>
            </div>
            
        </div>
    </div>
    

    <div class="footer">
        <div class="container">
            <ul class="pull-left">
                <li><a href="#">About</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Send Feedback</a></li>
            </ul>
            <p class="pull-right">&copy; 2014 Newsroom</p>
        </div>
    </div>

  </body>
</html>
html, body {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

body {
    background-color: #F2F2F2;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

.container {
    padding: 0;
    width: 1000px;
}

/* Header */

.header {
    background-color: black;
    padding: 20px 0;
}

.header img {
    width: 100px;
}

input[type=search] {
    background-color: #000;
    border: 0;
    border-bottom: 2px solid #fff;
    border-radius: 0;
    margin-right: 5px;
}

button[type=submit] {
    background-color: #000;
    border: 0;
    border-bottom: 2px solid #1A77FF;
    border-radius: 0;
    color: #fff;
}

/*  Nav bar  */

.nav {
    background-color: #152230;
}

.nav a {
    color: #fff;
}

.nav li:hover a,
.nav a:active  {
    background-color: #1A77FF;
    color: #fff;
}

/*  Main  */

.main {
    background: url("http://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg") no-repeat center center;
    background-size: cover;
    height: 500px;
}


.main p {
    font-size: 20px;
    font-weight: 300;
    padding-top: 20px;
}

.main .date {
    font-size: 18px;
}

.main h1,
.main span {
    border-bottom: 4px solid #1A77FF;
    /*text-decoration: underline;*/
    /*text-decoration-color: #1a77ff;*/
    display: inline-block;
    font-size: 48px;
    margin: 0;
}

/*  Supporting  */

.supporting .container {
    margin: 50px;
}
.supporting p {
    font-size: 16px;
}

.supporting h1 {
    font-size: 20px;
    padding-bottom: 20px;
}

.supporting h2 {
    border-bottom: 4px solid #1A77Ff;
    display: inline-block;
    font-size: 18px;
    margin-top: 0;
}

.latest {
    background-color: #fff;
    color: #000;
}

.upcoming {
    background-color: #000;
}

/*  Banner  */

.banner {
    margin-top: 30px;
}

.banner img {
    width: 100%;
}

/*  Footer  */
.footer {
    background-color: #000;
    padding: 50px;
}

.footer ul {
    list-style: none;

}

.footer li {
    display: inline;
}

.footer li a {
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
}

.footer li:hover a {
    background-color: #1A77Ff;
    border-radius: 4px;
    text-decoration: none;
}

Browse more Codebits

Made in NYC © 2018 Codecademy