Верстка шаблона. Шапка
В этом уроке мы начнем верстку шаблона для нашего сайта на MODx REVO. Мы будем сами верстать шаблон с использованием twitter bootstrap 4. Сегодня мы сверстаем шапку.
Код урока (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,700,800" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="overlay"></div>
<div class="container h-100">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg">
<a href="#" class="navbar-brand">Start bootstrap</a>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Sample post</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row text-center h-75 align-items-center">
<div class="col-sm-12">
<h1>Clean Blog</h1>
<p>A Blog Theme by Start Bootstrap</p>
</div>
</div>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>Код урока (style.css)
body, html {
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}
main {
min-height: 100%;
}
header {
background: url('home-bg.jpg') no-repeat center;
background-size: cover;
height: 85vh;
position: relative;
color: #fff;
}
header a {
color: #fff;
}
header a:hover {
color: #f1e8e8;
}
header a.navbar-brand {
font-weight: 800;
padding: 10px 20px 20px 0;
}
header .collapse ul li a {
font-weight: 800;
text-transform: uppercase;
font-size: 12px;
display: inline-block;
padding: 10px 20px !important;
letter-spacing: 1px;
}
header .collapse ul li:last-child a {
padding-right: 0 !important;
}
header h1 {
font-size: 5em;
font-weight: 800;
}
header p {
font-size: 1.5em;
font-weight: 300;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: .5;
}
0 Комментариев