I would like the text and icons (login, shop) to be the same level as the 'Logo' but just to the right side. I tried by adding to the '.shop-icon' {margin: -30px auto;} but it all destroyed the page and then the entire 'nav bar' and 'article' covered the header.
I'm still learning, but at the beginning I know I've broken something.
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: 'Roboto', sans-serif;
background: #2B2B2B;
font-size: 1.6rem;
}
.header-front {
max-width: 992px;
margin: 0 auto;
}
h1.logo {
color: #F6F6F6;
font-size: 4.8rem;
font-weight: 700;
text-align: left;
}
.shop-icon {
text-align: right;
}
.bag, .account {
color: #F6F6F6;
text-decoration: none;
text-transform: uppercase;
margin: 10px;
}
.main-menu {
background-color: #F7FCFA;
width: 100%;
}
p {
color: #FFFFFF;
}
<body>
<header class="header-front">
<h1 class="logo">Logo </h1>
<div class="shop-icon">
<a href="_blank" class="account">
Login <i class="fa fa-user-o" aria-hidden="true"></i>
</a>
<a href="_blank" class="bag">
shop <i class="fa fa-shopping-bag" aria-hidden="true"></i>
</a>
</div>
</header>
<nav class="main-menu">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices elit eget tortor varius ornare. Etiam commodo sapien dui, in gravida purus malesuada eget. Vestibulum mollis ipsum consectetur ipsum tempor, non sagittis nunc gravida. Aenean dolor arcu, faucibus a urna nec, pulvinar mollis erat. Pellentesque scelerisque sapien purus, eget porta tellus lacinia ut. Aenean vel ipsum tortor. Ut faucibus sagittis lorem, a molestie enim commodo vel. Maecenas ac placerat nisl. Phasellus felis elit, tincidunt nec ullamcorper vitae, interdum non leo. </p>
</article>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire