diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/_config.yml b/_config.yml new file mode 100644 index 00000000..c7418817 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-slate \ No newline at end of file diff --git a/assets/css/root.css b/assets/css/root.css new file mode 100644 index 00000000..736a421b --- /dev/null +++ b/assets/css/root.css @@ -0,0 +1,324 @@ +.card { + color: var(--bs-light); + cursor: pointer; +} + +.modal-body2 { + position: relative; + flex: 1 1 auto; + padding: 1rem; + display: flex; + flex-direction: column; + margin-bottom: 2rem; +} + +.col:hover { + shadow-lg; + bg-white; + rounded; +} + +.hover { + overflow: hidden; + position: relative; + padding-bottom: 60%; +} + +.hover-overlay { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 90; + transition: all 0.4s; +} + +.hover img { + width: 100%; + position: absolute; + top: 0; + left: 0; + transition: all 0.3s; +} + +.hover-content { + position: relative; + z-index: 99; +} + + +/* DEMO 1 ============================== */ + +.hover-1 img { + width: 105%; + position: absolute; + top: 0; + left: -5%; + transition: all 0.3s; +} + +.hover-1-content { + position: absolute; + bottom: 0; + left: 0; + z-index: 99; + transition: all 0.4s; +} + +.hover-1 .hover-overlay { + background: rgba(0, 0, 0, 0.5); +} + +.hover-1-description { + transform: translateY(0.5rem); + transition: all 0.4s; + opacity: 0; +} + +.hover-1:hover .hover-1-content { + bottom: 2rem; +} + +.hover-1:hover .hover-1-description { + opacity: 1; + transform: none; +} + +.hover-1:hover img { + left: 0; +} + +.hover-1:hover .hover-overlay { + opacity: 0; +} + + +/* DEMO 2 ============================== */ + +.hover-2 .hover-overlay { + background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)); +} + +.hover-2-title { + position: absolute; + top: 50%; + left: 0; + text-align: center; + width: 100%; + z-index: 99; + transition: all 0.3s; +} + +.hover-2-description { + width: 100%; + position: absolute; + bottom: 0; + opacity: 0; + left: 0; + text-align: center; + z-index: 99; + transition: all 0.3s; +} + +.hover-2:hover .hover-2-title { + transform: translateY(-1.5rem); +} + +.hover-2:hover .hover-2-description { + bottom: 0.5rem; + opacity: 1; +} + +.hover-2:hover .hover-overlay { + background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)); +} + + +/* DEMO 3 ============================== */ + +.hover-3::after { + content: ''; + width: calc(100% - 3rem); + height: calc(100% - 3rem); + border: 1px solid #fff; + position: absolute; + top: 1.5rem; + left: 1.5rem; + z-index: 90; + transition: all 0.3s; + transform: scale(1.1); + opacity: 0; + display: block; + opacity: 0; +} + +.hover-3-content { + position: absolute; + top: 50%; + left: 0; + width: 100%; + transform: translateY(-50%); + text-align: center; + z-index: 99; +} + +.hover-3-description { + opacity: 0; + transform: scale(1.3); + transition: all 0.3s; +} + +.hover-3 img { + width: 110%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.hover-3 .hover-overlay { + background: rgba(0, 0, 0, 0.2); +} + +.hover-3:hover img { + width: 100%; +} + +.hover-3:hover::after { + opacity: 1; + transform: none; +} + +.hover-3:hover .hover-3-description { + opacity: 1; + transform: none; +} + +.hover-3:hover .hover-overlay { + background: rgba(0, 0, 0, 0.8); +} + + +/* DEMO 4 ============================== */ + +.hover-4 img { + width: 110%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.hover-4 .hover-overlay { + background: rgba(0, 0, 0, 0.4); + z-index: 90; +} + +.hover-4-title { + position: absolute; + bottom: 0; + right: 0; + padding: 3rem; + z-index: 99; +} + +.hover-4-description { + position: absolute; + top: 2rem; + left: 2rem; + text-align: right; + border-right: 3px solid #fff; + padding: 0 1rem; + z-index: 99; + transform: translateX(-1.5rem); + opacity: 0; + transition: all 0.3s; +} + +@media (min-width: 992px) { + .hover-4-description { + width: 50%; + } +} + +.hover-4:hover img { + width: 100%; +} + +.hover-4:hover::after { + opacity: 1; + transform: none; +} + +.hover-4:hover .hover-4-description { + opacity: 1; + transform: none; +} + +.hover-4:hover .hover-overlay { + background: rgba(0, 0, 0, 0.8); +} + + +/* DEMO 5 ============================== */ + +.hover-5::after { + content: ''; + width: 100%; + height: 10px; + background: #47c650; + position: absolute; + bottom: -10px; + left: 0; + display: block; + transition: all 0.3s; + z-index: 999; +} + +.hover-5 .hover-overlay { + background: rgba(0, 0, 0, 0.4); +} + +.hover-5-title { + position: absolute; + bottom: 1rem; + left: 0; + transition: all 0.3s; + padding: 2rem 3rem; + z-index: 99; +} + +.hover-5-title span { + transition: all 0.4s; + opacity: 0; + color: #47c650; +} + +.hover-5:hover .hover-overlay { + background: rgba(0, 0, 0, 0.8); +} + +.hover-5:hover .hover-5-title { + bottom: 0; +} + +.hover-5:hover .hover-5-title span { + opacity: 1; +} + +.hover-5:hover::after { + bottom: 0; +} + + +/* + * + * ========================================== + * FOR DEMO PURPOSES + * ========================================== + * + */ + +body { + min-height: 100vh; + background-color: #fafafa; +} \ No newline at end of file diff --git a/assets/img/1.jpg b/assets/img/1.jpg new file mode 100644 index 00000000..a2eaa3dd Binary files /dev/null and b/assets/img/1.jpg differ diff --git a/assets/img/10.jpg b/assets/img/10.jpg new file mode 100644 index 00000000..60caaeb6 Binary files /dev/null and b/assets/img/10.jpg differ diff --git a/assets/img/100.jpg b/assets/img/100.jpg new file mode 100644 index 00000000..c01e582f Binary files /dev/null and b/assets/img/100.jpg differ diff --git a/assets/img/101.jpg b/assets/img/101.jpg new file mode 100644 index 00000000..03a6beac Binary files /dev/null and b/assets/img/101.jpg differ diff --git a/assets/img/102.jpg b/assets/img/102.jpg new file mode 100644 index 00000000..cbc7d03b Binary files /dev/null and b/assets/img/102.jpg differ diff --git a/assets/img/103.jpg b/assets/img/103.jpg new file mode 100644 index 00000000..4477dc05 Binary files /dev/null and b/assets/img/103.jpg differ diff --git a/assets/img/104.jpg b/assets/img/104.jpg new file mode 100644 index 00000000..3035c843 Binary files /dev/null and b/assets/img/104.jpg differ diff --git a/assets/img/105.jpg b/assets/img/105.jpg new file mode 100644 index 00000000..9e9af3ab Binary files /dev/null and b/assets/img/105.jpg differ diff --git a/assets/img/106.jpg b/assets/img/106.jpg new file mode 100644 index 00000000..b6889c38 Binary files /dev/null and b/assets/img/106.jpg differ diff --git a/assets/img/107.jpg b/assets/img/107.jpg new file mode 100644 index 00000000..f363af82 Binary files /dev/null and b/assets/img/107.jpg differ diff --git a/assets/img/108.jpg b/assets/img/108.jpg new file mode 100644 index 00000000..0d5290ec Binary files /dev/null and b/assets/img/108.jpg differ diff --git a/assets/img/109.jpg b/assets/img/109.jpg new file mode 100644 index 00000000..09c30b72 Binary files /dev/null and b/assets/img/109.jpg differ diff --git a/assets/img/11.jpg b/assets/img/11.jpg new file mode 100644 index 00000000..814042f6 Binary files /dev/null and b/assets/img/11.jpg differ diff --git a/assets/img/110.jpg b/assets/img/110.jpg new file mode 100644 index 00000000..1367aa4e Binary files /dev/null and b/assets/img/110.jpg differ diff --git a/assets/img/111.jpg b/assets/img/111.jpg new file mode 100644 index 00000000..bc97b5c6 Binary files /dev/null and b/assets/img/111.jpg differ diff --git a/assets/img/112.jpg b/assets/img/112.jpg new file mode 100644 index 00000000..b72a4736 Binary files /dev/null and b/assets/img/112.jpg differ diff --git a/assets/img/113.jpg b/assets/img/113.jpg new file mode 100644 index 00000000..02786c74 Binary files /dev/null and b/assets/img/113.jpg differ diff --git a/assets/img/114.jpg b/assets/img/114.jpg new file mode 100644 index 00000000..0a5c3cb0 Binary files /dev/null and b/assets/img/114.jpg differ diff --git a/assets/img/115.jpg b/assets/img/115.jpg new file mode 100644 index 00000000..df96e142 Binary files /dev/null and b/assets/img/115.jpg differ diff --git a/assets/img/116.jpg b/assets/img/116.jpg new file mode 100644 index 00000000..870aed3b Binary files /dev/null and b/assets/img/116.jpg differ diff --git a/assets/img/117.jpg b/assets/img/117.jpg new file mode 100644 index 00000000..f5d4d78a Binary files /dev/null and b/assets/img/117.jpg differ diff --git a/assets/img/118.jpg b/assets/img/118.jpg new file mode 100644 index 00000000..aa827082 Binary files /dev/null and b/assets/img/118.jpg differ diff --git a/assets/img/119.jpg b/assets/img/119.jpg new file mode 100644 index 00000000..8e173741 Binary files /dev/null and b/assets/img/119.jpg differ diff --git a/assets/img/12.jpg b/assets/img/12.jpg new file mode 100644 index 00000000..79a1a36b Binary files /dev/null and b/assets/img/12.jpg differ diff --git a/assets/img/120.jpg b/assets/img/120.jpg new file mode 100644 index 00000000..5488ff6b Binary files /dev/null and b/assets/img/120.jpg differ diff --git a/assets/img/121.jpg b/assets/img/121.jpg new file mode 100644 index 00000000..07e609b4 Binary files /dev/null and b/assets/img/121.jpg differ diff --git a/assets/img/122.jpg b/assets/img/122.jpg new file mode 100644 index 00000000..c40d2968 Binary files /dev/null and b/assets/img/122.jpg differ diff --git a/assets/img/123.jpg b/assets/img/123.jpg new file mode 100644 index 00000000..9d4a8403 Binary files /dev/null and b/assets/img/123.jpg differ diff --git a/assets/img/124.jpg b/assets/img/124.jpg new file mode 100644 index 00000000..202aef80 Binary files /dev/null and b/assets/img/124.jpg differ diff --git a/assets/img/125.jpg b/assets/img/125.jpg new file mode 100644 index 00000000..d72d6cf7 Binary files /dev/null and b/assets/img/125.jpg differ diff --git a/assets/img/126.jpg b/assets/img/126.jpg new file mode 100644 index 00000000..b2805614 Binary files /dev/null and b/assets/img/126.jpg differ diff --git a/assets/img/127.jpg b/assets/img/127.jpg new file mode 100644 index 00000000..5aa78412 Binary files /dev/null and b/assets/img/127.jpg differ diff --git a/assets/img/128.jpg b/assets/img/128.jpg new file mode 100644 index 00000000..de195f2e Binary files /dev/null and b/assets/img/128.jpg differ diff --git a/assets/img/129.jpg b/assets/img/129.jpg new file mode 100644 index 00000000..5dd836dc Binary files /dev/null and b/assets/img/129.jpg differ diff --git a/assets/img/13.jpg b/assets/img/13.jpg new file mode 100644 index 00000000..a5a29f94 Binary files /dev/null and b/assets/img/13.jpg differ diff --git a/assets/img/130.jpg b/assets/img/130.jpg new file mode 100644 index 00000000..12783925 Binary files /dev/null and b/assets/img/130.jpg differ diff --git a/assets/img/131.jpg b/assets/img/131.jpg new file mode 100644 index 00000000..f561a111 Binary files /dev/null and b/assets/img/131.jpg differ diff --git a/assets/img/132.jpg b/assets/img/132.jpg new file mode 100644 index 00000000..1c4d8c35 Binary files /dev/null and b/assets/img/132.jpg differ diff --git a/assets/img/133.jpg b/assets/img/133.jpg new file mode 100644 index 00000000..e4bb9f48 Binary files /dev/null and b/assets/img/133.jpg differ diff --git a/assets/img/134.jpg b/assets/img/134.jpg new file mode 100644 index 00000000..5bd0bdef Binary files /dev/null and b/assets/img/134.jpg differ diff --git a/assets/img/135.jpg b/assets/img/135.jpg new file mode 100644 index 00000000..ac0dbc7f Binary files /dev/null and b/assets/img/135.jpg differ diff --git a/assets/img/136.jpg b/assets/img/136.jpg new file mode 100644 index 00000000..c3457882 Binary files /dev/null and b/assets/img/136.jpg differ diff --git a/assets/img/137.jpg b/assets/img/137.jpg new file mode 100644 index 00000000..ce5109d2 Binary files /dev/null and b/assets/img/137.jpg differ diff --git a/assets/img/138.jpg b/assets/img/138.jpg new file mode 100644 index 00000000..bfa3a778 Binary files /dev/null and b/assets/img/138.jpg differ diff --git a/assets/img/139.jpg b/assets/img/139.jpg new file mode 100644 index 00000000..2627e509 Binary files /dev/null and b/assets/img/139.jpg differ diff --git a/assets/img/14.jpg b/assets/img/14.jpg new file mode 100644 index 00000000..5ace230c Binary files /dev/null and b/assets/img/14.jpg differ diff --git a/assets/img/140.jpg b/assets/img/140.jpg new file mode 100644 index 00000000..0fc45e9a Binary files /dev/null and b/assets/img/140.jpg differ diff --git a/assets/img/141.jpg b/assets/img/141.jpg new file mode 100644 index 00000000..d3594d78 Binary files /dev/null and b/assets/img/141.jpg differ diff --git a/assets/img/142.jpg b/assets/img/142.jpg new file mode 100644 index 00000000..e6d5129d Binary files /dev/null and b/assets/img/142.jpg differ diff --git a/assets/img/143.jpg b/assets/img/143.jpg new file mode 100644 index 00000000..437afa4e Binary files /dev/null and b/assets/img/143.jpg differ diff --git a/assets/img/144.jpg b/assets/img/144.jpg new file mode 100644 index 00000000..70bd81b1 Binary files /dev/null and b/assets/img/144.jpg differ diff --git a/assets/img/145.jpg b/assets/img/145.jpg new file mode 100644 index 00000000..57c8503b Binary files /dev/null and b/assets/img/145.jpg differ diff --git a/assets/img/15.jpg b/assets/img/15.jpg new file mode 100644 index 00000000..2a5ffe14 Binary files /dev/null and b/assets/img/15.jpg differ diff --git a/assets/img/16.jpg b/assets/img/16.jpg new file mode 100644 index 00000000..7aad3ec8 Binary files /dev/null and b/assets/img/16.jpg differ diff --git a/assets/img/17.jpg b/assets/img/17.jpg new file mode 100644 index 00000000..5ce8d98f Binary files /dev/null and b/assets/img/17.jpg differ diff --git a/assets/img/18.jpg b/assets/img/18.jpg new file mode 100644 index 00000000..a1469213 Binary files /dev/null and b/assets/img/18.jpg differ diff --git a/assets/img/19.jpg b/assets/img/19.jpg new file mode 100644 index 00000000..997e68cc Binary files /dev/null and b/assets/img/19.jpg differ diff --git a/assets/img/2.jpg b/assets/img/2.jpg new file mode 100644 index 00000000..04c68ee9 Binary files /dev/null and b/assets/img/2.jpg differ diff --git a/assets/img/20.jpg b/assets/img/20.jpg new file mode 100644 index 00000000..b9789f64 Binary files /dev/null and b/assets/img/20.jpg differ diff --git a/assets/img/21.jpg b/assets/img/21.jpg new file mode 100644 index 00000000..55d57bbc Binary files /dev/null and b/assets/img/21.jpg differ diff --git a/assets/img/22.jpg b/assets/img/22.jpg new file mode 100644 index 00000000..acfe30e5 Binary files /dev/null and b/assets/img/22.jpg differ diff --git a/assets/img/23.jpg b/assets/img/23.jpg new file mode 100644 index 00000000..9480f75b Binary files /dev/null and b/assets/img/23.jpg differ diff --git a/assets/img/24.jpg b/assets/img/24.jpg new file mode 100644 index 00000000..02df7e42 Binary files /dev/null and b/assets/img/24.jpg differ diff --git a/assets/img/25.jpg b/assets/img/25.jpg new file mode 100644 index 00000000..af8c2e64 Binary files /dev/null and b/assets/img/25.jpg differ diff --git a/assets/img/26.jpg b/assets/img/26.jpg new file mode 100644 index 00000000..f1151e65 Binary files /dev/null and b/assets/img/26.jpg differ diff --git a/assets/img/27.jpg b/assets/img/27.jpg new file mode 100644 index 00000000..894b8328 Binary files /dev/null and b/assets/img/27.jpg differ diff --git a/assets/img/28.jpg b/assets/img/28.jpg new file mode 100644 index 00000000..9da2e588 Binary files /dev/null and b/assets/img/28.jpg differ diff --git a/assets/img/29.jpg b/assets/img/29.jpg new file mode 100644 index 00000000..cb4d8d16 Binary files /dev/null and b/assets/img/29.jpg differ diff --git a/assets/img/3.jpg b/assets/img/3.jpg new file mode 100644 index 00000000..1b563cee Binary files /dev/null and b/assets/img/3.jpg differ diff --git a/assets/img/30.jpg b/assets/img/30.jpg new file mode 100644 index 00000000..7351e487 Binary files /dev/null and b/assets/img/30.jpg differ diff --git a/assets/img/31.jpg b/assets/img/31.jpg new file mode 100644 index 00000000..60a6374d Binary files /dev/null and b/assets/img/31.jpg differ diff --git a/assets/img/32.jpg b/assets/img/32.jpg new file mode 100644 index 00000000..5758d975 Binary files /dev/null and b/assets/img/32.jpg differ diff --git a/assets/img/33.jpg b/assets/img/33.jpg new file mode 100644 index 00000000..3437d8f8 Binary files /dev/null and b/assets/img/33.jpg differ diff --git a/assets/img/34.jpg b/assets/img/34.jpg new file mode 100644 index 00000000..8dd8c1b0 Binary files /dev/null and b/assets/img/34.jpg differ diff --git a/assets/img/35.jpg b/assets/img/35.jpg new file mode 100644 index 00000000..14a5f715 Binary files /dev/null and b/assets/img/35.jpg differ diff --git a/assets/img/36.jpg b/assets/img/36.jpg new file mode 100644 index 00000000..2f323b06 Binary files /dev/null and b/assets/img/36.jpg differ diff --git a/assets/img/37.jpg b/assets/img/37.jpg new file mode 100644 index 00000000..953f8472 Binary files /dev/null and b/assets/img/37.jpg differ diff --git a/assets/img/38.jpg b/assets/img/38.jpg new file mode 100644 index 00000000..0eed97ba Binary files /dev/null and b/assets/img/38.jpg differ diff --git a/assets/img/39.jpg b/assets/img/39.jpg new file mode 100644 index 00000000..e0616d4a Binary files /dev/null and b/assets/img/39.jpg differ diff --git a/assets/img/4.jpg b/assets/img/4.jpg new file mode 100644 index 00000000..59370db0 Binary files /dev/null and b/assets/img/4.jpg differ diff --git a/assets/img/40.jpg b/assets/img/40.jpg new file mode 100644 index 00000000..2fab5c7f Binary files /dev/null and b/assets/img/40.jpg differ diff --git a/assets/img/41.jpg b/assets/img/41.jpg new file mode 100644 index 00000000..abcc7135 Binary files /dev/null and b/assets/img/41.jpg differ diff --git a/assets/img/42.jpg b/assets/img/42.jpg new file mode 100644 index 00000000..484b4ee7 Binary files /dev/null and b/assets/img/42.jpg differ diff --git a/assets/img/43.jpg b/assets/img/43.jpg new file mode 100644 index 00000000..d7cd865f Binary files /dev/null and b/assets/img/43.jpg differ diff --git a/assets/img/44.jpg b/assets/img/44.jpg new file mode 100644 index 00000000..70a6f893 Binary files /dev/null and b/assets/img/44.jpg differ diff --git a/assets/img/45.jpg b/assets/img/45.jpg new file mode 100644 index 00000000..1b8ae897 Binary files /dev/null and b/assets/img/45.jpg differ diff --git a/assets/img/46.jpg b/assets/img/46.jpg new file mode 100644 index 00000000..40f9eac1 Binary files /dev/null and b/assets/img/46.jpg differ diff --git a/assets/img/47.jpg b/assets/img/47.jpg new file mode 100644 index 00000000..315c73fc Binary files /dev/null and b/assets/img/47.jpg differ diff --git a/assets/img/48.jpg b/assets/img/48.jpg new file mode 100644 index 00000000..08ad4e6f Binary files /dev/null and b/assets/img/48.jpg differ diff --git a/assets/img/49.jpg b/assets/img/49.jpg new file mode 100644 index 00000000..d6878e45 Binary files /dev/null and b/assets/img/49.jpg differ diff --git a/assets/img/5.jpg b/assets/img/5.jpg new file mode 100644 index 00000000..6f6f11b8 Binary files /dev/null and b/assets/img/5.jpg differ diff --git a/assets/img/50.jpg b/assets/img/50.jpg new file mode 100644 index 00000000..a047a3ec Binary files /dev/null and b/assets/img/50.jpg differ diff --git a/assets/img/51.jpg b/assets/img/51.jpg new file mode 100644 index 00000000..179a87aa Binary files /dev/null and b/assets/img/51.jpg differ diff --git a/assets/img/52.jpg b/assets/img/52.jpg new file mode 100644 index 00000000..c2b13ca8 Binary files /dev/null and b/assets/img/52.jpg differ diff --git a/assets/img/53.jpg b/assets/img/53.jpg new file mode 100644 index 00000000..f8b18b52 Binary files /dev/null and b/assets/img/53.jpg differ diff --git a/assets/img/54.jpg b/assets/img/54.jpg new file mode 100644 index 00000000..8077c716 Binary files /dev/null and b/assets/img/54.jpg differ diff --git a/assets/img/55.jpg b/assets/img/55.jpg new file mode 100644 index 00000000..9357ca36 Binary files /dev/null and b/assets/img/55.jpg differ diff --git a/assets/img/56.jpg b/assets/img/56.jpg new file mode 100644 index 00000000..d7142732 Binary files /dev/null and b/assets/img/56.jpg differ diff --git a/assets/img/57.jpg b/assets/img/57.jpg new file mode 100644 index 00000000..7883dd6b Binary files /dev/null and b/assets/img/57.jpg differ diff --git a/assets/img/58.jpg b/assets/img/58.jpg new file mode 100644 index 00000000..cb2d2400 Binary files /dev/null and b/assets/img/58.jpg differ diff --git a/assets/img/59.jpg b/assets/img/59.jpg new file mode 100644 index 00000000..324a8869 Binary files /dev/null and b/assets/img/59.jpg differ diff --git a/assets/img/6.jpg b/assets/img/6.jpg new file mode 100644 index 00000000..e7470fd1 Binary files /dev/null and b/assets/img/6.jpg differ diff --git a/assets/img/60.jpg b/assets/img/60.jpg new file mode 100644 index 00000000..6a5fdb6a Binary files /dev/null and b/assets/img/60.jpg differ diff --git a/assets/img/61.jpg b/assets/img/61.jpg new file mode 100644 index 00000000..61d31960 Binary files /dev/null and b/assets/img/61.jpg differ diff --git a/assets/img/62.jpg b/assets/img/62.jpg new file mode 100644 index 00000000..6ddc405a Binary files /dev/null and b/assets/img/62.jpg differ diff --git a/assets/img/63.jpg b/assets/img/63.jpg new file mode 100644 index 00000000..723c2055 Binary files /dev/null and b/assets/img/63.jpg differ diff --git a/assets/img/64.jpg b/assets/img/64.jpg new file mode 100644 index 00000000..0a223dd3 Binary files /dev/null and b/assets/img/64.jpg differ diff --git a/assets/img/65.jpg b/assets/img/65.jpg new file mode 100644 index 00000000..7fd8a918 Binary files /dev/null and b/assets/img/65.jpg differ diff --git a/assets/img/66.jpg b/assets/img/66.jpg new file mode 100644 index 00000000..374eddb8 Binary files /dev/null and b/assets/img/66.jpg differ diff --git a/assets/img/67.jpg b/assets/img/67.jpg new file mode 100644 index 00000000..5a9d2064 Binary files /dev/null and b/assets/img/67.jpg differ diff --git a/assets/img/68.jpg b/assets/img/68.jpg new file mode 100644 index 00000000..4c48f7a0 Binary files /dev/null and b/assets/img/68.jpg differ diff --git a/assets/img/69.jpg b/assets/img/69.jpg new file mode 100644 index 00000000..ec0e6422 Binary files /dev/null and b/assets/img/69.jpg differ diff --git a/assets/img/7.jpg b/assets/img/7.jpg new file mode 100644 index 00000000..55f6d75b Binary files /dev/null and b/assets/img/7.jpg differ diff --git a/assets/img/70.jpg b/assets/img/70.jpg new file mode 100644 index 00000000..7c749fc3 Binary files /dev/null and b/assets/img/70.jpg differ diff --git a/assets/img/71.jpg b/assets/img/71.jpg new file mode 100644 index 00000000..7e22606d Binary files /dev/null and b/assets/img/71.jpg differ diff --git a/assets/img/72.jpg b/assets/img/72.jpg new file mode 100644 index 00000000..4a0c94e4 Binary files /dev/null and b/assets/img/72.jpg differ diff --git a/assets/img/73.jpg b/assets/img/73.jpg new file mode 100644 index 00000000..7e8c3b32 Binary files /dev/null and b/assets/img/73.jpg differ diff --git a/assets/img/74.jpg b/assets/img/74.jpg new file mode 100644 index 00000000..cf1a15c1 Binary files /dev/null and b/assets/img/74.jpg differ diff --git a/assets/img/75.jpg b/assets/img/75.jpg new file mode 100644 index 00000000..2d515d78 Binary files /dev/null and b/assets/img/75.jpg differ diff --git a/assets/img/76.jpg b/assets/img/76.jpg new file mode 100644 index 00000000..865623bf Binary files /dev/null and b/assets/img/76.jpg differ diff --git a/assets/img/77.jpg b/assets/img/77.jpg new file mode 100644 index 00000000..db4ee6f9 Binary files /dev/null and b/assets/img/77.jpg differ diff --git a/assets/img/78.jpg b/assets/img/78.jpg new file mode 100644 index 00000000..b06bd916 Binary files /dev/null and b/assets/img/78.jpg differ diff --git a/assets/img/79.jpg b/assets/img/79.jpg new file mode 100644 index 00000000..53dad626 Binary files /dev/null and b/assets/img/79.jpg differ diff --git a/assets/img/8.jpg b/assets/img/8.jpg new file mode 100644 index 00000000..b1313255 Binary files /dev/null and b/assets/img/8.jpg differ diff --git a/assets/img/80.jpg b/assets/img/80.jpg new file mode 100644 index 00000000..c29e09cf Binary files /dev/null and b/assets/img/80.jpg differ diff --git a/assets/img/81.jpg b/assets/img/81.jpg new file mode 100644 index 00000000..4073231d Binary files /dev/null and b/assets/img/81.jpg differ diff --git a/assets/img/82.jpg b/assets/img/82.jpg new file mode 100644 index 00000000..bb303740 Binary files /dev/null and b/assets/img/82.jpg differ diff --git a/assets/img/83.jpg b/assets/img/83.jpg new file mode 100644 index 00000000..72c34896 Binary files /dev/null and b/assets/img/83.jpg differ diff --git a/assets/img/84.jpg b/assets/img/84.jpg new file mode 100644 index 00000000..f2f610c9 Binary files /dev/null and b/assets/img/84.jpg differ diff --git a/assets/img/85.jpg b/assets/img/85.jpg new file mode 100644 index 00000000..5af67814 Binary files /dev/null and b/assets/img/85.jpg differ diff --git a/assets/img/86.jpg b/assets/img/86.jpg new file mode 100644 index 00000000..2e2275eb Binary files /dev/null and b/assets/img/86.jpg differ diff --git a/assets/img/87.jpg b/assets/img/87.jpg new file mode 100644 index 00000000..a6a1a3c0 Binary files /dev/null and b/assets/img/87.jpg differ diff --git a/assets/img/88.jpg b/assets/img/88.jpg new file mode 100644 index 00000000..01338783 Binary files /dev/null and b/assets/img/88.jpg differ diff --git a/assets/img/89.jpg b/assets/img/89.jpg new file mode 100644 index 00000000..e5d0ed58 Binary files /dev/null and b/assets/img/89.jpg differ diff --git a/assets/img/9.jpg b/assets/img/9.jpg new file mode 100644 index 00000000..5a14a02a Binary files /dev/null and b/assets/img/9.jpg differ diff --git a/assets/img/90.jpg b/assets/img/90.jpg new file mode 100644 index 00000000..7e99abe0 Binary files /dev/null and b/assets/img/90.jpg differ diff --git a/assets/img/91.jpg b/assets/img/91.jpg new file mode 100644 index 00000000..bb4d71d8 Binary files /dev/null and b/assets/img/91.jpg differ diff --git a/assets/img/92.jpg b/assets/img/92.jpg new file mode 100644 index 00000000..4be08a12 Binary files /dev/null and b/assets/img/92.jpg differ diff --git a/assets/img/93.jpg b/assets/img/93.jpg new file mode 100644 index 00000000..73256973 Binary files /dev/null and b/assets/img/93.jpg differ diff --git a/assets/img/94.jpg b/assets/img/94.jpg new file mode 100644 index 00000000..969db981 Binary files /dev/null and b/assets/img/94.jpg differ diff --git a/assets/img/95.jpg b/assets/img/95.jpg new file mode 100644 index 00000000..1c9d1fd3 Binary files /dev/null and b/assets/img/95.jpg differ diff --git a/assets/img/96.jpg b/assets/img/96.jpg new file mode 100644 index 00000000..f73e6513 Binary files /dev/null and b/assets/img/96.jpg differ diff --git a/assets/img/97.jpg b/assets/img/97.jpg new file mode 100644 index 00000000..f9fcb00e Binary files /dev/null and b/assets/img/97.jpg differ diff --git a/assets/img/98.jpg b/assets/img/98.jpg new file mode 100644 index 00000000..a2a585dd Binary files /dev/null and b/assets/img/98.jpg differ diff --git a/assets/img/99.jpg b/assets/img/99.jpg new file mode 100644 index 00000000..776ab05b Binary files /dev/null and b/assets/img/99.jpg differ diff --git a/assets/img/car1.jpg b/assets/img/car1.jpg new file mode 100644 index 00000000..adad01b0 Binary files /dev/null and b/assets/img/car1.jpg differ diff --git a/assets/img/car2.jpg b/assets/img/car2.jpg new file mode 100644 index 00000000..766b472b Binary files /dev/null and b/assets/img/car2.jpg differ diff --git a/assets/img/car3.jpg b/assets/img/car3.jpg new file mode 100644 index 00000000..488c7545 Binary files /dev/null and b/assets/img/car3.jpg differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..d7e83782 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,150 @@ +// Declaring variables +let localHost = "https://jsonplaceholder.typicode.com/"; //"http://localhost:3000"; forced to create local host in mac with npx https://jsonplaceholder.typicode.com/ +let postsContainer = $("#cards__container"); +let initialPosts = 0; +let limit = 20; +let title; +let body; +let userId; +let id; +let cards; +let postElement; +let posts; +// Declaring events + +// Declaring funtions + +// Fetch the data from the API with await response.json() returns a promise resolved to a JSON object + +async function getAllPosts() { + const ALLPOSTS = await fetch( + `https://jsonplaceholder.typicode.com/posts/?_start=${initialPosts}&_limit=${limit}` + ); + let data = await ALLPOSTS.json(); + return data; +} +// Let´s inject data to the DOM + +async function showAllPosts() { + const POSTS = await getAllPosts(); + POSTS.forEach((post) => { + let eachPost = + $(`
+
+ ... +
+

${post.id}  ${post.title}

+
+
+ { + let eachComment = $(`
+ ${review.name} + ${review.body} + ${review.email} +
`); + displaycmmts.append(eachComment); + + $("#exampleModal").on("hide.bs.modal", function() { + $("#btn__showcomments").removeClass("d-none"); + $(".modal-body2").remove(); + $("#load-comments").off(); + }); + }); + }); + }); + } +}); + +// This is the function to delete the posts + +function deletePost() { + $("#btn__deletepost").on("click", function() { + let deleteButton = { + url: `https://jsonplaceholder.typicode.com/posts/${postElement}`, + method: "DELETE", + timeout: 0, + }; + $.ajax(deleteButton).done(function() { + const deleteMe = $(`[id="${postElement}"]`); + deleteMe.remove(); + $("#modaldelete").modal("show"); + $("#close-btn").on("click", function() { + $("#modaldelete").modal("hide"); + }); + }) + }) +} +deletePost(); + +// This is the function to edit the posts with the save button. + +function editPost() { + $("#editModalBtn").on("click", function() { + var editPost = { + url: `https://jsonplaceholder.typicode.com/posts/${postElement}`, + method: "PATCH", + timeout: 0, + data: { + title: $("#edittitle").val(), + body: $("#bodyContent").val(), + }, + }; + + $.ajax(editPost).done(function() { + $("input").val(""); + $("#editModal").modal("show"); + $("#confirmModalBtn").on("click", function() { + $("#editModal").modal("hide"); + }); + }); + }); +} +editPost(); \ No newline at end of file diff --git a/assets/js/modals.js b/assets/js/modals.js new file mode 100644 index 00000000..992dea39 --- /dev/null +++ b/assets/js/modals.js @@ -0,0 +1,49 @@ +// Show modal with text content + +// $(".modal__btn").on("click", function() { +// $("#postsmodal").css("display", "block"); +// $("#postsmodal").css("opacity", "1"); +// }); + +//modal to edit + +$("#editModalBtn").on("click", function() { + $("#editModal").css("display", "block"); + $("#editModal").css("opacity", "1"); +}); + +//modal to confirm + +$("#confirmModalBtn").on("click", function() { + $("#confirmModal").css("display", "block"); + $("#confirmModal").css("opacity", "1"); +}); + +//exit modal edit + +$("#cancelEditModalBtn1").on("click", function() { + $("#editModal").css("display", "none"); + $("#editModal").css("opacity", "0"); +}); + +$("#cancelEditModalBtn2").on("click", function() { + $("#editModal").css("display", "none"); + $("#editModal").css("opacity", "0"); +}); + +//exit modal confirm + +$("#cancelConfirmModalBtn1").on("click", function() { + $("#confirmModal").css("display", "none"); + $("#confirmModal").css("opacity", "0"); +}); + +$("#cancelConfirmModalBtn2").on("click", function() { + $("#confirmModal").css("display", "none"); + $("#confirmModal").css("opacity", "0"); +}); + +//change styles + +$(".modal-dialog").css("max-width", "80%"); +$(".modal-dialog").css("transform", "translate(0,0px)"); \ No newline at end of file diff --git a/assets/presentation/Blog with API.pdf b/assets/presentation/Blog with API.pdf new file mode 100644 index 00000000..11152b3f Binary files /dev/null and b/assets/presentation/Blog with API.pdf differ diff --git a/db.json b/db.json new file mode 100644 index 00000000..f2ae48df --- /dev/null +++ b/db.json @@ -0,0 +1,19 @@ +{ + "posts": [ + { + "id": 1, + "title": "json-server", + "author": "typicode" + } + ], + "comments": [ + { + "id": 1, + "body": "some comment", + "postId": 1 + } + ], + "profile": { + "name": "typicode" + } +} \ No newline at end of file diff --git a/main.html b/main.html new file mode 100644 index 00000000..aa4e5edf --- /dev/null +++ b/main.html @@ -0,0 +1,200 @@ + + + + + + + + + + + + + + + + + + + + + + + Blog with API + + + + +
+
+ + + +
+
+
+
+
+
+
+
+
+ + + +
+ + + + + + + + + +
+ + \ No newline at end of file