Create your first web site. Icon font
In this lesson we’ll finish to make main page of our project – we’ll add footer, also including icon font. First of all I’ll show how to make footer is always in the bottom of web page.
If you would like use icons in your site, you will probably want to use images. For example, https://www.iconfinder.com/. Second way is the icon font. Nowadays icon font is very popular. Its main advantage is small page load. Image files have larger size than icon font.
If you would like use icons in your site, you will probably want to use images. For example, https://www.iconfinder.com/. Second way is the icon font. Nowadays icon font is very popular. Its main advantage is small page load. Image files have larger size than icon font.
In this lesson (and in my projects) I use https://fortawesome.github.io/Font-Awesome/. This font updates very often. There a lot of icons in font awesome. Font awesome is simply font, that’s why we can change icon color, size and so on. We can’t do it with images.
List of icons https://fortawesome.github.io/Font-Awesome/icons/.
Also there are additional tools, for example icons animation https://fortawesome.github.io/Font-Awesome/examples/.
List of icons https://fortawesome.github.io/Font-Awesome/icons/.
Also there are additional tools, for example icons animation https://fortawesome.github.io/Font-Awesome/examples/.
Icon font is simply css file, which read font from another folder “fonts”. All files and folders are in one zip archive, you can download.
Second way to include font awesome is cdn.
You only need to add link to link tag href attribute.
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'>
<!--<link rel="stylesheet" href="font-awesome.min.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="960.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">123-45-67</div>
<div class="search">
<form>
<input type="text"/>
<input type="submit">
</form>
</div>
</div>
<nav id="menu">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="about.html">О нас</a>
<ul class="submenu">
<li><a href="#">Наша команда</a></li>
<li><a href="#">Новости</a></li>
</ul>
</li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
</header>
<div id="content">
<div class="container_12">
<div class="grid_12 text-center">
<h1>Почему надо выбрать именно нас</h1>
Преимущества, которые вас удивят
</div>
<div class="grid_6">
<h2>Высокое качество</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati beatae accusantium molestiae porro deserunt fugiat cumque, itaque dignissimos debitis modi neque nihil hic, facilis, repudiandae est ad enim quod, unde.
</div>
<div class="grid_6">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
<div class="grid_4">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
<div class="grid_4">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
<div class="grid_4">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
<div class="grid_6 suffix_1">
<h2>Быстрая доставка</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam non incidunt rem consequuntur provident, magni unde officia, reiciendis excepturi corrupti labore alias eaque veniam deleniti laudantium numquam id nam modi.
</div>
</div>
</div>
</div>
<footer>
<div class="container_12">
<div class="grid_12">
<ul class="icons">
<li><a href="#"><i class="fa fa-vk fa-5x fa-spin"></i></a></li>
<li><a href="#"><i class="fa fa-facebook fa-5x fa-spin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter fa-5x fa-spin"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus fa-5x fa-spin"></i></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>Code lesson (CSS)
/*@import url("anahit/anahit.css");*/
html, body {
height: 100%;
}
#content {
min-height: 100%;
}
body {
font-family: "Roboto", "Arial", sans-serif;
font-size: 16px;
color: #202020;
}
header {
box-shadow: 0 0 15px 2px #202020;
}
.wrapperHeader {
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;
}
nav {
width: 100%;
}
#menu ul {
padding-top: 0;
margin: 0;
}
#menu ul li {
list-style: none;
position: relative;
display: inline-block;
}
#menu ul li a {
color: inherit;
text-decoration: none;
font-size: 16px;
display: block;
padding: 0 10px;
line-height: 40px;
}
#menu ul li:hover .submenu {
display: block;
}
.submenu {
display: none;
position: absolute;
background-color: #fff;
top: 40px;
padding: 0;
border: 1px solid #e1e1e1;
}
.submenu li {
min-width: 170px;
}
.submenu li:hover {
background-color: #7c4dff;
color: #fff;
}
.text-center {
text-align: center;
}
footer {
background-color: #232323;
height: 200px;
}
.icons {
text-align: center;
}
.icons li{
display: inline-block;
list-style:none;
margin: 0 10px;
}
.icons li a {
color: #fff;
}
.fa-vk:hover {
color: #4e729a;
}
.fa-facebook:hover {
color: #3a5795;
}
.fa-twitter:hover {
color: #55acee;
}
.fa-google-plus:hover {
color:#dd4b39;
}
0 Comments