In this lesson we will begin to create web site. First of all we begin to create header. Also I’ll show you how to include web fonts using google fonts and webfont.ru

There are list of standard fonts:
1. Arial
2. Verdana
3. Times
4. Times New Roman
5. Georgia
6. Trebuchet MS
7. Sans
8. Sans
9. Comic Sans MS
10. Courier New
11. Webdings
12. Garamond
13. Helvetica

Besides there are some standards fonts, which can’t work in some operation systems:
1. Palatino Linotype / Palatino
2. Tahoma
3. Impact
4. Century Gothic
5. Arial Black
6. Arial Narrow
7. Copperplate / Copperplate Gothic Light
8. Gill Sans / Gill Sans MT

Also I talked how to remove default margins and paddings. For this purpose you need to use special css file – normalize.css

Code lesson (HTML)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
    <!--<link href='https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>-->
</head>
<body>

    <header>
        <div class="wrapperHeader">
            <div class="logo">
                <img src="http://kamil-abzalov.ru/wp-content/themes/milleniumSecond/img/logo.png" alt="">
            </div>
            <div class="phone">
                <p>123-45-67</p>
            </div>
            <div class="search">
                <form>
                    <input type="text"/>
                    <input type="submit">
                </form>
            </div>
        </div>
    </header>

    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus facilis est nam, expedita eaque. Ipsum vero sapiente, tenetur voluptas aliquid accusantium. Molestiae distinctio ratione commodi! Vel officiis laborum temporibus nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est maxime vel molestias reprehenderit. Nihil hic reprehenderit asperiores omnis assumenda voluptatibus modi saepe, tenetur necessitatibus error placeat, fugit, odio impedit. Eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quae sunt, laboriosam molestias deleniti nam! Enim exercitationem dicta maxime perferendis sit accusamus aliquid quisquam debitis facilis velit, dolorem libero, fugiat.
    </div>

    <footer>

    </footer>

</body>
</html>

Code lesson (CSS)

@import url("anahit/anahit.css");

body {
    font-family: "AMG Anahit", "Arial", sans-serif;
    font-size: 16px;
}

header{
    background-color: #7c4dff;
    overflow: hidden;
}

.logo, .phone, .search {
    float: left;
    width: 33%;
}

.phone p {
    color: #fff;
    font-size: 25px;
    margin-top: 20px;
}

.search form {
    margin-top: 25px;
}

Creating simple web site. Including fonts to web site

Code lesson (HTML)

Code lesson (CSS)

0 Comments

Submit a Comment Cancel reply

Pin It on Pinterest