From 6f1338f68a352f7023165a21db12c98838e1c780 Mon Sep 17 00:00:00 2001 From: Shreyaskr1409 Date: Thu, 19 Dec 2024 16:22:21 +0530 Subject: [PATCH] projects ection modified --- .idea/.gitignore | 8 - .idea/Portfolio.iml | 9 - .idea/misc.xml | 6 - .idea/modules.xml | 8 - .idea/vcs.xml | 6 - .vscode/settings.json | 3 - index.html | 15 +- projects_style.css | 391 ++++++++++++++++++++++++++++++++++++++++ style.css | 404 ------------------------------------------ style2.css | 20 ++- 10 files changed, 410 insertions(+), 460 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/Portfolio.iml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/vcs.xml delete mode 100644 .vscode/settings.json create mode 100644 projects_style.css diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 13566b8..0000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ -# Datasource local storage ignored files -/dataSources/ -/dataSources.local.xml diff --git a/.idea/Portfolio.iml b/.idea/Portfolio.iml deleted file mode 100644 index d6ebd48..0000000 --- a/.idea/Portfolio.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 07115cd..0000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 99cc752..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1dd..0000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6b665aa..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} diff --git a/index.html b/index.html index 7a6b812..791ae14 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,11 @@ + + - - @@ -142,9 +142,7 @@

Simpliblog

Repository
- -

Click to explore:

@@ -184,6 +182,7 @@

Health App

« »
+
@@ -191,15 +190,15 @@

Health App

- + diff --git a/projects_style.css b/projects_style.css new file mode 100644 index 0000000..7d49ff3 --- /dev/null +++ b/projects_style.css @@ -0,0 +1,391 @@ + +#my_projects { + + min-height: 100vh; + width: 100%; + position: relative; + overflow: hidden; + + #my_projects_title { + font-size: 3rem; + margin-left: 40px; + width: fit-content; + font-family: Catchy Mager; + background: linear-gradient(to right, #ffe4c4, #b07225); + background-clip: text; + color: transparent; + z-index: 5; + position: relative; + } + + .my_projects_container { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + justify-content: center; + margin: 0 auto; + z-index: 2; + position: relative; + padding-bottom: 20px; + } + + .card_p { + z-index: 5; + margin: 20px 20px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + #img_p { + width: 50vw; + height: auto; + margin: 20px; + object-fit: cover; + min-height: 500px; + border-radius: 10px; + position: relative; + z-index: 5; + } + + #text_p { + width: 100%; + max-width: 350px; + margin: 20px; + font-family: 'Raleway', sans-serif; + color: #ffe4c4; + z-index: 5; + + #title_p { + font-size: 1.2rem; + margin-bottom: 10px; + font-family: 'Raleway', sans-serif; + font-weight: 700; + z-index: 5; + } + + #body_p { + font-size: 1rem; + font-family: 'Open Sans', sans-serif; + line-height: 1.4; + z-index: 5; + } + + #button_p { + margin: 30px 0px 0 0px; + font-size: 24px; + padding: 5px 20px; + background: #184644; + width: min-content; + border-radius: 8px; + scale: 1; + transition: linear 100ms; + cursor: pointer; + transition: transform 0.3s ease, background-color 0.3s ease; + z-index: 5; + } + + #button_p:hover { + transform: scale(1.05); + background-color: #226d6b; + } + } + } + + .my_projects_container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-image: url('./assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg'); + background-size: cover; + background-position: center; + filter: blur(5px) brightness(50%); + z-index: 0; + } + + @media (max-width: 600px) { + #my_projects_title { + font-size: 1.6em !important; + } + .card_p { + flex-direction: column; + } + + #img_p { + min-height: 0px !important; + width: 90vw !important; + height: auto !important; + } + + #text_p { + max-width: 90vw !important; + padding: 20px 20px !important; + max-width: none !important; + } + + #title_p { + font-size: 1.4em !important; + } + + #button_p { + font-size: 18px !important; + padding: 10px 15px !important; + } + } + + @media (min-width: 601px) and (max-width: 1000px) { + .card_p { + flex-direction: column; + } + + #img_p { + min-height: 0px !important; + width: 90vw !important; + height: auto !important; + } + + #text_p { + max-width: 90vw !important; + padding: 20px 20px !important; + max-width: none !important; + } + + #title_p { + font-size: 1.4em !important; + } + } + + @media (min-width: 1200px) { + .card_p { + max-width: 1200px !important; + } + + #text_p { + max-width: 400px !important; + } + } +} + +#my_projects { + + .my_projects_section { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + .card-slider { + overflow: hidden; + width: 90%; + display: flex; + align-items: center; + } + + .cards { + display: flex; + transition: transform 0.5s ease; + } + + .card { + z-index: 4; + width: 200px; + height: 360px; + margin: 0 10px; + background: linear-gradient(45deg, #1b2644 5%, #737687 50%, #cba799 70%, #f5d0b6 90%, #fefedb); + display: flex; + align-items: flex-end; + justify-content: flex-start; + border-radius: 10px; + cursor: pointer; + position: relative; + overflow: hidden; + transition: 0.15s ease-out; + filter: brightness(0.7); + } + + .project_name h2, + .project_name p { + margin: 0; + } + + .circle { + position: absolute; + top: 10px; + right: 10px; + width: 40px; + height: 40px; + background-color: #FFC107; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + scale: 1; + opacity: 0; + transition: 0.1s ease-out !important; + box-shadow: 0px 0px 10px #000000; + } + + .circle:hover { + transition: 0.1s ease-in !important; + scale: 1.1; + } + + .circle::before { + content: '➜'; + transform: rotateZ(-45deg); + font-size: 20px; + color: black; + } + + .project_name { + margin: 0; + text-align: center; + text-align: left; + font-size: 25px; + font-family: Raleway; + font-weight: 100; + color: #ffffff; + pointer-events: none; + } + + .hover { + position: absolute; + top: 100%; + transform: translateY(0%); + left: 0; + width: 100%; + height: fit-content; + padding: 8px 10px 8px 10px; + background: rgba(0, 0, 0, 0.5); + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + opacity: 0; + transition: opacity 0.3s ease-in-out; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .card:hover, .card:active { + transition: 0.3s ease-out; + filter: brightness(1); + } + + .card:hover .hover { + transition: 0.7s ease-out; + transform: translateY(-100%); + opacity: 1; + } + + .card:hover .circle { + transition: 0.7s ease-out; + opacity: 1; + } + + .left-arrow_2 { + position: absolute; + top: 50%; + z-index: 5; + left: 2.5%; + transform: translateX(-50%) translateY(-50%); + font-size: 5em; + color: #FFD7D4; + } + + .right-arrow_2 { + position: absolute; + top: 50%; + z-index: 5; + right: 2.5%; + transform: translateX(50%) translateY(-50%); + font-size: 5em; + color: #FFD7D4; + } + + @media (max-width: 600px) { + #Click_to_explore { + font-size: 2em; + } + + .card-slider { + overflow: scroll; + width: 100%; + } + + .card { + width: 80vw; + height: 250px; + } + + .left-arrow_2, .right-arrow_2 { + display: none; + } + + .card .circle { + opacity: 1; + } + .card, .card { + filter: brightness(1); + } + + .card .hover { + transform: translateY(-100%); + opacity: 1; + } + } + + @media (min-width: 601px) and (max-width: 1000px) { + #Click_to_explore { + font-size: 3em; + } + + .card-slider { + overflow: scroll; + width: 100%; + } + + .card { + width: 45vw; + height: 300px; + } + .left-arrow_2, .right-arrow_2 { + display: none; + } + .card .circle { + opacity: 1; + } + .card, .card { + filter: brightness(1); + } + + .card .hover { + transform: translateY(-100%); + opacity: 1; + } + } + + @media (min-width: 1400px) { + .card-slider { + width: 85%; + } + + .card { + width: 220px; + height: 380px; + } + } + +} diff --git a/style.css b/style.css index 40048c4..bca152a 100644 --- a/style.css +++ b/style.css @@ -629,407 +629,3 @@ body { } - -#my_projects { - padding-top: 50px; - min-height: 100vh; - width: 100%; - position: relative; - overflow: hidden; - - #my_projects_title { - font-size: 3.5vw; - margin-left: 20px; - width: fit-content; - font-family: Catchy Mager; - background: linear-gradient(to right, #ffe4c4, #b07225); - background-clip: text; - color: transparent; - z-index: 5; - position: relative; - } - - .my_projects_container { - position: relative; - display: flex; - flex-direction: column; - width: 100%; - align-items: center; - justify-content: center; - margin: 0 auto; - z-index: 2; - position: relative; - } - - .card_p { - z-index: 5; - margin: 20px 20px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - #img_p { - width: 50vw; - height: auto; - margin: 20px; - object-fit: cover; - max-width: 750px; - border-radius: 10px; - position: relative; - z-index: 5; - } - - #text_p { - width: 100%; - max-width: 400px; - margin: 20px; - font-family: 'Raleway', sans-serif; - color: #ffe4c4; - z-index: 5; - - #title_p { - font-size: 2em; - margin-bottom: 10px; - font-family: 'Raleway', sans-serif; - font-weight: 700; - z-index: 5; - } - - #body_p { - font-size: 1.1em; - font-family: 'Open Sans', sans-serif; - line-height: 1.4; - z-index: 5; - } - - #button_p { - margin: 30px 0px 0 0px; - font-size: 24px; - padding: 5px 20px; - background: #184644; - width: min-content; - border-radius: 8px; - scale: 1; - transition: linear 100ms; - cursor: pointer; - transition: transform 0.3s ease, background-color 0.3s ease; - z-index: 5; - } - - #button_p:hover { - transform: scale(1.05); - background-color: #226d6b; - } - } - } - - .my_projects_container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-image: url('./assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg'); - background-size: cover; - background-position: center; - filter: blur(5px) brightness(50%); - z-index: 0; - } - - @media (max-width: 600px) { - #my_projects_title { - font-size: 1.6em !important; - } - .card_p { - flex-direction: column; - } - - #img_p { - width: 90vw !important; - height: auto !important; - } - - #text_p { - max-width: 90vw !important; - padding: 20px 20px !important; - max-width: none !important; - } - - #title_p { - font-size: 1.4em !important; - } - - #button_p { - font-size: 18px !important; - padding: 10px 15px !important; - } - } - - @media (min-width: 601px) and (max-width: 900px) { - .card_p { - flex-direction: column; - } - - #img_p { - width: 70vw !important; - height: auto !important; - } - - #text_p { - max-width: 70vw !important; - } - - #title_p { - font-size: 2.2em !important; - } - } - - @media (min-width: 1200px) { - .card_p { - max-width: 1200px !important; - } - - #img_p { - width: 50vw !important; - } - - #text_p { - max-width: 400px !important; - } - } -} - -#my_projects { - #Click_to_explore { - font-size: 4vw; - margin: 0; - margin-left: 20px; - padding-left: 10px; - width: fit-content; - font-family: Catchy Mager; - background: linear-gradient(to right, #ffe4c4, #b07225); - background-clip: text; - color: transparent; - position: relative; - z-index: 5; - } - - .my_projects_section { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - position: relative; - padding: 20px 0; - } - - .card-slider { - overflow: hidden; - width: 90%; - display: flex; - align-items: center; - } - - .cards { - display: flex; - transition: transform 0.5s ease; - } - - .card { - z-index: 4; - width: 260px; - height: 420px; - margin: 0 10px; - background: linear-gradient(45deg, #1b2644 5%, #737687 50%, #cba799 70%, #f5d0b6 90%, #fefedb); - display: flex; - align-items: flex-end; - justify-content: flex-start; - border-radius: 10px; - cursor: pointer; - position: relative; - overflow: hidden; - transition: 0.15s ease-out; - filter: brightness(0.7); - } - - .project_name h2, - .project_name p { - margin: 0; - } - - .circle { - position: absolute; - top: 10px; - right: 10px; - width: 40px; - height: 40px; - background-color: #FFC107; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - scale: 1; - opacity: 0; - transition: 0.1s ease-out !important; - box-shadow: 0px 0px 10px #000000; - } - - .circle:hover { - transition: 0.1s ease-in !important; - scale: 1.1; - } - - .circle::before { - content: '➜'; - transform: rotateZ(-45deg); - font-size: 20px; - color: black; - } - - .project_name { - margin: 0; - text-align: center; - text-align: left; - font-size: 25px; - font-family: Raleway; - font-weight: 100; - color: #ffffff; - pointer-events: none; - } - - .hover { - position: absolute; - top: 100%; - transform: translateY(0%); - left: 0; - width: 100%; - height: fit-content; - padding: 8px 10px 8px 10px; - background: rgba(0, 0, 0, 0.5); - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - opacity: 0; - transition: opacity 0.3s ease-in-out; - } - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - - .card:hover, .card:active { - transition: 0.3s ease-out; - filter: brightness(1); - } - - .card:hover .hover { - transition: 0.7s ease-out; - transform: translateY(-100%); - opacity: 1; - } - - .card:hover .circle { - transition: 0.7s ease-out; - opacity: 1; - } - - .left-arrow_2 { - position: absolute; - top: 50%; - z-index: 5; - left: 2.5%; - transform: translateX(-50%) translateY(-50%); - font-size: 5em; - color: #FFD7D4; - } - - .right-arrow_2 { - position: absolute; - top: 50%; - z-index: 5; - right: 2.5%; - transform: translateX(50%) translateY(-50%); - font-size: 5em; - color: #FFD7D4; - } - - @media (max-width: 600px) { - #Click_to_explore { - font-size: 2em; - } - - .card-slider { - overflow: scroll; - width: 100%; - } - - .card { - width: 80vw; - height: 250px; - } - - .left-arrow_2, .right-arrow_2 { - display: none; - } - - .card .circle { - opacity: 1; - } - .card, .card { - filter: brightness(1); - } - - .card .hover { - transform: translateY(-100%); - opacity: 1; - } - } - - @media (min-width: 601px) and (max-width: 950px) { - #Click_to_explore { - font-size: 3em; - } - - .card-slider { - overflow: scroll; - width: 100%; - } - - .card { - width: 45vw; - height: 300px; - } - .left-arrow_2, .right-arrow_2 { - display: none; - } - .card .circle { - opacity: 1; - } - .card, .card { - filter: brightness(1); - } - - .card .hover { - transform: translateY(-100%); - opacity: 1; - } - } - - @media (min-width: 1200px) { - .card-slider { - width: 85%; - } - - .card { - width: 280px; - height: 440px; - } - } - -} diff --git a/style2.css b/style2.css index 453c7e8..c3c24c0 100644 --- a/style2.css +++ b/style2.css @@ -1,18 +1,18 @@ #am_container { z-index: 0; width: 100%; - height: 150vh; - background-image: url("/assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg"); + height: 500px; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; + margin: 20px 0px; #am_inner_container{ z-index: 1; - height: 120vh; - width: 70vw; + height: 100%; + width: 90%; background-color: #00000063; border-radius: 20px; backdrop-filter: blur(20px); @@ -22,11 +22,15 @@ display: flex; justify-content: center; align-items: center; - height: 70vh; - width: 70vw; + height: 100%; + width: 100%; } #map_raipur { - height: 70vh; - width: 60vw; + height: 100%; + width: 100%; + } + #map_figure { + height: 100%; + width: 100%; } } \ No newline at end of file