Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
  
<div class="navbar-fixed">
<nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo"><i class="fas fa-caravan hide-on-med-and-down"></i>Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down right-align">
        <li> 
          <div class="input-field valign-wrapper">
              <input
                class="white grey-text autocomplete"
                placeholder="Search blog posts"
                type="text"
                id="autocomplete-input"
              />
        </div>  
        </li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a class="waves-effect waves-light btn modal-trigger" href="#signup-modal">Subscribe</a></li>
      </ul>
    </div>
  </nav>
</div>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="#"><p>Home</p></a></li>
    <li><a href="#"><p>About</p></a></li>
    <li><a href="#"><p>Contact</p></a></li>
    <li><a class="waves-effect waves-light btn btn-large modal-trigger" href="#signup-modal">Subscribe</a></li>
  </ul>
  
    <!-- Section: Slider -->
    <section class="slider">
      <ul class="slides">
        <li>
          <img src="https://i.imgur.com/z3dhofb.jpg">
          <div class="caption center-align">
            <h2>Title</h2>
            <h5 class="light grey-text text-lighten-3 hide-on-small-only">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis,
              quos. Consequuntur natus laborum doloremque expedita.
            </h5>
            <a href="#" class="btn btn-large">Learn More</a>
          </div>
        </li>
        <li>
          <img id="img-2" src="https://i.imgur.com/YUhLKC9.jpg"/>
          <div class="caption left-align">
            <h2>Title</h2>
            <h5 class="light grey-text text-lighten-3 hide-on-small-only">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis,
              quos. Consequuntur natus laborum doloremque expedita.
            </h5>
            <a href="#" class="btn btn-large">Learn More</a>
          </div>
        </li>
        <li>
          <img id="img-3" src="https://i.imgur.com/eLEo2oZ.jpg"/>
          <div class="caption right-align">
            <h2>Title</h2>
            <h5 class="light grey-text text-lighten-3 hide-on-small-only">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis,
              quos. Consequuntur natus laborum doloremque expedita.
            </h5>
            <a href="#" class="btn btn-large">Learn More</a>
          </div>
        </li>
      </ul>
    </section>
  
  <!-- Section: About -->
  <section class="about">
    <div class="row">
      <div class="col s12 center"><h1 class="flow-text">About Us</h1></div>
      <div class="col m12 l6 center">
        <p class="flow-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti omnis, consequuntur in vero possimus fugit saepe odio perspiciatis aspernatur facere vitae eveniet? Recusandae eveniet delectus voluptatibus quos explicabo dolore sequi.
        Eveniet, nulla iste dolorum facere delectus iusto velit sit quae fugit pariatur esse perspiciatis nobis cumque. Similique, est assumenda eum laborum, tempore quibusdam illum delectus ullam ratione esse consectetur sequi.
        Dignissimos eius animi adipisci explicabo reprehenderit qui ducimus perspiciatis, debitis illo eum excepturi nihil ut hic officia optio atque sit autem consequatur ex doloribus laudantium dolores odio? Repellendus, deleniti beatae.
       </p>   </div>
      <div class="col m12 l6 right-align">
        <img class="responsive-img" src="https://i.imgur.com/ZTkt4I5.jpg" />  </div>
    </div>
  </section>

<!-- Main Section with Blog Posts -->
<main>
  <div class="container">
  <div class="row center-align">
    <div class="col m12 l6">
      <div class="card z-depth-5">
        <div class="video-container">
        <iframe height="auto" src="https://res.cloudinary.com/dfmb0juhs/video/upload/v1579213705/Three-Swans_zyp8w6.mp4" frameborder="0" allowfullscreen></iframe>
     
          <span class="card-title">Post Title</span>
 </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
                <a class="modal-trigger" href="#post-modal">View Full Post</a>
        </div>
      </div>
    </div>
     <div class="col m12 l6">
      <div class="card z-depth-5">
        <div class="video-container">
        <iframe height="auto" src="https://res.cloudinary.com/dfmb0juhs/video/upload/v1579213705/Three-Swans_zyp8w6.mp4" frameborder="0" allowfullscreen></iframe>
     
          <span class="card-title">Post Title</span>
 </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
                <a class="modal-trigger" href="#post-modal">View Full Post</a>
        </div>
      </div>
    </div>
     <div class="col m12 l6">
      <div class="card z-depth-5">
        <div class="video-container">
        <iframe height="auto" src="https://res.cloudinary.com/dfmb0juhs/video/upload/v1579213705/Three-Swans_zyp8w6.mp4" frameborder="0" allowfullscreen></iframe>
     
          <span class="card-title">Post Title</span>
 </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
                <a class="modal-trigger" href="#post-modal">View Full Post</a>
        </div>
      </div>
    </div>
     <div class="col m12 l6">
      <div class="card z-depth-5">
        <div class="video-container">
        <iframe height="auto" src="https://res.cloudinary.com/dfmb0juhs/video/upload/v1579213705/Three-Swans_zyp8w6.mp4" frameborder="0" allowfullscreen></iframe>
     
          <span class="card-title">Post Title</span>
 </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
          <a class="modal-trigger" href="#post-modal">View Full Post</a>
        </div>
      </div>
    </div>
    </div>
</main>

<!-- Footer -->
<footer class="page-footer">
          <div class="container">
            <div class="row">
              <div class="col l6 s12">
                <h5 class="white-text">Footer Content</h5>
                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
              </div>
              <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Social Links</h5>
                <ul>
                  <li><a class="grey-text text-lighten-3" href="#!"><i class="fab fa-facebook"></i>Facebook</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!"><i class="fab fa-twitter"></i>Twitter</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">
                    <i class="fab fa-instagram"></i>Instagram</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!"><i class="fab fa-youtube"></i>YouTube</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="footer-copyright">
            <div class="container">
            <a href="#!" class="brand-logo white-text"> © 2020 Logo</a>
            <button class="btn right waves-effect waves-light btn modal-trigger" href="#modal1">Subscribe</button>
            </div>
          </div>
        </footer>
  
    
  <!-- Sign Up Modal -->
  <div id="signup-modal" class="modal">
    <div class="modal-content">
      <h4>Subscribe For Updates</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut adipisci porro veritatis doloribus? Quidem neque corporis, est mollitia fugiat laudantium ullam at, reiciendis sit labore voluptatum accusantium aut? Porro, reprehenderit!</p>
        <div class="row">
          <form class="col s12">
            <div class="row">
            <div class="input-field col s12">
            <input id="email" type="email" class="validate">
            <label for="email">Email</label>
            <span class="helper-text" data-error="Please enter a valid email address" data-success="Success!">Please enter your email address</span>
        </div>
      </div>
    </form>
  </div>
    </div>
    <div class="modal-footer">         
      <button href="#!" class="modal-action modal-close waves-effect waves-red btn-flat" id="cancel">Cancel</button>
      <button href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" id="submit" onclick="Materialize.toast('I am a toast', 4000)">Sign Up</button>
    </div>
  </div>
  
  <!-- Post Modal -->

  <div id="post-modal" class="modal center-align">
    <div class="modal-content center">
      <h1 class="flow-text">Post Title</h1>
      <p class="flow-text" id="date">05.12.2020</p>
      <p class="flow-text" id="post-intro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium numquam vitae nisi tempore quis. Adipisci cupiditate et voluptate enim tempora mollitia sint dolore id in.</p>
      <div class="video-container center-align">
        <iframe height="auto" src="https://res.cloudinary.com/dfmb0juhs/video/upload/v1579213705/Three-Swans_zyp8w6.mp4" frameborder="0" allowfullscreen></iframe>
      </div>
        <div class="row z-depth-2" id="transcript">
          <div class="col s12 center">
          <h2 class="flow-text">Full Transcript: </h2>
          <p class="grey-text darken-1" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam culpa eligendi architecto corporis non rem ex error ipsa quaerat sit a placeat maxime veniam sunt quod soluta, enim quos iusto et velit ratione voluptatibus magni nisi.
        <br>
        Quis aperiam consequuntur necessitatibus? Amet numquam dicta minima voluptate labore tempora temporibus cum nobis, doloribus, nihil id fugit! Magni doloremque explicabo quis ea dolore incidunt exercitationem numquam quam, perferendis esse aliquid porro rerum libero, ducimus blanditiis nulla nesciunt quo placeat. Molestias neque, ratione illo, quidem ad, voluptate nobis itaque sed eligendi quae similique recusandae est atque id. 
        <br>
        Explicabo fuga beatae, alias voluptatum et vero impedit quae tempora, natus enim distinctio. Iste veritatis fugiat aliquam architecto.
        <br>
        Debitis sapiente iure, delectus exercitationem voluptate ipsum optio mollitia expedita impedit nostrum quia. Officiis, non cumque expedita nisi id exercitationem quas molestias labore iure in modi ad. Quis aut modi illo amet dolorum velit debitis eaque voluptates fuga ad.
        <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus tempora dolore neque natus totam itaque nam cum cumque hic laudantium impedit quo quibusdam facilis sapiente minus nisi sint obcaecati quaerat fugiat distinctio, repellat ducimus. Odit dolore fuga dolor voluptatum deleniti laboriosam maiores voluptatibus quae libero architecto laudantium accusantium perspiciatis asperiores a doloremque vel inventore porro, rem illum animi ipsam eveniet ipsum vero culpa? Nostrum incidunt consequuntur nesciunt quas impedit, pariatur doloremque fugiat alias id atque cupiditate obcaecati consequatur harum maxime autem, omnis esse at officia accusamus totam voluptates. 
        <br>
        Rem nobis repudiandae, consectetur perferendis delectus vitae deserunt maiores aspernatur, veniam, ut animi provident? 
        <br>
        Porro quod ad temporibus molestiae aperiam. Possimus recusandae, dolore, aspernatur et placeat dolorum natus repellat, vel nobis voluptas nulla quaerat voluptate voluptatum inventore quas. 
        <br>
        Quasi, similique atque esse dicta rerum explicabo voluptates quo! Labore sapiente quasi ipsam, corrupti fugit velit eaque recusandae optio, culpa pariatur omnis, veritatis eum.
        <br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea dignissimos fuga perferendis explicabo accusamus reiciendis deserunt cum. Sint nihil harum, quam magnam laboriosam eveniet possimus voluptatem illum similique ipsam deleniti adipisci aliquid consectetur quas sapiente. Sit sed, assumenda sapiente quaerat iure in maiores repudiandae at quasi quo voluptatum culpa modi sunt? Distinctio assumenda earum itaque illum, ipsa vitae saepe nesciunt repudiandae veniam reiciendis iusto minima reprehenderit ab ipsam vel sint. Provident optio suscipit nihil et voluptas neque, laboriosam a necessitatibus quaerat saepe harum facilis reiciendis? 
        <br>
        Voluptatibus dolorem est dolor quae consequatur! Adipisci itaque reprehenderit molestiae ab magnam sed animi nostrum, perspiciatis impedit libero consequatur quibusdam pariatur rem ratione a expedita minus distinctio repellendus. 
        <br>
        Eveniet doloremque voluptate repellat voluptas. Rerum assumenda doloribus nisi dignissimos nemo, vel eum incidunt corrupti ex rem a ducimus repudiandae voluptatem! Quibusdam, repudiandae excepturi esse eos accusantium provident. Rem similique deserunt ab expedita! Fugiat vel dolores aliquid.
      </p>
      </div>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#" id="download">Download Transcript</a>
    </div>
  </div>
  </html>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');

:root {
  --accent-color: rgba(230, 223, 68, 0.2); /* light yellow/'daffodil' */
  --brand-color: #f0810f;  /* light orange/'tangerine' */
  --primary-color: #063852; /* navy blue/'blueberry' */
  --primary-color-light: rgba(6,56,82, 0.2); /* light navy blue */
  --primary-color-dark: #011a27; /* dark navy blue/'dark navy'*/
  
  --heading-text: 'Shadows Into Light Two', cursive;
}

html {
  font-size: 1rem;
  overflow-x: hidden;
}

.brand-logo { 
  font-family: var(--heading-text);
  margin-left: 1rem;
}

.brand-logo i {
  font-size: 1.75rem;
}

nav {
  background-color: var(--brand-color);
}

 nav li {
  margin: 0 15px;
}

.btn {
  background-color: var(--primary-color); 
  font-size: .8rem;
}

.input-field {
  padding-top: 5px;
  width: 20vw;
}

#autocomplete-input {
  height: 50px;
  padding-left: 15px;
}

.sidenav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  height: 100vh;
}

.sidenav p {
  font-size: 1rem;
}

.slider .slides li img {
    height: 100%;
    width: 100%;
    background-size: cover;
}

#img-2 {
  background-position: 0 20%;
}

#img-3 {
  background-position: 0 75%;  
}

.about {
  background-color: var(--accent-color);
  height: auto;
  width: 100vw;
  padding: 5rem;
}

.about img {
  border-radius: 50%;
  margin-top: 10%;
}

.about h1 {
  font-size: 2rem;
}

.about p {
  text-align: center;
  font-weight: 300;
  font-style: italic;
}

main {
  background-color: #0d77af;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(181,768,380)'%3E%3Cstop offset='0' stop-color='%230d77af'/%3E%3Cstop offset='1' stop-color='%23063852'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.06'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
  /*background-color: var(--primary-color-light);*/
  width: 100vw;
  height: 100%;
  padding: 5rem;
}

.card {
  margin: 2rem;
}

.page-footer {
  background-color: var(--primary-color-dark);
}

.footer-copyright {
  font-size: 1rem;
}

.grey-text a, i {
  font-size: 1.2rem;
  padding-right: 1rem;
  padding-bottom: .5rem;
  transition: all 1s ease;
}

.grey-text:hover {
  font-size: 1.21rem;
  padding-bottom: .15rem;
  border-bottom: 1.5px solid rgba(255, 255, 255,0.7);
}

#signup-modal {
  width: 70vw;
  padding: 2rem;
}

#submit, #cancel {
  font-size: 1rem;
  text-align: center;
  margin-left: 2rem;
}

#submit:hover {
  border: 1.5px solid green;
  opacity: 0.8;
}

#cancel:hover {
  border: 1.5px solid red;
  opacity: 0.8;
}

#post-modal {
  width: 70vw;
}

#post-modal .modal-content {
  margin: 5rem;
}

#date {
  font-style: italic;
  font-weight: 300;
}

#post-intro {
  padding-bottom: 2rem;
}

#post-modal .modal-footer {
  text-align: center;
  padding-bottom: 3rem;
}

#download {
  color: var(--brand-color);
}

#download:hover {
  border: 1px solid var(--brand-color);
  padding: .75rem;
  opacity: 0.9;
}

#transcript {
  max-width: 100vw;
  margin-top: 5rem;
  padding: 2rem;
  text-align: center;
  border: 1px solid grey;
}



/*****************************
MEDIA QUERIES
*****************************/

@media screen and (max-width:"600px") {
  .about img {
    border-radius: 0%;
    width: 100%;
  }
  
  main {
    width: 80vw;
  }
  
  #post-modal {
  width: 100vw;
}

#post-modal .modal-content {
  margin: 1.5rem;
}

#post-intro {
  padding-bottom: 1rem;
}
  #download {
    margin: 2rem;
  }

#post-modal .modal-footer {
  padding-bottom: 1.5rem;
}
}
              
            
!

JS

              
                  $(document).ready(function(){
    $('.sidenav').sidenav();
    $(".slider").slider({
          indicators: false,
          height: 600,
          transition: 500,
          interval: 6000,
        });

        // Autocomplete
        $(".autocomplete").autocomplete({
          data: {
            Recipes: null,
            Videos: null,
            Trips: null,
            Tutorials: null,
            'How-To': null
          },
        });
    
       $('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      inDuration: 400, // Transition in duration
      outDuration: 400, // Transition out duration
       });
  });

              
            
!
999px

Console