Usatruck200/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>k</title>


    </head>
    <body>
    <h1>TechStream</h1>

       <div>
      <ul>
    <li id="reap">Home</li>
  <li id="DFF">About Us</li>
    <li id="li">Services</li>
    <li id="aa">Contact Us</li>
    </ul></div>


 <div class="row">
  <div class="column">
    <div class="card">
      <img src="https://www.mariowiki.com/images/thumb/b/b5/SuperMarioParty_DonkeyKong.png/1200px-SuperMarioParty_DonkeyKong.png" alt="jane" style="width:47%">
      <div class="container">
        <h2>Semachiah Yisrael </h2>
        <p class="title"></p>
        <p>School:Ramsay Highschool
        Grade:10th

        Fun Facts: I run track and i want to be a software engineer</p>
        <p>
        </p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="http://pm1.narvii.com/6615/68439d1bfce978aaf27afadcf71d7af7dcf5724f_00.jpg" alt="" style="width:47%">
      <div class="container">
        <h2>Kylie Sparks</h2>
       <p>School:G.W Carver Highschool
       </p>
        <p></p>
        <p></p>

      </div>
    </div>
  </div>


    </div>


 <div class="row">
  <div class="column">
    <div class="car">
      <img src="https://www.mariowiki.com/images/thumb/b/b5/SuperMarioParty_DonkeyKong.png/1200px-SuperMarioParty_DonkeyKong.png" alt="jane" style="width:47%">
      <div class="container">
        <h2>Kyle Williams </h2>
        <p class="title"></p>
        <p></p>
        <p></p>

      </div>
    </div>
  </div>

  <div class="column">
    <div class="cabdropdown">
      <img src="http://pm1.narvii.com/6615/68439d1bfce978aaf27afadcf71d7af7dcf5724f_00.jpg" alt="" style="width:11%">
      <div class="container">
        <h2>Kylie Sparks</h2>
       <p></p>
        <p></p>
        <p></p>

      </div>
    </div>
  </div>

  <div class="column">
    <div class="ca">
      <img src="https://banner2.kisspng.com/20180417/riw/kisspng-super-mario-galaxy-rosalina-mario-party-star-rush-princess-5ad58f9ed773c3.3377456715239453748825.jpg" alt="" style="width:11%">
      <div class="container">
        <h2>Taliyah Lee</h2>
        <p class="title">Designer</p>
        <p></p>
        <p>example@example.com</p>

      </div>
    </div>
  </div>
</div>


    </body>

</html>

## popcode.json
{"hiddenUIComponents":["console"]}

## styles.css
body{background-color:white;}
ul{
    background-color:maroon ;
      border-color:black;
          border: 78px ;

          border: 400px red;
}
li{
    color: white;
    display:block ;
    display: inline;
    padding: 15px 32px;
    margin-left:154px;
    font-size: 27px;
    text-align:center;
    font-family: l;

}

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
 img{
 border-style:groove;
 border-width:3px;
 height:160px;
 width:37px;}

.car{ height:160px;
width:260px;}

.cabdropdown{height:160px;
width:560px;}
h1{}
.ca{height:260px;
width:1000px;}

* {box-sizing: border-box;}

/* Container needed to position the overlay. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 10%;
  height: auto;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
  opacity: 1;
}

.lol{display: block;
  width: 100%;
  height: auto;}

 /* Three columns side by side */
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .column {
    width: 10%;
    display: block;
  }
}

/* Add some shadows to create a card effect */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container {
  padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>k</title>


	</head>
	<body>
	<h1>TechStream</h1>

	<div>
	<ul>
	<li id="reap">Home</li>
	<li id="DFF">About Us</li>
	<li id="li">Services</li>
	<li id="aa">Contact Us</li>
	</ul></div>



	<div class="row">
	<div class="column">
	<div class="card">
	<img src="https://www.mariowiki.com/images/thumb/b/b5/SuperMarioParty_DonkeyKong.png/1200px-SuperMarioParty_DonkeyKong.png" alt="jane" style="width:47%">
	<div class="container">
	<h2>Semachiah Yisrael </h2>
	<p class="title"></p>
	<p>School:Ramsay Highschool
	Grade:10th

	Fun Facts: I run track and i want to be a software engineer</p>
	<p>
	</p>
	<p><button class="button">Contact</button></p>
	</div>
	</div>
	</div>

	<div class="column">
	<div class="card">
	<img src="http://pm1.narvii.com/6615/68439d1bfce978aaf27afadcf71d7af7dcf5724f_00.jpg" alt="" style="width:47%">
	<div class="container">
	<h2>Kylie Sparks</h2>
	<p>School:G.W Carver Highschool
	</p>
	<p></p>
	<p></p>

	</div>
	</div>
	</div>


	</div>




	<div class="row">
	<div class="column">
	<div class="car">
	<img src="https://www.mariowiki.com/images/thumb/b/b5/SuperMarioParty_DonkeyKong.png/1200px-SuperMarioParty_DonkeyKong.png" alt="jane" style="width:47%">
	<div class="container">
	<h2>Kyle Williams </h2>
	<p class="title"></p>
	<p></p>
	<p></p>

	</div>
	</div>
	</div>

	<div class="column">
	<div class="cabdropdown">
	<img src="http://pm1.narvii.com/6615/68439d1bfce978aaf27afadcf71d7af7dcf5724f_00.jpg" alt="" style="width:11%">
	<div class="container">
	<h2>Kylie Sparks</h2>
	<p></p>
	<p></p>
	<p></p>

	</div>
	</div>
	</div>

	<div class="column">
	<div class="ca">
	<img src="https://banner2.kisspng.com/20180417/riw/kisspng-super-mario-galaxy-rosalina-mario-party-star-rush-princess-5ad58f9ed773c3.3377456715239453748825.jpg" alt="" style="width:11%">
	<div class="container">
	<h2>Taliyah Lee</h2>
	<p class="title">Designer</p>
	<p></p>
	<p>example@example.com</p>

	</div>
	</div>
	</div>
	</div>











	</body>

	</html>
	body{background-color:white;}
	ul{
	background-color:maroon ;
	border-color:black;
	border: 78px ;

	border: 400px red;
	}
	li{
	color: white;
	display:block ;
	display: inline;
	padding: 15px 32px;
	margin-left:154px;
	font-size: 27px;
	text-align:center;
	font-family: l;

	}

	.right {
	float: right;
	width: 300px;
	border: 3px solid #73AD21;
	padding: 10px;
	}
	img{
	border-style:groove;
	border-width:3px;
	height:160px;
	width:37px;}

	.car{ height:160px;
	width:260px;}

	.cabdropdown{height:160px;
	width:560px;}
	h1{}
	.ca{height:260px;
	width:1000px;}

	* {box-sizing: border-box;}

	/* Container needed to position the overlay. Adjust the width as needed */
	.container {
	position: relative;
	width: 50%;
	max-width: 300px;
	}

	/* Make the image to responsive */
	.image {
	display: block;
	width: 10%;
	height: auto;
	}

	/* The overlay effect - lays on top of the container and over the image */
	.overlay {
	position: absolute;
	bottom: 0;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5); /* Black see-through */
	color: #f1f1f1;
	width: 100%;
	transition: .5s ease;
	opacity:0;
	color: white;
	font-size: 20px;
	padding: 20px;
	text-align: center;
	}

	/* When you mouse over the container, fade in the overlay title */
	.container:hover .overlay {
	opacity: 1;
	}

	.lol{display: block;
	width: 100%;
	height: auto;}

	/* Three columns side by side */
	.column {
	float: left;
	width: 33.3%;
	margin-bottom: 16px;
	padding: 0 8px;
	}

	/* Display the columns below each other instead of side by side on small screens */
	@media screen and (max-width: 650px) {
	.column {
	width: 10%;
	display: block;
	}
	}

	/* Add some shadows to create a card effect */
	.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	}

	/* Some left and right padding inside the container */
	.container {
	padding: 0 16px;
	}

	/* Clear floats */
	.container::after, .row::after {
	content: "";
	clear: both;
	display: table;
	}