From 8d2aea76a30acb1b9a6f81b5328d8fb3cb4fc67e Mon Sep 17 00:00:00 2001 From: Mohammed Mikdhad C <54241506+mikdhadc@users.noreply.github.com> Date: Sat, 3 Oct 2020 17:52:11 +0530 Subject: [PATCH] Add files via upload add new colours --- index.html | 966 ++++++++++++++++++++++++++--------------------------- style.css | 291 ++++++++++++++++ 2 files changed, 774 insertions(+), 483 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index e7c64f0..d010fa1 100644 --- a/index.html +++ b/index.html @@ -1,484 +1,484 @@ - - - - - - - VinHack - VIT Vellore - - - - - - - - - - -

Hack with Us!

-
-

VinHack | VinnovateIT

-
-
- Hours -
- 2 - - 2 - - 2 - - 2 - -
-
- 4 - - 4 - - 4 - - 4 - -
-
-
- Minutes -
- 0 - - 0 - - 0 - - 0 - -
-
- 0 - - 0 - - 0 - - 0 - -
-
-
- Seconds -
- 0 - - 0 - - 0 - - 0 - -
-
- 0 - - 0 - - 0 - - 0 - -
-
-
-
-
-
-
-
- -
-
-

- Last commit by Vinit Shahdeo on VinnovateIT repository! - 1 hour ago -

-
-
-
-
-
- - - - - - - - - - + + + + + + + VinHack - VIT Vellore + + + + + + + + + + +

Hack with Us!

+
+

VinHack | VinnovateIT

+
+
+ Hours +
+ 2 + + 2 + + 2 + + 2 + +
+
+ 4 + + 4 + + 4 + + 4 + +
+
+
+ Minutes +
+ 0 + + 0 + + 0 + + 0 + +
+
+ 0 + + 0 + + 0 + + 0 + +
+
+
+ Seconds +
+ 0 + + 0 + + 0 + + 0 + +
+
+ 0 + + 0 + + 0 + + 0 + +
+
+
+
+
+
+
+
+ +
+
+

+ Last commit by Vinit Shahdeo on VinnovateIT repository! + 1 hour ago +

+
+
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..69f9aa4 --- /dev/null +++ b/style.css @@ -0,0 +1,291 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat'); +body { + background-color: #f2f1ed; +} + +.custom-social-proof { + position: relative; + bottom: 260px; + left: 140px; + z-index: 9999999999999 !important; + font-family: 'Lato', sans-serif; + margin-top: 30px; + margin-right: auto; + margin-bottom: 0; + margin-left: auto; +} +.custom-social-proof .custom-notification { + width: 100%; + border: 0; + text-align: left; + z-index: 99999; + box-sizing: border-box; + font-weight: 400; + border-radius: 6px; + box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.2); + background-color: #fff; + margin: 40px auto 0 auto; + position: relative; + cursor: pointer; +} +.custom-social-proof .custom-notification .custom-notification-container { + display: flex !important; + align-items: center; + height: 150px; +} +.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img { + max-height: 75px; + width: 90px; + margin-top: 5px; + margin-left: 20px; + margin-right: 5px; + margin-bottom: 5px; + overflow: hidden; + border-radius: 6px; + border: 2px solid #de4848; + object-fit: cover; +} +.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper { + margin: 0; + height: 100%; + color:black; + padding-left: 30px; + padding-right: 30px; + border-radius: 0 6px 6px 0; + flex: 1; + display: flex !important; + flex-direction: column; + justify-content: center; +} +.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .highlight{ + margin: 0; + height: 100%; + color:#de4848; + padding-left: 30px; + padding-right: 30px; + border-radius: 0 6px 6px 0; + flex: 1; + display: flex !important; + flex-direction: column; + justify-content: center; +} +.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content { + font-family: inherit !important; + margin: 0 !important; + padding: 0 !important; + font-size: 24px; + line-height: 16px; +} +.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small { + margin-top: 3px !important; + display: block !important; + font-size: 16px !important; + opacity: .8; +} +.custom-social-proof .custom-notification .custom-close { + position: absolute; + top: 8px; + right: 8px; + height: 12px; + width: 12px; + cursor: pointer; + transition: .2s ease-in-out; + transform: rotate(45deg); + opacity: 0; +} +.custom-social-proof .custom-notification .custom-close::before { + content: ""; + display: block; + width: 100%; + height: 2px; + background-color: gray; + position: absolute; + left: 0; + top: 5px; +} +.custom-social-proof .custom-notification .custom-close::after { + content: ""; + display: block; + height: 100%; + width: 2px; + background-color: gray; + position: absolute; + left: 5px; + top: 0; +} +.custom-social-proof .custom-notification:hover .custom-close { + opacity: 1; +} + +.wrap { + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; + margin: auto; + height: 310px; +} + +a { + text-decoration: none; + color: #1a1a1a; +} + +h1 { + margin-bottom: 60px; + text-align: center; + font: 300 2.25em "Lato"; + text-transform: capitalize; +} +h1 strong { + font-weight: 400; + color: #ea4c4c; +} + +h2 { + margin-bottom: 80px; + text-align: center; + font: 300 0.7em "Lato"; + text-transform: uppercase; +} +h2 strong { + font-weight: 400; +} + +.countdown { + width: 720px; + margin: 0 auto; +} +.countdown .bloc-time { + float: left; + margin-right: 45px; + text-align: center; +} +.countdown .bloc-time:last-child { + margin-right: 0; +} + + + +.countdown .count-title { + display: block; + margin-bottom: 15px; + font: normal 0.94em "Lato"; + color: #009245; + text-transform: uppercase; +} +.countdown .figure { + position: relative; + float: left; + height: 110px; + width: 100px; + margin-right: 10px; + background-color: #fff; + border-radius: 8px; + -moz-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08); + -webkit-box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08); + box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08); +} +.countdown .figure:last-child { + margin-right: 0; +} +.countdown .figure > span { + position: absolute; + left: 0; + right: 0; + margin: auto; + font: normal 5.94em/107px "Lato"; + font-weight: 700; + color: #de4848; +} +.countdown .figure .top:after, .countdown .figure .bottom-back:after { + content: ""; + position: absolute; + z-index: -1; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.countdown .figure .top { + z-index: 3; + background-color: #f7f7f7; + transform-origin: 50% 100%; + -webkit-transform-origin: 50% 100%; + -moz-border-radius-topleft: 10px; + -webkit-border-top-left-radius: 10px; + border-top-left-radius: 10px; + -moz-border-radius-topright: 10px; + -webkit-border-top-right-radius: 10px; + border-top-right-radius: 10px; + -moz-transform: perspective(200px); + -ms-transform: perspective(200px); + -webkit-transform: perspective(200px); + transform: perspective(200px); +} +.countdown .figure .bottom { + z-index: 1; +} +.countdown .figure .bottom:before { + content: ""; + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 50%; + background-color: rgba(0, 0, 0, 0.02); +} +.countdown .figure .bottom-back { + z-index: 2; + top: 0; + height: 50%; + overflow: hidden; + background-color: #f7f7f7; + -moz-border-radius-topleft: 10px; + -webkit-border-top-left-radius: 10px; + border-top-left-radius: 10px; + -moz-border-radius-topright: 10px; + -webkit-border-top-right-radius: 10px; + border-top-right-radius: 10px; +} +.countdown .figure .bottom-back span { + position: absolute; + top: 0; + left: 0; + right: 0; + margin: auto; +} +.countdown .figure .top, .countdown .figure .top-back { + height: 50%; + overflow: hidden; + -moz-backface-visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.countdown .figure .top-back { + z-index: 4; + bottom: 0; + background-color: #fff; + -webkit-transform-origin: 50% 0; + transform-origin: 50% 0; + -moz-transform: perspective(200px) rotateX(180deg); + -ms-transform: perspective(200px) rotateX(180deg); + -webkit-transform: perspective(200px) rotateX(180deg); + transform: perspective(200px) rotateX(180deg); + -moz-border-radius-bottomleft: 10px; + -webkit-border-bottom-left-radius: 10px; + border-bottom-left-radius: 10px; + -moz-border-radius-bottomright: 10px; + -webkit-border-bottom-right-radius: 10px; + border-bottom-right-radius: 10px; +} +.countdown .figure .top-back span { + position: absolute; + top: -100%; + left: 0; + right: 0; + margin: auto; +}