diff --git a/css/original.css b/css/original.css index 47b512db..cc8742ae 100644 --- 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; } -} \ No newline at end of file +}