From 89ec0467d6236990dd3a37579dcbe6c5eed9f031 Mon Sep 17 00:00:00 2001 From: sarahhjchung Date: Fri, 25 Feb 2022 20:54:44 -0500 Subject: [PATCH] change styling of containers --- client/src/components/FeaturedContainer.css | 64 +++++++++++---------- client/src/components/ProjectContainer.css | 21 ++++--- client/src/views/About.css | 57 +++++++++--------- client/src/views/Projects.css | 29 +++++----- 4 files changed, 91 insertions(+), 80 deletions(-) diff --git a/client/src/components/FeaturedContainer.css b/client/src/components/FeaturedContainer.css index 8eb3cf5..0a893ab 100644 --- a/client/src/components/FeaturedContainer.css +++ b/client/src/components/FeaturedContainer.css @@ -1,54 +1,60 @@ .featuredProjectContainer { - background-image: linear-gradient(white, rgba(255, 255, 255, 0), white); - border-radius: 15px; - padding: 40px 80px; - display: flex; - height: 400px; + /* From https://css.glass */ + background: rgba(204, 204, 204, 0.2); + border-radius: 20px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + border: 1px solid rgba(204, 204, 204, 0.3); + padding: 40px 80px; + display: flex; + height: 400px; } .projectContent { - display: flex; - flex-direction: column; - text-align: justify; - width: 50%; - margin-right: 40px; - line-height: 0px; + display: flex; + flex-direction: column; + text-align: justify; + width: 50%; + margin-right: 40px; + line-height: 0px; } .projectTitle { - font-weight: 600; - text-transform: uppercase; - line-height: normal; + font-weight: 600; + text-transform: uppercase; + line-height: normal; } .projectDescription { - line-height: normal; - margin: 20px 0px; + line-height: normal; + margin: 20px 0px; } .projectInstructions { - line-height: normal; - font-size: x-small; + line-height: normal; + font-size: x-small; } .projectTools { - text-transform: uppercase; - line-height: normal; + text-transform: uppercase; + line-height: normal; } .projectEtc { - width: 50%; - display: flex; - flex-direction: column; - text-align: right; + width: 50%; + display: flex; + flex-direction: column; + text-align: right; } .projectImg { - height: 90%; + height: 90%; } .projectImg img { - box-shadow: 3px 6px 10px #cbcbcb; - border-radius: 15px; - max-height: 90%; - max-width: 90%;} \ No newline at end of file + box-shadow: 3px 6px 10px #cbcbcb; + border-radius: 15px; + max-height: 90%; + max-width: 90%; +} diff --git a/client/src/components/ProjectContainer.css b/client/src/components/ProjectContainer.css index ed4a302..92ecfd0 100644 --- a/client/src/components/ProjectContainer.css +++ b/client/src/components/ProjectContainer.css @@ -1,11 +1,16 @@ .projectContainer { - background-image: linear-gradient(white, rgba(255, 255, 255, 0), white); - border-radius: 15px; - padding: 10px 20px; + /* From https://css.glass */ + background: rgba(230, 230, 227, 0.24); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(2.1px); + -webkit-backdrop-filter: blur(2.1px); + border: 1px solid rgba(230, 230, 227, 0.3); + border-radius: 20px; + padding: 10px 20px; } .projectContainer:hover { - box-shadow: inset 0 0 10px #a3a3a3;; + box-shadow: inset 0 0 10px #a3a3a3; } /* .projectContent { @@ -14,13 +19,13 @@ } */ .projectTitle { - height: 10%; + height: 10%; } .projectTools { - min-height: 10%; + min-height: 10%; } .projectDescription { - height: 40%; -} \ No newline at end of file + height: 40%; +} diff --git a/client/src/views/About.css b/client/src/views/About.css index 115e0a7..8ea971f 100644 --- a/client/src/views/About.css +++ b/client/src/views/About.css @@ -1,54 +1,53 @@ .aboutContainer { - margin: 0px 50px; - display: inline-block; - overflow: auto; - position: fixed; - top: 110px; + margin: 0px 50px; + display: inline-block; + overflow: auto; + position: fixed; + top: 110px; } #aboutImage { - width: 45%; - position: fixed; - top: 100px; - right: 20px; + width: 45%; + position: fixed; + top: 100px; + right: 20px; } .aboutContent { - height: 550px; - width: 40%; - display: inline-block; - margin: 100px 0px 20px 50px; + height: 550px; + width: 40%; + display: inline-block; + margin: 100px 0px 20px 50px; } .glassContainer { - border: 2px solid white; - display: inline-block; - border-radius: 15px; - background-image: linear-gradient(white, rgba(255, 255, 255, 0)); - box-shadow: 3px 6px 10px #cbcbcb; - padding: 30px 50px; - margin: 10px 20px 30px 0px; - width: 80%; + display: inline-block; + border-radius: 20px; + background: #e6e3e3; + box-shadow: 12px 12px 37px #d4d4d4, -12px -12px 37px #ffffff; + padding: 30px 50px; + margin: 10px 20px 30px 0px; + width: 80%; } .funFact { - display: flex; - align-items: flex-start; - justify-content: flex-start; + display: flex; + align-items: flex-start; + justify-content: flex-start; } .funFactIcon { - width: 24px; + width: 24px; } a { - text-decoration: none; + text-decoration: none; } h3 { - text-align: center; + text-align: center; } td { - padding: 0px 20px 5px 0px; -} \ No newline at end of file + padding: 0px 20px 5px 0px; +} diff --git a/client/src/views/Projects.css b/client/src/views/Projects.css index 8c0280e..05f6cff 100644 --- a/client/src/views/Projects.css +++ b/client/src/views/Projects.css @@ -1,30 +1,31 @@ .projectsPage { - background-image: url('../assets/projects.png'); - background-size: 100% auto; + background-image: url("../assets/projects.png"); + background-size: 100% auto; } .projectsHeader { - margin: 150px 50px 20px; + margin: 150px 50px 20px; } .carousel { - width: 80%; - margin: 40px auto; + width: 80%; + margin: 40px auto; + border-radius: 20px; } .allProjectsHeader { - margin-left: 50px; + margin-left: 50px; } .allProjectsContainer { - margin: 20px 50px; - display: grid; - grid-gap: 20px 20px; - grid-template-columns: 23% 23% 23% 23%; - /* height: 100%; */ + margin: 20px 50px; + display: grid; + grid-gap: 20px 20px; + grid-template-columns: 23% 23% 23% 23%; + /* height: 100%; */ } .allProjectsContainer a { - text-decoration: none; - color: black; -} \ No newline at end of file + text-decoration: none; + color: black; +}