06-04-2024
This commit is contained in:
BIN
gallery/Assets/Image_banner.png
Normal file
BIN
gallery/Assets/Image_banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
gallery/Assets/screenshot.png
Normal file
BIN
gallery/Assets/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
BIN
gallery/Assets/screenshot1.png
Normal file
BIN
gallery/Assets/screenshot1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
BIN
gallery/Screenshots/imagegallery.jpg
Normal file
BIN
gallery/Screenshots/imagegallery.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
0
gallery/image.js
Normal file
0
gallery/image.js
Normal file
116
gallery/index.html
Normal file
116
gallery/index.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!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>
|
||||
87
gallery/readme.md
Normal file
87
gallery/readme.md
Normal file
@@ -0,0 +1,87 @@
|
||||
[](http://ricardomoreira.io/)
|
||||
|
||||
<h1 align="center"> 🔥Image Gallery🔥</h1>
|
||||
|
||||
<h2 align="center">Image Gallery made only with CSS </h2>
|
||||
|
||||
### Index
|
||||
|
||||
* [Name](#Name) 👈
|
||||
* [Links](#Links) 🔗
|
||||
* [Description](#Description) 📖
|
||||
* [Languages and Frameworks](####Languages-and-Frameworks) ⚙️
|
||||
* [Screenshots](#Screenshots) 📱
|
||||
* [Instalation](#Instalation) 🧩
|
||||
* [Support](#Support) 🆘
|
||||
* [Roadmap](#Roadmap) 🗺️
|
||||
* [Authors and acknowledgment](####Authors-and-acknowledgment) ✍️
|
||||
* [Project Status](#Project-Status) 📜
|
||||
|
||||
# Name
|
||||
|
||||
Image Gallery
|
||||
|
||||
# Links
|
||||
|
||||
[Website](https://goodstuffoodsgallery.netlify.app/)
|
||||
|
||||
[Presentation](https://www.ricardomoreira.io/blog/2020-05-28-create-a-image-gallery)
|
||||
|
||||
___
|
||||
|
||||
# Description
|
||||
|
||||
First project that I did. Based on a tutorial as a simple image gallery.
|
||||
|
||||
* **Flexbox** - for the navbars, and also for the text inside the image
|
||||
* **Grid** - for the gallery image. It is adapted to fit as many images as necessary keeping the ratio
|
||||
* **Acessibility** - Add proper structure, image alt text and some other features to make the website more acessible.
|
||||
* **BEM** - Use Block Element Modifier ( BEM) to name my classes in CSS
|
||||
|
||||
___
|
||||
|
||||
# Languages, Frameworks and others
|
||||
|
||||
* **CSS** - Styling
|
||||
|
||||
____
|
||||
|
||||
# Screenshots
|
||||
|
||||
Home Page | Blog Page
|
||||
:-------------------------:|:-------------------------:
|
||||
 | 
|
||||
|
||||
____
|
||||
|
||||
# Instalation
|
||||
|
||||
___
|
||||
|
||||
# Support
|
||||
|
||||
Have any question or find something that doesn't look good? Let's talk 😊
|
||||
|
||||
[Here](https://github.com/mugas)
|
||||
|
||||
[And Here](https://www.ricardomoreira.io/about)
|
||||
|
||||
____
|
||||
|
||||
# Roadmap
|
||||
|
||||
Nothing to add
|
||||
|
||||
____
|
||||
|
||||
# Authors-and-acknowledgment
|
||||
|
||||
* Me 😊
|
||||
|
||||
____
|
||||
|
||||
# Project-Status
|
||||
|
||||
Nothing to add.
|
||||
|
||||
____
|
||||
183
gallery/style.css
Normal file
183
gallery/style.css
Normal file
@@ -0,0 +1,183 @@
|
||||
html,
|
||||
body {
|
||||
background-color: #eceee5;
|
||||
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Navbar*/
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
color: #c8882d;
|
||||
font-size: 18px;
|
||||
font-family: Lora;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px #20263f solid;
|
||||
}
|
||||
|
||||
.navbar__social-media {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.navbar__links i {
|
||||
margin: 0px;
|
||||
color: #c8882d;
|
||||
font-size: 18px;
|
||||
}
|
||||
.navbar__links i:hover {
|
||||
border-bottom: 1px #20263f solid;
|
||||
}
|
||||
|
||||
.navigation li:hover {
|
||||
background-color: #20263f;
|
||||
}
|
||||
|
||||
/* Title Format */
|
||||
h1 {
|
||||
color: #20263f;
|
||||
font-family: "Dosis", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 50px;
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
margin-bottom: 30px;
|
||||
animation-name: titleIn;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/* Grid Format */
|
||||
/*Formats the text inside the image*/
|
||||
.container > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
color: #20263f;
|
||||
}
|
||||
.container > div > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-auto-rows: 300px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
.description {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container > div:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.container > div:hover .description {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container > div:hover img {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/*Footer*/
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.footer__tagline-title {
|
||||
color: #20263f;
|
||||
font-size: 18px;
|
||||
font-family: Lora;
|
||||
}
|
||||
|
||||
.footer__tagline {
|
||||
font-style: italic;
|
||||
color: #c8882d;
|
||||
}
|
||||
|
||||
.tutorial__footer {
|
||||
font-size: inherit;
|
||||
display: inline;
|
||||
}
|
||||
/*It's made for mobile first so I add media queries
|
||||
for screens over 768px(tablet)*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
margin: 2px;
|
||||
}
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.navbar__links i {
|
||||
margin: 0px;
|
||||
color: #c8882d;
|
||||
font-size: 25px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
color: #c8882d;
|
||||
font-size: 25px;
|
||||
font-family: Lora;
|
||||
}
|
||||
}
|
||||
|
||||
/*Animation of the title*/
|
||||
|
||||
@keyframes titleIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
70% {
|
||||
transform: translateX(150px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user