Верстка - Оцените верстку | GeekBrains - образовательный портал

Оцените верстку

Всем привет. Моя первая верстка, закадайте меня помидорами, я буду только рад.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/fonts.css">

    <title>Webpaint</title>
</head>
<body>
    <div class="container">
        <header>
            <div class="center">
                <img class="logo" src="img/logo.png" height="33" width="107" alt="Logo">
                <nav>
                    <ul class="header-menu">
                        <li class="active">Home</li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <section class="descr cf">
            <div class="center">
                <h1>We are <span>Webpaint</span></h1>
                <p>digital & branding agency based in Jupiter and we would love to turn ideas into beautiful things.</p>
                <button class="btn">See Portfolio</button>
            </div>
        </section>

        <section class="features cf">
            <div class="center">
                <div class="features-item">
                    <figure>
                        <img src="img/android.png" height="54" width="47" alt="Android">
                        <figcaption>Consectetur</figcaption>
                    </figure>
                    <p>Vestibulum id ligula porta  euismod<br> semper. Aenean lacinia bibendum<br> nulla sed consectetur dui.</p>
                </div>

                <div class="features-item">
                    <figure>
                        <img src="img/mac.png" height="59" width="62" alt="iMac">
                        <figcaption>Tristiquet</figcaption>
                    </figure>
                    <p>Fusce dapibus, cursus commodo,<br> tortor mauris condimentum nibh, ut<br> fermentum massa justo risus.</p>
                </div>

                <div class="features-item">
                    <figure>
                        <img src="img/camera.png" height="56" width="60" alt="Camera">
                        <figcaption>Fermentum</figcaption>
                    </figure>
                    <p>Aenean eu leo quam. Pellentesque<br> ornare sem lacinia quam venenatis<br> vestibulum sagittis lacus mollis.</p>
                </div>

                <div class="features-item">
                    <figure>
                        <img src="img/time.png" height="65" width="55" alt="Stop Watch">
                        <figcaption>Elit Ultricies</figcaption>
                    </figure>
                    <p>Maecenas sed diam eget risus varius<br> blandit sit amet non magna. Vivamus<br> sagittis lacus vel augue laoreet.</p>
                </div>
            </div>
        </section>

        <section class="works cf">
            <div class="center">
                <h3>Our Featured Works</h3>
                <p>Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
                <div class="buttons">
                    <button class="active-btn">All</button>
                    <button>Graphic</button>
                    <button>Illustration</button>
                    <button>Motion</button>
                </div>

                <p class="thumb">
                    <img src="img/work-1.jpg" height="220" width="270" alt="">
                    <img src="img/work-2.jpg" height="220" width="270" alt="">
                    <img src="img/work-3.jpg" height="220" width="270" alt="">
                    <img src="img/work-4.jpg" height="220" width="270" alt="">
                    <img src="img/work-5.jpg" height="220" width="270" alt="">
                    <img src="img/work-6.jpg" height="220" width="270" alt="">
                    <img src="img/work-7.jpg" height="220" width="270" alt="">
                    <img src="img/work-8.jpg" height="220" width="270" alt="">
                    <img src="img/work-9.jpg" height="220" width="270" alt="">
                    <img src="img/work-10.jpg" height="220" width="270" alt="">
                    <img src="img/work-11.jpg" height="220" width="270" alt="">
                    <img src="img/work-12.jpg" height="220" width="270" alt="">
                </p>
            </div>
        </section>

        <section class="contacts cf">
            <div class="center">
                <h4>Get in Touch</h4>
                <p>Vestibulum id ligula porta felis euismod semper,malesuada euismod.</p>
                <div class="align-center">
                    <img src="img/map.png" height="13" width="9" alt="Map">
                    <span>Moonshine Street No: 14/05 Light City, Jupiter</span>
                    <img src="img/phone.png" height="11" width="10" alt="Phone">
                    <span>0247 541 65 87</span>
                </div>

                <div class="social">
                    <i class="sprite sprite-dribble"></i>
                    <i class="sprite sprite-fb"></i>
                    <i class="sprite sprite-pinterest"></i>
                    <i class="sprite sprite-rss"></i>
                    <i class="sprite sprite-tw"></i>
                </div>
            </div>

            <footer><span>@ 2013 Webpaint. All Rights Reserved.</span></footer>
        </section>
    </div>
</body>
</html>



body {
    width: 100%;
    font: 14px/24px 'latoregular', Arial, sans-serif;
}

.cf:before,
.cf:after {
    content: ""; 
    display: table; 
}

.cf:after { clear: both; }

.center {
    margin: 0 auto;
    width: 1110px;
}

header {
    width: 100%;
    height: 100px;
    background-color: #262626;
}

.logo {
    position: absolute;
    top: 37px;
    left: 243px;
}

.header-menu {
    float: right; 
    position: absolute;
    right: 87px;
}

.header-menu li {
    float: left;
    padding-top: 30px;
    padding-right: 50px;
    list-style: none;
    font: bold 13px 'latoblack';
}

.header-menu li:last-child {
    padding-right: 0;
}

.header-menu .active {
    color: #ff6760;
    text-transform: uppercase;
}

.header-menu li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #d9d9d9;
}

.header-menu li a:hover {
    text-decoration: underline;
}

.descr {
    background-color: #2A2A2A;
    color: #d9d9d9;
}

.descr h1 {
    padding-top: 20px;
    text-align: center;
    font: 60px/50px 'latolight';
}

.descr h1 span {
    font: bold 60px/50px 'latoblack';
    color: #d9d9d9;
}

.descr p {
    text-align: center;
    font: 44px 'latolight_italic';
    margin-top: -13px;
}

.btn {
    position: relative;
    right: -537px;
    padding: 18px 46px;
    margin-bottom: 60px;
    border: none;
    background-color: #ff6760;
    color: #fff;
    font: 14px 'latoblack';
    text-transform: uppercase;
    -webkit-border-radius: 7px;
    border-radius: 9px;
}

.features {
    padding-bottom: 90px;
    background-color: #f8f8f8;
}

.features-item {
    float: left;
    text-align: center;
    width: 22.5%;
    padding-top: 77px;
    margin-right: 1.25%;
    margin-left: 1.25%;
    color: #616161;
}

.features-item h2 { font: bold 18px/60px 'latoblack'; }
.features-item p { font: 14px/24px 'latoregular'; }
.works { background-color: #fff; }

.works h3 {
    margin-bottom: 25px;
    font: bold 30px/60px 'latoblack';
    text-align: center;
    color: #616161;
}

.works p {
    text-align: center;
    margin-bottom: 55px;
    font: 20px 'latolight';
    color: #616161;
}

.buttons { text-align: center; }

.buttons button {
    margin-right: 10px;
    border: none;
    padding: 12px 20px;
    margin-bottom: 25px;
    color: #fff;
    font: 12px 'latoblack';
    text-transform: uppercase;
    background-color: #ff6760;

    -webkit-border-radius: 4px;
            border-radius: 4px;
}

.buttons .active-btn {
    background-color: #595959;
}

.thumb { margin-bottom: 80px; }
.contacts { background-color: #313131; }
.contacts p { text-align: center; }

.contacts h4 {
    text-align: center;
    margin-bottom: 20px;
    color: #e0e0e0;
    font: bold 30px/60px 'latoblack'; 
}

.contacts p {
    color: #bebebe;
    font: 20px 'latolight'; 
}

.align-center {
    text-align: center;
    margin-bottom: 25px;
}

.align-center span {
    font: 14px/24px 'latoregular';
    color: #bebebe;
}

.sprite {
    background: url(../img/sprite.png) no-repeat;
    display: inline-block;
}

.sprite-dribble {
    width: 30px;
    height: 30px;
    background-position: -5px -5px;
}

.sprite-fb {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}

.sprite-pinterest {
    width: 30px;
    height: 30px;
    background-position: -85px -5px;
}

.sprite-rss {
    width: 30px;
    height: 30px;
    background-position: -125px -5px;
}

.sprite-tw {
    width: 30px;
    height: 30px;
    background-position: -165px -5px;
}

.social {
    text-align: center;
    margin-bottom: 60px;
}

footer {
    text-align: center;
    background-color: #2C2C2C;
    line-height: 80px;
}

footer span {
    font: 14px/24px 'latoregular';
    color: #bebebe;
}

0 чел.

Ближайшие курсы

Онлайн интенсив "Основы управления продуктом"

февраля