3
\$\begingroup\$

I have coded a free .psd layout for the first time. I did not make it responive because I would like to know if the code is correct.

The layout's appearance in Firefox and Chrome seems to be ok (though in Firefox there's a bit of white space), but I know sometimes your code can be incorrect even if it looks good. I don't have Photoshop so I used GIMP - that's why some graphical items look worse than their originals.

html {
    font-size: 62.5%;
}

body {
    width: 1400px;
    margin: 0 auto;
    font-family: "Montserrat", sans-serif;
}

nav, header, main section, aside, footer {
    padding-right: 230px;
    padding-left: 230px;
}

body, ul, li, blockquote, p, h1, h2, h3, h4, h5, h6, .relax {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

p, .relax ul li, .opinion, aside ul li {
    font-family: "Roboto Slab", serif;
}

h1, h2, h3, h4, header p, .services p, .latest > p, .culture p, .clients p, .portfolio_btn, .learn_btn, .contact_btn {
    text-align: center;
}

h1, h2, h3, h4, h5, h6, #site_nav ul li, .portfolio_btn, .learn_btn, .contact_btn, .framework a {
    text-transform: uppercase;
}

#site_nav ul li a, .services p, .latest p, .culture p, .clients p, blockquote {
    color: #777;
}

h2, h3, #site_nav ul li a:hover, .portfolio_btn:hover, .learn_btn:hover, .framework a:hover {
    color: #222;
}

.portfolio_btn:hover, .learn_btn:hover, .contact_btn:hover {
    background-color: #fff;
}

.amp, .framework a, cite, .contact_btn:hover {
    color: #7cc576;
}

.portfolio_btn, .learn_btn, .next_project {
    background-color: #7cc576;
}

.portfolio_btn, .learn_btn, .contact_btn, .service img, .sprocket, .framework a, .social_media a {
    display: block;
}

.relax ul li, .latest, .framework ul li, .value_img, .contact_us ul li, .lposts ul li, .ltweets ul li, .social_media a {
    background-repeat: no-repeat;
}

.services, .latest, .culture {
    padding-top: 100px;
    padding-bottom: 100px;
}

#logo {
    padding-top: 40px;
    padding-bottom: 40px;
}

#site_nav ul {
    float: right;
    padding-top: 51px;
    list-style: none;
}

#site_nav ul li {
    float: left;
    padding-right: 35px;
    font-size: 1.4rem;
}

header {
    padding-top: 120px;
    padding-bottom: 120px;
    background-image: url("http://d-k.netai.net/img/header.jpg");
    background-position: 0px -250px;
    background-attachment: fixed;
}

h1 {
    font-size: 6rem;
    color: #fff;
}

header p {
    padding-top: 40px;
    font-size: 2rem;
    color: #ccc;
}

.portfolio_btn {
    width: 200px;
    height: 60px;
    margin: 60px auto 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    line-height: 60px;
    border-radius: 30px;
}

.services {
    overflow: auto;
}

h2 {
    font-size: 4rem;
}

.services > p {
    padding-top: 5px;
    font-size: 2rem;
}

.service {
    float: left;
    padding: 89px 28px 0;
}

.service:last-child {
    padding-right: 0;
}

.service img {
    padding-bottom: 37px;
    margin: auto;
}

h3 {
    font-size: 1.8rem;
}

.service p {
    padding-top: 19px;
    font-size: 1.4rem;
}

.sprocket {
    float: left;
    padding: 99px 0px 99px 235px;
    background-color: #e9e9e9;
}

.relax {
    float: left;
    padding: 88px 244px 100px 100px;
    background-image: url("http://d-k.netai.net/img/relax.jpg");
    background-position: 295px 0;
    background-attachment: fixed;
    font-size: 1.6rem;
    color: #ccc;
}

.relax h2 {
    margin-top: 0;
    color: #fff;
    text-align: left;
    line-height: 51px;
}

.relax p {
    padding-top: 31px;
    padding-bottom: 16px;
    line-height: 24px;
}

.relax ul li {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 52px;
    list-style: none;
    background-image: url("http://d-k.netai.net/img/check.png");
    background-position: 0 center;
    line-height: 32px;
}

.learn_btn {
    width: 168px;
    height: 60px;
    padding: 0;
    margin-top: 45px;
    margin-bottom: 0;
    font-weight: 700;
    color: #fff;
    line-height: 60px;
    border-radius: 30px;
}

.latest {
    clear: left;
    background-image: url("http://d-k.netai.net/img/tablet.png");
    background-position: 750px 264px;
}

.latest > p {
    padding-top: 5px;
    font-size: 2rem;
}

.framework {
    padding-top: 90px;
}

.framework h3 {
    padding-bottom: 14px;
    text-align: left;
}

.framework p {
    font-size: 1.6rem;
    line-height: 24px;
}

.framework ul {
    padding-top: 35px;
    list-style: none;
}

.framework ul li {
    height: 74px;
    padding-bottom: 15px;
    padding-left: 90px;
}

.framework ul li:first-child {
    background-image: url("http://d-k.netai.net/img/basket.png");
}

.framework ul li:nth-child(2) {
    background-image: url("http://d-k.netai.net/img/laptop.png");
}

.framework ul li:last-child {
    background-image: url("http://d-k.netai.net/img/lock.png");
}

.framework strong {
    font-size: 1.8rem;
}

.framework a {
    font-size: 1.6rem;
    font-weight: 700;
    padding-top: 25px;
}

.culture {
    background-color: #f9f9f9;
    overflow: auto;
}

.culture > p {
    padding-top: 5px;
    padding-bottom: 89px;
    font-size: 2rem;
}

.value {
    float: left;
    padding: 0 28px;
}

.value_img {
    width: 91px;
    height: 91px;
    margin: 0 auto 25px;
    border: 2px #777 solid;
    border-radius: 100%;
    background-position: center center;
}

.value_img:before {
    content: "";
    display: block;
    width: 170px;
    height: 2px;
    margin-top: 45px;
    margin-left: 114px;
    background-color: #777;
}

.lastvalue div:before {
    content: "";
    display: none;
}

.balance {
    background-image: url("http://d-k.netai.net/img/note.png");
}

.quality {
    background-image: url("http://d-k.netai.net/img/chart.png");
}

.excellence {
    background-image: url("http://d-k.netai.net/img/star.png");
}

.value p {
    padding-top: 20px;
    font-size: 1.4rem;
}

.clients {
    padding-top: 100px;
    padding-bottom: 75px;
}

.clients p {
    padding-top: 5px;
    font-size: 2rem;
}

.feedback {
    padding-top: 85px;
    overflow: auto;
}

.client_photo {
    float: left;
    width: 220px;
    height: 220px;
    background-color: #f9f9f9;
    border-radius: 100%;
}

.opinion {
    float: left;
    padding: 33px 51px 40px 45px;
    background-color: #f9f9f9;
}

.feedback div:first-child:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top: 103px;
    margin-left: 243px;
    border-style: solid;
    border-width: 11px 20px 11px 0;
    border-color: transparent #f9f9f9 transparent transparent;
}

.feedback div:nth-child(2) {
    margin-top: 29px;
    margin-left: 43px;
}

.feedback div:nth-child(3) {
    clear: left;
    margin-top: 64px;
    margin-right: 43px;
}

.feedback div:last-child {
    margin-top: 40px;
}

.feedback div:last-child:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top: 100px;
    margin-left: -43px;
    border-style: solid;
    border-width: 9.5px 0 9.5px 20px;
    border-color: transparent transparent transparent #f9f9f9;
}

blockquote {
    padding-bottom: 10px;
    font-size: 2.2rem;
    line-height: 33px;
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

cite {
    padding-left: 90px;
    font-size: 1.8rem;
    font-style: normal;
}

.next_project {
    padding-top: 70px;
    padding-bottom: 70px;
    color: #fff;
}

h4 {
    font-size: 4rem;
}

.contact_btn {
    margin: 30px auto 0px;
    width: 174px;
    height: 46px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 46px;
    border: 3px #fff solid;
    border-radius: 7px;
}

.companies, aside {
    padding-top: 60px;
    padding-bottom: 60px;
}

.companies a {
    padding-right: 40px;
}

.companies a:first-child {
    padding-left: 86px;
}

aside {
    background-color: #222;
    font-size: 1.6rem;
    color: #ececec;
    overflow: auto;
}

h5 {
    font-size: 1.9rem;
    color: #fff;
}

aside section {
    float: left;
}

aside ul {
    padding-top: 30px;
}

aside ul li {
    padding-left: 39px;
    margin-bottom: 19px;
    list-style: none;
}

aside a {
    color: #ececec;
}

.contact_us {
    padding-right: 107px;
}

.contact_us ul li:first-child {
    background-image: url("http://d-k.netai.net/img/place.png");
    line-height: 24px;
}

.contact_us ul li:nth-child(2) {
    background-image: url("http://d-k.netai.net/img/phone.png");
    line-height: 31px;
}

.contact_us ul li:last-child {
    background-image: url("http://d-k.netai.net/img/mail.png");
    line-height: 16px;
}

.contact_us ul li:nth-child(2), .contact_us ul li:last-child, .lposts ul li {
    background-position: 0 center;
}

.lposts {
    padding-right: 25px;
}

.lposts ul li:first-child, 
.lposts ul li:nth-child(3),
.lposts ul li:nth-child(4) {
    background-image: url("http://d-k.netai.net/img/news.png");
    line-height: 21px;
}

.lposts ul li:nth-child(2) {
    background-image: url("http://d-k.netai.net/img/image.png");
    line-height: 23px;
}

.lposts ul li:last-child {
    background-image: url("http://d-k.netai.net/img/play.png");
    line-height: 21px;
}

.ltweets ul li {
    background-image: url("http://d-k.netai.net/img/tweet.png");
    line-height: 22px;
}

.hashtag {
    font-weight: bold;
}

time {
    font-size: 1.3rem;
}

footer {
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 1.4rem;
    color: #555;
    overflow: auto;
}

footer a {
    color: #555;
}

.copyright {
    float: left;
    display: inline-block;
    padding-top: 8px;
}

.social_media {
    float: left;
    width: 200px;
    padding-left: 120px;
    margin: auto;
}

.social_media a {
    display: block;
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    width: 40px;
    height: 40px;
    background-color: #222;
    background-position: center center;
    border-radius: 100%;
}

.twitter {
    background-image: url("http://d-k.netai.net/img/twitter.png");
}

.twitter:hover {
    background-color: #00aced;
}

.facebook {
    background-image: url("http://d-k.netai.net/img/face.png");
}

.facebook:hover {
    background-color: #3b5998;
}

.pinterest {
    background-image: url("http://d-k.netai.net/img/pinterest.png");
}

.pinterest:hover {
    background-color: #cb2028;
}

.google {
    background-image: url("http://d-k.netai.net/img/google.png");
}

.google:hover {
    background-color: #da2713;
}
<!DOCTYPE html>
<html lang="pl">
    <head>
        <link href="style.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet" type="text/css">
        <meta charset="utf-8">
        <title>
            TreeHouse layout
        </title>
    </head>
    <body>
        <nav id="site_nav">
            <a href="index.html">
                <img id="logo" src="http://d-k.netai.net/img/logo.png" alt="TreeHouse">
            </a>
            <ul>
                <li>
                    <a href="index.html">
                        Home
                    </a>
                </li>
                <li>
                    <a href="http://onet.pl">
                        About
                    </a>
                </li>
                <li>
                    <a href="http://wp.pl">
                        Blog
                    </a>
                </li>
                <li>
                    <a href="http://o2.pl">
                        Portfolio
                    </a>
                </li>
                <li>
                    <a href="http://interia.pl">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
        <header>
            <h1>
                Creative digital<br>
                solutions
            </h1>
            <p>
                Nullam pretium enim et nisi faucibus vestibulum.
            </p>
            <a class="portfolio_btn" href="http://google.com">
                View portfolio
            </a>
        </header>
        <main>
            <section class="services">
                <h2>
                    Professional services
                </h2>
                <p>
                    Suspendisse a nunc pretium vestibulum sapien.
                </p>
                <div class="service_div">
                    <div class="service">
                        <img src="http://d-k.netai.net/img/heart.png" alt="Designs">
                        <h3>
                            Beautiful designs
                        </h3>
                        <p>
                            Fusce elementum augue vel tortor<br>
                            elementum ultrices. Donec et est porta,<br>
                            convallis lorem ut, mollis mi.
                        </p>
                    </div>
                    <div class="service">
                        <img src="http://d-k.netai.net/img/mobile.png" alt="Responsive">
                        <h3>
                            Responsive web
                        </h3>
                        <p>
                            Nam venenatis aliquet turpis vel mollis.<br>
                            Phasellus congue diam non elit<br>
                            blandit, non commodo nibh consequat.
                        </p>
                    </div>
                    <div class="service">
                        <img src="http://d-k.netai.net/img/market.png" alt="Marketing tools">
                        <h3>
                            Marketing tools
                        </h3>
                        <p>
                            Vestibulum semper, mauris eu convallis,<br>
                            ipsum urna consequat erat, quis<br>
                            tempor metus erat ut quam.
                        </p>
                    </div>
                </div>
            </section>
            <img class="sprocket" src="http://d-k.netai.net/img/sprocket.png" alt="">
            <section class="relax">
                <h2>
                    Just relax <span class="amp">&amp;</span><br>
                    let us do the heavy lifting
                </h2>
                <p>
                    Proin fringilla eros ut sagittis pulvinar. Phasellus gravida,<br>
                    odio non vestibulum molestie, libero nisi ornare nisl, in porttitor.
                </p>
                <ul>
                    <li>
                        Initial Setup &amp; Customizations
                    </li>
                    <li>
                        Regular Updates
                    </li>
                    <li>
                        Round The Clock Support
                    </li>
                </ul>
                <a class="learn_btn" href="http://kodu.je">
                    Learn more
                </a>
            </section>
            <section class="latest">
                <h2>
                    Latest project
                </h2>
                <p>
                    Cras non tellus ac quam dignissim sodales
                </p>
                <div class="framework">
                    <h3>
                        Developing a framework
                    </h3>
                    <p>
                        Nam ultrices scelerisque arcu, eu eleifend nisi<br>
                        egestas nec. Vivamus ipsum ante, semper<br>
                        ut aliquam vel, convallis non tortor.
                    </p>
                    <ul>
                        <li>
                            <strong>
                                E-Commerce Ready
                            </strong>
                            <p>
                                Proin suscipit mi lectus ac consectetur nisl luctus.
                            </p>
                        </li>
                        <li>
                            <strong>
                                Powerful SEO Features
                            </strong>
                            <p>
                                Maecenas sagittis est sed tempus scelerisque.
                            </p>
                        </li>
                        <li>
                            <strong>
                                Secure Encryption
                            </strong>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipiscing elit. 
                            </p>
                        </li>
                    </ul>
                    <p>
                        Proin venenatis diam quis dolor sollicitudin, eget hendrerit est volutpat.<br>
                        Nullam felis lorem, scelerisque eu blandit a.
                    </p>
                    <a href="http://mail.google.com">
                        View details →
                    </a>
                </div>
            </section>
            <section class="culture">
                <h2>
                    Culture &amp; values
                </h2>
                <p>
                    Phasellus gravida ex at odio elementum.
                </p>
                <div class="value">
                    <div class="value_img balance">
                        
                    </div>
                    <h3>
                        Work-life balance
                    </h3>
                    <p>
                        Suspendisse ut odio vel felis pulvinar<br>
                        sodales. Nunc ultricies nibh non velit<br>
                        feugiat cursus. Phasellus scelerisque
                    </p>
                </div>
                <div class="value">
                    <div class="value_img quality">
                    
                    </div>
                    <h3>
                        Quality over quantity
                    </h3>
                    <p>
                        Suspendisse ut odio vel felis pulvinar<br>
                        sodales. Nunc ultricies nibh non velit<br>
                        feugiat cursus. Phasellus scelerisque.
                    </p>
                </div>
                <div class="value lastvalue">
                    <div class="value_img excellence">
                        
                    </div>
                    <h3>
                        Deliver excellence
                    </h3>
                    <p>
                        Suspendisse ut odio vel felis pulvinar<br>
                        sodales. Nunc ultricies nibh non velit<br>
                        feugiat cursus. Phasellus scelerisque.
                    </p>
                </div>
            </section>
            <section class="clients">
                <h2>
                    Our awesome clients
                </h2>
                <p>
                    Curabitur pellentesque nunc at fringilla hendrerit.
                </p>
                <div class="feedback">
                    <div class="client_photo">
                        
                    </div>
                    <div class="opinion">
                        <blockquote>
                            Nulla massa turpis, laoreet eu metus non, convallis<br>
                            pretium ex. Pellentesque ullamcorper sapien tortor.
                        </blockquote>
                        <cite>
                            - Jamie Richardson, Founder of Cocoa Media
                        </cite>
                    </div>
                    <div class="opinion">
                        <blockquote>
                            Morbi nibh lacus, auctor eget pharetra a, bibendum<br>
                            at turpis. Praesent malesuada in neque sed mollis.
                        </blockquote>
                        <cite>
                            - Kim Thompson, Founder of Rainel
                        </cite>
                    </div>
                    <div class="client_photo">
                        
                    </div>
                </div>
            </section>
            <section class="next_project">
                <h4>
                    Ready to talk about your next project?
                </h4>
                <a class="contact_btn" href="http://drive.google.com">
                    Contact us
                </a>
            </section>
            <section class="companies">
                <a href="http://envato.com">
                    <img src="http://d-k.netai.net/img/envato.png" alt="Envato">
                </a>
                <a href="http://pl.wordpress.org">
                    <img src="http://d-k.netai.net/img/wordpress.png" alt="WordPress">
                </a>
                <a href="http://tutsplus.com">
                    <img src="http://d-k.netai.net/img/tuts.png" alt="aetuts+">
                </a>
                <a href="http://studio.envato.com">
                    <img src="http://d-k.netai.net/img/microlancer.png" alt="Microlancer">
                </a>
            </section>
        </main>
        <aside>
            <section class="contact_us">
                <h5>
                    Contact us
                </h5>
                <ul>
                    <li>
                        Nazwa firmy<br>
                        Iksińska 14/20<br>
                        12-345, Warszawa
                    </li>
                    <li>
                        123 456 789
                    </li>
                    <li>
                        poczta@mail.com
                    </li>
                </ul>
            </section>
            <section class="lposts">
                <h5>
                    Latest posts
                </h5>
                <ul>
                    <li>
                        <a href="">
                            Aliquam venenatis ut leo fringilla
                        </a>
                    </li>
                    <li>
                        <a href="">
                            Maecenas vel libero nec sapien
                        </a>
                    </li>
                    <li>
                        <a href="">
                            Nam neque sapien posuere
                        </a>
                    </li>
                    <li>
                        <a href="">
                            Donec ultricies id neque
                        </a>
                    </li>
                    <li>
                        <a href="">
                            Nulla placerat dictum felis
                        </a>
                    </li>
                </ul>
            </section>
            <section class="ltweets">
                <h5>
                    Latest tweets
                </h5>
                <ul>
                    <li>
                        <a href="http://twitter.com">
                            Nunc ultricies nibh non velit feugiat<br>
                            cursus. Phasellus scelerisque est<br>
                            sagittis sem.
                        </a><br>
                        <a class="hashtag" href="http://twitter.com">
                            #abcdef
                        </a><br>
                        <time datetime="23:55">
                            15 mins ago
                        </time>
                    </li>
                    <li>
                        <a href="http://twitter.com">
                            Nam sed aliquam nunc.<br>
                            Donec bibendum metus velit.
                        </a><br>
                        <a class="hashtag" href="http://twitter.com">
                            #ghijkl
                        </a>
                        <a class="hashtag" href="http://twitter.com">
                            #mnoprs
                        </a><br>
                        <time datetime="2016-07-23">
                            36 days ago
                        </time>
                    </li>
                </ul>
            </section>
        </aside>
        <footer>
            <span class="copyright">
                © Copyright 2014 <a href="http://freebiesxpress.com/gallery/treehouse-free-psd-web-template/">FreebiesXpress.com</a>
            </span>
            <div class="social_media">
                <a class="twitter" href="http://twitter.com">

                </a>
                <a class="facebook" href="http://facebook.com">

                </a>
                <a class="pinterest" href="http://pl.pinterest.org">

                </a>
                <a class="google" href="http://plus.google.com">

                </a>
            </div>
        </footer>
    </body>
</html>

\$\endgroup\$
5
\$\begingroup\$

First of all, your HTML looks very clean and it seems that you don't use more elements then needed to achieve what you want. This is a very good thing.

Social media links

All links like <a class="twitter" href="http://twitter.com"></a> don't have any content. Sure, one can see the icon, but what if you can't? Consider your page being presented using a screenreader or it's been visited by a search bot. In this case it's best to use the title-attribute to describe where this link is heading:

<a class="twitter" href="http://twitter.com" title="Visit us on Twitter"></a>

Icons

Try to reduce requests to the server. To achieve this you can put all your icons into one image sprite. Once this file is loaded all icons are served by this file - no need requesting each icon separately. Use this sprite as a background image and use background-position to place it like you want:

.service .icon-heart, .service .icon-device {
    background: transparent url('icons.png') no-repeat 0 0;
}

.service .icon-heart {
    background-position: 0 -40px;
}

.service .icon-device {
    background-position: 0 -80px;
}

To be retina- or high-density-ready double the size of your icons. If the icon is been displayed at 50 x 50px, create the image at 100 x 100px. If you use background images as described before, add the property `background-size to make sure that the image is scaled properly:

background-size: 50%;

If you continue to use img-elements, set their width or height explicitly to the correct output size. This will assure that your icons look sharp not only on mobile devices, but also on computers/tablets with high density displays.

You can even take it one step further and save your icons as SVG. The premise is that they are vector based in your draft already. This will make them look sharp on any device and at any zoom level.

Outline and semantics

Your semantics look good. Keep in mind that this is a very broad and highly debatable part.

To start you can check the outline of your document. There's an online tool and even a Google Chrome extension that can help you.

You'll see some untitled sections and you might get a better understanding about the hierarchy of headings of the document. Sometimes it can get confusing, especially on long one-pagers, in which level of nesting is the part I'm working on. Maybe this helps you to enhance to document outline.

As a note: Remember that section-elements can start with h1-elements. Also, you introduce a h4 that is not below a h3 for a very important section "Ready to talk about your next project?". Maybe here's room for improvement.

Blockquote

As an advice, it may be better to place the cite-element within the blockquote as shown in this example on w3c. The footer-element in the example is optional, but none of the examples show the cite-element outside the blockquote-element. Here's another discussion about the cite and `block quote´ elements on HTML5 doctor.

CSS

It's very good that you don't nest the CSS too deep and that you're using classes without a specific element.

In addition I would recommend using a CSS preprocessor like Less or Sass. With the help of a preprocessor it's easy to create and re-use mixins on multiple elements:

.text-center { text-align: center; }
h1 { .text-center; }
h2 { .text-center; }
.portfolio_btn { .text-center; }

The preprocessor will render it to something like:

h1, h2, .portfolio_btn {
    text-align: center;
}

You have written some rules, which look like this. As your site and your CSS grows, this will become unmaintainable, as you have to keep all those places in mind, where to insert the selectors for a certain rule.

With the preprocessor you can also use variables for colors, other re-useable values and keep a better eye on the hierarchy within elements etc.

Another approach is to create classes like text-center and use them in your HTML markup. This is how Bootstrap is doing a lot of things:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Head-element

Well, this is a personal preference, but as the title is the only mandatory element and some bots and APIs only fetch the first few bytes of a website I would start the head-element like this:

<head>
    <meta charset="utf-8">
    <title>TreeHouse layout</title>
    <meta name="description" content="">
    [all stylesheets etc. below]
</head>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.