Как я могу превратить ряд изгибаемых элементов в два столбца?

Question

Привет, друзья! У меня на сайте есть раздел под названием services.Этот раздел содержит 4 списка.Каждый список завернут в div.Каждый div - это флекс-предмет, у которого гибкость составляет 25%.Эти 4 дивы сидят в ряд.Однако, когда размер экрана уменьшается до 775 пикселей, я хочу взять последние списки и поместить их под первые два, создав два столбца.Я не настолько знаком с flexbox, как я могу это сделать?

.content {
	display: flex;
}

.content > .skills {
	flex-basis: 25%;
	margin-top: 15px;
	margin-bottom: 15px;
}

<div class="content">
  <ul class="skills">
    <li>Flatwork</li>
    <li>Paving</li>
    <li>Driveways</li>
    <li>Sidewalks</li>
  </ul>
  <ul class="skills">
    <li>Foundations</li>
    <li>Flooring</li>
    <li>Seismic Retrofit</li>
    <li>Other Concrete Concerns</li>
  </ul>
  <ul class="skills">
    <li>Commercial</li>
    <li>Residential</li>
    <li>Decks and Patios</li>
    <li>Kitchen Flooring</li>
  </ul>
  <ul class="skills">
    <li>Demolition</li>
    <li>Grading/Clean up</li>
    <li>Slab Repair</li>
    <li>Curb Repair</li>				
  </ul>
</div>

Answer 1

Одним из решений было бы использование адаптивного стиля для применения flex-wrap: wrap; к .content и flex-basis: 50%; к .content > div, когда отображение меньше вашей точки останова 775px.

Этоэто можно сделать, добавив в свой CSS следующее:

/* Only applies the styling when screen is between 0px and 775px wide */
@media (max-width: 775px) {

  .services .content {
    /* Tells flex box to allow child elements to "wrap" onto next row if needed */
    flex-wrap: wrap;
  }

  .services .content div {
    /* Tells children of .content to occupy half of parents width, resulting in two columns */
    flex-basis: 50%;
  }
}

Рабочую демонстрацию см. ниже:

  html,
body {
  margin: 0;
  padding: 0;
}

nav li a {
  text-decoration-line: none;
  color: rgba(102, 102, 102, 0.75);
}

.wrapper2 {
  width: 100%;
  height: 65vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}

header {
  background-image: url(../img/pexels.jpg);
  background-position: center;
  background-size: cover;
  height: 65vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

header h1 {
  color: white;
  margin: 0;
  font-size: 5rem;
  font-family: 'Montserrat';
  font-weight: bolder;
}

nav {
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  box-shadow: 0px 0px 100px grey;
}

nav ul {
  margin-right: 0px;
  margin-top: 25px;
}

nav li {
  display: inline-block;
  font-size: 1.55rem;
  margin-right: 20px;
  font-family: 'Rajdhani';
  color: rgba(102, 102, 102, 0.75);
}

nav li a:hover {
  cursor: pointer;
  color: #1a1a1a;
  transition: all 0.7s ease;
}

.after:after {
  position: relative;
  left: 12px;
  top: 2px;
  display: inline-block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: rgba(102, 102, 102, 0.25);
}

.logo {
  color: red;
  font-size: 3.7rem;
  margin: 10px;
  opacity: 1;
  margin-left: 30px;
}


/*---ABOUT---*/

.history h2 {
  font-family: 'Rajdhani';
  color: rgba(102, 102, 102, 0.85);
  font-size: 3rem;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.history h2:after {
  content: '';
  width: 18px;
  height: 2px;
  background-color: red;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 13px;
}

.history h2:before {
  content: '';
  width: 18px;
  height: 2px;
  background-color: red;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 13px;
}

.history p {
  color: rgba(102, 102, 102, 0.85);
  font-family: 'Rajdhani';
  font-size: 1.7rem;
  text-align: center;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 35px;
  position: relative;
  top: -20px;
}


/*---SERVICES---*/

.services {
  background-image: url(../img/pour.jpeg);
  background-size: cover;
  background-attachment: fixed;
}

.services .wrapper {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.services {
  color: white;
  font-family: 'Montserrat';
  font-weight: bolder;
  font-size: 3rem;
}

.services .content {
  display: flex;
  background-color: white;
}

.services .content div {
  flex-basis: 25%;
  margin-top: 15px;
  margin-bottom: 15px;
}

.services ul {
  color: red;
  font-size: 1.8rem;
  font-family: 'Rajdhani';
  list-style-type: square;
  margin-left: 50px;
  margin-top: 0;
  margin-bottom: 0;
}

.skills p {
  margin: 10px;
}

.content .move {
  align-self: flex-end;
}


/*---TESTIMONY---*/

.testimony {
  background-image: url('../img/wall4.jpg');
  display: flex;
  justify-content: space-around;
  background-attachment: fixed;
  background-size: cover;
}

.testimony h1 {
  margin-bottom: 20px;
  margin-top: 20px;
  color: white;
  font-family: 'Arvo';
  padding: 30px;
  display: inline-block;
  flex-basis: 40%;
  margin-left: 30px;
}

.testimony span {
  color: white;
  font-size: 2.3rem;
}

.testimony .quote {
  font-family: 'Rajdhani';
  font-size: 1.2rem;
  margin-left: 40px;
}

.testimony .left-quote {
  position: relative;
  left: 60px;
  top: 30px
}

.fa-quote-right {
  position: relative;
  right: 35px;
  top: 30px;
}

.testimony .move {
  right: 68px;
}


/*---FOOTER---*/

.footer .wrapper {
  display: flex;
}

.footer div {
  display: inline-block;
  flex-basis: 29%;
  font-family: 'Rajdhani';
  color: rgba(102, 102, 102, 1);
  margin-top: 5px;
  justify-content: space-around;
}

.footer h1 {
  font-size: 2rem;
  margin-top: 15px;
}

.social .inner {
  width: 100%;
}

.footer .inner:before {
  display: inline-block;
  content: '';
  width: 29%;
  height: 2px;
  background-color: rgba(102, 102, 102, 0.6);
  position: absolute;
  margin-top: 54px;
}

.footer h1 span {
  display: inline;
  position: relative;
}

.footer h1 span:after {
  content: '';
  height: 2px;
  width: 100%;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
}

.wrap:before {
  content: '';
  width: 100px;
  height: 2px;
  background-color: red;
  position: absolute;
  margin-top: 55px;
}

.links a {
  display: block;
  text-decoration-line: none;
  color: rgba(102, 102, 102, 1);
  font-size: 1.1rem;
  position: relative;
  top: -17px;
  transition: color 0.4s ease;
}

.links a:hover {
  color: red;
}

.contact p {
  position: relative;
  top: -10px;
}

.social i {
  font-size: 1.7rem;
  margin-right: 5px;
  position: relative;
  top: -20px;
  color: rgba(102, 102, 102, 0.7);
  transition: all 0.4s ease;
}

.social i:hover {
  color: red;
  cursor: pointer;
}

#msg {
  margin-top: -15px;
}

.footer-textarea {
  background-color: rgba(102, 102, 102, 0.2);
  padding: 0;
  outline: none;
  font-size: 1.2rem;
  color: rgba(102, 102, 102, 1);
  resize: none;
  width: 99.5%;
}

.footer button {
  float: right;
  margin-top: -17px;
  border: none;
  font-family: 'Rajdhani';
  font-size: 1.2rem;
  transition: all ease 0.4s;
  outline: none;
}

button:hover {
  cursor: pointer;
  color: red;
}

.dark {
  color: red;
}

.copyright {
  position: absolute;
  background-color: white;
  text-align: center;
  width: 100%;
  margin-bottom: 0;
  font-size: 1.2rem;
  padding-bottom: 4px;
}


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

@media screen and (min-width: 2460px) {
  /*---NAV---*/
  nav li {
    font-size: 3rem;
  }
  .logo {
    font-size: 8rem;
  }
  .after:after {
    width: 3px;
    height: 40px;
    margin-left: 5px;
    margin-right: 5px;
  }
  /*---MAIN---*/
  header h1 {
    font-size: 9rem;
  }
  .history h2 {
    font-size: 6rem;
    margin-bottom: 30px;
  }
  .history h2:before,
  .history h2:after {
    height: 4px;
    width: 35px;
    margin-bottom: 25px;
  }
  .history p {
    font-size: 3.4rem;
  }
  .services h1 {
    font-size: 8rem;
  }
  .services .wrapper {
    height: 400px;
  }
  .services h2 {
    font-size: 6rem;
  }
  .services h2:before,
  .services h2:after {
    height: 4px;
    width: 35px;
    margin-bottom: 25px;
  }
  .services li {
    font-size: 3.5rem;
  }
  .services ul {
    margin-left: 150px;
  }
  .testimony i {
    font-size: 5rem;
    padding-top: 30px;
  }
  .testimony h1 {
    font-size: 2.7rem;
    padding-bottom: 60px;
  }
  .testimony .quote {
    font-size: 2.3rem;
  }
  /*---FOOTER---*/
  .footer h1 {
    font-size: 4.5rem;
    padding-top: 15px;
  }
  .footer h1 span:after {
    height: 4px;
  }
  .footer .inner:before {
    height: 4px;
    margin-top: 118.25px;
  }
  .links a {
    font-size: 2.5rem;
    top: -20px;
  }
  .social i {
    font-size: 3.5rem;
    margin-right: 10px;
    top: -40px;
  }
  .footer button {
    font-size: 2.5rem;
    margin-right: 14.25%;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -37px;
  }
  .footer textarea {
    font-size: 2.5rem;
    width: 85%;
  }
  .contact p {
    font-size: 2.5rem;
    margin-bottom: 35px;
    margin-top: 35px;
  }
  .copyright {
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 1901px) {
  .footer button {
    margin-left: 14%;
  }
}


/*---LAPTOP-LARGE---*/

@media screen and (max-width: 1593px) {
  .skills li {
    font-size: 1.65rem;
  }
  .skills p {
    font-size: 1.65rem;
  }
}

@media screen and (max-width: 1497px) {
  .skills li {
    font-size: 1.5rem;
  }
  .skills p {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 1448px) {
  .skills li {
    font-size: 1.35rem;
  }
  .skills p {
    font-size: 1.35rem;
  }
}

@media screen and (max-width: 1440px) {
  /*---FOOTER---*/
  .footer button {
    margin-left: 16.5%;
  }
}

@media screen and (max-width: 1332px) {
  .history p {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 1091px) {
  .skills p {
    font-size: 1.15rem;
  }
}


/*---TABLET-LARGE---*/

@media screen and (max-width: 985px) {
  .history h2 {
    font-size: 2.5rem;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .history h2:before,
  .history h2:after {
    width: 15px;
    margin-bottom: 11px;
  }
  .history p {
    margin-top: 25px;
    font-size: 1.4rem;
  }
  .services ul {
    margin-left: 20px;
  }
}

@media screen and (max-width: 924px) {
  .logo {
    font-size: 3rem;
  }
  nav li {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 829px) {
  .footer .contact p {
    font-size: 1rem;
    margin: 3px;
  }
  .footer textarea {
    font-size: 1rem;
  }
}

@media screen and (max-width: 836px) {
  .services ul {
    margin-left: 5px;
  }
}

@media screen and (max-width: 812px) {
  /*---MAIN---*/
  .history p {
    font-size: 1.3rem;
  }
  .padding {
    padding-top: 0px;
  }
  .testimony h1 {
    font-size: 1.25rem;
  }
  /*---FOOTER---*/
  .footer button {
    margin-left: 8.5%;
  }
  .contact .inner {
    margin-right: 20px;
  }
}


/*---TABLET---*/

@media screen and (max-width: 768px) {
  /*---MAIN--*/
  header,
  .wrapper2 {
    height: 65vh;
  }
  .services ul {
    font-size: 1.5rem;
    margin-left: 30px;
  }
  .padding2 {
    padding-top: 10px;
  }
  .testimony h1 {
    font-size: 1.1rem;
  }
  .testimony .fa-quote-right {
    display: none;
  }
}


/*------LANDSCAPE-MODE-MOBILE------*/

@media screen and (max-width: 715px) {
  /*---NAV---*/
  nav ul {
    padding-left: 0;
    margin: 0;
  }
  nav li {
    font-size: 1.4rem;
  }
  nav .logo {
    font-size: 2.5rem;
  }
  /*---MAIN---*/
  .history p {
    font-size: 1.5rem;
  }
  .testimony {
    flex-direction: column;
  }
  .testimony h1 {
    margin-left: 30px;
    font-size: 1.45rem;
  }
  .move-quote {
    position: relative;
    top: -30px;
  }
  .fa-quote-right {
    position: absolute;
    display: none;
  }
  .padding {
    top: -35px;
  }
}

@media screen and (max-width: 640px) {
  header h1 {
    font-size: 4rem;
  }
  .services h1 {
    font-size: 3.5rem;
  }
  /*---FOOTER---*/
  .footer h1 {
    font-size: 1.5rem;
  }
  .footer .inner:before {
    margin-top: 43px;
  }
  .links a {
    font-size: 1rem;
    top: -14px;
  }
  .social i {
    font-size: 1.5rem;
    margin-right: 2px;
    top: -17px;
  }
  .footer button {
    margin-top: -14px;
    font-size: 1rem;
  }
  .footer textarea {
    font
  }
  @media screen and (max-width: 626px) {
    nav li {
      font-size: 1.27rem;
    }
    /*---FOOTER---*/
    .footer .wrapper {
      display: flex;
      flex-direction: column;
    }
    .footer div {
      margin: 0;
    }
    .footer h1 {
      font-size: 2rem;
      margin-top: 10px;
    }
    .footer .inner {
      margin: 0;
    }
    .footer .inner:before {
      display: inline-block;
      content: '';
      width: 100vw;
      height: 2px;
      background-color: rgba(102, 102, 102, 0.6);
      position: absolute;
      margin-top: 48px;
    }
    .footer h1 span:after {
      content: '';
      height: 2px;
      width: 100%;
      background-color: red;
      position: absolute;
      bottom: 1px;
      left: 0;
    }
    .social .inner {
      position: relative;
      top: -10px;
    }
    .links a {
      margin-left: 5px;
    }
    .social h1 {
      margin-bottom: 10px;
    }
    #msg {
      font-size: 1rem;
      margin-bottom: 0;
      margin-right: 25.5%;
      position: absolute;
      right: 5px;
      top: 80px;
    }
    .footer button {
      right: 9.25%;
      margin-top: 0.2px;
    }
    .social i {
      font-size: 1.8rem;
      margin-right: 2px;
      position: relative;
      top: -5px;
      left: 5px;
      color: rgba(102, 102, 102, 0.7);
      transition: all 0.4s ease;
    }
    .footer-textarea {
      width: 88.5%;
      margin-top: 25px;
      margin-left: 5px;
    }
    .contact p {
      margin: 5px;
      font-size: 1.2rem;
    }
    .copyright {
      background-color: red;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .copyright span {
      color: white;
      background-color: red;
    }
  }
  @media screen and (max-width: 586px) {
    /*---MAIN---*/
    header h1 {
      font-size: 3.5rem;
    }
    .services li {
      font-size: 1.3rem;
    }
    .services ul {
      padding: 0;
      margin-left: 50px;
    }
  }
  @media screen and (max-width: 568px) {
    /*---MAIN---*/
    header h1,
    .services h1 {
      font-size: 4rem;
    }
    .services li {
      font-size: 1.1rem;
    }
    .services ul {
      margin-left: 10px;
    }
    .padding {
      padding-top: 10px;
    }
    /*---FOOTER---*/
    .footer .wrapper {
      display: flex;
      flex-direction: column;
    }
    .footer div {
      margin: 0;
    }
    .footer h1 {
      font-size: 2rem;
      margin-top: 10px;
    }
    .footer .inner {
      margin: 0;
    }
    .footer .inner:before {
      display: inline-block;
      content: '';
      width: 100%;
      height: 2px;
      background-color: rgba(102, 102, 102, 0.6);
      position: absolute;
      margin-top: 48px;
    }
    .footer h1 span:after {
      content: '';
      height: 2px;
      width: 100%;
      background-color: red;
      position: absolute;
      bottom: 1px;
      left: 0;
    }
    .social .inner {
      position: relative;
      top: -10px;
    }
    .social .inner:before {
      width: 100vw;
    }
    .links a {
      margin-left: 5px;
    }
    .social h1 {
      margin-bottom: 10px;
    }
    #msg {
      font-size: 1rem;
      margin-bottom: 0;
      margin-right: 25.5%;
      position: absolute;
      right: 5px;
      top: 80px;
    }
    .footer button {
      right: 9.25%;
      margin-top: 0.2px;
    }
    .social i {
      font-size: 1.8rem;
      margin-right: 2px;
      position: relative;
      top: -5px;
      left: 5px;
      color: rgba(102, 102, 102, 0.7);
      transition: all 0.4s ease;
    }
    .footer-textarea {
      width: 88.5%;
      margin-top: 30px;
      margin-left: 5px;
    }
    .contact p {
      margin: 5px;
      font-size: 1.2rem;
    }
    .copyright {
      background-color: red;
    }
    .copyright span {
      color: white;
      background-color: red;
    }
  }
  @media screen and (max-width: 530px) {
    nav li {
      font-size: 1.27rem;
      margin-right: 7px;
    }
    .after:after {
      left: 5.5px;
      top: 4px;
    }
    .logo {
      margin-left: 15px;
    }
  }
  @media screen and (max-width: 517px) {
    /*---NAV---*/
    nav li {
      font-size: 1.1rem;
    }
    /*---MAIN---*/
    header h1 {
      font-size: 3rem;
    }
    /*---FOOTER---*/
    .footer .wrapper {
      display: flex;
      flex-direction: column;
    }
    .footer div {
      margin: 0;
    }
    .footer h1 {
      font-size: 2rem;
      margin-top: 10px;
    }
    .footer .inner {
      margin: 0;
    }
    .footer .inner:before {
      display: inline-block;
      content: '';
      width: 100vw;
      height: 2px;
      background-color: rgba(102, 102, 102, 0.6);
      position: absolute;
      margin-top: 48px;
    }
    .social .inner {
      position: relative;
      top: -10px;
    }
    .footer h1 span:after {
      content: '';
      height: 2px;
      width: 100%;
      background-color: red;
      position: absolute;
      bottom: 1px;
      left: 0;
    }
    .links a {
      margin-left: 5px;
    }
    .social h1 {
      margin-bottom: 10px;
    }
    #msg {
      font-size: 1.3rem;
      margin-bottom: 0;
      float: right;
      margin-right: 25.5%;
      position: relative;
      top: 15px;
    }
    .footer button {
      right: 9.25%;
      margin-top: 0.2px;
    }
    .social i {
      font-size: 1.8rem;
      margin-right: 7px;
      position: relative;
      top: -5px;
      left: 5px;
      color: rgba(102, 102, 102, 0.7);
      transition: all 0.4s ease;
    }
    .footer-textarea {
      width: 88.5%;
      margin-left: 5px;
      margin-top: 0px;
      position: relative;
      top: 10px;
    }
    .contact p {
      margin: 5px;
      font-size: 1.2rem;
    }
    .copyright {
      background-color: red;
    }
    .copyright span {
      color: white;
      background-color: red;
    }
  }
  @media only screen and (max-width: 775px) {
    .content {
      flex-wrap: wrap;
    }
    .services .content div {
      flex-basis: 50%;
    }
  }

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About | Kane Concrete & Construction</title>
  <link rel="stylesheet" href="../css/about.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>

<body>
  <header>
    <div class="wrapper2">
      <nav>
        <div class="logo">
          <i class="fab fa-accusoft"></i>
        </div>

        <div class="nav">
          <div class="ham-menu">
            <div class="m1" id="m1"></div>
            <div class="m2" id="m2"></div>
            <div class="m3" id="m3"></div>
          </div>
          <ul>
            <li class="after"><a href="index.html">Home</a></li>
            <li class="after"><a href="about.html">About</a></li>
            <li class="after"><a href="#services">Services</a></li>
            <li class="after"><a href="careers.html">Careers</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </nav>
      <h1>About Us</h1>
    </div>
  </header>

  <section class="history" style="background-color: white;">
    <h2>Our History</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat?
      Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur. Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Possimus, dolor.</p>
  </section>

  <section class="services" id="services">
    <div class="wrapper">
      <h1>Services</h1>
    </div>

    <div class="content">
      <div>
        <ul class="skills">
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Flatwork</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Paving</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Driveways</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Sidewalks</p>
          </li>
        </ul>
      </div>

      <div class="move">
        <ul class="skills">
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Foundations</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Flooring</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p>
          </li>
        </ul>
      </div>

      <div>
        <ul class="skills">
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Commercial</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Residential</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p>
          </li>
        </ul>
      </div>

      <div>
        <ul class="skills">
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Demolition</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Grading/Clean up</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Slab Repair</p>
          </li>
          <li>
            <p style="color: rgba(102,102,102, 0.85);">Curb Repair</p>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="testimony">
    <div class="block">
      <span><i class="fas fa-quote-left left-quote"></i></span>
      <h1 class="first-quote">Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote"> -Some Person</span></h1>
    </div>

    <div class="block">
      <span class="move-quote"><i class="fas fa-quote-left left-quote"></i></span>
      <h1 class="move-quote">I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1>
    </div>
  </section>

  <section class="footer">
    <div class="wrapper">
      <div class="links">
        <div class="inner">
          <h1><span>Quick Links</span></h1>

          <a href="index.html">Home</a>
          <a href="about.html">About</a>
          <a href="about.html#services">Services</a>
          <a href="careers.html">Careers</a>
          <a href="contact.html">Contact</a>
          <a href="contact.html#quote">Quote</a>
        </div>
      </div>

      <div class="social">
        <div class="inner">
          <h1><span>Social</span></h1>

          <i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
          <i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
          <i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

          <button name="msg">Send</button>
          <textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send is some feedback..."></textarea>
        </div>
      </div>

      <div class="contact">
        <div class="inner" class="wrap">
          <h1><span>Contact</span></h1>

          <p>(208)546-7827 - <span class="dark">Matt</span></p>
          <p>(208)546-7827 - <span class="dark">Keegan</span></p>
          <p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
          <p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
        </div>
      </div>
    </div>

    <div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
  </section>
  <script src="../script.js"></script>
</body>

</html>