|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<link rel="stylesheet" href="flex3.css">
|
|
|
|
|
<link rel="stylesheet" href="flexbox1.css">
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
|
|
|
|
|
<title>Flex Practice</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<nav id="menu">
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="">Home</a></li>
|
|
|
|
|
<li><a href="">About us </a></li>
|
|
|
|
|
<li><a href="">Contact us</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<div id="logo"> <a href="">Practicing</a> </div>
|
|
|
|
|
<nav id="social-links">
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
|
|
|
|
|
<li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
|
|
|
|
|
<li><a href=""><i class="fa-brands fa-google"></i></a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
<div id="main">
|
|
|
|
|
<aside>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="">Some Link</a></li>
|
|
|
|
|
<li><a href="">Some Link</a></li>
|
|
|
|
|
<li><a href="">Some Link</a></li>
|
|
|
|
|
<li><a href="">Some Link</a></li>
|
|
|
|
|
<li><a href="">Some Link</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</aside>
|
|
|
|
|
<article>
|
|
|
|
|
<h2>Welcome to our website</h2>
|
|
|
|
|
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit dignissimos ipsum harum repellendus
|
|
|
|
|
distinctio hic obcaecati animi reiciendis aspernatur quisquam ipsam voluptatibus saepe fugit, totam
|
|
|
|
|
dicta autem beatae itaque velit accusamus facilis nesciunt rerum unde labore deserunt. Perferendis
|
|
|
|
|
distinctio temporibus officia illo deserunt nostrum, eos quia eligendi architecto maxime molestiae quod
|
|
|
|
|
ipsa doloremque quibusdam quae. Harum ipsam veritatis recusandae nihil quasi magni est! Delectus maiores
|
|
|
|
|
rem reprehenderit voluptatibus? Repudiandae qui rem laboriosam ab veritatis inventore, aperiam eius
|
|
|
|
|
aliquam, reprehenderit quos error nobis incidunt sed ipsum eaque necessitatibus nam nulla natus dolore
|
|
|
|
|
quisquam vitae et. Atque reiciendis ipsum cupiditate distinctio sit!</p>
|
|
|
|
|
<h2>Our services</h2>
|
|
|
|
|
<div class="services-container">
|
|
|
|
|
<div class="service-box">
|
|
|
|
|
<div class="service-img"> <img
|
|
|
|
|
src="/webdevelopment/preply_javascript/images/odin1.JPG"
|
|
|
|
|
alt="image not found"> </div>
|
|
|
|
|
<div class="service-title">
|
|
|
|
|
<h3>HTML structuring</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="service-desc">
|
|
|
|
|
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta minima alias dolores
|
|
|
|
|
repellendus qui, accusamus quia magnam similique? Totam, mollitia.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="call-to-action"> <button>Read more</button> </div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="service-box">
|
|
|
|
|
<div class="service-img">
|
|
|
|
|
<img src="/webdevelopment/preply_javascript/images/thor1.JPG"
|
|
|
|
|
alt="image not found">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="service-title">
|
|
|
|
|
<h3>HTML structuring</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="service-desc">
|
|
|
|
|
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, tempore.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="call-to-action">
|
|
|
|
|
<button>Read more</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="service-box">
|
|
|
|
|
<div class="service-img">
|
|
|
|
|
<img src="/webdevelopment/preply_javascript/images/odin2.JPG"
|
|
|
|
|
alt="image not found">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="service-title">
|
|
|
|
|
<h3>HTML structuring</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="service-desc">
|
|
|
|
|
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, tempore.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="call-to-action">
|
|
|
|
|
<button>Read more</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
<footer>
|
|
|
|
|
Made by ©Zoya
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
