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.
69 lines
2.9 KiB
69 lines
2.9 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<link rel="stylesheet" href="styles.css"> |
|
<title>Masonry Layout</title> |
|
</head> |
|
|
|
<body> |
|
|
|
<header> |
|
<nav> |
|
<a href="/">Home</a> |
|
<a href="/">Contact Us</a> |
|
<h1> |
|
<div>Express</div> |
|
<div>Yourself</div> |
|
</h1> |
|
<a href="/">Guides</a> |
|
<a href="/">Support</a> |
|
</nav> |
|
</header> |
|
|
|
<main> |
|
<div class="short"> |
|
<h3>Good to travel !</h3> |
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore facere error debitis a alias natus. |
|
</p> <a href="">Read More</a> |
|
</div> |
|
<div class="long"> <img src="https://images.pexels.com/photos/2265876/pexels-photo-2265876.jpeg?cs=srgb&dl=pexels-vince-2265876.jpg&fm=jpg" alt=""> </div> |
|
<div class="short"> |
|
<h3>Good to travel !</h3> |
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore facere error debitis a alias natus. |
|
</p> <a href="">Read More</a> |
|
</div> |
|
<div class="long"> <img src="https://images.pexels.com/photos/2265876/pexels-photo-2265876.jpeg?cs=srgb&dl=pexels-vince-2265876.jpg&fm=jpg" alt=""> </div> |
|
<div class="long"> <img src="https://images.pexels.com/photos/2265876/pexels-photo-2265876.jpeg?cs=srgb&dl=pexels-vince-2265876.jpg&fm=jpg" alt=""> </div> |
|
<div class="long"> |
|
<h3>Good to travel !</h3> |
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore facere error debitis a alias natus. |
|
Voluptate repellendus voluptatum rem corrupti! Aut nostrum animi mollitia earum?</p> |
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore facere error debitis a alias natus. |
|
Voluptate repellendus voluptatum rem corrupti! Aut nostrum animi mollitia earum?</p> |
|
|
|
<a href="">Read More</a> |
|
</div> |
|
<div class="long"> |
|
<img src="https://images.pexels.com/photos/2265876/pexels-photo-2265876.jpeg?cs=srgb&dl=pexels-vince-2265876.jpg&fm=jpg" alt=""> |
|
</div> |
|
<div class="short"> |
|
<h3>Good to travel !</h3> |
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore facere error debitis a alias natus. |
|
</p> |
|
<a href="">Read More</a> |
|
</div> |
|
<div class="short"> |
|
<h3>Good to travel !</h3> |
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore facere error debitis a alias natus. |
|
Voluptate repellendus voluptatum rem corrupti! Aut nostrum animi mollitia earum?</p> |
|
<a href="">Read More</a> |
|
</div> |
|
|
|
</main> |
|
</body> |
|
|
|
</html> |