index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="favicon.ico">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Google</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/home/lotanna/odin_on_rails/google-homepage/style.css" rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>

<div class="main-contaner">
    <div class="header clearfix">
        <nav>
            <ul>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Image</a></li>
                <li><a href="#"><img src="image/icon.png"></a></li>
                <li><a class="sign-in" href="#">Sign In</a></li>
            </ul>
        </nav>
    </div><!--/header-->


    <div class="content clearfix">
        <div class="google-logo">
                <img src="image/download.png">
        </div><!--/google-log -->  
        
        <div class="search-bar">
            <form>
                    <input type="text" name="search" size="60" style="height: 40px;">
            </form>
                <br>
        </div><!--/search-bar-->    
  

        <div class="button-section">
                    <button class="btn btn-default" type="button">Google Search</button>
                    <button class="btn" type="button">I'm Feeling Lucky</button>
        </div>    
            
        </div><!--/buttion-section -->

        <div class="language-bar">
            <p>Google offered in: Hausa Igbo Èdè Yorùbá Pidgin</p>

        </div><!--/language-bar -->

    </div><!--/content -->

    <div class="footer">
    <div class="row">
        <nav style="float:left">
            <ul>
                <li><a href="#">Advertising</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
      
        <nav style="float:right">
            <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Setting</a></li>
            </ul>
        </nav>
    </div>    

    </div><!--/footer -->


</div><!--/main-contaner-->
    
</body>
</html>