CSS Art Gallery

Vanilla-JS-Projects/Basic/CSS-Art-Gallery/README.md

@@ -0,0 +1,74 @@
+<h1 align='center'><b>💥 CSS Art Gallery 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 
+ ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) 
+ ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>CSS Art Gallery showcases top arts developed by artists across the world using HTML and CSS</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+- Clone this repository.
+- Navigate to this project directory
+- Run the `index.html` file. 
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+![Image](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/MarkDown/Vanilla-JS-Projects/Basic/CSS-Art-Gallery/screenshot.webp)
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Amruta Jayanti</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/amruta-jayanti-064523254?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/AmrutaJayanti'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Vanilla-JS-Projects/Basic/CSS-Art-Gallery/data.json

@@ -0,0 +1,44 @@
+[
+    {
+        "imageUrl": "https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba9987b896a6899009b7b2_XG3kxY9J1GXrUMFU-GGbN0IR2Pc9iInd35jxWRgZ2xphXud999AUJppRs7U3mo5IU9dI_Y9C-EktXYP4FSzGei9Ezh10-dcAO_FIBNw7G2qaXGXfqgjNOUc87ueg3VKugQTnyPSF68K0Nh9HOC1rAlo.png",
+        "title": "SmartPhone",
+        "artist" : "Grzegorz Witczak",
+        "link": "https://codepen.io/Wujek_Greg/pen/LmrweG"
+     },
+    {
+        "imageUrl": "https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba99851fb2a7c98065da88_WCMPS27hjcUJk4vyaoBFs7y4Eh2K2inGraJQ2yCaF3uH1G3S5o6_TAoYLimcZGyofUknrdyFsjvR4WiNOnpGOhxbLYGuwxXtBLdtAIXDRxveaiVMiXqqMrUn8ALRhL1wfsVnjr5OnI2sZJ4UnnrH_2o.png",
+        "title" : "Cassette tape",
+        "artist": "Kassandra Sanch",
+        "link": "https://css-art.com/single-div-cassette-tape/source.html"
+      },
+    {
+        "imageUrl":"https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba99867d50dd847d3e6ca8_4Phyy4UKQoD-vDWV_H8oFerb1HJtDPEssKW7wrMNSaEShc2RzdjTTc1zAYw9u2wFdJvC7ayNOqFOjJ8RIglRlpaIMYM80KaYvZnXXV_pIKs5deimOq4fUQ6AERP1BA_ntCTSePlAC-ZJracwDB76CHs.png",
+        "title" : "The Mona Lisa",
+        "artist" :"Jay Salvat",
+        "link" : "https://css-art.com/mona-lisa/source.html"
+     },
+    {
+        "imageUrl": "https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba998792f12cc4a8da4e38_JwqQ2-ikzKgV5o544IVNv9yGtRoLr_0LOs15kiKNlXi-KCTW-B8YYVca0PlduuCtrYs3d0Xnj4ZN0fElTOMS0uVqFrgFDb9vndSAiKg_pUtKC_TgAADC8JaD8p7C1Wb72hXvQoqWO7aqEIvxu_nyzMM.png",
+        "title" : "Southwold landscape",
+        "artist" : "Ben Evans",
+        "link" : "https://codepen.io/ivorjetski/pen/xxGYWQG"
+    },
+    {
+        "imageUrl" : "https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba9986b896a6899009b79c_vgDvZfnTxt-w0wZ6oRl8OAhTnrFWeMtEHYniZobio1KZBgN08W_amLGdSS_cNCBZ8R3xLK2HnbmZQapk8kugNSi0Yf5OzUjz9CKXlFtn0hMuoVAlFm2QsGBGYJuelEE2l_S_DbiAJucXfW0KT_8y-Y0.png",
+        "title" : "Baroque portrait",
+        "artist" : "Diana Smith",
+        "link" : "https://css-art.com/pure-css-lace/source.html"
+        },
+    {
+        "imageUrl":"https://css-art.com/artwork/scssuper-mario-face/i/100.jpg",
+        "title" : "Super Mario Face",
+        "artist" : "Louise Flanagan",
+       "link": "https://css-art.com/scssuper-mario-face/source.html"
+    },
+    {
+        "imageUrl":"https://css-art.com/artwork/css-collector-s-cabinet/i/100.jpg",
+        "title" : "CSS Collectors Cabinet",
+        "artist": "Lynn Fisher",
+        "link": "https://css-art.com/css-collector-s-cabinet/source.html"
+    }
+]

Vanilla-JS-Projects/Basic/CSS-Art-Gallery/index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <title>CSS Art Gallery</title>
+</head>
+<body>
+    <div class="container">
+        <div style="padding-top: 8px;">
+        <div class="jumbotron">
+            <div class="brand">CSS Art Gallery</div>
+            <div class="blockquote"><i>Beholding beauty with the eye of the mind, he will be enabled to bring forth, not images of beauty, but reality, and bringing forth and nourishing true virtue to become the friend of God.</i></div>
+            <div class="blockquote-footer font-weight-bolder">Plato</div>
+        </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="gallery-item text-center">
+                    <img src="https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba99851fb2a7c98065da88_WCMPS27hjcUJk4vyaoBFs7y4Eh2K2inGraJQ2yCaF3uH1G3S5o6_TAoYLimcZGyofUknrdyFsjvR4WiNOnpGOhxbLYGuwxXtBLdtAIXDRxveaiVMiXqqMrUn8ALRhL1wfsVnjr5OnI2sZJ4UnnrH_2o.png" height="250px" width="250px" alt="Image" class="rounded">
+                    <button class="btn btn-info mt-2 data-btn">Know me!</button>
+                </div>
+            </div>
+
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                    <div class="gallery-item text-center">
+                        <img src="https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba9987b896a6899009b7b2_XG3kxY9J1GXrUMFU-GGbN0IR2Pc9iInd35jxWRgZ2xphXud999AUJppRs7U3mo5IU9dI_Y9C-EktXYP4FSzGei9Ezh10-dcAO_FIBNw7G2qaXGXfqgjNOUc87ueg3VKugQTnyPSF68K0Nh9HOC1rAlo.png" height="250px" width="250px" alt="Image" class="rounded">
+                        <button class="btn btn-info mt-2 data-btn">Know me!</button>
+                    </div>
+                </div>
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div  class="gallery-item text-center">
+                    <img src="https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba99867d50dd847d3e6ca8_4Phyy4UKQoD-vDWV_H8oFerb1HJtDPEssKW7wrMNSaEShc2RzdjTTc1zAYw9u2wFdJvC7ayNOqFOjJ8RIglRlpaIMYM80KaYvZnXXV_pIKs5deimOq4fUQ6AERP1BA_ntCTSePlAC-ZJracwDB76CHs.png" height="250px" width="250px" alt="Image" class="rounded">
+                    <button class="btn btn-info mt-2 data-btn">Know me!</button>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="gallery-item text-center">
+                    <img src="https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba998792f12cc4a8da4e38_JwqQ2-ikzKgV5o544IVNv9yGtRoLr_0LOs15kiKNlXi-KCTW-B8YYVca0PlduuCtrYs3d0Xnj4ZN0fElTOMS0uVqFrgFDb9vndSAiKg_pUtKC_TgAADC8JaD8p7C1Wb72hXvQoqWO7aqEIvxu_nyzMM.png" height="250px" width="250px" alt="Image" class="rounded">
+                    <button class="btn btn-info mt-2 data-btn">Know me!</button>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="gallery-item text-center">
+                    <img src="https://cdn.prod.website-files.com/6053a5b7250a50f89c543266/64ba9986b896a6899009b79c_vgDvZfnTxt-w0wZ6oRl8OAhTnrFWeMtEHYniZobio1KZBgN08W_amLGdSS_cNCBZ8R3xLK2HnbmZQapk8kugNSi0Yf5OzUjz9CKXlFtn0hMuoVAlFm2QsGBGYJuelEE2l_S_DbiAJucXfW0KT_8y-Y0.png" height="250px" width="250px" alt="Image" class="rounded">
+                    <button class="btn btn-info mt-2 data-btn">Know me!</button>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="gallery-item text-center">
+                    <img src="https://css-art.com/artwork/scssuper-mario-face/i/100.jpg" height="250px" width="250px" alt="Image" class="rounded">
+                    <button class="btn btn-info mt-2 data-btn">Know me!</button>
+                </div>
+            </div>
+            <div class="col-lg-4 col-md-6 col-sm-12">
+                <div class="gallery-item text-center">
+                    <img src="https://css-art.com/artwork/css-collector-s-cabinet/i/100.jpg" height="250px" width="250px" alt="Image" class="rounded">
+                    <button class="btn btn-info mt-2 data-btn">Know me!</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="overlay" class="overlay">
+        <div class="overlay-content">
+            <h2 id="overlay-title">Overlay Title</h2>
+            <p id="overlay-description">This is the overlay content.</p>
+            <a id="overlay-link" href="#" target="_blank" class="btn btn-primary">Source Code</a>
+            <i id="close-overlay" class="fas fa-times close-icon"></i>
+        </div>
+    </div>
+
+    <div class="container"></div>
+    <script src="script.js"></script>
+</body>
+</html>

Vanilla-JS-Projects/Basic/CSS-Art-Gallery/script.js

@@ -0,0 +1,24 @@
+fetch('data.json')
+    .then(response => response.json())
+    .then(data => {
+        const dataButtons = document.querySelectorAll('.data-btn');
+        dataButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const image = button.previousElementSibling;
+                const imageUrl = image.src;
+                const imageData = data.find(item => item.imageUrl === imageUrl);
+
+                if (imageData) {
+                    document.getElementById('overlay-title').textContent = imageData.title;
+                    document.getElementById('overlay-description').textContent = imageData.artist;
+                    document.getElementById('overlay-link').href = imageData.link;
+                    document.getElementById('overlay').style.display = 'flex';
+                }
+            });
+        });
+
+        document.getElementById('close-overlay').addEventListener('click', function() {
+            document.getElementById('overlay').style.display = 'none';
+        });
+    })
+    .catch(error => console.error('Error loading JSON:', error));

Vanilla-JS-Projects/Basic/CSS-Art-Gallery/style.css

@@ -0,0 +1,58 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color:  #f0c4f7;
+}
+.jumbotron {
+    background-color: #f8f9fa; 
+    padding: 20px; 
+}
+.brand {
+    font-family: 'Playfair Display', serif;
+    font-size: 2rem;
+    text-align: center; 
+    opacity: 0;
+    animation: fadeIn 1s ease forwards;
+    color:purple ;
+}
+#A {
+    text-align: center; 
+    margin-bottom: 20px; 
+}
+.gallery-item {
+    margin-bottom: 20px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+.overlay-content {
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+}
+.close-icon {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 20px;
+    color: black;
+}

Vanilla-JS-Projects/README.md

@@ -55,6 +55,7 @@
 |  28   | [Typing-Test](./Advanced/Typing-Test/) | ![Advanced](https://img.shields.io/badge/Advanced-FF0000?style=for-the-badge) |
 |  29   | [RGB-Color-Slider](./Basic/RGB-Color-Slider/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |  29   | [Expense Tracker](./Basic/Expense-Tracker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge)  |
+| 30 | [CSS Art Gallery](./Basic/CSS-Art-Gallery) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge)  |
 </div>
 
 

database/vanilla.json

@@ -103,5 +103,10 @@
 		"tag": "Basic",
 		"title": "RGB-Color-Slider",
 		"description" :"RGB Color Slider takes the input from the user and renders the color"
+	},
+	{
+		"tag": "Basic",
+		"title": "CSS Art Gallery",
+		"description" :"CSS Art Gallery showcases the art developed by CSS"
 	}
 ]