基金会的响应式设计6

Question

使用Stackflow的第一篇文章，并且非常兴奋地开始我的网站开发生涯，我使用Foundation 6来构建我的第一个网站，并希望有人可以指出我的代码的一些关键方面，这将允许它变得更加敏感。任何帮助都将非常感激，因为我对这一切都是新手！

谢谢！

/* Left Header Block */

.header-left-block {
  background-image: url('../img/abstract_header_left.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}


.brand-title {
  font-size: 75px;
  position: relative;
  color: #fff;
  padding: 0px;
  margin: auto;
  padding-top: 260px;
  font-family: poppins-Extralight;
}

/* Right Header Block */


.header-right-block {
  background-color: #FCDA02;
  background-repeat: no-repeat;
  height: 100vh;
  z-index: -2;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;

}

.header-right-content {

}

.slash {
  font-size: 125px;
  color: #fff;
  padding: 400px 0px;
}

.sub-header {
  color: #fff;
  font-size: 30px;
  font-family: poppins-bold;
}

.search-text {
  font-family: poppins-regular;
  color: #fff;
  display: inline-block;
  padding: 25px 10px;

}

.top-btns {
  height: auto;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 30px;
}
/* Section Two */

.section-two {
  background-color:;
  height: 1000px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 50px;
  margin-bottom: 100px;
}

.section-two:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background: #00ACC2;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transform-origin:;
  transform: skewY(-30deg);
  margin-top: -8px;
  z-index: -1;
}

.section-two-container {
  padding-bottom: 400px;
  align-content: flex-start;
}


.number {
    font-size: 20vw;
    color: #fff;
    font-family: poppins-mediumitalic;
}

.item-text {
  text-align: left;
  font-size: 2vh;
  color: #fff;
  padding: 2px;

}

.sub-header-one {
  color: #fff;
  font-size: 5vh;
  font-family: poppins-bold;
  text-align: left;
}

.squiggel {
  z-index: 1;
}
/* Section Three */

.section-three {
  background-color:;
  height: 1200px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 50px;
  margin-top: 0px;
}

.section-three:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background: #83C200;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transform-origin: top right;
  transform: skewY(30deg);
  z-index: -1;
}

.section-three-content {
  margin-top: -1500px;
}

.iphone {
  padding-left: 100px;
}

/* Section Four */

.section-four {
  background-color:#111;
  height: 1200px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 50px;
  margin-top: -800px;
}


  /* Menu */



  /* Media Queries */

  @media only screen and (max-width: 630px) {

.section-two-container {
  margin-top: -200px;

}

.section-three-content {
  margin-top: -100px;
}

.section-four {
  margin-top: -225px;
}

.sub-header-one {
  font-size: 4vh;
}

.number {

}

}


  /* Font */

@poppins-bold {
    font-family: poppins-bold;
    src: url(../fonts/Poppins-Bold.ttf);
}

@poppins-regular {
    font-family: poppins-regular;
    src: url(../fonts/Poppins-Regular.ttf);
}

@poppins-Extralight {
    font-family: poppins-extralight;
    src: url(../fonts/Poppins-ExtraLight.ttf);
}

@poppins-MediumItalic {
    font-family: poppins-mediumitalic;
    src: url(../fonts/Poppins-MediumItalic.ttf);
}

/* Mouse Scroll */

p {
  margin-left: -55px;
}
@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
 .scroll-btn {
	display: inline-block;
	position: relative;
	left: 0;
	right: 0;
	text-align: center;
  margin-bottom: 50px;
  z-index: 100;
}
.scroll-btn > * {
	display: inline-block;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	color: #7f8c8d;
	color: #ffffff;
	font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;

section class="grid-x align-middle section-two">
    <section class="small-12 medium-5 section-two-container">
      <div class="grid-x grid-container align-middle">
        <div class="small-12 hide-for-small-only squiggel"><img src="img/red-squiggel.png" style=" height: 350px;"></div>
      </div>
    </section>

    <section class="small-12 medium-7 section-two-container">
      <div class="grid-x align-top grid-container ">
        <div class="small-4 medium-4 large-5 flex-child-auto"><h1 class="number"> 1 </h1></div>
        <div class="small-8 medium-8 large-7 flex-child-auto">
          <h2 class="sub-header-one">website design and development</h2>
          <p class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        </div>
      </div>
    </section>
  </section>

  <!-- End Section Two -->

  <section class="grid-x align-middle section-three">
        <div class="section-three-content small-12 medium-7">
          <div class="grid-x grid-container grid-padding-x align-center">
            <div class="small-4 medium-4 large-5 "><h1 class="number"> 2 </h1></div>
            <div class="small-8 medium-8 large-7 ">
              <h2 class="sub-header-one">search engine optimization</h2>
              <p class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
          </div>
        </div>
        <div class="section-three-content grid-container small-12 medium-5 iphone"><img src="img/iphone-x.png"></div>
  </section>

  <section class="grid-x align-middle section-four">
  </section>