jsbootcamp/exer_1.css

<header class="header">
	<span class="header__logo">randomproducts.com</span>
	<nav class="header__nav">
		<ul class="nav-list">
			<li class="nav-list__item">
				<a class="nav-list__link" href="#">home</a>
			</li>
			<li class="nav-list__item">
				<a class="nav-list__link" href="#">products</a>
			</li>
			<li class="nav-list__item">
				<a class="nav-list__link" href="#">account</a>
			</li>
		</ul>
	</nav>
</header>

<main class="page">
	<section class="about-us">
		<h1 class="about-us__title">About us</h1>
		<div class="about-us__content">
			<h2 class="about-us__sub-title">Our vision</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna nisl, sagittis id nibh in, ultricies sagittis urna. In porttitor et lacus aliquam ornare. Quisque bibendum, <b>justo vel</b> vehicula varius, dui sapien vehicula orci, quis tincidunt diam felis ut tellus. Vivamus nulla erat, vestibulum at cursus sed, elementum et mauris. Sed cursus id odio a malesuada. Quisque tellus neque, tempor non luctus in, tempus eget diam. Proin euismod ultrices odio a lacinia. Donec fringilla luctus urna in imperdiet. Mauris nec vestibulum dui. Nam id diam elit. Fusce ultricies dui neque, a suscipit nisi bibendum et. Pellentesque maximus, mi nec cursus tempus, magna ligula ultricies quam, eu tincidunt dolor mi id dui. Duis varius felis nec massa lobortis aliquet.
			</p>
			<p>
				Integer ac placerat libero. Vestibulum in nibh tincidunt, rhoncus libero a, consequat lorem. Vestibulum sodales consectetur nulla. Curabitur erat massa, congue eget dui in, gravida ultrices dolor. Nunc imperdiet enim a dictum euismod. Vivamus eleifend pellentesque lacus eu tempus. In hac habitasse platea dictumst. Maecenas faucibus diam quis felis porta viverra non et nisl. Nam tristique ligula quis lorem feugiat iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum tellus odio, vehicula in purus non, eleifend vehicula turpis. Mauris at orci finibus, elementum massa scelerisque, condimentum ex.
			</p>
		</div>
		<div>
			<h2 class="about-us__sub-title">Our mission</h2>
			<p>Nullam eget augue ac ante maximus lobortis. Vestibulum libero mauris, feugiat semper dapibus non, fermentum in massa. Maecenas quis metus at mi lacinia dapibus. Nunc cursus interdum porta. Maecenas eu diam ligula. Fusce at maximus nunc, in rutrum elit. Suspendisse fermentum imperdiet efficitur. Sed vitae molestie ante. Sed eget tincidunt libero, in lacinia libero. Mauris non metus ante.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna nisl, sagittis id nibh in, ultricies sagittis urna. In porttitor et lacus aliquam ornare. Quisque bibendum, justo vel vehicula varius, dui sapien vehicula orci, quis tincidunt diam felis ut tellus. Vivamus nulla erat, vestibulum at cursus sed, elementum et mauris. Sed cursus id odio a malesuada. Quisque tellus neque, tempor non luctus in, tempus eget diam. Proin euismod ultrices odio a lacinia. Donec fringilla luctus urna in imperdiet. Mauris nec vestibulum dui. Nam id diam elit. Fusce ultricies dui neque, a suscipit nisi bibendum et. Pellentesque maximus, mi nec cursus tempus, magna ligula ultricies quam, eu tincidunt dolor mi id dui. Duis varius felis nec massa lobortis aliquet.
			</p>
		</div>
	</section>

	<aside class="sidebar">
		<h2 class="sidebar__title">extra info</h2>
		<section class="best-sold">
			<h3 class="best-sold__title">best sold products</h3>
			<div class="product-preview">
				<img src="https://images.unsplash.com/photo-1571115637329-40ce3401d0f3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2900&q=80" alt="[you dont need to add an alt for this exercise]">
				<div class="product-preview__content">
					<h4 class="product-preview__name">Fruit juicer</h4>
					<span class="prouct-preview__price">18 euro</span>
				</div>
			</div>
			<div class="product-preview">
				<img src="https://images.unsplash.com/photo-1571115355423-1d318bd95e22?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2900&q=80" alt="[you dont need to add an alt for this exercise]">
				<div class="product-preview__content">
					<h4 class="product-preview__name">Straws (4 pieces)</h4>
					<span class="prouct-preview__price">12 euro</span>
				</div>
			</div>

		</section>

	</aside>
</main>

<footer class="footer">
	<nav class="footer__socials">
		<i class="social-item fab fa-twitter"></i>
		<i class="social-item fab fa-facebook-f"></i>
		<i class="social-item fab fa-instagram"></i>
		<i class="social-item fab fa-linkedin-in"></i>
	</nav>
	&copy; randomproducts.com
</footer>