116 lines
5.2 KiB
HTML
116 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
|
<title>Image Gallery | Good Stuff Creations </title>
|
|
<meta name="Description" content="A image gallery responsive for mobile made only with css">
|
|
|
|
<meta name="KeyWords" content="flexbox, image gallery, food gallery, css, responsive">
|
|
</head>
|
|
|
|
</html>
|
|
<body>
|
|
<!-- Nav bar -->
|
|
<nav class="navbar">
|
|
<div aria-labelledby="navigation-menu">
|
|
<ul class="navbar__navigation">
|
|
|
|
<li>
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">About</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" target="_blank">Products</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" target="_blank">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar__social-media">
|
|
<ul class="navbar__links">
|
|
<i class="fab fa-twitter "><a aria-label="twitter" href="https://twitter.com/g_s_creations"></a></i>
|
|
<i class="fab fa-linkedin"><a aria-label="linkedin" href="https://www.linkedin.com/in/ricardodmoreira/"></a></i>
|
|
<i class="fab fa-github"><a aria-label="github" href="https://github.com/mugas/gsCreations"></a></i>
|
|
<i class="fab fa-instagram"><a aria-label="instagram" href="https://www.instagram.com/gs_codes/"></a></i>
|
|
<i class="fab fa-facebook"><a aria-label="facebook" href="https://www.facebook.com/goodstuffcodes"></a></i>
|
|
<i class="fas fa-globe"><a aria-label="globe" href="https://www.gscreations.io/blog/create-a-image-gallery"></a></i>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- Heading -->
|
|
<header class="title">
|
|
<h1>Good Stuff Foods</h1>
|
|
</header>
|
|
|
|
<!-- Grid -->
|
|
<section class="container">
|
|
|
|
<div>
|
|
<img src="../../sls/photos/thumb/1_2020.jpg" alt="First description" />
|
|
<span class="description">First description</span>
|
|
</div>
|
|
<div>
|
|
<img src="../../sls/photos/thumb/3_2019.jpg" alt="Second description">
|
|
<span class="description">Second description</span>
|
|
</div>
|
|
<!--div>
|
|
<img src="../../sls/photos/thumb/4_2019.jpg" alt="Third description">
|
|
<span class="description">Third description
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<img src="../../sls/photos/thumb/5_2019.jpg" alt="Fourth description">
|
|
<span class="description">Fourth description</span>
|
|
</div>
|
|
<div>
|
|
<img src="../../sls/photos/thumb/6_2019.jpg" alt="Fifth description">
|
|
<span class="description">Fifth description</span>
|
|
</div>
|
|
<div>
|
|
<img src="../../sls/photos/thumb/5_2020.jpg" alt="Sixth description">
|
|
<span class="description">Sixth description</span>
|
|
</div>
|
|
<div>
|
|
<img src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Seventh description">
|
|
<span class="description">Seventh description</span>
|
|
</div>
|
|
<div>
|
|
<img src="https://images.unsplash.com/photo-1529042410759-befb1204b468?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Eighth description">
|
|
<span class="description">Eighth description</span>
|
|
</div>
|
|
<div>
|
|
<img src="https://images.unsplash.com/photo-1484980972926-edee96e0960d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Ninth description">
|
|
<span class="description">Ninth description</span>
|
|
</div>
|
|
<div>
|
|
<img src="https://images.unsplash.com/photo-1432139509613-5c4255815697?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Tenth description">
|
|
<span class="description">Tenth description</span>
|
|
</div>
|
|
<div>
|
|
<img src="https://images.unsplash.com/photo-1485962398705-ef6a13c41e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Eleventh description">
|
|
<span class="description">Eleventh description</span>
|
|
</div>
|
|
<div>
|
|
<img src="https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Twelfth description">
|
|
<span class="description">Twelfth description</span>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<h2 class="footer__tagline-title">
|
|
Good Stuff Creations by
|
|
Ricardo Moreira -
|
|
<a class="tutorial__footer" href="https://www.gscreations.io/blog/create-a-image-gallery">Tutorial</a>
|
|
</h2>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |