-
Notifications
You must be signed in to change notification settings - Fork 198
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #258 from AmrutaJayanti/MarkDown
CSS Art Gallery
- Loading branch information
Showing
8 changed files
with
287 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'> | ||
|
|
||
|  | ||
|  | ||
|  | ||
|  | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :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 📸 | ||
|  | ||
|
|
||
|
|
||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <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 ❤️ by 🌟 this repository!</h3> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters