<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Danny Tran - Photographer & Developer</title>
    <style>
/*
Dev1 Site
*/

body {
    margin: 0;
    float: center;
    font-family: sans-serif;
}

li {
    list-style-type: none;
    margin-bottom: 20px;
    text-align: left;
}

a {
    text-decoration: none;
    color: #404040;
    text-align: center;
}

.navigation {
    padding: 50px;
    background-color: #f2f2f2;
    max-width: 250px;
    text-align: center;
    height: 2000px;
    position: fixed;
}

.name {
    border: 4px solid  #404040;
    padding: 25px;
    color:  #404040;
    border-radius: 4px;
}

.header {
    background-image: url("bg.jpg");
    width: 100%;
    height: 600px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.phone-num {
    margin-right: 25px;
}

.chicago {
    margin-left: 200px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.social-icon {
    height: 32px;
    width: 32px;
}

.social-media {
    margin-top: 50px;
}

.why {
    height: 250px;
    width: 250px;
}

.about {
    margin-left: 625px;
}

.info {
    margin-bottom: 100px;
}
    </style>
</head>
<body>
<!-- Dev1 Site -->
    <div class="navigation">
        <h2 class="name">Company</h2>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Company</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="social-media">
            <ul>
                <li><a href="http://facebook.com/"><img src="facebook.png" class="social-icon"></a></li>
                <li><a href="http://twitter.com/"><img src="twitter.png" class="social-icon"></a></li>
                <li><a href="http://instagram.com/"><img src="instagram.png" class="social-icon"></a></li>
            </ul>
        </div>
    </div>
    <div class="header">
    </div>
    <div class="phone-num">
        <h3 style="text-align: right;">(555) 555-5555</h3>
    </div>
    <div class="chicago">
        <h1 style="text-align: center;">a chicago based company</h1>
    </div>
    <div class="about">
        <img src="chat.png" class="why">
        <h3>Live Chat</h3>
        <p class="info">We have excellent live chat.</p>
        <img src="secure.png" class="why">
        <h3>Secure</h3>
        <p class="info">We protect what matters most.</p>
        <img src="growth.png" class="why">
        <h3>Grow</h3>
        <p class="info">We have proven groth with our coustomers.</p>


    </div>
</body>
</html>