HTML
Hi, BRO<body>
<header>
<div class="title">
<h1>WOMBAT COFFEE ROASTERS</h1>
</div>
<div class="slogan">We love coffee</div>
</header>
<nav class="menu" id="main-menu">
<button class="menu-toggle" id="toggle-menu">close</button>
<div class="menu-dropdown">
<ul class="nav-menu">
<li><a href="/about.html">About</a></li>
<li><a href="/shop.html">Shop</a></li>
<li><a href="/menu.html">Menu</a></li>
<li><a href="/brew.html">Brew</a></li>
</ul>
</div>
</nav>
<aside class="hero" id="hero">
Welcome to Wombat Coffee Roasters! We are passionate about our craft, striving to bring you the best hand-crafted coffee in the city.
</aside>
<main id="main">
<div class="row">
<section class="column">
<h2 class="subtitle">Signal-origin</h2>
<p>We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then carefully roast in <a href="batch">small batches</a> to maximize their potential</p>
</section>
<section class="column">
<h2 class="subtitle">Blends</h2>
<p>Our tasters have put together a selection of carefully balanced blends. Our famous <a href="house">house blend</a> is available years round</p>
</section>
<section class="column">
<h2 class="subtitle">Brewing Equipment</h2>
<p>We offer our favorite kettles, French presses, and pour-over cones. Come to one of our <a href="house">brewing classes</a> to learn how to brew the perfect pour-over cup.</p>
</section>
</div>
</main>
<script type="text/javascript">
(function() {
var button = document.getElementById('toggle-menu');
button.addEventListener('click', function(event) {
event.preventDefault();
var menu = document.getElementById('main-menu');
menu.classList.toggle('is-open');
});
})();
</script>
</body>
CSS
:root{
box-sizing: border-box;
font-size: calc(1vw + 0.6em);
}
body{
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
/*********Ссылки*****************/
a:link{
color: #1476bb;
font-weight: bold;
text-decoration: none;
}
a:visited{
color: #141414bb;
}
a:hover{
text-decoration: underline;
}
a:active{
color: #b45514;
}
/********Шапка*************/
header{
padding: 0.5em 1em;
background: #fff;
}
.title > h1{
color: #333;
text-transform: uppercase;
font-size: 1.5em;
margin: .25em 0;
}
.slogan{
color: #888;
font-size: .8em;
margin: 0;
}
/********ASIDE*************/
.hero{
padding: 2em 1.5em;
text-align: center;
background: url(img_2077.1800x1200w.jpg);
background-size: 100%;
color: #fff;
text-shadow: .1em .1em .3em #000;
}
/********MAIN*************/
main{
padding: 1.2em;
}
.subtitle{
margin-top: 1.2em;
margin-bottom: 1.2em;
font-size: .8em;
text-transform: uppercase;
}
/********MENU*************/
.menu{
position: relative;
}
.menu-toggle{
position: absolute;
top: -1.4em;
right: .1em;
border: 0;
background-color: transparent;
font-size: 3.1em;
width: 1em;
height: 1em;
line-height: .3em;
overflow: hidden;
white-space: nowrap;
text-indent: 5em;
}
.menu-toggle::after{
position: absolute;
top: .5em;
left: .1em;
display: block;
content: "\2261";
text-indent: 0;
}
.menu-dropdown{
display: none;
position: absolute;
right: 0;
left: 0;
margin: 0;
}
.menu .is-open .menu-dropdown{
display: block;
}
.nav-menu{
margin: 0;
padding: 0;
border: 1px solid #ccc;
background: #000;
color: #fff;
}
.nav-menu > li + li{
border-top: 1px solid #ccc;
}
.nav-menu > li > a{
display: block;
padding: .7em 1em;
color: #fff;
font-weight: normal;
}
@media (min-width: 560px){
.title > h1{
font-size: 2.2rem;
}
.hero{
padding: 5em 3em;
font-size: 1.3rem;
}
.menu-toggle{
display: none;
}
.menu-dropdown{
display: block;
position: static;
}
.nav-menu{
display: flex;
border: 0;
padding: 0 1em;
list-style-type: none;
}
.nav-menu > li{
flex: 1;
}
.nav-menu > li +li{
border: 0;
}
.nav-menu > li >a{
padding: .3em;
text-align: center;
}
.row{
display: flex;
margin-left: -.75em;
margin-right: -.75em;
}
.column{
flex: 1;
margin-left: .75em;
margin-right: .75em;
}
}`*`Текст "как есть" (без применения форматирования)`*`