Experimenting MLH#2

YuriiChubenko · Jul 12, 2024 · b5c6a91 · b5c6a91
1 parent 25f26cb
commit b5c6a91
Showing 1 changed file with 43 additions and 20 deletions.
diff --git a/css/original.css b/css/original.css
@@ -1,32 +1,34 @@
-/*
-* RegistrationHacks Style File
-* http://bit.ly/1ywfhq7
-*/
+/* RegistrationHacks Style File
+ * http://bit.ly/1ywfhq7
+ */
 
 /* Open Sans Google Font */
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,700);
 
-
 /* Montserrat Google Font */
 @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
 
-/*
+/* 
  * Primary Blue: #44D5FF;
  * Dark Blue: #0F2C34;
- * Primary Pink: #FF7FA8;
+ * Primary Teal: #7DBBC3;
  */
 
 * {
   font-family: 'Open Sans';
   font-weight: 600;
+  box-sizing: border-box;
 }
 
 body {
-  background-color: #F5699C;
+  background: linear-gradient(135deg, rgba(125, 187, 195, 0.5), rgba(68, 213, 255, 0.5));
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  margin: 0;
 }
 
 section {
-  overflow-x:hidden;
+  overflow-x: hidden;
 }
 
 /*
@@ -49,8 +51,14 @@ section {
  */
 
 .hero {
-  background-color: #F5699C;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  background: rgba(125, 187, 195, 0.4);
+  border-radius: 20px;
+  margin: 20px;
   min-height: 110vh;
+  padding: 20px;
+  position: relative;
 }
 
 .hero img {
@@ -69,8 +77,8 @@ section {
 }
 
 .hero .wrapper h1 {
-  background: #fff;
-  background: rgba(255, 255, 255, .3);
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 20px;
   display: inline-block;
   font-size: 60px;
   font-weight: 800;
@@ -94,7 +102,7 @@ section {
 }
 
 .hero .buttons a {
-  background: #fff;
+  background: rgba(255, 255, 255, 0.5);
   border: 10px solid #0F2C34;
   border-radius: 40px;
   color: #0F2C34;
@@ -105,13 +113,13 @@ section {
   padding: 10px 70px;
   text-decoration: none;
   text-transform: uppercase;
+  transition: all 0.2s ease;
 }
 
 .hero .buttons a:hover,
 .hero .buttons a:focus {
   background-color: #0F2C34;
   color: #fff;
-  transition: all 0.2s ease;
 }
 
 .hero .buttons a:not(:last-child) {
@@ -123,8 +131,12 @@ section {
  */
 
 .about {
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 20px;
   border-width: 15px 0;
-  background-color: #fff;
+  margin: 20px;
   padding: 130px 0;
   position: relative;
 }
@@ -147,7 +159,11 @@ section {
  */
 
 .info {
-  background-color: #fff;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 20px;
+  margin: 20px;
   margin-top: 15px;
   padding: 100px 0;
   position: relative;
@@ -170,14 +186,17 @@ section {
 
 .info .item p {
   font-size: 20px;
-}
 
 /*
  * FAQ Section
  */
 
 .faq {
-  background-color: #fff;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 20px;
+  margin: 20px;
   margin-top: 15px;
   padding: 100px 0;
   position: relative;
@@ -217,8 +236,12 @@ section {
  */
 
 .footer {
-  background-color: #F5699C;
+  background: rgba(125, 187, 195, 0.4);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 20px;
   color: #fff;
+  margin: 20px;
   padding: 30px 0;
 }
 
@@ -255,4 +278,4 @@ section {
     border-top-width: 8px;
     top: -8px;
   }
-}
+}