diff --git a/.DS_Store b/.DS_Store index 10f526f..d795bb4 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/README.md b/README.md index 5f381ed..402fe2a 100644 --- a/README.md +++ b/README.md @@ -41,3 +41,5 @@ * Sahana Belatur * Neha Rode * Mansha Fatima +* Sanjana Sivakumar + diff --git a/images/.DS_Store b/images/.DS_Store index 4a1967a..2bdc225 100644 Binary files a/images/.DS_Store and b/images/.DS_Store differ diff --git a/images/.WEHack_FINAL (2) (1).mp4.icloud b/images/.WEHack_FINAL (2) (1).mp4.icloud deleted file mode 100644 index 81b4737..0000000 Binary files a/images/.WEHack_FINAL (2) (1).mp4.icloud and /dev/null differ diff --git a/images/1.png b/images/1.png new file mode 100644 index 0000000..228de10 Binary files /dev/null and b/images/1.png differ diff --git a/images/2.png b/images/2.png new file mode 100644 index 0000000..8c920de Binary files /dev/null and b/images/2.png differ diff --git a/images/LINKEDIN.png b/images/LINKEDIN.png new file mode 100644 index 0000000..861cf90 Binary files /dev/null and b/images/LINKEDIN.png differ diff --git a/images/WEHack_FINAL (2) (1).mp4 b/images/WEHack_FINAL (2) (1).mp4 deleted file mode 100644 index 0542f3b..0000000 Binary files a/images/WEHack_FINAL (2) (1).mp4 and /dev/null differ diff --git a/images/WEHack_FinalRevision (1).mp4 b/images/WEHack_FinalRevision (1).mp4 new file mode 100644 index 0000000..7531112 Binary files /dev/null and b/images/WEHack_FinalRevision (1).mp4 differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000..1983426 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/gmail.png b/images/gmail.png new file mode 100644 index 0000000..e265d5f Binary files /dev/null and b/images/gmail.png differ diff --git a/images/hackathon_article.jpeg b/images/hackathon_article.jpeg new file mode 100644 index 0000000..0d395a1 Binary files /dev/null and b/images/hackathon_article.jpeg differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 0000000..da645b7 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/logos/WITB NEW LOGO.png b/images/logos/WITB NEW LOGO.png new file mode 100644 index 0000000..312d3db Binary files /dev/null and b/images/logos/WITB NEW LOGO.png differ diff --git a/images/logos/head_logo.png b/images/logos/head_logo.png new file mode 100644 index 0000000..f71e768 Binary files /dev/null and b/images/logos/head_logo.png differ diff --git a/images/logos/wehack_logo.png b/images/logos/wehack_logo.png new file mode 100644 index 0000000..5137bf1 Binary files /dev/null and b/images/logos/wehack_logo.png differ diff --git a/images/sponsors/EmergingLadiesAcademy.png b/images/partners/EmergingLadiesAcademy.png similarity index 100% rename from images/sponsors/EmergingLadiesAcademy.png rename to images/partners/EmergingLadiesAcademy.png diff --git a/images/sponsors/IgniteWorlwide.png b/images/partners/IgniteWorldwide.png similarity index 100% rename from images/sponsors/IgniteWorlwide.png rename to images/partners/IgniteWorldwide.png diff --git a/images/partners/YouGoGirlOmaha_Logo_2C.png b/images/partners/YouGoGirlOmaha_Logo_2C.png new file mode 100644 index 0000000..18ca879 Binary files /dev/null and b/images/partners/YouGoGirlOmaha_Logo_2C.png differ diff --git a/images/sponsors/atw.png b/images/partners/atw.png similarity index 100% rename from images/sponsors/atw.png rename to images/partners/atw.png diff --git a/images/partners/mystery_code_society_logo.png b/images/partners/mystery_code_society_logo.png new file mode 100644 index 0000000..860e34a Binary files /dev/null and b/images/partners/mystery_code_society_logo.png differ diff --git a/images/sponsors/.DS_Store b/images/sponsors/.DS_Store new file mode 100644 index 0000000..1a26839 Binary files /dev/null and b/images/sponsors/.DS_Store differ diff --git a/images/sponsors/AT&T.jpg b/images/sponsors/AT&T.jpg new file mode 100644 index 0000000..173b6bb Binary files /dev/null and b/images/sponsors/AT&T.jpg differ diff --git a/images/sponsors/AWS_AWS_logo_RGB.png b/images/sponsors/AWS_AWS_logo_RGB.png new file mode 100644 index 0000000..8076921 Binary files /dev/null and b/images/sponsors/AWS_AWS_logo_RGB.png differ diff --git a/images/sponsors/GCC.png b/images/sponsors/GCC.png new file mode 100644 index 0000000..69140cf Binary files /dev/null and b/images/sponsors/GCC.png differ diff --git a/images/sponsors/IBM.png b/images/sponsors/IBM.png deleted file mode 100644 index 6178c5f..0000000 Binary files a/images/sponsors/IBM.png and /dev/null differ diff --git a/images/sponsors/JP.png b/images/sponsors/JP.png new file mode 100644 index 0000000..c737d9e Binary files /dev/null and b/images/sponsors/JP.png differ diff --git a/images/sponsors/Qualcomm.png b/images/sponsors/Qualcomm.png new file mode 100644 index 0000000..b696b19 Binary files /dev/null and b/images/sponsors/Qualcomm.png differ diff --git a/images/sponsors/USAA.png b/images/sponsors/USAA.png new file mode 100644 index 0000000..c69bd0b Binary files /dev/null and b/images/sponsors/USAA.png differ diff --git a/images/sponsors/cbre.png b/images/sponsors/cbre.png new file mode 100644 index 0000000..e1f9e6b Binary files /dev/null and b/images/sponsors/cbre.png differ diff --git a/images/sponsors/ida.jpeg b/images/sponsors/ida.jpeg new file mode 100644 index 0000000..2d7abc7 Binary files /dev/null and b/images/sponsors/ida.jpeg differ diff --git a/images/sponsors/jpmorgan.png b/images/sponsors/jpmorgan.png deleted file mode 100644 index b88ec8e..0000000 Binary files a/images/sponsors/jpmorgan.png and /dev/null differ diff --git a/images/sponsors/stateFarm.png b/images/sponsors/stateFarm.png new file mode 100644 index 0000000..dea3b5f Binary files /dev/null and b/images/sponsors/stateFarm.png differ diff --git a/images/sponsors/texas_instruments.png b/images/sponsors/texas_instruments.png new file mode 100644 index 0000000..0c25c03 Binary files /dev/null and b/images/sponsors/texas_instruments.png differ diff --git a/images/sponsors/wolfram.png b/images/sponsors/wolfram.png deleted file mode 100644 index e3f202c..0000000 Binary files a/images/sponsors/wolfram.png and /dev/null differ diff --git a/images/sponsors/wolfram_crop.jpg b/images/sponsors/wolfram_crop.jpg deleted file mode 100644 index 730d08d..0000000 Binary files a/images/sponsors/wolfram_crop.jpg and /dev/null differ diff --git a/images/sponsors/wtc.png b/images/sponsors/wtc.png deleted file mode 100644 index d8015aa..0000000 Binary files a/images/sponsors/wtc.png and /dev/null differ diff --git a/images/team/a-bantey.png b/images/team/a-bantey.png deleted file mode 100644 index 1cce90d..0000000 Binary files a/images/team/a-bantey.png and /dev/null differ diff --git a/images/team/a-pandey.jpg b/images/team/a-pandey.jpg new file mode 100644 index 0000000..a30326d Binary files /dev/null and b/images/team/a-pandey.jpg differ diff --git a/images/team/a-tasnim.png b/images/team/a-tasnim.png deleted file mode 100644 index 39736da..0000000 Binary files a/images/team/a-tasnim.png and /dev/null differ diff --git a/images/team/d-amin.jpg b/images/team/d-amin.jpg new file mode 100644 index 0000000..a2cae7c Binary files /dev/null and b/images/team/d-amin.jpg differ diff --git a/images/team/g-vedula.jpg b/images/team/g-vedula.jpg new file mode 100644 index 0000000..7ca0b64 Binary files /dev/null and b/images/team/g-vedula.jpg differ diff --git a/images/team/m-sakhia.png b/images/team/m-sakhia.png deleted file mode 100644 index 70952cf..0000000 Binary files a/images/team/m-sakhia.png and /dev/null differ diff --git a/images/team/n-hui.jpg b/images/team/n-hui.jpg new file mode 100644 index 0000000..3cb58a5 Binary files /dev/null and b/images/team/n-hui.jpg differ diff --git a/images/team/n-rajesh.png b/images/team/n-rajesh.png deleted file mode 100644 index ddd8ef9..0000000 Binary files a/images/team/n-rajesh.png and /dev/null differ diff --git a/images/team/s-bahadur.png b/images/team/s-bahadur.png deleted file mode 100644 index 65f080e..0000000 Binary files a/images/team/s-bahadur.png and /dev/null differ diff --git a/images/team/s-kelwada.jpg b/images/team/s-kelwada.jpg new file mode 100644 index 0000000..daa405d Binary files /dev/null and b/images/team/s-kelwada.jpg differ diff --git a/images/twitter-icon.png b/images/twitter-icon.png new file mode 100644 index 0000000..f43296b Binary files /dev/null and b/images/twitter-icon.png differ diff --git a/images/wehack-sched1-100x300.png b/images/wehack-sched1-100x300.png new file mode 100644 index 0000000..423d139 Binary files /dev/null and b/images/wehack-sched1-100x300.png differ diff --git a/images/wehack-sched1.png b/images/wehack-sched1.png new file mode 100644 index 0000000..a3a8ec6 Binary files /dev/null and b/images/wehack-sched1.png differ diff --git a/images/wehack-sched2.png b/images/wehack-sched2.png new file mode 100644 index 0000000..4b20938 Binary files /dev/null and b/images/wehack-sched2.png differ diff --git a/index.html b/index.html index 81b1370..8fb23ea 100644 --- a/index.html +++ b/index.html @@ -1,132 +1,32 @@ - wehack - - - - - - - - - - - - - - - - - - - - - + WEHack + + + + - -
-
- WEHack-logo - - - - - - -
- - -
- - - -
-
-

At WEHack, we're looking to shape the future of technology

+
+

Dallas’ largest inclusive hackathon

UTD's women-driven tech organizations are excited to join forces and present our first all women, non-binary, 24-hour hackathon. Our goal is @@ -135,65 +35,142 @@

At WEHack, we're looking to shape the future of technology +

Get ready for WEHack 2022!

+

+ Happening from April 2nd-3rd (2022), we're planning on hosting the second + iteration of WEHack in-person for the first time! Come join us for + a great hacking experience, as well as free food and swag! There are also + some workshops planned before the hackathon, more information TBA. +

+ + -
+ -->
- + + + + +
-

Why WEHack

+ +

The Future is NOW

- There is a huge disparity in the number of women and non-binary students - participating in hackathons. In fact only - 24% of participants are women - and - - 3% of participants identify as non-binary/other. - So, it is not surprising that this lack of diversity ultimately affects - the gender parity in the tech industry at large. By participating, we - want students to gain valuable experience through networking, and - learning from distinguished speakers, inspiring mentors, and peers. + More information TBA.

-
- -
+ + +
Future is Now logo
+ + +
- - + + +
+
+

Resources

+
+ +
+ +
+

Ultimate 8 Step Guide to Winning Hackathons

+

What Gary-Yau Chan learned after 55 Hackathons, and what we think can help you succeed!

+

Learn more

+
+
+ +
+
+ +
+

SWE Website

+

Check out sweutd.com for some ideas!

+

Learn more

+
+
+
+ +
+

WEHack 2020 Projects

+

View projects from the last iteration of WEHack to get inspired!

+

Learn more

+
+
+
+ + +
+

Sponsors

@@ -218,51 +252,39 @@

Sponsors


-
+
- +
-
- -
+
@@ -292,32 +327,32 @@

Frequently Asked Questions

-

People who identify as female or non-binary may sign-up to participate for this hackathon.If you do not identify as female or non-binary but you consider yourself an ally of our cause, we would love to have you as a mentor or volunteer! More info on how to become a mentor/volunteer will come out soon.

+

People who identify as female or non-binary may sign-up to participate for this hackathon. If you do not identify as female or non-binary but you consider yourself an ally of our cause, we would love to have you as a mentor. Apply here to be a mentor!

-

WEHack 2020 will be happening from October 10th-11th and will be happening virtually through an online format!

+

WEHack 2022 will be happening from April 1st-2nd and will be happening in-person in ECSW and virtually Hopin and Discord! (It will be held in a hybrid format.)

-

No! WEHack 2020 is open to all majors and would be the perfect place to start your first coding project!

+

No! WEHack 2022 is open to all majors and would be the perfect place to start your first project!

-

Hacker and Mentor Applications are not open yet. Please check back soon for updates.

+

Hacker and Mentor Applications are open! Please refer to the links at the top of the page to apply.

- +
-

If you will be a high school studnet by WEHack 2020, we would love to have you participate in our hackathon!

+

We are unfortunately not able to accomodate anyone below the age of 18 at this time.

- +
-

More info coming on this soon.

+

Apply to be a mentor here!.

@@ -330,33 +365,33 @@

Frequently Asked Questions

-

WEHack 2020 is completely free! Everything is covered including our sweet swag which will be sent to you via mail!

+

WEHack 2022 is completely free! Everything is covered including our sweet swag which will be sent to you via mail!

-

Teams at WEHack can have approximately 4 to 6 members. If you already have team members in mind, just include their names in the team section while filling out our application to form your team. If you do not have a team, don’t worry! Based on your answers to our application, we will place you in a team with similar interests and skill levels.

+

Teams at WEHack can have approximately 4 to 5 members. If you already have team members in mind, just include their names in the team section while filling out our application to form your team. If you do not have a team, don’t worry! You can form teams the day of the hackathon by meeting fellow hackers in the Discord!

- +
-

More info coming soon.

+

Registration closes April 1st.

-

We will be providing hardware for you! For hardware projects, please come to ECS West to pick up and drop off supplies.

+

WEHack will not be providing hardware in person, but we encourage you to use online hardware simulators.

- +
-

WEHack 2020 will be completely virtual! To pursue a hardware project, you can collect and drop off supplies from ECS West!

+

WEHack 2022 will be hybrid (in-person and virtual)!

- +
-

Whatever floats your boat:)

+

Whatever floats your boat:)

@@ -383,7 +418,8 @@

Frequently Asked Questions

- +
-

Meet The Team

- +

Meet The Team

+

Directors

+

They help develop all of WEHack

+ +
- -

Alisa Thomas

-

Co-Founder

+
+
Medha AiyahFounder
 +
- -

Medha Aiyah

-

Co-Founder

+
+
Alisa ThomasFounder
 +
- -

Nisha Rajesh

-

Marketing Head

+
+
Swarita KelwadaLogistics Director
 +
- -

Shireen Bahadur

-

Logistics Head

+
+
Devinee AminDesign Director
 +
- -

Maaha Sakhia

-

Experience Head

+
+
Nicole HuiIndustry Director
 +
- -

Ankita Bantey

-

Development Head

+
+
Geetika VedulaOutreach Director
 +
- -

Afrida Tasnim

-

Industry Head

+
+
Aarushi PandeyDevelopment Director
 +
- + + + + diff --git a/navbar.js b/navbar.js index 3869f78..18442c0 100644 --- a/navbar.js +++ b/navbar.js @@ -1,8 +1,8 @@ function myFunction() { var x = document.getElementById("myLinks"); - if (x.style.display === "block") { - x.style.display = "none"; + if (x.className === "links") { + x.className += " responsive"; } else { - x.style.display = "block"; + x.className = "links"; } } \ No newline at end of file diff --git a/tempCodeRunnerFile.html b/tempCodeRunnerFile.html new file mode 100644 index 0000000..629b2c9 --- /dev/null +++ b/tempCodeRunnerFile.html @@ -0,0 +1 @@ +sponsors \ No newline at end of file diff --git a/wehack.css b/wehack.css index 840e832..f514a43 100644 --- a/wehack.css +++ b/wehack.css @@ -1,282 +1,272 @@ - -* { +/* ~~~~~~~~~~~~~GENERAL~~~~~~~~~~~~~ */ +*{ margin: 0; padding: 0; + background-color: #1B4965; box-sizing: border-box; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-family: 'Montserrat', serif; + background-color: #1B4965; } -html{ - scroll-behavior: smooth; +.font-title-1 { + font-family: 'Montserrat', serif; + font-size: 72px; + line-height: 80px; } -* p { - font-size: 1.15em; +.font-title-2 { + font-family: 'Open Sans', sans-serif; + font-size: 36px; + font-weight: 400; + line-height: 42px; +} + +.font-title-3 { + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 32px; } -/* Standardize heading styles */ .heading { font-size: 2.5em; - font-weight: 600px; - margin-bottom: 10px; - padding-bottom: 10px; + font-weight: 500px; + margin-bottom: 8px; + padding-bottom: 8px; } -.topnav { - overflow: hidden; - background-color: #5b2e70; - position: relative; +.heading-2 { + font-size: 2.0em; + font-weight: 500px; + margin-bottom: 8px; + padding-bottom: 8px; } -/* Hide the links inside the navigation menu (except for logo/home) */ -.topnav #myLinks { - display: none; +.heading-3 { + font-size: 1.0em; + font-weight: 400px; + /*margin-bottom: 8px; + padding-bottom: 8px;*/ } -/* Style navigation menu links */ -.topnav a { - color: white; - padding: 20px 20px; - text-decoration: none; - font-size: 17px; - font-family: monospace; - display: block; +.heading-4 { + font-size: 1.2em; + font-weight: 400px; + /*margin-bottom: 8px; + padding-bottom: 8px;*/ } -/* Style the hamburger menu */ -.topnav a.icon { - background: #5b2e70; - display: block; - position: absolute; - right: -15px; - top: -10px; +.heading-5 { + font-size: 1.0em; + font-weight: 400px; + /*margin-bottom: 8px; + padding-bottom: 8px;*/ } -/* Add a grey background color on mouse-over */ -.topnav a:hover { - background-color: #5b2e70; - color: black; +/* ~~~~~~~~~~~~~~~NAV BAR~~~~~~~~~~~~~~~~~ */ +.topnav { + overflow: hidden; + background-color: rgba(69,19,114,1); + display: flex; + position: absolute; + z-index: 4; } - -/* Style the active link (or home/logo) */ -.active { - background-color: #5b2e70; +.topnav #homeLink{ + padding: 20px; + padding-right: 0px; + position: fixed; +} +.topnav #myLinks { + justify-content: flex-start; + display: flex; color: white; + text-align: center; + padding: 12px 60px; + text-decoration: none; + font-size: 17px; + z-index: 4; } - -.banner { - position: relative; - width: 100%; - max-width: 100%; - +.topnav a{ + color: whitesmoke; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; } - -.banner .background { - width: 100%; - display: block; - height: 750; - z-index: 2; - +.topnav a:hover { + color: #ffa508; + text-decoration: none; } - -.banner .logo1 { - position: absolute; - width: 35%; - height:62%; - top: 100px; - left: 100px; - z-index: 1; +.topnav a::after{ + display: none; } - -.Heading2 { - position: absolute; - top: 120px; - right: 100px; - font-size: 30px; - font-family: "Times New Roman"; - font-weight: 10px; - +.font-paragraph { + font-family: 'Montserrat', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; } -.Heading2 h3.topHeading{ - font-size: 90px; +.font-caption { + font-family: 'Open Sans', sans-serif; + font-size: 12px; + font-weight: 300; + line-height: 16px; } - -.countdown{ - position: absolute; - top: 225px; - right: 70px; +/* ~~~~~~~~~~~~JUMBOTRON STYLING~~~~~~~~~~ */ +.jumbotron{ + height: 100vh; + width: 100%; display: flex; - margin-top: 50px; - + justify-content: center; + align-items: center; + position: relative; } -.countdown div{ - position: relative; - width: 100px; - height: 100px; - line-height: 100px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 15px; - font-size: 2em; - font-weight: 500; +.jumbotron .container{ + width: 100%; + margin: 0 50px; + display: flex; + flex-direction: row; + align-content: space-around; + justify-content: center; + align-items: center; +} +@media (max-width: 700px) { + .jumbotron .container { + flex-direction: column; + } } -.countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 35px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; +.jumbotron .placeholder{ + margin: 0px 50px; + width: 40%; + /*background-color: white; + opacity: 0.2; + height: 70vh;*/ + /*border: 10px solid #333333;*/ + } -.countdown #day:before{ - content:'Days'; - +.jumbotron .right{ + /*position: absolute; + top: 50%; + left: 67%; + transform: translate(-50%, -50%);*/ + justify-content: center; + vertical-align: middle; + text-align: center; } -.countdown #hour:before{ - content:'Hours'; - +.jumbotron h1{ + width: min-intrinsic; + display: -ms-grid; + -ms-grid-columns: min-content; + margin-bottom: 20px; } -.countdown #minute:before{ - content:'Minutes'; - +.jumbotron .font-title-1{ + font-size: 90px; + color: white; + text-shadow: 2px 2px 8px #E5B3FD; + font-weight: bold; } -.countdown #second:before{ - content:'Seconds'; - +.jumbotron .font-title-4{ + font-size: 70px; + color: #333333; + font-weight: bold; } -.Heading2 .button-instagram { - position: absolute; - top: 200%; - left: 33%; - background-color: #555; +.jumbotron button{ + display: flex; + background-color: transparent; + border: 2px solid white; + text-decoration: none; color: white; - /* font-size: 16px; */ - padding: 12px 24px; - border: none; - cursor: pointer; - border-radius: 5px; + vertical-align: middle; text-align: center; + display: table-cell; + padding: 8px 12px; + width: 80%; +} - display: block; - width: 230px; - height: 28%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 90%; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); +.jumbotron .font-paragraph{ + font-size: 20px; } -.Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - +.jumbotron .apply-now{ + border: none; + flex: 1; + margin-bottom: 8px; + padding-top: 16px; + padding-bottom: 16px; + font-size: 24px; + font-weight: 800; + width: 100%; + background-color: #C0F4B7; + color: #000000; } -.button-instagram:hover{ - background-color: #6b0940; - font-size: 110%; - transition: all ease 0.4s; - +.jumbotron .flex-grid{ + display: flex; +} +#left-button{ + margin-right: 6px; + margin-top: 6px; +} +#right-button{ + margin-top: 6px; + margin-left: 6px; } -.banner .h3 { - font-size:1.75rem; +.jumbotron .message{ + position: absolute; + bottom: 0; + width: 100%; + justify-content: center; text-align: center; + padding: 6px 12px; + font-style: italic; + font-weight: 700; + background-color: #5FA8D3; } -.banner .text-center { - text-align:center !important; +/* ~~~~~~~~~~~~~~~ABOUT~~~~~~~~~~~~~~~~~ */ +.about { + background-color: #1b4965; + color: white; } -.banner .col-lg-12 { - -ms-flex:0 0 100%; - flex:0 0 100%; - max-width:100%; +/*@media (max-width: 1024px) { + .about-heading{ + font-size: 1.8em; + } +}*/ + +.about p { + padding-bottom: 20px; } -.banner .gradient { - display: block; - position: absolute; - top: 0; - right: 0; - width: 80%; - height: 90%; - bottom: auto; - margin: auto; - z-index: -1; - background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0)); - transition: all 0s ease-out 0s; - transform: translatex(-140px); - animation: 18s linear 0s infinite move; -} - - - -@keyframes move { - 0% { - transform: translatex(-140px); - } - 25% { - transform: translatex(140px); - opacity: 0.3; - } - 50% { - transform: translatex(140px); - opacity: 1; - background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0)); - } - 75% { - transform: translatex(-140px); - opacity: 0.3; - } - 100% { - opacity: 1; - transform: translatex(-140px); - background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0)); - } +.about-heading{ + font-size: 1.8em; + margin: 2%; } -/* ~~~~~~~~~~~~~~~ABOUT~~~~~~~~~~~~~~~~~ */ .about .contentBx { margin: auto; width: 80%; padding: 40px; - text-align: center; + /*text-align: center;*/ + font-size: 1em; display: flex; flex-direction: column; line-height: 1.6; } + .about .orgs{ display: flex; } @@ -304,6 +294,190 @@ html{ left: 20%; } +/* ~~~~~~~~~~~Schedule~~~~~~~~~~~~~ */ +.schedule { + display: block; + margin: auto; + margin-bottom: 2%; +} + +.schedule img { + width: 60%; + max-width: 550px; + height: auto; + padding-left: 2vw; + padding-right: 2vw; + padding-top: 10%; + height: auto; +} + +.schedule .shrink { + width: 60%; + height: auto; + padding-left: 2vw; + padding-right: 2vw; + margin-top: 20px; + max-width: 400px; +} + +/* ~~~~~~~~~~~Featuring~~~~~~~~~~~~~ */ + +.featuring{ + position: relative; + width: 100%; + display: flex; + background: #1B4965; +} + +.featuring .heading, p{ + color: white; + padding-bottom: 2%; +} + +.featuring .contentBox { + text-align: left; +} +.slider-left{ + margin-left: 5%; + width: 50%; + justify-content: center; + align-items: center; + display:flex; +} +.slider-right{ + width: 60%; + justify-content: flex-start; + align-items: center; + display:flex; + padding-right: 5%; + flex-flow: column; +} + +.slider{ + position: relative; + padding: 5%; + width: 45%; + justify-content: center; + overflow: hidden; +} +.images{ + display: flex; + width: 100%; + gap: 20%; +} + +.dots{ + display: flex; + justify-content: center; + margin:5px; +} + +.dots label{ + height: 10px; + width: 10px; + border-radius: 25%; + border: solid white 1.5px; + cursor: pointer; + transition: all 0.01s ease; + margin: 5px; +} +.dots label:hover {background: white;} +#img1:checked~.m1{ + margin-left: 0%; +} +#img2:checked~.m2{ + margin-left: -120%; +} +#img3:checked~.m3{ + margin-left: -240%; + +} +#img4:checked~.m3{ + margin-left: -360%; +} + +.images img{ + height: 200%; + width: 100%; + border: white; + transition: all 0.05s ease; + +} +.images input{ + display: none; +} +.slides-container{ + display: flex; + justify-content: left; + align-items: center; +} + +.card { + margin-bottom: 3%; + width: 70%; + height: 100px; + border: 0.4px solid white; + display: flex; + align-items: left; + position: relative; + flex-direction: row; + justify-content: center; + + pointer-events: none; +} + +.card .content{ + display: flex; + justify-content: center; + align-items: center; + width:120%; +} + +.card .img{ + height: 100px; + width: 100px; + position: absolute; + left: -5px; + background-color: white; + border: white; + padding: 1px; +} + +.card .img img{ + height: 100%; + width: 100%; + padding: 1px; +} + +.card .details{ + margin-left: 50px; + align-items: left; + color: white; + width: 60%; +} + +.card .name{ + font-size: 20px; + color: white; +} +.card .content p{ + width: 120%; + justify-content: flex-start; + padding-top: 5%; +} + +.details span{ + font-weight: 600; + font-size: 10px; +} + +.card a{ + text-decoration: name; + background: black; + padding: 7px 10px; + color: white; +} + /* ~~~~~~~~~~~~~~~WHY WEHACK~~~~~~~~~~~~~~~~~ */ .whyWEHack { position: relative; @@ -315,18 +489,46 @@ html{ text-align: left; padding: 100px; padding-top: 150px; + padding-right: 50px; + padding-left: 150px; width: 50%; + color:#FFFFFF; +} + +.whyWEHack .img-placeholder{ + margin: 0px 50px; + width: 40%; + /*background-color: white; + opacity: 0.2; + height: 70vh;*/ + /*border: 10px solid #333333;*/ + } .whyWEHack .imgBox { text-align: center; - width: 50%; + width: 30%; +} + +.whyWEHack .inline-block { + margin-top: 150px; + text-align: center; + width: 20%; } .whyWeHack img { width: 90%; padding: 60px; } + +.whyWeHack .heading { + font-size: 2.5em; + color:#FFFFFF; + font-weight: normal; + margin-bottom: 10px; + padding-bottom: 10px; +} + /* ~~~~~~~~~~~~~~~CHALLENGE~~~~~~~~~~~~~~~~~ */ .challenge{ text-align: center; @@ -340,40 +542,111 @@ html{ .challenge h1{ padding-bottom: 10px; } -.challenge .intro{ - width: 80%; +.challenge .intro{ + width: 80%; +} +.challenge .intro h2{ + opacity: 80%; + font-size: 1em; + padding: 10px; + letter-spacing: 1px; +} +.challenge .content{ + /* border: 2px solid grey; */ + padding: 20px; + margin: 30px; + border-radius: 12px; + box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); + /* margin-top: -.25rem; */ +} + +/* RESOURCES (new)*/ +.resources { + background: #1b4965; + color: white; + padding: 40px; +} + +.resources .heading { + /*font-size: large;*/ + font-size: 2.5em; + padding-bottom: 0; +} + +.resources .img-tile1 { + width: 225px; + height: 225px; + margin: 20px; + position: relative; + box-shadow: 10px 10px /*var(--wehack-darkBlue)*/ #1b4965 , 10px 10px 1px 1px #cae9ff; +} + +.resources .img-tile2 { + width: 130px; + height: 130px; + margin: 10px; + position: relative; + box-shadow: 10px 10px /*var(--wehack-darkBlue)*/ #1b4965 , 10px 10px 1px 1px #cae9ff; +} + +.flex-container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + align-items: center; + /*background-color: DodgerBlue;*/ +} + +.flex-container2 { + display: flex; + flex-direction: row; + justify-content: center; + /*flex-wrap: wrap;*/ + align-items: center; + /*background-color: DodgerBlue;*/ } -.challenge .intro h2{ - opacity: 80%; - font-size: 1em; - padding: 10px; - letter-spacing: 1px; + +.resources .resource-content { + padding: 50px 50px 10px 50px; } -.challenge .content{ - /* border: 2px solid grey; */ - padding: 20px; - margin: 30px; - border-radius: 12px; - box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); - /* margin-top: -.25rem; */ + +.resource-line-1 { + /*word-wrap: break-word;*/ + /*width: min(400px, 100%);*/ + width: min(500px, 50vw); + padding-bottom: 10px; +} + +.resource-line-2 { + /*word-wrap: break-word;*/ + /*width: min(400px, 100%);*/ + font-size: 15px; + width: min(250px, 25vw); + padding-bottom: 10px; + padding-top: 10px; } /* ~~~~~~~~~~~~~~~SPONSORS~~~~~~~~~~~~~~~~~ */ .sponsors { + color: white; + background: rgb(27, 73, 101); padding: 40px; } -.sponsors .heading { +.sponsors .heading { + color: white; padding-bottom: 0; } .sponsor { + color: rgb(27, 73, 101); display: block; margin: auto; margin-bottom: 2%; } -.sponsors img { +.sponsors .sponsor-img { width: 100%; max-width: 300px; height: auto; @@ -381,13 +654,12 @@ html{ padding-right: 2vw; margin-top: 20px; height: auto; -} + } .sponsor .smaller { max-width: 400px; } -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~PARTNERS~~~~~~~~~~~~~~~~~ */ .partners { @@ -418,6 +690,15 @@ html{ max-width: 400px; } +.partners .shrink { + width: 100%; + height: auto; + padding-left: 2vw; + padding-right: 2vw; + margin-top: 20px; + max-width: 250px; +} + /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .container-headshot { @@ -436,11 +717,11 @@ html{ /* ~~~~~~~~~~~~~~~FOOTER~~~~~~~~~~~~~~~~~ */ footer { - padding: 15px 50px; - background: #1B4965; - color: #FFFFFF; + padding: 25px 30px; + /*background: #5b2e70; + color: #ffa508;*/ display: flex; - justify-content: space-between; + justify-content: space-around; align-items: center; text-align: center; } @@ -459,7 +740,7 @@ footer { } footer .grid { - display: grid; + /* display: grid; */ grid-template-columns: repeat(3, 1fr); gap: 15px; } @@ -471,45 +752,61 @@ footer .text{ footer .text:hover{ color: #C0F4B7; } -.fa { - padding: 10px; - font-size: 10px; + +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.heading-2 { + /*width: 42%;*/ + font-size: 25px; + /*font-family: "Times New Roman";*/ + font-weight: 10px; text-align: center; - border-radius: 30%; - margin: 10 px; - color: white; + /*padding-right: 50px;*/ } -.fa::before{ - color: white; +@media screen and (max-width: 300px) { + .heading-2 { + width: 42%; + } + .heading-3 { + width: 60%; + } } -.fa:hover { - opacity: 0.7; - background: #ffa508; - text-decoration: none; +.resource-heading-3 { + /*width: 60%;*/ + font-size: 18px; + font-family: "Times New Roman"; + font-weight: 10px; + text-align: center; + padding-right: 50px; } -.fa-facebook { - background: #3B5998; +.resource-link{ + color: white; } -.fa-twitter { - background: #55ACEE; +.resource-link:hover{ + color: #cae9ff; } -.fa-linkedin { - background: #55ACEE; + + +/*a:link { + text-decoration: none; } -.fa-google { - background: #dd4b39; +a:visited { + text-decoration: none; } -.fa-instagram { - background: #E5B3FD; +a:hover { + text-decoration: underline; } -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +a:active { + text-decoration: underline; +}*/ .team-member { @@ -520,7 +817,7 @@ footer .text:hover{ .team-member img { width: 225px; height: 225px; - border: 7px solid rgba(0, 0, 0, 0.1); + /*border: 7px solid rgba(0, 0, 0, 0.1);*/ } .team-member h4 { @@ -556,27 +853,27 @@ footer .text:hover{ .accrdion { - background-color: #eee; + background-color: #1B4965; align-items: center; - color: #444; + color: #FFFFFF; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; - font-size: 15px; + font-size: 16px; transition: 0.4s; } -.active, .accrdion:hover { +/*.active, .accrdion:hover { background-color: #5b2e70; color: white; -} +}*/ .accrdion:after { content: '\002B'; /* Unicode character for "plus" sign (+) */ - color: rgb(133, 133, 133); + color: #ffffff; font-weight: bold; float: right; margin-left: 5px; @@ -584,12 +881,13 @@ footer .text:hover{ .active:after { content: "\2212"; /* Unicode character for "minus" sign (-) */ - color: white; + color: #ffffff; } .panel { padding: 0 18px; - background-color:white; + background-color:#1B4965; + color: #ffffff; width: 77.5%; max-height: 0; overflow: hidden; @@ -629,11 +927,12 @@ footer .text:hover{ margin: auto; width: 80%; padding: 0px; - text-align: center; + text-align: left; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; line-height: 1.6; /*margin-bottom:0px;*/ margin-top: 0px; + font-size: 14; bottom: 0; } @@ -693,6 +992,69 @@ footer .text:hover{ } /* ~~~~~~~~~WEHACK EMPOWER SERIES~~~~~~~~~ */ + +.empower div { + margin: auto; + width: 100%; + padding: 0px; + text-align: center; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + line-height: 1.6; + /*margin-bottom:0px;*/ + margin-top: 0px; + bottom: 0; +} + +.empower .row2 { + display:-ms-flexbox; + display:flex; + -ms-flex-wrap:wrap; + flex-wrap:wrap; + margin-right:-15px; + margin-left:-15px; +} + +.empower .accrdion2 { + background-color: #eee; + align-items: center; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; + transition: 0.4s; +} + +/*.active, .accrdion2:hover { + background-color: #5b2e70; + color: white; +}*/ + +.accrdion2:after { + content: '\002B'; /* Unicode character for "plus" sign (+) */ + color: rgb(133, 133, 133); + font-weight: bold; + float: right; + margin-left: 5px; +} + +.active:after { + content: "\2212"; /* Unicode character for "minus" sign (-) */ + color: white; +} + +.panel2 { + padding: 0 18px; + background-color:white; + width: 77.5%; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; +} + .empower .contentBox { margin: auto; width: 90%; @@ -705,12 +1067,62 @@ footer .text:hover{ @media screen and (max-width: 640px) { table.empower { - overflow-x: auto; - display: block; - table-layout: auto; - width: 100%; - border-collapse: collapse; - border-spacing: 0; + overflow-x: auto; + display: block; + table-layout: auto; + width: 100%; + border-collapse: collapse; + border-spacing: 0; + } + .topnav{ + width: 100%; + justify-content: flex-end; + z-index: 1000; + } + .topnav #homeLink{ + position: absolute; + top: 0px; + left: 0px; + } + .topnav #myLinks.links{ + justify-content: flex-end; + padding-right: 8px; + padding-top: 8px; + } + .topnav .links a{ + display: none; + width: 100%; + padding: 0px; + } + .topnav .links a.icon { + display: flex; + justify-self: flex-end; + } + .banner .logo1 { + margin-top: 50px; + } + .banner .Heading2 { + margin-top: 50px; + } + .topnav #myLinks.links.responsive { + display: block; + float: none; + justify-content: start; + width: 100%; + z-index: 10000; + } + .topnav #myLinks.links.responsive a { + display: block; + padding: 8px; + width: 100%; + text-align: left; + } + .topnav #myLinks.links.responsive a.icon{ + position: aboslute; + width: auto; + } + .topnav #myLinks.links.responsive i{ + padding-left: 0px; } } @@ -751,8 +1163,8 @@ td:nth-child(5) { /*stylizing links #BD3381 #5b2e70*/ a:link { - color: #C0F4B7; - text-decoration: underline; + color: #cc5094; + text-decoration: none; } a:visited { @@ -760,7 +1172,7 @@ a:visited { } a:hover { - color: #5b2e70; + color: #F59B35; text-decoration: underline; } @@ -774,6 +1186,8 @@ a:active { align-items: center; position: relative; text-align: center; + background: #1b4965; + color: white; padding: 30px; } @@ -784,9 +1198,9 @@ a:active { } .team-member { - margin-bottom: 50px; + /*margin-bottom: 50px;*/ text-align: center; - padding: 40px; + /*padding: 40px;*/ } .our-team-main @@ -795,6 +1209,7 @@ a:active { height:97%; border-bottom:5px #323233 solid; background:#fff; + /*background: black;*/ text-align:center; border-radius:10px; overflow:hidden; @@ -802,7 +1217,6 @@ a:active { transition:0.5s; } - .our-team-main img { border-radius:20%; @@ -861,6 +1275,99 @@ a:active { transition:0.5s; } +@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css); +.tiles { + /*width: 920px; + min-width: 920px;*/ + font-size: 0; + text-align: center; + /*position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%);*/ + /*float:left;*/ +} +.tiles .tile { + display: inline-block; + margin: 30px; + width: 225px; + height: 225px; + text-align: left; + color: black; + opacity: 0.99; + overflow: hidden; + position: relative; + border-radius: 0.5px; + box-shadow: 10px 10px /*var(--wehack-darkBlue)*/ #1b4965 , 12px 12px 0px 1px #cae9ff; +} +.tiles .tile:before { + content: ""; + background: #cae9ff; + width: 100%; + height: 50%; + position: absolute; + top: 100%; + left: 0; + z-index: 2; + transition-property: top, opacity; + transition-duration: 0.3s; +} +.tiles .tile img { + display: block; + min-height: 180px; + max-width: 100%; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} +.tiles .tile .details { + font-size: 16px; + padding: 25px 13px; + color: var(--wehack-black); + background: rgba(255, 255, 255, 0); + position: absolute; + bottom: 0; + left: 0; + z-index: 3; +} +.tiles .tile .details span { + display: block; + opacity: 0; + position: relative; + top: 100px; + transition-property: top, opacity; + transition-duration: 0.3s; + transition-delay: 0s; + background-color: var(--wehack-white); +} +.tiles .tile .details .title { + line-height: 1; + font-weight: 600; + font-size: 14px; +} +.tiles .tile .details .info { + line-height: 1.2; + margin-top: 5px; + font-size: 14px; +} +.tiles .tile:focus:before, +.tiles .tile:focus span, .tiles .tile:hover:before, +.tiles .tile:hover span { + opacity: 1; +} +.tiles .tile:focus:before, .tiles .tile:hover:before { + top: 60%; +} +.tiles .tile:focus span, .tiles .tile:hover span { + top: 0; +} +.tiles .tile:focus .title, .tiles .tile:hover .title { + transition-delay: 0.15s; +} +.tiles .tile:focus .info, .tiles .tile:hover .info { + transition-delay: 0.25s; +} + + /* Hover Effects on Card */ @media (min-width: 992px) { @@ -903,7 +1410,7 @@ a:active { margin-left:auto; } - @media (min-width:576px){ + /* @media (min-width:576px){ .container { max-width:540px; } @@ -928,1690 +1435,197 @@ a:active { .container { max-width:1140px; } + } */ - - } - - .img-fluid { - max-width:100%; - height:auto; - } - - .padding-clear { - clear: both; - padding: 0; - } - - .mx-auto { - margin-right:auto!important; - } - - .mx-auto { - margin-left:auto!important; - } +.img-fluid { + max-width:100%; + height:auto; +} - .rounded-circle { - border-radius:50%!important; - } +.padding-clear { + clear: both; + padding: 0; +} - .social{ - position: absolute; - left: 50px; - bottom: 50px; - display: flex; - } +.mx-auto { + margin-right:auto!important; +} - .center { - display: block; - margin-left: auto; - margin-right: auto; - width: 50%; - } +.mx-auto { + margin-left:auto!important; +} - @media (max-width: 991px) { - .heading{ - font-size: 1.5em; - } - .whyWEHack { - text-emphasis: center; - justify-content: center; - flex-direction: column; - } - .whyWEHack .contentBox, - .whyWEHack .imgBox { - width: 100%; - padding: 50px; - min-height: 400px; - text-align: center; - vertical-align: center; - } - .whyWEHack img { - width: 100%; - padding: 0; - } - .sponsors .intro{ - padding: 10px 0px; - } - .sponsor{ - display: block; - margin: 10px 10px; - margin-bottom: 0%; - } - } - - @media (min-width: 1100px) and (max-width:1250px){ - .banner .logo1{ - position: absolute; - width: 35%; - height:50%; - top: 100px; - left: 85px; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 120px; - right: 90px; - font-size: 25px; - font-family: "Times New Roman"; - font-weight: 10px; - - } - - .Heading2 h3.topHeading{ - font-size: 80px; - } - - .countdown{ - position: absolute; - top: 150px; - right: 75px; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 80px; - height: 80px; - line-height: 90px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 2.5em; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 35px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 180%; - left: 28%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 9%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 1em; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 20%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - +.rounded-circle { + border-radius:50%!important; +} - } - - @media (max-width:1099px) and (min-width: 974px){ - .banner .logo1{ - position: absolute; - width: 35%; - height:45%; - top: 100px; - left: 100px; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 120px; - right: 100px; - font-size: 20px; - font-family: "Times New Roman"; - font-weight: 10px; - - } - - .Heading2 h3.topHeading{ - - font-size: 70px; - } - - - .countdown{ - position: absolute; - top: 150px; - right: 10px; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 80px; - height: 80px; - line-height: 90px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 2.5em; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 35px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 225%; - left: 25%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 1.5em; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } +.social{ + position: absolute; + left: 50px; + bottom: 50px; + display: flex; +} - @media (max-width:973px) and (min-width: 880px){ - .banner .logo1{ - position: absolute; - width: 35%; - height:45%; - top: 100px; - left: 35px; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 120px; - right: 100px; - font-size: 20px; - font-weight: 10px; - } - - .Heading2 h3.topHeading{ - font-size: 65px; - } - - .countdown{ - position: absolute; - top: 150px; - right: 10px; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 80px; - height: 80px; - line-height: 90px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 2.5em; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 35px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 225%; - left: 25%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 1.5em; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } +.center { + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} - @media (max-width:879px) and (min-width: 760px){ - .banner .logo1{ - position: absolute; - width: 40%; - height:40%; - top: 2%; - left: 30%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 42%; - right: 25%; - font-size: 20px; - font-weight: 10px; - } - - .Heading2 h3.topHeading{ - font-size: 45px; - } - - .countdown{ - position: absolute; - top: 70%; - right: 5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 75px; - height: 75px; - line-height: 90px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 50px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 35px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 210%; - left: 27%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 20px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } - - @media (max-width:759px) and (min-width: 590px) { - .banner .logo1{ - position: absolute; - width: 40%; - height:35%; - top: 4%; - left: 30%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 42%; - right: 25%; - font-size: 15px; - font-weight: 10px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 35px; - } - - - .countdown{ - position: absolute; - top: 70%; - right: 5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 60px; - height: 60px; - line-height: 70px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 5px; - font-size: 45px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 30px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 250%; - left: 20%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 20px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - - } - - @media (max-width:589px) and (min-width: 520px) { - .banner .logo1{ - position: absolute; - width: 50%; - height:35%; - top: 4%; - left: 25%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 42%; - right: 20%; - font-size: 15px; - font-weight: 10px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 35px; - } - - - .countdown{ - position: absolute; - top: 70%; - right: 5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 60px; - height: 60px; - line-height: 70px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 5px; - font-size: 45px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 30px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 250%; - left: 20%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 20px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } - - @media (max-width:519px) and (min-width: 472px){ - .banner .logo1{ - position: absolute; - width: 50%; - height:35%; - top: 4%; - left: 25%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 42%; - right: 17%; - font-size: 15px; - font-weight: 10px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 35px; - } - - - .countdown{ - position: absolute; - top: 70%; - right: 5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 60px; - height: 60px; - line-height: 70px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 5px; - font-size: 45px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 30px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 250%; - left: 20%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 20px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } - - @media (max-width:471px) and (min-width:395px){ - .banner .logo1{ - position: absolute; - width: 60%; - height:35%; - top: 4%; - left: 20%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 42%; - right: 10%; - font-size: 15px; - font-weight: 10px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 35px; - } - - - .countdown{ - position: absolute; - top: 70%; - right: 5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 60px; - height: 60px; - line-height: 70px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 5px; - font-size: 45px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 30px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 250%; - left: 20%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 200px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 20px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } - - @media (max-width:394px) and (min-width: 355px){ - .banner .logo1{ - position: absolute; - width: 60%; - height:35%; - top: 4%; - left: 20%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 42%; - right: 13%; - font-size: 12px; - font-weight: 10px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 35px; - } - - - .countdown{ - position: absolute; - top: 70%; - right: -5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 60px; - height: 60px; - line-height: 70px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 5px; - font-size: 45px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 30px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 250%; - left: 21%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 150px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 17px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } - - @media (max-width:394px) and (min-width: 355px), (max-width:394px) and (min-width: 355px) and (min-height:636px){ - .banner .logo1{ - position: absolute; - width: 60%; - height:30%; - top: 4%; - left: 20%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 35%; - right: 13%; - font-size: 12px; - font-weight: 10px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 35px; - } - - - .countdown{ - position: absolute; - top: 70%; - right: -5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 60px; - height: 60px; - line-height: 70px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 5px; - font-size: 45px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -30px; - right: 0; - width: 100%; - height: 30px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 35px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 250%; - left: 21%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 150px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 17px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } - - @media (max-width:394px) and (min-width: 355px) and (max-height:600px){ - .banner .logo1{ - position: absolute; - width: 50%; - height:20%; - top: 4%; - left: 25%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 25%; - right: 12%; - font-size: 12px; - font-weight: 10px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 30px; - } - - - .countdown{ - position: absolute; - top: 50%; - right: 4%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 50px; - height: 50px; - line-height: 50px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 5px; - font-size: 35px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -20px; - right: 0; - width: 100%; - height: 20px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 20px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 220%; - left: 27%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 120px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0);*/ - text-decoration: none; - box-sizing: border-box; - font-size: 17px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 50%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 20px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - - } - - - - @media (max-width:354px), (max-width:354px) and (max-height: 636px){ - .banner .logo1{ - position: absolute; - width: 57%; - height:25%; - top: 5%; - left: 22%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 40%; - right: 8%; - font-size: 12px; - font-weight: 7px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 28px; - } - - - .countdown{ - position: absolute; - top: 55%; - right: -5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 50px; - height: 50px; - line-height: 60px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 30px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -20px; - right: 0; - width: 100%; - height: 20px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 20px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 250%; - left: 100%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 150px; - height: 40%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 17px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 30%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } - - @media (max-width:354px), (max-width:354px) and (min-height: 636px){ - .banner .logo1{ - position: absolute; - width: 57%; - height:25%; - top: 4%; - left: 22%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 30%; - right: 8%; - font-size: 12px; - font-weight: 7px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 28px; - } - - - .countdown{ - position: absolute; - top: 55%; - right: -5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 50px; - height: 50px; - line-height: 60px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 30px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -20px; - right: 0; - width: 100%; - height: 20px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 20px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 230%; - left: 21%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 140px; - height: 20%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 17px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 30%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 26px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - - } - - @media (max-width:354px), (max-width:354px) and (max-height: 474px){ - .banner .logo1{ - position: absolute; - width: 55%; - height:20%; - top: 2%; - left: 22%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 22%; - right: 8%; - font-size: 12px; - font-weight: 7px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 20px; - } - - - .countdown{ - position: absolute; - top: 55%; - right: -5%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 50px; - height: 50px; - line-height: 60px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 30px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -20px; - right: 0; - width: 100%; - height: 20px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 20px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 255%; - left: 21%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 24px 24px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 140px; - height: 20%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 17px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 30%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 50px; - padding: 20px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - - } - - @media (max-width:315px), (max-width:315px) and (min-height: 636px){ - .banner .logo1{ - position: absolute; - width: 57%; - height:25%; - top: 4%; - left: 22%; - z-index: 1; - } - - .Heading2 { - position: absolute; - top: 30%; - right: 22%; - font-size: 7px; - font-weight: 7px; - - - } - - .Heading2 h3.topHeading{ - - font-size: 20px; - } - - - .countdown{ - position: absolute; - top: 45%; - right: -17%; - display: flex; - margin-top: 50px; - - } - - .countdown div{ - position: relative; - width: 30px; - height: 30px; - line-height: 30px; - text-align: center; - background: #6E1282; - color: #fff; - margin : 0 10px; - font-size: 15px; - font-weight: 500; - - } - - .countdown div:before{ - content:''; - position: absolute; - bottom: -10px; - right: 0; - width: 100%; - height: 10px; - background: #F59B35; - color: #76189E; - font-size: 0.30em; - line-height: 10px; - font-weight: 300; - } - - .Heading2 .button-instagram { - position: absolute; - top: 230%; - left: 21%; - background-color: #555; - color: white; - /* font-size: 16px; */ - padding: 5px 5px; - border: none; - cursor: pointer; - border-radius: 5px; - text-align: center; - - display: block; - width: 100px; - height: -1%; - max-width: 100%; - margin: 0 auto; - margin-bottom: 0; - overflow: hidden; - /* position: relative; */ - /* transform: translatez(0); */ - text-decoration: none; - box-sizing: border-box; - font-size: 10px; - font-weight: 100; - box-shadow: 0 9px 18px rgba(0,0,0,0.2); - } - - .Heading2 .button-instagram { - text-align: center; - line-height: 10%; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - border-radius: 30px; - padding: 15px; - font-weight: 1000; - color: white; - background: #BD3381; - background: linear-gradient(to bottom right, #BD3381,#cc5094); - - } - - - } +@media (max-width: 1024px) { + .heading{ + font-size: 1.5em; + } + .banner{ + flex-direction: column; + text-emphasis: center; + justify-content: center; + } + .banner .imgBox, + .banner .Heading2{ + width: 100%; + padding: 25px; + text-align: center; + vertical-align: center; + } + .banner .imgBox{ + padding-top: 60px; + height: 40%; + padding-bottom: 0px; + } + .banner .logo1{ + height: 100%; + width: auto; + } + .banner .Heading2{ + height: 60%; + margin-top: 0px; + font-size: 20px; + } + .banner .countdown{ + margin: 25px; + margin-bottom: 60px; + } + .banner .countdown div{ + width: 70px; + height: 70px; + line-height: 70px; + font-size: 1.5em; + } + .banner .countdown div:before{ + font-size: 14px; + } + .Heading2 h3.topHeading{ + font-size: 50px; + } + .banner .button-instagram{ + padding: 20px; + width: 190px; + font-size: 22px; + } + .whyWEHack { + text-emphasis: center; + justify-content: center; + flex-direction: column; + } + .whyWEHack .contentBox, + .whyWEHack .imgBox { + width: 100%; + padding: 25px; + text-align: center; + vertical-align: center; + } + .whyWEHack .img-placeholder { + width: 100%; + padding: 30px; + text-align: center; + vertical-align: center; + } + .whyWEHack .contentBox{ + padding-bottom: 0px; + } + .whyWEHack .imgBox{ + margin-top: 0px; + } + .whyWEHack img { + padding: 0px; + margin: 0px; + width: 100%; + } + .sponsors .intro{ + padding: 10px 0px; + } + .sponsor{ + display: block; + margin: 10px 10px; + margin-bottom: 0%; + } +} +/* Mobile banner responsiveness */ +@media (max-width: 458px){ + .banner .imgBox{ + padding: 25px 0px; + } + .banner .Heading2{ + height: 60%; + margin-top: 5px; + font-size: 16px; + } + .banner .countdown{ + margin: 25px; + margin-bottom: 60px; + } + .Heading2 h3.topHeading{ + font-size: 40px; + } + .banner .countdown div{ + line-height: 60px; + font-size: 45px; + margin: 0 5px; + } + .banner .countdown div:before{ + font-size: 0.30em; + line-height: 35px; + height: 30px; + } + .banner .button-instagram{ + padding: 16px; + width: 190px; + font-size: 22px; + } +} +/* desktop responsiveness*/ +@media (min-width: 1920px){ + .banner .Heading2{ + font-size: 3em; + } + .banner .Heading2 h3.topHeading{ + font-size: 2em; + } + .banner .countdown{ + margin: 20px; + margin-bottom: 80px; + } + .banner .countdown div{ + width: 150px; + height: 150px; + line-height: 130px; + font-size: 1.5em; + } + .banner .countdown div:before{ + height: 50px; + line-height: 50px; + font-size: 35px; + } + .banner .button-instagram{ + padding: 30px; + width: 500px; + font-size: 1em; + margin: 5 auto; + } + .banner .mentor-link{ + font-size: 0.5em; + } +}