html - 移动 CSS 时框不会重新调整大小

Question

我遇到了一个小问题，所以这应该是一个相当快速的问题。当我尝试最小化页面时，这个框(顶部的图像)并没有随着页面变小，我知道这是一个 CSS 问题，但我不确定如何解决它。

代码:

// JavaScript Document
var slidesWrapper = $('.cd-hero-slider');

//check if a .cd-hero-slider exists in the DOM
if (slidesWrapper.length > 0) {

  var sliderNav = $('.cd-slider-nav');
  var slidesNumber = slidesWrapper.children('li').length;
  var visibleSlidePosition = 0;
  var autoPlayId;
  var autoPlayDelay = 5000;

  // autoplay slider
  setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

  // change visible slide
  sliderNav.on('click', 'a', function(event) {
    event.preventDefault();

    var selectedItem = $(this);

    if (!selectedItem.hasClass('selected')) {

      // if it's not already selected
      var selectedPosition = selectedItem.index();
      var activePosition = slidesWrapper.find('li.selected').index();

      if (activePosition < selectedPosition) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      }

      //this is used for the autoplay
      visibleSlidePosition = selectedPosition;

      updateSliderNavigation(sliderNav, selectedPosition);
      setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
    }
  });
}

function nextSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
}

function prevSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
}

function updateSliderNavigation(pagination, n) {
  var navigationDot = pagination.find('.selected');
  navigationDot.removeClass('selected');
  pagination.find('a').eq(n).addClass('selected');
}

// autoplay
function setAutoplay(wrapper, length, delay) {
  if (wrapper.hasClass('autoplay')) {
    clearInterval(autoPlayId);
    autoPlayId = window.setInterval(function() {
      autoplaySlider(length)
    }, delay);
  }
}

function autoplaySlider(length) {
  if (visibleSlidePosition < length - 1) {
    nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
    visibleSlidePosition += 1;
  } else {
    prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
    visibleSlidePosition = 0;
  }
  updateSliderNavigation(sliderNav, visibleSlidePosition);
}

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

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #f2f2f2;
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.cd-hero {
  height: 300px;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgba(0, 0, 0, 0.03);
}

.cd-hero-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.cd-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.cd-hero-slider li.selected {
  /* this is the visible slide */
  position: relative;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.move-left {
  /* slide hidden on the left */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}


/* --------------------------------

Single slide style

-------------------------------- */

.cd-hero-slider li {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.cd-hero-slider .cd-half-width {
  width: 45%;
}

.cd-hero-slider .cd-half-width:first-of-type {
  left: 5%;
}

.cd-hero-slider .cd-half-width:nth-of-type(2) {
  right: 5%;
  left: auto;
}

.cd-hero-slider .cd-content {
  position: relative;
  top: calc(50% - 30px);
  transform: translateY(-52%) !important;
  padding: 0 50px;
}


/*
    animations & transitions
*/

.cd-hero-slider .cd-half-width {
  opacity: 0;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
  transform: translateX(40px);
}

.cd-hero-slider .move-left .cd-half-width {
  -webkit-transform: translateX(-40px);
  -moz-transform: translateX(-40px);
  -ms-transform: translateX(-40px);
  -o-transform: translateX(-40px);
  transform: translateX(-40px);
}

.cd-hero-slider .selected .cd-half-width {
  /* this is the visible slide */
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider .is-moving .cd-half-width {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
  -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
  -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
  transition: opacity 0s 0.5s, transform 0s 0.5s;
}

.cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
.cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
  -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}

.cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
.cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
  -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s;
  transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
}

.cd-hero-slider .cd-full-width h1,
.cd-hero-slider .cd-full-width h2,
.cd-hero-slider .cd-full-width h3,
.cd-hero-slider .cd-full-width h4,
.cd-hero-slider .cd-full-width h5,
.cd-hero-slider .cd-full-width h6,
.cd-hero-slider .cd-full-width p,
.cd-hero-slider .cd-full-width a,
.cd-hero-slider .cd-full-width .button {
  opacity: 0;
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  -o-transform: translateX(100px);
  transform: translateX(100px);
}

.cd-hero-slider .move-left .cd-full-width h1,
.cd-hero-slider .move-left .cd-full-width h2,
.cd-hero-slider .move-left .cd-full-width h3,
.cd-hero-slider .move-left .cd-full-width h4,
.cd-hero-slider .move-left .cd-full-width h5,
.cd-hero-slider .move-left .cd-full-width h6,
.cd-hero-slider .move-left .cd-full-width p,
.cd-hero-slider .move-left .cd-full-width .button {
  opacity: 0;
  -webkit-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  -o-transform: translateX(-100px);
  transform: translateX(-100px);
}

.cd-hero-slider .selected .cd-full-width h1,
.cd-hero-slider .selected .cd-full-width h2,
.cd-hero-slider .selected .cd-full-width h3,
.cd-hero-slider .selected .cd-full-width h4,
.cd-hero-slider .selected .cd-full-width h5,
.cd-hero-slider .selected .cd-full-width h6,
.cd-hero-slider .selected .cd-full-width p,
.cd-hero-slider .selected .cd-full-width .button {
  /* this is the visible slide */
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.is-moving .cd-full-width h1,
.cd-hero-slider li.is-moving .cd-full-width h2,
.cd-hero-slider li.is-moving .cd-full-width h3,
.cd-hero-slider li.is-moving .cd-full-width h4,
.cd-hero-slider li.is-moving .cd-full-width h5,
.cd-hero-slider li.is-moving .cd-full-width h6,
.cd-hero-slider li.is-moving .cd-full-width p,
.cd-hero-slider li.is-moving .cd-full-width .button {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
  -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
  -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
  transition: opacity 0s 0.5s, transform 0s 0.5s;
}


/* different timings for different elements */

.cd-hero-slider li.selected h1,
.cd-hero-slider li.selected h2,
.cd-hero-slider li.selected h3,
.cd-hero-slider li.selected h4,
.cd-hero-slider li.selected h5,
.cd-hero-slider li.selected h6 {
  -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
  -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}

.cd-hero-slider li.selected p {
  -webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s;
  -moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s;
  transition: opacity 0.4s 0.3s, transform 0.5s 0.3s;
}

.cd-hero-slider li.selected .button,
.cd-hero-slider li.selected input[type="button"],
.cd-hero-slider li.selected button {
  -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s;
  -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s;
  transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;
}


/*
    slider navigation
*/

.cd-slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 2;
  text-align: center;
  height: 30px;
}

.cd-slider-nav nav {
  display: inline-block;
  position: relative;
  height: 100%;
}

.cd-slider-nav a {
  display: inline-block;
  float: left;
  width: 15px;
  height: 15px;
  margin: 5px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

.cd-slider-nav a.selected {
  background-color: rgba(0, 0, 0, 0.5);
}


/* --------------------------------

Javascript disabled

-------------------------------- */

.no-js .cd-hero-slider li {
  display: none;
}

.no-js .cd-hero-slider li.selected {
  display: block;
}

.no-js .cd-slider-nav {
  display: none;
}

@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
body {
  margin: 0px 0px 0px 0px;
}

.nav2 {
  width: 100%;
  transition: top 0.2s ease-out;
}

.banner {
  text-align: center;
  width: 100%;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}

.nav2 ul#menu {
  padding-left: 0;
  display: flex;
}

.nav2 .ul2 .li2 {
  flex-grow: 1;
}

.nav-bar {
  /* Rectangle 1: */
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
  width: 100%;
  text-align: center;
}

//-------------------------------------------------------

/*Strip the ul of padding and list styling*/

.ul2 {
  list-style-type: none;
  margin: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/

.li2 {
  display: inline-block;
  float: center;
}


/*Style for menu links*/

.li2 .a2 {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/

.li2:hover .a2 {
  background: #19c589;
}


/*Style for dropdown links*/

.li2:hover .ul2 .a2 {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

.li2:hover .ul2 .a2:hover {
  background: #19c589;
  color: #fff;
}


/*Hide dropdown links until they are needed*/

.li2 .ul2 {
  display: none;
}


/*Make dropdown links vertical*/

.li2 .ul2 .li2 {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

.li2 .ul2 .li2 .a2 {
  width: auto;
  min-width: 100px;
}


/*Display the dropdown on hover*/

.ul2 .li2 .a2:hover+.hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}


/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked~#menu {
  display: block;
}


/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  .nav2 .ul2#menu {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  .li2 {
    margin-bottom: 0px;
  }
  /*Make all menu links full width*/
  .ul2 .li2,
  .li2 .a2 {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
}

.hero-image {
  /* The image used */
  /* Set a specific height */
  height: 50%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  vertical-align: top;
}

#menu {
  margin: 0;
}

@charset "UTF-8";

/* CSS Document */

.wrapper {
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  grid-template-rows: 250px 250px;
  grid-template-areas: "box-1 box-2 box-4" "box-1 box-3 box-5";
  width: 1500px;
}

.box-1 {
  grid-area: box-1;
  background-color: #e5e5e5;
}

.box-2 {
  grid-area: box-2;
  background-color: #ffbe88;
}

.box-3 {
  grid-area: box-3;
  background-color: #8ae1ff;
}

.box-4 {
  grid-area: box-4;
  background-color: #ff8a8a;
}

.box-5 {
  grid-area: box-5;
  background-color: #8aff95;
}

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

html {}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.btn {
  background-color: white;
  border: 1px solid #cccccc;
  color: #696969;
  padding: 0.5rem;
  text-transform: lowercase;
}

.btn--block {
  display: block;
  width: 100%;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards__item {
  display: flex;
  padding: 1rem;
}

@media (min-width: 40rem) {
  .cards__item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards__item {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card:hover .card__image {
  -webkit-filter: contrast(100%);
  filter: contrast(100%);
}

.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  -webkit-filter: contrast(70%);
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}

.card__image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

@media (min-width: 40rem) {
  .card__image::before {
    padding-top: 66.6%;
  }
}

.card__image--flowers {
  background-image: url(https://unsplash.it/800/600?image=82);
}

.card__image--river {
  background-image: url(https://unsplash.it/800/600?image=11);
}

.card__image--record {
  background-image: url(https://unsplash.it/800/600?image=39);
}

.card__image--fence {
  background-image: url(https://unsplash.it/800/600?image=59);
}

.card__title {
  color: #696969;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.card__text {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>slick slider</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


  <link rel="stylesheet" href="style.css">


</head>

<body>

  <nav class="nav2">
    <div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
    <div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button">
      <ul id="menu" class="ul2">
        <li class="li2"><a href="#" class="a2">Home</a></li>
        <li class="li2">
          <a href="#" class="a2">About</a>
        </li>
        <li class="li2">
          <a href="#" class="a2">Portfolio</a>
        </li>
        <li class="li2"><a href="#" class="a2">News</a></li>
        <li class="li2"><a href="#" class="a2">Contact</a></li>
      </ul>
    </div>
  </nav>
  <section class="cd-hero">

    <ul class="cd-hero-slider autoplay">

      <li class="selected" style="background-color:#3498db">
        <div class="cd-full-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#34495e">
        <div class="cd-half-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>

        <div class="cd-half-width cd-img-container">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#e67e22">
        <div class="cd-half-width cd-img-container">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>

        <div class="cd-half-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#2ecc71">
        <div class="cd-full-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#9b59b6">
        <div class="cd-full-width">
          <div class="cd-content">
            <h2>slide content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem commodi corporis, dignissimos dolorem doloremque eveniet explicabo minima, nihil pariatur, porro possimus rem voluptatem? A dignissimos inventore necessitatibus vel veritatis.</p>
          </div>
        </div>
      </li>


    </ul>

    <div class="cd-slider-nav">

      <!--<span class="cd-marker"></span>-->
      <nav>
        <a href="#0" class="selected"></a>
        <a href="#0"></a>
        <a href="#0"></a>
        <a href="#0"></a>
        <a href="#0"></a>
      </nav>
    </div>
    <!-- .cd-slider-nav -->
  </section>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <div align="center" style="padding-top: 60px;">
    <div class="wrapper">

      <div class="box-1">
        <h1>
          <font face="impact">WELCOME PERSON</font>
        </h1>
        </br>
        <p>
          <font face="impact" size="+2">Cupcake ipsum dolor sit. Amet lemon drops apple pie chocolate. Pudding tart gummi bears. Lollipop fruitcake I love cake cookie. Carrot cake I love pie jujubes bear claw tart chocolate bear claw. Ice cream sweet roll gingerbread gingerbread tart
            chupa chups cake. Pastry apple pie tiramisu jelly beans caramels jelly. Cheesecake tootsie roll icing. Cake donut jelly beans oat cake caramels oat cake sesame snaps. Pastry candy canes I love cake sesame snaps I love. Cotton candy I love
            jelly ice cream gummi bears fruitcake soufflé. Bonbon I love muffin jelly I love sesame snaps brownie tiramisu liquorice.</font>
        </p>
      </div>
      <div class="box-2" id="one" onClick="one()">
        <h1>
          <font face="impact">Number one</font>
      </div>

      <div class="box-3" id="two" onClick="two()">
        <h1>
          <font face="impact">Number two</font>
      </div>

      <div class="box-4" id="three" onClick="three()">
        <h1>
          <font face="impact">Number three</font>
      </div>

      <div class="box-5" id="four" onClick="four()">
        <h1>
          <font face="impact">Number four</font>
      </div>
    </div>
    <script>
      function one() {
        document.getElementById("one").onclick = alert("one");;
      }

      function two() {
        document.getElementById("two").onclick = alert("two");;
      }

      function three() {
        document.getElementById("three").onclick = alert("three");;
      }

      function four() {
        document.getElementById("four").onclick = alert("four");;
      }
    </script>
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--fence"></div>
        <div class="card__content">
          <div class="card__title">Flex</div>
          <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
          <button class="btn btn--block card__btn">Button</button>
        </div>
      </div>
      <div class="card">
        <div class="card__image card__image--fence"></div>
        <div class="card__content">
          <div class="card__title">Flex</div>
          <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
          <button class="btn btn--block card__btn">Button</button>
        </div>
      </div>
      <div class="card">
        <div class="card__image card__image--fence"></div>
        <div class="card__content">
          <div class="card__title">Flex</div>
          <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
          <button class="btn btn--block card__btn">Button</button>
        </div>
      </div>
    </li>
  </div>

  <script src="index.js"></script>




</body>

</html>

Answer 1

// JavaScript Document
var slidesWrapper = $('.cd-hero-slider');

//check if a .cd-hero-slider exists in the DOM
if (slidesWrapper.length > 0) {

  var sliderNav = $('.cd-slider-nav');
  var slidesNumber = slidesWrapper.children('li').length;
  var visibleSlidePosition = 0;
  var autoPlayId;
  var autoPlayDelay = 5000;

  // autoplay slider
  setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

  // change visible slide
  sliderNav.on('click', 'a', function(event) {
    event.preventDefault();

    var selectedItem = $(this);

    if (!selectedItem.hasClass('selected')) {

      // if it's not already selected
      var selectedPosition = selectedItem.index();
      var activePosition = slidesWrapper.find('li.selected').index();

      if (activePosition < selectedPosition) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      }

      //this is used for the autoplay
      visibleSlidePosition = selectedPosition;

      updateSliderNavigation(sliderNav, selectedPosition);
      setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
    }
  });
}

function nextSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
}

function prevSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
}

function updateSliderNavigation(pagination, n) {
  var navigationDot = pagination.find('.selected');
  navigationDot.removeClass('selected');
  pagination.find('a').eq(n).addClass('selected');
}

// autoplay
function setAutoplay(wrapper, length, delay) {
  if (wrapper.hasClass('autoplay')) {
    clearInterval(autoPlayId);
    autoPlayId = window.setInterval(function() {
      autoplaySlider(length)
    }, delay);
  }
}

function autoplaySlider(length) {
  if (visibleSlidePosition < length - 1) {
    nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
    visibleSlidePosition += 1;
  } else {
    prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
    visibleSlidePosition = 0;
  }
  updateSliderNavigation(sliderNav, visibleSlidePosition);
}

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

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #f2f2f2;
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.cd-hero {
  height: 300px;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgba(0, 0, 0, 0.03);
}

.cd-hero-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.cd-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.cd-hero-slider li.selected {
  /* this is the visible slide */
  position: relative;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.move-left {
  /* slide hidden on the left */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}


/* --------------------------------

Single slide style

-------------------------------- */

.cd-hero-slider li {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.cd-hero-slider .cd-half-width {
  width: 45%;
}

.cd-hero-slider .cd-half-width:first-of-type {
  left: 5%;
}

.cd-hero-slider .cd-half-width:nth-of-type(2) {
  right: 5%;
  left: auto;
}

.cd-hero-slider .cd-content {
  position: relative;
  top: calc(50% - 30px);
  transform: translateY(-52%) !important;
  padding: 0 50px;
}


/*
    animations & transitions
*/

.cd-hero-slider .cd-half-width {
  opacity: 0;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
  transform: translateX(40px);
}

.cd-hero-slider .move-left .cd-half-width {
  -webkit-transform: translateX(-40px);
  -moz-transform: translateX(-40px);
  -ms-transform: translateX(-40px);
  -o-transform: translateX(-40px);
  transform: translateX(-40px);
}

.cd-hero-slider .selected .cd-half-width {
  /* this is the visible slide */
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider .is-moving .cd-half-width {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
  -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
  -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
  transition: opacity 0s 0.5s, transform 0s 0.5s;
}

.cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
.cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
  -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}

.cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
.cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
  -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s;
  transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
}

.cd-hero-slider .cd-full-width h1,
.cd-hero-slider .cd-full-width h2,
.cd-hero-slider .cd-full-width h3,
.cd-hero-slider .cd-full-width h4,
.cd-hero-slider .cd-full-width h5,
.cd-hero-slider .cd-full-width h6,
.cd-hero-slider .cd-full-width p,
.cd-hero-slider .cd-full-width a,
.cd-hero-slider .cd-full-width .button {
  opacity: 0;
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  -o-transform: translateX(100px);
  transform: translateX(100px);
}

.cd-hero-slider .move-left .cd-full-width h1,
.cd-hero-slider .move-left .cd-full-width h2,
.cd-hero-slider .move-left .cd-full-width h3,
.cd-hero-slider .move-left .cd-full-width h4,
.cd-hero-slider .move-left .cd-full-width h5,
.cd-hero-slider .move-left .cd-full-width h6,
.cd-hero-slider .move-left .cd-full-width p,
.cd-hero-slider .move-left .cd-full-width .button {
  opacity: 0;
  -webkit-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  -o-transform: translateX(-100px);
  transform: translateX(-100px);
}

.cd-hero-slider .selected .cd-full-width h1,
.cd-hero-slider .selected .cd-full-width h2,
.cd-hero-slider .selected .cd-full-width h3,
.cd-hero-slider .selected .cd-full-width h4,
.cd-hero-slider .selected .cd-full-width h5,
.cd-hero-slider .selected .cd-full-width h6,
.cd-hero-slider .selected .cd-full-width p,
.cd-hero-slider .selected .cd-full-width .button {
  /* this is the visible slide */
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.is-moving .cd-full-width h1,
.cd-hero-slider li.is-moving .cd-full-width h2,
.cd-hero-slider li.is-moving .cd-full-width h3,
.cd-hero-slider li.is-moving .cd-full-width h4,
.cd-hero-slider li.is-moving .cd-full-width h5,
.cd-hero-slider li.is-moving .cd-full-width h6,
.cd-hero-slider li.is-moving .cd-full-width p,
.cd-hero-slider li.is-moving .cd-full-width .button {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
  -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
  -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
  transition: opacity 0s 0.5s, transform 0s 0.5s;
}


/* different timings for different elements */

.cd-hero-slider li.selected h1,
.cd-hero-slider li.selected h2,
.cd-hero-slider li.selected h3,
.cd-hero-slider li.selected h4,
.cd-hero-slider li.selected h5,
.cd-hero-slider li.selected h6 {
  -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
  -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}

.cd-hero-slider li.selected p {
  -webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s;
  -moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s;
  transition: opacity 0.4s 0.3s, transform 0.5s 0.3s;
}

.cd-hero-slider li.selected .button,
.cd-hero-slider li.selected input[type="button"],
.cd-hero-slider li.selected button {
  -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s;
  -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s;
  transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;
}


/*
    slider navigation
*/

.cd-slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 2;
  text-align: center;
  height: 30px;
}

.cd-slider-nav nav {
  display: inline-block;
  position: relative;
  height: 100%;
}

.cd-slider-nav a {
  display: inline-block;
  float: left;
  width: 15px;
  height: 15px;
  margin: 5px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

.cd-slider-nav a.selected {
  background-color: rgba(0, 0, 0, 0.5);
}


/* --------------------------------

Javascript disabled

-------------------------------- */

.no-js .cd-hero-slider li {
  display: none;
}

.no-js .cd-hero-slider li.selected {
  display: block;
}

.no-js .cd-slider-nav {
  display: none;
}

@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
body {
  margin: 0px 0px 0px 0px;
}

.nav2 {
  width: 100%;
  transition: top 0.2s ease-out;
}

.banner {
  text-align: center;
  width: 100%;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}

.nav2 ul#menu {
  padding-left: 0;
  display: flex;
}

.nav2 .ul2 .li2 {
  flex-grow: 1;
}

.nav-bar {
  /* Rectangle 1: */
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
  width: 100%;
  text-align: center;
}

//-------------------------------------------------------

/*Strip the ul of padding and list styling*/

.ul2 {
  list-style-type: none;
  margin: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/

.li2 {
  display: inline-block;
  float: center;
}


/*Style for menu links*/

.li2 .a2 {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/

.li2:hover .a2 {
  background: #19c589;
}


/*Style for dropdown links*/

.li2:hover .ul2 .a2 {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

.li2:hover .ul2 .a2:hover {
  background: #19c589;
  color: #fff;
}


/*Hide dropdown links until they are needed*/

.li2 .ul2 {
  display: none;
}


/*Make dropdown links vertical*/

.li2 .ul2 .li2 {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

.li2 .ul2 .li2 .a2 {
  width: auto;
  min-width: 100px;
}


/*Display the dropdown on hover*/

.ul2 .li2 .a2:hover+.hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}


/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked~#menu {
  display: block;
}


/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  .nav2 .ul2#menu {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  .li2 {
    margin-bottom: 0px;
  }
  /*Make all menu links full width*/
  .ul2 .li2,
  .li2 .a2 {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
}

.hero-image {
  /* The image used */
  /* Set a specific height */
  height: 50%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  vertical-align: top;
}

#menu {
  margin: 0;
}

@charset "UTF-8";

/* CSS Document */

.wrapper {
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  grid-template-rows: 250px 250px;
  grid-template-areas: "box-1 box-2 box-4" "box-1 box-3 box-5";
  width: 1500px;
}

.box-1 {
  grid-area: box-1;
  background-color: #e5e5e5;
}

.box-2 {
  grid-area: box-2;
  background-color: #ffbe88;
}

.box-3 {
  grid-area: box-3;
  background-color: #8ae1ff;
}

.box-4 {
  grid-area: box-4;
  background-color: #ff8a8a;
}

.box-5 {
  grid-area: box-5;
  background-color: #8aff95;
}

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

html {}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.btn {
  background-color: white;
  border: 1px solid #cccccc;
  color: #696969;
  padding: 0.5rem;
  text-transform: lowercase;
}

.btn--block {
  display: block;
  width: 100%;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards__item {
  display: flex;
  padding: 1rem;
}

@media (min-width: 40rem) {
  .cards__item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards__item {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card:hover .card__image {
  -webkit-filter: contrast(100%);
  filter: contrast(100%);
}

.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  -webkit-filter: contrast(70%);
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}

.card__image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

@media (min-width: 40rem) {
  .card__image::before {
    padding-top: 66.6%;
  }
}

.card__image--flowers {
  background-image: url(https://unsplash.it/800/600?image=82);
}

.card__image--river {
  background-image: url(https://unsplash.it/800/600?image=11);
}

.card__image--record {
  background-image: url(https://unsplash.it/800/600?image=39);
}

.card__image--fence {
  background-image: url(https://unsplash.it/800/600?image=59);
}

.card__title {
  color: #696969;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.card__text {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.wrapper{
width:100%
}

.box-1 font{
font-size: 4vh;
font-size: 1.9vw;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>slick slider</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


  <link rel="stylesheet" href="style.css">


</head>

<body>

  <nav class="nav2">
    <div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
    <div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
      <input type="checkbox" id="show-menu" role="button">
      <ul id="menu" class="ul2">
        <li class="li2"><a href="#" class="a2">Home</a></li>
        <li class="li2">
          <a href="#" class="a2">About</a>
        </li>
        <li class="li2">
          <a href="#" class="a2">Portfolio</a>
        </li>
        <li class="li2"><a href="#" class="a2">News</a></li>
        <li class="li2"><a href="#" class="a2">Contact</a></li>
      </ul>
    </div>
  </nav>
  <section class="cd-hero">

    <ul class="cd-hero-slider autoplay">

      <li class="selected" style="background-color:#3498db">
        <div class="cd-full-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#34495e">
        <div class="cd-half-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>

        <div class="cd-half-width cd-img-container">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#e67e22">
        <div class="cd-half-width cd-img-container">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>

        <div class="cd-half-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#2ecc71">
        <div class="cd-full-width">
          <div class="cd-content">
            <h2>slide content</h2>
          </div>
        </div>
      </li>

      <li style="background-color:#9b59b6">
        <div class="cd-full-width">
          <div class="cd-content">
            <h2>slide content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem commodi corporis, dignissimos dolorem doloremque eveniet explicabo minima, nihil pariatur, porro possimus rem voluptatem? A dignissimos inventore necessitatibus vel veritatis.</p>
          </div>
        </div>
      </li>


    </ul>

    <div class="cd-slider-nav">

      <!--<span class="cd-marker"></span>-->
      <nav>
        <a href="#0" class="selected"></a>
        <a href="#0"></a>
        <a href="#0"></a>
        <a href="#0"></a>
        <a href="#0"></a>
      </nav>
    </div>
    <!-- .cd-slider-nav -->
  </section>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  <div align="center" style="padding-top: 60px;">
    <div class="wrapper">

      <div class="box-1">
        <h1>
          <font face="impact">WELCOME PERSON</font>
        </h1>
        </br>
        <p>
          <font face="impact" size="+2">Cupcake ipsum dolor sit. Amet lemon drops apple pie chocolate. Pudding tart gummi bears. Lollipop fruitcake I love cake cookie. Carrot cake I love pie jujubes bear claw tart chocolate bear claw. Ice cream sweet roll gingerbread gingerbread tart
            chupa chups cake. Pastry apple pie tiramisu jelly beans caramels jelly. Cheesecake tootsie roll icing. Cake donut jelly beans oat cake caramels oat cake sesame snaps. Pastry candy canes I love cake sesame snaps I love. Cotton candy I love
            jelly ice cream gummi bears fruitcake soufflé. Bonbon I love muffin jelly I love sesame snaps brownie tiramisu liquorice.</font>
        </p>
      </div>
      <div class="box-2" id="one" onClick="one()">
        <h1>
          <font face="impact">Number one</font>
      </div>

      <div class="box-3" id="two" onClick="two()">
        <h1>
          <font face="impact">Number two</font>
      </div>

      <div class="box-4" id="three" onClick="three()">
        <h1>
          <font face="impact">Number three</font>
      </div>

      <div class="box-5" id="four" onClick="four()">
        <h1>
          <font face="impact">Number four</font>
      </div>
    </div>
    <script>
      function one() {
        document.getElementById("one").onclick = alert("one");;
      }

      function two() {
        document.getElementById("two").onclick = alert("two");;
      }

      function three() {
        document.getElementById("three").onclick = alert("three");;
      }

      function four() {
        document.getElementById("four").onclick = alert("four");;
      }
    </script>
    <li class="cards__item">
      <div class="card">
        <div class="card__image card__image--fence"></div>
        <div class="card__content">
          <div class="card__title">Flex</div>
          <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
          <button class="btn btn--block card__btn">Button</button>
        </div>
      </div>
      <div class="card">
        <div class="card__image card__image--fence"></div>
        <div class="card__content">
          <div class="card__title">Flex</div>
          <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
          <button class="btn btn--block card__btn">Button</button>
        </div>
      </div>
      <div class="card">
        <div class="card__image card__image--fence"></div>
        <div class="card__content">
          <div class="card__title">Flex</div>
          <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
          <button class="btn btn--block card__btn">Button</button>
        </div>
      </div>
    </li>
  </div>

  <script src="index.js"></script>




</body>

</html>

使用这个盒子会变小

编辑:现在工作完美字体也随着您增加或减少宽度而缩放