You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
4.7 KiB
106 lines
4.7 KiB
<!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> |