forked from Avdhesh-Varshney/blog-script
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (77 loc) · 5.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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>