body {
font-family:'Raleway', sans-serif;
}
#menu {
width: 100%;
height: 100px;
background-color: #2e3844;
display: flex;
font-size: 25px;
}
.logo {
display: block;
color: white;
text-decoration: none;
font-size:50px;
margin-left: 20px;
margin-top: 10px;
}
#parallelogram {
width: 160px;
height: 50px;
background: #656d78;
margin-left: 60em;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}
#text-page {
margin-left: 65em;
margin-top: -66px;
width: 865px;
height: 50px;
background: #656d78;
}
#text {
color:white;
margin-left: 80px;
}
li {
display: inline-flex;
margin-left: 15px;
}
li a {
color: white;
text-decoration: none;
}
.container {
width: 100%;
height: 10em;
}
.img {
width: 120em;
height: 10em;
}
.container {
margin-top: -50px;
background: #757c86;
width: 100%;
height: 160px;
color: white;
font-size: 30px;
}
.container h1 {
margin-left: 50px;
padding-top: 25px;
}
}
.heading {
margin: 20px;
padding:20px;
}
.bl {
display: block;
clear: both;
}
.heading {
display: inline-block;
clear: both;
}
.nav {
display: flex;
margin-top: 17px;
margin-left: 100px;
}<!--<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="C:\Users\АлександрКомаров\Проекты\learning6\css\mysite.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<header id="header">
<div id="menu">
<a class="logo" href="/"><img src="C:\Users\АлександрКомаров\Проекты\learning6\images\logo.png" width="50px">Expire</a>
<ol class="nav">
<li class="nav"><a href="#">HOME</a></li>
<li class="nav"><a href="#">PORTFOLIO</a></li>
<li class="nav"><a href="#">BLOG</a></li>
<li class="nav"><a href="#">PAGES</a></li>
<li class="nav"><a href="#">ABOUT US</a></li>
<li class="nav"><a href="#">CONTACT</a></li>
</ol>
</div>
</header>
<div class="container">
<h1>Typograpy</h1>
</div>
</div>
<div id="parallelogram"></div>
<div id="text-page">
<p id="text">HOME>PAGES>TYPOGRAPY</p>
</div>
<div class="heading">
<div class="blf f1"></div>
<h1 class="bl f1">Heading H1</h1>
<p class="par">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<div class="bl f2"></div>
<h2>Heading H2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="bl f3"></div>
<h3>Heading H3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod te mpor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="bl f4"></div>
</div>
</body>
</html> -->