Create your first web site. Grid system
In this lesson we’ll continue to develop our first project. Today we’ll consider very popular and actual approach in html code -grid system. The basis of this approach is float rule and width of block. This approach simplifies web developer’s work. You only need include css file with grid and assign classes to html tags. In this lesson I used http://960.gs/.
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="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">
<p>123-45-67</p>
</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>
<p class="slogan">Преимущества, которые вас удивят</p>
</div>
<div class="grid_6">
<h2>Высокое качество</h2>
<p>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.</p>
</div>
<div class="grid_6">
<h2>Быстрая доставка</h2>
<p>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.</p>
</div>
<div class="grid_4">
<h2>Быстрая доставка</h2>
<p>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.</p>
</div>
<div class="grid_4">
<h2>Быстрая доставка</h2>
<p>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.</p>
</div>
<div class="grid_4">
<h2>Быстрая доставка</h2>
<p>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.</p>
</div>
<div class="grid_6 suffix_1">
<h2>Быстрая доставка</h2>
<p>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.</p>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>Code lesson (CSS)
/*@import url("anahit/anahit.css");*/
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;
}
0 Comments