06-04-2024

2024-04-06 11:55:24 +02:00
parent f7c5cf7d47
commit 3d22f9c5d8
550 changed files with 27249 additions and 2537 deletions
--- a/gallery/style.css
+++ b/gallery/style.css
@@ -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);
+  }
+}