css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

  <title>Conference</title>
</head>

<body>
  <div class="container">
    <section id="home">

      <div class="menu-btn">Menu</div>

      <nav>
        <a href="#home">Home</a>
        <a href="#speakers">Speakers</a>
        <a href="#agenda">Agenda</a>
        <a href="#auditorium">Auditorium</a>
        <a href="#sponsors">Sponsors</a>
      </nav>

      <div class="home-content">
        <h1>The Conference</h1>
        <h2 class="section-heading">Milano • Sat 20 September 2018 • Sala Pastore</h2>
        <p>
          With a warning label this big, you know they gotta be fun! Probably you're ready to do any of those.
        </p>
        <div class="social-icon">
          <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
        </div>

        <div class="social-icon">
          <a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
        </div>
        <a class="register-btn hvr-buzz-out" href="#">Register Now</a>
      </div>
    </section>
    <!-- home section -->

    <section id="speakers">
      <img class="speaker-icon" src="https://image.ibb.co/ixMeYo/music_microphone_old.png" alt="Microphone Icon" />
      <h2 class="section-heading">Speakers</h2>
      <p>
        Have you ever tried just turning off the TV, sitting down with your children, and hitting them? Noooooo! You can crush me but you can't crush my spirit! Uh, is the puppy mechanical in any way?
      </p>

      <div class="main-speaker">
        <div class="main-speaker-img-container">
          <img src="https://images.pexels.com/photos/897314/pexels-photo-897314.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Photo of a woman" />
        </div>

        <div class="main-speaker-info">
          <h3>Whatever Whomever</h3>

          <p>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</p>

          <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>

          <span class="tip1"></span>
        </div>
      </div>
      <!-- main speaker -->

      <div class="speakers-container">
        <div class="speaker">
          <div class="speaker-img-container">
            <img src="https://images.pexels.com/photos/953266/pexels-photo-953266.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Photo of a woman" />
          </div>

          <div class="speaker-info">
            <h3>Whatever Whomever</h3>

            <p>And remember, don't do anything that affects anything, unless it turns out you were supposed to.</p>

            <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>

            <span class="tip2"></span>
          </div>
        </div>

        <div class="speaker">
          <div class="speaker-img-container">
            <img src="https://images.pexels.com/photos/253758/pexels-photo-253758.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Photo of a woman" />
          </div>

          <div class="speaker-info">
            <h3>Whatever Whomever</h3>

            <p>Unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</p>

            <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>

            <span class="tip3"></span>
          </div>
        </div>
      </div>
      <!-- speakers container -->

      <div class="speakers-container">
        <div class="speaker">
          <div class="speaker-info">
            <h3>Whatever Whomever</h3>

            <p>And remember, don't do anything that affects anything, unless it turns out you were supposed to.</p>

            <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>

            <span class="tip4"></span>
          </div>

          <div class="speaker-img-container">
            <img src="https://images.pexels.com/photos/818819/pexels-photo-818819.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Photo of a woman" />
          </div>
        </div>

        <div class="speaker">
          <div class="speaker-info">
            <h3>Whatever Whomever</h3>

            <p>Unless it turns out you were supposed to, in which case, for the love of God, don't not do it!</p>

            <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>

            <span class="tip5"></span>
          </div>

          <div class="speaker-img-container">
            <img src="https://images.pexels.com/photos/871495/pexels-photo-871495.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Photo of a woman" />
          </div>
        </div>
      </div>
      <!-- speakers container -->

    </section>
    <!-- speakers section -->

    <section id="agenda">
      <img class="agenda-icon" src="https://image.ibb.co/gpBreT/basic_alarm.png" alt="Alarm Icon" />
      <h2 class="section-heading">Agenda</h2>

      <p class="section-subtitle">Conference Schedule</p>

      <h2 class="agenda-subheading">Milano • Sat 20 September 2018 Sala Pastore</h2>
      <div class="events-container">
        <div class="event-hours-container">
          <p class="event-hours">8:00 AM</p>
          <p class="event-hours">8:30 AM</p>
          <p class="event-hours">9:00 AM - 12:00 AM</p>
          <p class="event-hours">12:30 PM - 1:30 PM</p>
          <p class="event-hours">1:30 PM - 5:30 PM</p>
          <p class="event-hours">5:00 PM</p>
          <p class="event-hours">6:00 PM - 9:00 PM</p>
          <p class="event-hours">9:00 PM</p>
          <p class="event-hours">7:30 PM - 9:00 PM</p>
        </div>

        <div class="event-title-container">
          <p class="event-title">Check In</p>
          <p class="event-title">Breakfast / Coffee</p>
          <p class="event-title">Pre-Conference Trainings</p>
          <p class="event-title">Lunch</p>
          <p class="event-title">Pre-Conference Trainings</p>
          <p class="event-title">City tour & Activities</p>
          <div class="featured-event">

            <img class="event-icon" src="https://image.ibb.co/frOF68/basic_todo_txt.png" alt="" />

            <p class="feat-event-heading">The Conference talks</p>
            <p class="feat-event">Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you. Uhh… also, comes with double prize money. It doesn't look so shiny to me.</p>
          </div>
          <p class="event-title">Welcome Dinner</p>
          <p class="event-title">Sponsors Reception</p>
        </div>
      </div>
    </section>
    <!-- agenda section -->

    <section id="auditorium">
      <div class="content-container">
        <div class="content">
          <img class="auditorium-icon" src="https://image.ibb.co/iekv68/basic_geolocalize_01.png" alt="" />

          <h2 class="section-heading">Auditorium</h2>
          <p class="section-subtitle">The Location</p>

          <p class="auditorium-address">
            Corso Magenta, 52 20123 Milano
          </p>

          <p class="auditorium-phone">
            Tel. +39 02 92881877 Mob. +39 373 8126235
          </p>

          <p class="auditorium-email">
            E-Mail : info@salapastore.it
          </p>
        </div>
      </div>
    </section>
    <!-- auditorium section -->

    <section id="sponsors">
      <img class="sponsors-icon" src="https://image.ibb.co/maSmDo/basic_bookmark.png" alt="" />

      <h2 class="section-heading">Sponsors</h2>

      <p class="section-subtitle">The Conference Partners</p>

      <div class="sponsor-logo-container">
        <img class="hp-logo" alt="HP logo" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/HP.png" />

        <img class="microsoft-logo" alt="Microsoft logo" src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/microsoft-256.png" />

        <img class="blogger-logo" alt="Blogger logo" src="https://cdn2.iconfinder.com/data/icons/social-media-icon-set-6/94/blogger-256.png" />

        <img class="vimeo-logo" alt="Vimeo logo" src="https://prowly-uploads.s3.amazonaws.com/uploads/PressRoom/563/cover_photo/large_slack-imgs.com.png" />

        <img class="mastercard-logo" alt="Mastercard logo" src="https://www.shareicon.net/download/2015/09/18/103190_card.ico" />

        <img class="bausch-logo" alt="Bausch logo" src="https://crunchbase-production-res.cloudinary.com/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1397197824/d7f92ce66c7bc544df29784bb933ed82.gif" />
      </div>

      <a class="become-sponsor-btn" href="#">Become a Sponsor</a>
    </section>
    <!-- sponsors section -->

    <footer>
      <p class="footer-title">The Conference</p>

      <div class="social-icon-container">
        <a href="mailto:best@email.com" target="_blank"><img class="email-icon" src="https://image.ibb.co/c1n8R8/basic_mail.png" alt=""/></a>

        <div class="footer-icon">
          <a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
        </div>

        <div class="footer-icon">
          <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
        </div>
      </div>

      <a class="register-today-btn" href="#">Register Today</a>

      <span class="copyright">Copyright &copy; 2015 Pixeden. All Rights Reserved.</span>
    </footer>

  </div>
            
          
!
            
              /*!
 * Bootstrap Reboot v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
  width: device-width;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}
/*end of reboot styling */
.container {
  color: #464646;
}

.container a:hover {
  text-decoration: none;
}

#home {
  background-image: url(https://image.ibb.co/kPHQpT/bg.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-attachment: fixed;
  color: #fff;
  width: 100%;
}

#home .section-heading {
  padding-bottom: 1.4em;
}

@media all and (min-width: 768px) {
  #home {
    background-size: cover;
  }
  #home .section-heading {
    margin-top: -15px;
  }
  #home .section-heading:after {
    left: 11px;
  }
}

nav {
  text-transform: uppercase;
  width: 100%;
  display: none;
  font-weight: 600;
  position: fixed;
  margin: 0 auto;
  text-align: center;
  z-index: 10;
  transition: margin-top 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

nav a {
  display: block;
  position: relative;
  color: #fff;
  padding: 1em 0;
  margin: 0 0.7em;
  font-family: Montserrat, sans-serif;
  font-size: 0.9em;
  letter-spacing: 1px;
}

nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.2s ease-in-out 0s;
}

nav a:hover {
  color: #fff;
}

nav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

@media all and (min-width: 768px) {
  nav {
    display: block;
    text-align: right;
    margin-top: 1em;
    padding: 0.5em 2em;
  }
  nav a {
    display: inline-block;
  }
}

.nav-scrolled {
  background-color: #fff;
  margin-top: 0;
}

.nav-scrolled a {
  color: #000;
}

.nav-scrolled a:before {
  background-color: #000;
}

.nav-scrolled a:hover {
  color: #000;
}

.home-content {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 0.5em;
  transition: margin-top 0.5s ease;
}

@media all and (min-width: 768px) {
  .home-content {
    padding: 9em 4.5em;
    margin: 0;
    text-align: left;
  }
}

.push-content {
  margin-top: 250px;
}

.open-nav {
  transition: display 1s ease;
  display: block;
}

.menu-btn {
  text-transform: uppercase;
  cursor: pointer;
  padding: 1em;
  font-size: 1.5em;
  max-width: 130px;
  display: inline-block;
}

@media all and (min-width: 768px) {
  .menu-btn {
    display: none;
  }
}

h1 {
  text-transform: uppercase;
  font-family: "Allerta", sans-serif;
  font-size: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

@media all and (min-width: 768px) {
  h1 {
    margin-left: -10px;
    padding-bottom: 10px;
  }
}

.section-heading {
  text-transform: uppercase;
  position: relative;
  font-family: Montserrat, sans-serif;
  font-size: 1.3em;
  font-weight: 800;
  letter-spacing: 1px;
}

.section-heading:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
}

.home-content p {
  padding: 0.7em 0;
}

@media all and (min-width: 768px) {
  .home-content p {
    font-size: 1.3em;
    max-width: 550px;
  }
}

.social-icon {
  display: inline-block;
  font-size: 1.3em;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  margin: 0 4px;
  color: tomato;
  background-color: #fff;
}

.social-icon span {
  display: inline-block;
  margin: 7px 0;
}

.social-icon a {
  color: tomato;
  transition: color 0.3s ease-in-out;
}

.social-icon a:hover {
  color: #42a8bf;
}

.register-btn {
  text-transform: uppercase;
  margin: 2em auto;
  width: 230px;
  display: block;
  border: 1px solid #fff;
  color: #fff;
  padding: 1em;
  text-align: center;
  font-size: 1.3em;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.register-btn:hover {
  text-decoration: none;
  color: tomato;
  background-color: #fff;
}

@media all and (min-width: 768px) {
  .register-btn {
    margin: 2em 0;
    background-color: #42a8bf;
    border: 2px solid #fff;
  }
}

@keyframes hvr-buzz-out {
  10% {
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    transform: translateX(1px) rotate(0);
  }
  100% {
    transform: translateX(-1px) rotate(0);
  }
}

.hvr-buzz-out {
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}

.hvr-buzz-out:hover,
.hvr-buzz-out:focus,
.hvr-buzz-out:active {
  animation-name: hvr-buzz-out;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

h3,
.register-btn,
.section-subtitle,
.agenda-subheading,
.become-sponsor-btn,
.register-today-btn {
  font-family: Montserrat, sans-serif;
}

p,
.copyright {
  font-family: "Open Sans", sans-serif;
}

#speakers {
  padding-top: 4em;
}

#speakers h3 {
  font-weight: 600;
}

#speakers a {
  font-size: 1.3em;
  color: #000;
  transition: color 0.3s ease-in-out;
}

#speakers a:hover {
  color: #4ca6de;
}

@media all and (min-width: 768px) {
  #speakers {
    padding-top: 4.5em;
  }
}

.speaker-icon {
  display: block;
  margin: 0 auto;
  width: 40px;
  padding-bottom: 1em;
}

#speakers .section-heading,
#speakers > p {
  text-align: center;
  width: 80%;
  margin: 0 auto;
  font-size: 1.1em;
}

@media all and (min-width: 768px) {
  #speakers .section-heading,
  #speakers > p {
    width: 60%;
  }
}

#speakers > p {
  padding-bottom: 4em;
}

.main-speaker,
.speakers-container,
.speaker {
  display: flex;
  flex-direction: column;
}

@media all and (min-width: 576px) {
  .speakers-container {
    flex-direction: row;
  }
  .speaker {
    width: 50%;
  }
  .speaker-info {
    height: 350px;
    width: 100%;
  }
}

@media all and (min-width: 768px) {
  .main-speaker {
    flex-direction: row;
  }
}

.speaker-img-container {
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.speaker-info:nth-child(odd) {
  order: 2;
}

.speaker-img-container:nth-child(even) {
  order: 1;
}

@media all and (min-width: 768px) {
  .main-speaker-img-container,
  .main-speaker-info {
    width: 50%;
  }
}

@media all and (min-width: 992px) {
  .speaker {
    flex-direction: row;
    width: 50%;
  }
  .speaker-info:nth-child(odd) {
    order: 1;
  }
  .speaker-img-container:nth-child(even) {
    order: 2;
  }
}

.main-speaker-img-container {
  height: 350px;
  overflow: hidden;
}

.main-speaker img,
.speaker img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.main-speaker-info,
.speaker-info {
  text-align: center;
  padding: 2em 1em;
}

.main-speaker-info h3,
.speaker-info h3 {
  text-transform: uppercase;
}

@media all and (min-width: 768px) {
  .main-speaker-info h3,
  .speaker-info h3 {
    padding-top: 4.5em;
  }
  .main-speaker-info,
  .speaker-info {
    padding: 0;
  }
}

.main-speaker-info p,
.speaker-info p {
  position: relative;
  padding: 1.5em;
}

.main-speaker-info p:after,
.speaker-info p:after {
  content: "";
  position: absolute;
  width: 70px;
  height: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
}

.main-speaker,
.speaker {
  position: relative;
  transition: background-color 0.3s ease-in-out;
}

.main-speaker,
.speaker:hover {
  background-color: #fff1e2;
}

.tip1,
.tip2,
.tip3,
.tip4,
.tip5 {
  opacity: 0;
  position: absolute;
  width: 125px;
  padding: 5px;
  z-index: 1;
  transition: opacity 0.3s ease-in-out;
  top: 48.9%;
  left: 50%;
}

.tip1 {
  opacity: 1;
  top: 45.5%;
}

.tip1:before,
.tip2:before,
.tip3:before,
.tip4:before,
.tip5:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -8px;
  top: 7px;
  border-width: 15px;
  border-style: solid;
  border-color: transparent transparent #fff1e2 transparent;
}

@media all and (min-width: 768px) {
  .tip1 {
    left: 47.2%;
  }
  .tip1:before {
    border-color: transparent #fff1e2 transparent transparent;
  }
}

@media all and (min-width: 992px) {
  .tip2,
  .tip3 {
    top: 45%;
    left: 46.8%;
  }
  .tip2:before,
  .tip3:before {
    border-color: transparent #fff1e2 transparent transparent;
  }
  .tip4,
  .tip5 {
    top: 45%;
    left: 51.2%;
  }
  .tip4:before,
  .tip5:before {
    border-color: transparent transparent transparent #fff1e2;
  }
}

@media all and (min-width: 1400px) {
  .tip2,
  .tip3 {
    left: 47.5%;
  }
  .tip4,
  .tip5 {
    left: 51%;
  }
}

@media all and (min-width: 1700px) {
  .tip2,
  .tip3 {
    left: 47.7%;
  }
  .tip4,
  .tip5 {
    left: 50.5%;
  }
}

.speaker:hover .tip2,
.speaker:hover .tip3,
.speaker:hover .tip4,
.speaker:hover .tip5 {
  opacity: 1;
}

@media all and (min-width: 321px) {
  .tip1 {
    top: 47.2%;
  }
}

@media all and (min-width: 370px) {
  .tip1 {
    top: 49%;
  }
}

@media all and (min-width: 457px) {
  .tip1 {
    top: 51%;
  }
}

@media all and (min-width: 620px) {
  .tip1 {
    top: 53%;
  }
}

@media all and (min-width: 800px) {
  .tip1 {
    left: 47.7%;
  }
}

@media all and (min-width: 920px) {
  .tip1 {
    left: 48.4%;
  }
}

@media all and (min-width: 1400px) {
  .tip1 {
    left: 48.9%;
  }
}

@media all and (min-width: 2200px) {
  .tip1 {
    left: 49.1%;
  }
}

@media all and (min-width: 2500px) {
  .tip1 {
    left: 49.2%;
  }
}

@media all and (min-width: 321px) {
  .tip2,
  .tip4 {
    top: 49%;
  }
  .tip3,
  .tip5 {
    top: 51%;
  }
}

@media all and (min-width: 336px) {
  .tip2,
  .tip4 {
    top: 51%;
  }
}

@media all and (min-width: 430px) {
  .tip3,
  .tip5 {
    top: 53%;
  }
}

@media all and (min-width: 458px) {
  .tip2,
  .tip4 {
    top: 53%;
  }
}

@media all and (min-width: 576px) {
  .tip2,
  .tip3,
  .tip4,
  .tip5 {
    top: 44.8%;
  }
}

#agenda {
  text-align: center;
  padding: 5em 1em;
}

#agenda .section-heading,
#agenda .agenda-subheading {
  font-size: 1.4em;
  padding-bottom: 0;
  margin: 0 auto;
}

#agenda .agenda-subheading {
  text-transform: uppercase;
  padding-bottom: 1em;
  max-width: 450px;
  font-weight: 600;
}

@media all and (min-width: 576px) {
  #agenda {
    padding: 8em 2em;
  }
}

.agenda-icon {
  width: 40px;
}

.section-subtitle {
  font-weight: 800;
  font-style: italic;
  font-size: 0.8em;
  margin-top: -5px;
  color: #9a9a9a;
}

.events-container {
  display: flex;
}

.event-hours-container,
.event-title-container {
  width: 50%;
}

.event-title-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.event-icon {
  width: 40px;
  display: inline-block;
}

.event-hours {
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  border: 1px solid transparent;
  text-align: right;
}

.event-hours:nth-child(8) {
  margin-top: 137px;
}

@media all and (max-width: 400px) {
  .event-hours:nth-child(3),
  .event-hours:nth-child(4) {
    margin-top: 83px;
  }
  .event-hours:nth-child(5) {
    margin-top: -20px;
  }
  .event-hours:nth-child(6) {
    margin-top: 80px;
  }
  .event-hours:nth-child(7) {
    margin-top: 120px;
  }
}

@media all and (max-width: 322px) {
  .event-hours:nth-child(8) {
    margin-top: 340px;
  }
  .event-hours:last-child {
    margin-top: 80px;
  }
}

@media all and (min-width: 323px) {
  .event-hours:nth-child(8) {
    margin-top: 275px;
  }
  .event-hours:last-child {
    margin-top: 80px;
  }
}

@media all and (min-width: 380px) {
  .event-hours:nth-child(8) {
    margin-top: 255px;
  }
  .event-hours:last-child {
    margin-top: 60px;
  }
}

@media all and (min-width: 586px) {
  .event-hours:nth-child(8) {
    margin-top: 140px;
  }
  .event-hours:last-child {
    margin-top: 55px;
  }
}

@media all and (min-width: 498px) and (max-width: 544px) {
  .event-hours:nth-child(8) {
    margin-top: 198px;
  }
}

@media all and (min-width: 464px) and (max-width: 544px) {
  .event-hours:nth-child(4) {
    margin-top: 82px;
  }
  .event-hours:nth-child(6) {
    margin-top: 85px;
  }
}

@media all and (min-width: 545px) and (max-width: 677px) {
  .event-hours:nth-child(8) {
    margin-top: 180px;
  }
}

@media all and (min-width: 677px) and (max-width: 839px) {
  .event-hours:nth-child(8) {
    margin-top: 160px;
  }
}

.event-title {
  border: 1px solid #2f2f2f;
  position: relative;
}

.event-title:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 30px;
  bottom: -45px;
  left: -1px;
  background-color: #2f2f2f;
}

.event-title:last-child:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  bottom: -90px;
  left: -5px;
  background-color: #2f2f2f;
}

.event-title,
.event-hours {
  padding: 1.5em 1em;
  font-size: 1.15em;
  margin-bottom: 3em;
}

.featured-event {
  color: #fff;
  background-color: #2f2f2f;
  margin-bottom: 3em;
  position: relative;
  text-align: left;
  padding: 1.5em 1em;
  max-width: 560px;
}

.featured-event:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 30px;
  bottom: -40px;
  left: 0;
  background-color: #2f2f2f;
}

.featured-event .feat-event-heading {
  display: inline-block;
}

.featured-event .feat-event {
  font-size: 0.9em;
}

#auditorium {
  width: 100%;
  padding-top: 8em;
  padding-bottom: 20em;
  background-image: url(https://image.ibb.co/mFFEYo/photo_1477281765962_ef34e8bb0967.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#auditorium .content-container {
  padding: 3em;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
}

#auditorium .content {
  text-align: center;
  max-width: 160px;
  margin: 0 auto;
}

@media all and (min-width: 768px) {
  #auditorium .content-container {
    width: 80%;
  }
}

@media all and (min-width: 992px) {
  #auditorium {
    height: 900px;
  }
  #auditorium .content-container {
    width: 500px;
    top: 20%;
    transform: translateY(-20%);
  }
}

@media all and (min-width: 1200px) {
  #auditorium .content-container {
    width: 580px;
  }
}

.auditorium-icon {
  width: 40px;
}

.auditorium-address {
  font-style: italic;
}

.auditorium-phone {
  font-size: 0.9em;
}

.auditorium-email {
  font-size: 0.8em;
}

#sponsors {
  padding: 4.5em 2em;
  text-align: center;
  margin-bottom: 3em;
}

#sponsors img {
  margin: 0 0.5em;
  filter: grayscale(100%);
}

@media all and (min-width: 768px) {
  .sponsor-logo-container {
    margin-top: -30px;
  }
}

.sponsors-icon {
  width: 40px;
  padding-bottom: 20px;
}

.hp-logo {
  width: 60px;
}

.microsoft-logo,
.bausch-logo {
  width: 180px;
}

.blogger-logo {
  width: 50px;
}

.mastercard-logo,
.vimeo-logo {
  width: 100px;
}

.become-sponsor-btn {
  text-transform: uppercase;
  margin: 2em auto;
  padding: 1.5em;
  text-align: center;
  font-size: 1.1em;
  font-weight: 800;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  color: #464646;
  border: 1px solid #464646;
}

.become-sponsor-btn:hover {
  color: #fff;
  background-color: #464646;
  text-decoration: none;
}

footer {
  padding-top: 3em;
  text-align: center;
  background-color: #fff1e2;
  color: #464646;
}

.footer-title {
  font-family: Allerta, sans-serif;
  font-size: 3.2em;
  text-transform: uppercase;
}

.social-icon-container {
  margin-bottom: 3em;
}

.email-icon {
  width: 40px;
  margin-top: -5px;
}

.footer-icon {
  display: inline-block;
  font-size: 1.3em;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  margin: 0 4px;
  color: #fff;
  background-color: #464646;
}

.footer-icon span {
  display: inline-block;
  margin: 7px 0;
}

.footer-icon a {
  color: #fff;
  transition: color 0.3s ease-in-out;
}

.register-today-btn {
  text-transform: uppercase;
  margin: 2em auto;
  padding: 1.5em;
  text-align: center;
  font-size: 1.1em;
  font-weight: 800;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  color: #464646;
  border: 1px solid #464646;
}

.register-today-btn:hover {
  color: #fff;
  background-color: #464646;
  text-decoration: none;
}

.copyright {
  display: block;
  padding: 5em;
  font-size: 0.8em;
  font-style: italic;
}

            
          
!
            
              $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > 700) {
    $("nav").addClass("nav-scrolled");
  } else {
    $("nav").removeClass("nav-scrolled");
  }
});

// Opens/closes nav on mobile
$(".menu-btn").on("click", function() {
  $("nav").fadeToggle("fast", function() {});
  // Pushes content down when nav is opened
  $(".home-content").toggleClass("push-content");
});

// Add smooth scrolling to all links
$("a").on("click", function(event) {
  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $("html, body").animate(
      {
        scrollTop: $(hash).offset().top
      },
      800,
      function() {
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      }
    );
  } // End if
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console