diff --git a/faq.js b/faq.js index 577fab6..c90f217 100644 --- a/faq.js +++ b/faq.js @@ -1,16 +1,15 @@ -function collapse(){ - var acc = document.getElementsByClassName("accordion"); - var i; - for (i = 0; i < acc.length; i++) { - acc[i].addEventListener("click", function() { - this.classList.toggle("active"); - var panel = this.nextElementSibling; - if (panel.style.maxHeight) { +var acc = document.getElementsByClassName("accrdion"); +var i; + +for (i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function () { + this.classList.toggle("active"); + var panel = this.nextElementSibling; + if (panel.style.maxHeight) { panel.style.maxHeight = null; - } else { + } else { panel.style.maxHeight = panel.scrollHeight + "px"; - } - }); - } -} \ No newline at end of file + } + }); +} diff --git a/images/Stat2023.jpg b/images/Stat2023.jpg new file mode 100644 index 0000000..843ba5e Binary files /dev/null and b/images/Stat2023.jpg differ diff --git a/index.html b/index.html index 35a73f4..c125938 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + WEHack @@ -14,7 +15,6 @@ - + -
+
WEHack logo
@@ -55,346 +56,138 @@

"Computing is too important to be left to men." - Karen Spärck Jones, a British Computer Scientist (1935 - 2007)
- -
-
-
-

Dallas’ largest inclusive hackathon

-

- UTD's women-driven tech organizations are excited to join forces and - present our 24-hour hackathon uniting women and non-binary students. - Our goal is to create an inclusive environment that highlights and - empowers women, femme, and non-binary students through technology. - We aim to encourage more underrepresented individuals to harness their - skills by creating software or hardware projects of their own. Whether - it's networking with sponsors and hackers, gaining development and workshop - experience, or competing against other teams for challenges and prizes, - WEHack offers participants an opportunity to end the weekend with unique takeaways. -

-

Get ready for WEHack 2024!

-

- More information coming soon! -

-

-
-
-
First Virtual Hackathon
- -
First In-Person Hackathon
- - -
-
- - -
- - -
-

Testimonials

-
- -

Jane Luo Junior CS Major

-

"I’ve been to both iterations of WEHack, and they have been an absolute blast! I love working in an inclusive environment that pushes me to be - creative when experimenting with new technologies and build my interpersonal skills. I fondly look back on running around to different workshops, enjoying the food - and swag, and meeting new people. I’m looking forward to the next iteration of WEHack!" -

-
- -
- -

Jazsmine DeFranco Sophomore CS Major

-

"As a freshman in college, this was my first hackathon that I’m so glad I participated in! From this experience, not only did my team and I essentially - learn web development overnight while developing a professional project in under 24 hours but we also ended up winning and placing in our category! I can confidently - say that this event definitely motivated and inspired me to continue working hard through all of my CS endeavors."

-
- -
- -

Kaylee Scanlin Sophomore CS Major

-

"WEHack was my first hackathon, and I couldn’t have asked for a better first-time experience! As a woman in engineering, the fear of being underrepresented in my - field has always been at the back of my mind, but seeing so many women and non-binary hackers in one building showed me that this industry truly is for everyone."

-
-
- - - - - - - - - - - - +
+ - - - +
+
+
1 / 3
+ +
First Virtual Hackathon
-
-
- -
-

WEHack 2020 Projects

-

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

-

Learn more

+ +
+
2 / 3
+ +
First In-Person Hackathon
-
-
- - <-- extras -
-
- -
-

Hacking the Hackathon4

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam pharetra leo vitae scelerisque. Vestibulum sem urna, fermentum vitae rutrum id, maximus eget magna. Nulla vel est sapien. Pellentesque et sodales urna, et tempus velit.

-

Learn more D

+ +
+
3 / 3
+
+ + +
-
- -
-

Hacking the Hackathon5

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam pharetra leo vitae scelerisque. Vestibulum sem urna, fermentum vitae rutrum id, maximus eget magna. Nulla vel est sapien. Pellentesque et sodales urna, et tempus velit.

-

Learn more D

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

Sponsors

-
- - -
    -
  • -
    • -
  • -
    • -
  • -
    • -
  • -
    • -
-
- - + - nextButton.addEventListener("click", () => { - const slideWidth = slide.clientWidth; - slidesContainer.scrollLeft += slideWidth; - }); + - prevButton.addEventListener("click", () => { - const slideWidth = slide.clientWidth; - slidesContainer.scrollLeft -= slideWidth; - }); - +
+

Testimonials

+
+ +

Jane Luo Junior CS Major

+

"I’ve been to both iterations of WEHack, and they have been an absolute blast! I love working in an inclusive environment that pushes me to be + creative when experimenting with new technologies and build my interpersonal skills. I fondly look back on running around to different workshops, enjoying the food + and swag, and meeting new people. I’m looking forward to the next iteration of WEHack!" +

+
+ +
+ +

Jazsmine DeFranco Sophomore CS Major

+

"As a freshman in college, this was my first hackathon that I’m so glad I participated in! From this experience, not only did my team and I essentially + learn web development overnight while developing a professional project in under 24 hours but we also ended up winning and placing in our category! I can confidently + say that this event definitely motivated and inspired me to continue working hard through all of my CS endeavors."

+
- +
+
+

Sponsors

+
+ + +
    +
  • +
    • +
  • +
    • +
  • +
    • +
  • +
    • +
- --> + + + -
+

Frequently Asked Questions

@@ -403,12 +196,12 @@

Frequently Asked Questions

-

Anyone can sign up to participate as a hacker at WEHack. However, keep in mind that a lot of the hackathon content will revolve around women and non-binary experiences to reflect our mission of uniting and empowering women and non-binary individuals in STEM. If you do not identify as female or non-binary but consider yourself an ally of our cause, we would love to have you as a mentor or volunteer!

+

Anyone can sign up to participate as a hacker at WEHack. However, keep in mind that a lot of the hackathon content will revolve around women and non-binary experiences to reflect our mission of uniting and empowering women and non-binary individuals in STEM. If you do not identify as female or non-binary but consider yourself an ally of our cause, we would love to have you as a mentor or volunteer!

-

WEHack 2023 is from Saturday, February 11th, to Sunday, February 12th. It is going to be held in person in the Engineering and Computer Science West (ECSW) building at the University of Texas at Dallas.

+

WEHack 2024 will be held in March 2024, in person in the Engineering and Computer Science West (ECSW) building at the University of Texas at Dallas.

@@ -418,7 +211,8 @@

Frequently Asked Questions

-

Hacker, mentor, and volunteer applications are open! Please refer to the links at the top of the page to apply.

+

Hacker, mentor, and volunteer applications will open soon!

+
@@ -441,7 +235,7 @@

Frequently Asked Questions

-

WEHack 2023 is completely free! This includes food and swag, which will be handed out to attendees during the hackathon.

+

WEHack 2024 is completely free! This includes food and swag, which will be handed out to attendees during the hackathon.

@@ -451,7 +245,8 @@

Frequently Asked Questions

-

Registration closes on February 4th.

+

Registration deadlines will be announced soon.

+
@@ -465,7 +260,7 @@

Frequently Asked Questions

We will provide food for meat, vegetarian, gluten-free, and halal diets.

- +

You are welcome to sleep at WEHack! Make sure to bring pillows, blankets, chargers, and other necessities if you are planning to stay the night.

@@ -474,100 +269,8 @@

Frequently Asked Questions

- - - -
- -
@@ -627,22 +330,14 @@

Meet the Team

- - -
- - - Time Remaining: -




-
- -
+ + +
- + - - - - + --> \ No newline at end of file diff --git a/stat.js b/stat.js new file mode 100644 index 0000000..8c004c3 --- /dev/null +++ b/stat.js @@ -0,0 +1,26 @@ +let slideIndex = 1; +showSlides(slideIndex); + +function plusSlides(n) { + showSlides(slideIndex += n); +} + +function currentSlide(n) { + showSlides(slideIndex = n); +} + +function showSlides(n) { + let i; + let slides = document.getElementsByClassName("mySlides"); + let dots = document.getElementsByClassName("dot"); + if (n > slides.length) { slideIndex = 1 } + if (n < 1) { slideIndex = slides.length } + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + slides[slideIndex - 1].style.display = "block"; + dots[slideIndex - 1].className += " active"; +} \ No newline at end of file diff --git a/wehack.css b/wehack.css index edbe025..eb60fe2 100644 --- a/wehack.css +++ b/wehack.css @@ -6,6 +6,7 @@ html { background-size: contain; background-repeat: repeat-y; scroll-behavior: smooth; + overflow-x: hidden; } @@ -128,19 +129,58 @@ body { left: 0; } +.navmenu > ul +{ + margin: 0px; + padding: 0px; +} + +.navmenu > ul li +{ + display: inline-block; +} + +.navmenu > ul li a +{ + text-decoration: none; + color: #d24a32; + width: 120px; + display: inline-block; + text-shadow: 2px 2px 2px #fff2ce; + padding: 20px 0; + font-weight: bold; + position: relative; +} + +.navmenu > ul li a::before { +background: #fff2ce none repeat scroll 0 0; +bottom: -2px; +content: ""; +height: 3px; +left: 0; +position: absolute; +width: 0%; +transition: 0.5s; +} + +.navmenu > ul li a:hover::before +{ + width: 100%; +} + .menu { display: flex; - gap: 1em; + gap: 2em; font-size: 18px; } - -.menu li:hover { +/* can uncomment if background hover is prefferred */ +/* .menu li:hover { background-color: #fff2ce; border-radius: 5px; transition: 0.3s ease; -} +} */ .menu li { list-style: none; @@ -149,14 +189,13 @@ body { .menu li a { color: #d24a32; text-shadow: 2px 2px 2px #fff2ce; - text-align: left; + text-align: center; padding: 0.5vh 5vw; text-decoration: none; font-size: 20px; font-weight: bold; float: center; display: block; - } input[type=checkbox] { @@ -422,232 +461,6 @@ input[type=checkbox] { line-height: 1.6; } -.about .orgs { - display: flex; -} - -.about .orgs div { - flex: 1; - margin: 15px; - /* need some space ?*/ -} - -.about .orgs img { - width: 90%; -} - -.videoWrapper { - padding: 40px; - /* margin: auto; */ - position: relative; - width: 100%; - height: auto; -} - -.videoWrapper video { - position: relative; - width: 60%; - height: auto; - 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: #c5c9e4; -} - -.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 { @@ -705,151 +518,118 @@ p { color: #1e1920 } -/* ~~~~~~~~~~~~~~~CHALLENGE~~~~~~~~~~~~~~~~~ */ -.challenge { - text-align: center; - align-items: center; - justify-content: center; - display: flex; - flex-direction: column; - position: relative; - padding: 40px; -} - -.challenge h1 { - padding-bottom: 10px; -} +/* ~~~~~~~~~~~Past Statistics~~~~~~~~~~~~~~ */ -.challenge .intro { +.statistics { + margin: auto; width: 80%; -} - -.challenge .intro h2 { - opacity: 80%; + padding: 40px; + /*text-align: center;*/ font-size: 1em; - padding: 10px; - letter-spacing: 1px; + display: flex; + flex-direction: column; + line-height: 1.6; } -.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; */ -} +/* Slideshow container */ +.slideshow-container { + max-width: 1000px; + position: relative; + margin: auto; -/* RESOURCES (new)*/ -.resources { - background: #c5c9e4; - color: #1e1920; - padding: 40px; -} -.resources .heading { - /*font-size: large;*/ - font-size: 2.5em; - padding-bottom: 0; } -.resources p { - color: #1e1920; +/* Next & previous buttons */ +.prev, +.next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -22px; + color: white; + font-weight: bold; + font-size: 30px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; } -.resources .img-tile1 { - width: 225px; - height: 225px; - margin: 20px; - position: relative; - box-shadow: 10px 10px - /*var(--wehack-darkBlue)*/ - #c5c9e4, 10px 10px 1px 1px #fff2ce; +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; } -.resources .img-tile2 { - width: 130px; - height: 130px; - margin: 10px; - position: relative; - box-shadow: 10px 10px - /*var(--wehack-darkBlue)*/ - #c5c9e4, 10px 10px 1px 1px #fff2ce; +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); } -.flex-container { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - align-items: center; - /*background-color: DodgerBlue;*/ +/* Caption text */ +.stattext { + color: #f2f2f2; + font-size: 30px; + padding: 8px 12px; + position: absolute; + top: 8px; + width: 100%; + text-align: center; } -.flex-container2 { - display: flex; - flex-direction: row; - justify-content: center; - /*flex-wrap: wrap;*/ - align-items: center; - /*background-color: DodgerBlue;*/ +/* Number text (1/3 etc) */ +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; } -.resources .resource-content { - padding: 50px 50px 10px 50px; +/* The dots/bullets/indicators */ +.dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; } -.resource-line-1 { - /*word-wrap: break-word;*/ - /*width: min(400px, 100%);*/ - width: min(500px, 50vw); - padding-bottom: 10px; +.active, +.dot:hover { + background-color: #717171; } -.resource-line-2 { - /*word-wrap: break-word;*/ - /*width: min(400px, 100%);*/ - font-size: 15px; - width: min(250px, 25vw); - padding-bottom: 10px; - padding-top: 10px; +/* Fading animation */ +.fade { + animation-name: fade; + animation-duration: 1.5s; } +@keyframes fade { + from { + opacity: .4 + } - -/* ~~~~~~~~~~~Past Statistics~~~~~~~~~~~~~~ */ - - -.statistics .box1 { - position: relative; - width: 550px; - height: 400px; - float: left; - margin: 12px; - box-sizing: border-box; - box-shadow: 0px 0px 20px 10px purple; - border-radius: 10px; - background-image: url(/images/stat2020.jpg); - background-size: 550px 400px; - font-size: 35px; - text-align: center; - text-shadow: 3px 1px purple; + to { + opacity: 1 + } } -.statistics .box2 { - position: relative; - width: 550px; - height: 400px; - float: right; - margin: 12px; - box-sizing: border-box; - box-shadow: 0px 0px 20px 10px black; - border-radius: 10px; - background-image: url(/images/stat2022.jpg); - background-size: 550px 400px; - font-size: 35px; - text-align: center; - text-shadow: 5px 1px rgb(35, 73, 93); +/* On smaller screens, decrease text size */ +@media only screen and (max-width: 300px) { + + .prev, + .next, + .text { + font-size: 11px + } } @@ -863,7 +643,7 @@ p { margin-bottom: 10px; } -.testimonials h1{ +.testimonials h1 { text-shadow: 2px 3px 5px #e0a269; } @@ -987,26 +767,28 @@ body { .slider-wrapper h1 { text-shadow: 2px 3px 4px #e0a269; + overflow: hidden; + transition: 0.6s ease; + } .slides-container { height: 70%; width: 100%; display: flex; - overflow: scroll; + overflow: hidden; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; overflow-y: hidden; - /* Hide scrollbars */ + transition: .5s ease; } .slide-arrow { position: absolute; display: flex; - top: 0; - bottom: 0; + top: 60%; margin: auto; height: 4rem; background-color: white; @@ -1017,11 +799,13 @@ body { cursor: pointer; opacity: 0.5; transition: opacity 100ms; + transition: 0.6s ease; } .slide-arrow:hover, .slide-arrow:focus { opacity: 1; + transition: .6s ease; } #slide-arrow-prev { @@ -1038,28 +822,31 @@ body { .slide { width: 1280px; - height: 720px; + height: 500px; flex: 1 0 100%; } .slide:nth-child(1) { background-image: url(/images/sponsors//toyota_sponsor.png); background-repeat: no-repeat; - background-size: 100%; + background-size: 100% auto; + background-position: center center; margin: 0; } .slide:nth-child(2) { background-image: url(/images/sponsors/plat_sponsors.png); background-repeat: no-repeat; - background-size: 100%; + background-size: 100% auto; + background-position: center center; margin: 0; } .slide:nth-child(3) { background-image: url(/images/sponsors/gold_sponsors.png); background-repeat: no-repeat; - background-size: 100%; + background-size: 100% auto; + background-position: center center; margin: 0; } @@ -1067,7 +854,8 @@ body { .slide:nth-child(4) { background-image: url(/images/sponsors/bronze_sponsors.png); background-repeat: no-repeat; - background-size: 100%; + background-size: 100% auto; + background-position: center center; margin: 0; } @@ -1123,38 +911,17 @@ body { max-width: 250px; } -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.container-headshot { - display: flex; - align-items: center; - justify-content: center; - height: 200px; -} - -.headshot { - position: relative; - display: inline-block; - /* float: left; */ - padding: 10px; -} - /* ~~~~~~~~~~~~~~~FOOTER~~~~~~~~~~~~~~~~~ */ footer { - /* - background: #5b2e70; - color: #ffa508;*/ padding-top: 10px; padding-bottom: 0%; - text-align: center; - position: relative; + display: flex; + justify-content: space-evenly; + align-items: center; box-sizing: border-box; background: #6a6f9a; - /*background: #E38F61;*/ - /*background: #E0A269;*/ - /*box-shadow: 0px 0px 10px 5px #80849f;*/ - border-radius: 30px; - + box-shadow: 0px 0px 10px 5px #80849f; + width: 100%; } .bottom { @@ -1183,27 +950,10 @@ footer .text:hover { color: #fff2ce; } -footer .Conduct { - text-align: center; +footer .copyright p { color: #fff2ce; } -.copyright p { - color:#fff2ce; -} - - -/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.heading-2 { - /*width: 42%;*/ - font-size: 25px; - /*font-family: "Times New Roman";*/ - font-weight: 10px; - text-align: center; - /*padding-right: 50px;*/ -} - @media screen and (max-width: 300px) { .heading-2 { width: 42%; @@ -1214,41 +964,6 @@ footer .Conduct { } } -.resource-heading-3 { - /*width: 60%;*/ - font-size: 18px; - font-family: "Times New Roman"; - font-weight: 10px; - text-align: center; - padding-right: 50px; -} - -.resource-link { - color: #1e1920; -} - -.resource-link:hover { - color: #d24a32; -} - - - -/*a:link { - text-decoration: none; -} - -a:visited { - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -a:active { - text-decoration: underline; -}*/ - .team-member { margin-bottom: 50px; @@ -1446,92 +1161,8 @@ a:active { transition: all 0.2s; } -/* ~~~~~~~~~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: #1e1920; - font-weight: bold; - float: right; - margin-left: 5px; -} - -.active:after { - content: '\2212'; - /* Unicode character for "minus" sign (-) */ - color: #1e1920; -} - -.panel2 { - padding: 0 18px; - background-color: #1e1920; - width: 77.5%; - max-height: 0; - overflow: hidden; - transition: max-height 0.2s ease-out; -} - -.empower .contentBox { - margin: auto; - width: 90%; - padding: 40px; - text-align: center; - display: flex; - flex-direction: column; - line-height: 1.6; -} @media screen and (max-width: 640px) { - table.empower { - overflow-x: auto; - display: block; - table-layout: auto; - width: 100%; - border-collapse: collapse; - border-spacing: 0; - } - .topnav { width: 100%; justify-content: flex-end;