camckin10/CSSDrills

## CSSDrills
1.) Drill 1: Width, Height, Color, Border
In this drill, you’ll add classes to the two divs to create a blue box and a red box, as described in the code comments and paragraphs in the code pen. To complete this drill, you'll need to use the following CSS properties:

background-color
margin-bottom
border

SOLUTION:
html
<main>

    <div class= "box-one">
      <!-- remove this paragraph when you've created the blue box      -->
      <p>Make me blue and 60px x 60px</p>
    </div>
    <!-- There should be 100 px of space between these two divs    -->
    <div class = "box-two" >
      <!-- remove this paragraph when you've created the red box      -->
      <p>Make me red and 200px by 250px, with a 1px black, solid border</p>
  </div>

</main>

css
main {
  padding: 60px;
}

.box-one{
   background-color: blue;
   width:60px;
   height:60px;
   margin-bottom: 100px;
}

.box-two{
  background-color:red;
  width:200px;
  height:250px;
  border:1px solid black;
}
  //END SOLUTION TO PROBLEM #1

  2.) Font Basics
  example code below:
  * {
  font-family: 'Comic Sans MS';
  font-size: 20px;
  font-weight: bold;
  color: yellow;
}

HTML
<body>
<link href="https://fonts.googleapis.com/css?family=Diplomata+SC|Jim+Nightshade|Ranga|Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Diplomata+SC|Indie+Flower|Jim+Nightshade|Ranga|Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Clicker+Script|Diplomata+SC|Indie+Flower|Jim+Nightshade|Ranga|Roboto" rel="stylesheet">
  <main>
 <!-- there's nothing funny about comic sans -->
  <h1>Get ready cause</h1>
  <hr>
  <h2>this ain't funny</h2>
  <p>my name's Mike-D</p>
  <p>and i'm definitely not going to get any money with this horrible font. Can I get assistance?</p>
  </main>
</body>

Cmain {
  padding: 30px;
}

h1{
  font-family: 'Ranga', cursive;
  color:green;
  background-color:pink;
}

h2{
  font-family: 'Indie Flower', cursive;
  color:blue;
  background-color:gray;
}


p{
  font-family: 'Clicker Script', cursive;
  font-weight:bold;
  font-size:50px;
}SS

//END SOLUTION FOR PROBLEM #2

3.) Background Images
Two .divs: the first, .animal div should display the image once, and take up the full width/height of the container.
The second, .animals should display the same  background image four times.
HTML
<main>
  <div class="animal"></div>
  <div class="animals"></div>
</main>

CSS
main {
  padding: 60px;
}

.animal {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  margin-bottom: 50px;
  background-image:url("http://lorempixel.com/200/200/animals/");
  background-repeat: once;
  background-size: 400px, 400px;
}

.animals {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  background-image:url("http://lorempixel.com/400/200/");
  background-repeat: four times;
  background-size:250px ;
}

//END SOLUTION FOR PROBLEM #3

4.) Text Contrast Problem
Edit image so that the text in the picture can be readable.

HTML:
<div class='main'>
  <header>
    <h1>Hero text...</h1>
    <h2>Oh how I engage you!</h2>
  </header>
</div>

<!-- fonts  -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>


CSS:
* {
  color: white;
  font-family: 'Lato';
  font-weight:900;
  text-shadow: 0px 0px 3px #000;
}

.main {
  padding: 60px;
  height: 300px;
  background-image: url('https://tf-assets-prod.s3.amazonaws.com/tf-curric/FEWD-001/light-background.jpg');
background-repeat: no-repeat;
background-size: contain;
}

.opacity-layer {
  padding: 60px;
}
.inner {
  background-color: black;
  height: 100%

}

hr {
  width: 150px;
  margin-left: 0;
  color:  white;
}
	1.) Drill 1: Width, Height, Color, Border
	In this drill, you’ll add classes to the two divs to create a blue box and a red box, as described in the code comments and paragraphs in the code pen. To complete this drill, you'll need to use the following CSS properties:

	background-color
	margin-bottom
	border

	SOLUTION:
	html
	<main>

	<div class= "box-one">
	<!-- remove this paragraph when you've created the blue box -->
	<p>Make me blue and 60px x 60px</p>
	</div>
	<!-- There should be 100 px of space between these two divs -->
	<div class = "box-two" >
	<!-- remove this paragraph when you've created the red box -->
	<p>Make me red and 200px by 250px, with a 1px black, solid border</p>
	</div>

	</main>

	css
	main {
	padding: 60px;
	}

	.box-one{
	background-color: blue;
	width:60px;
	height:60px;
	margin-bottom: 100px;
	}

	.box-two{
	background-color:red;
	width:200px;
	height:250px;
	border:1px solid black;
	}
	//END SOLUTION TO PROBLEM #1

	2.) Font Basics
	example code below:
	* {
	font-family: 'Comic Sans MS';
	font-size: 20px;
	font-weight: bold;
	color: yellow;
	}

	HTML
	<body>
	<link href="https://fonts.googleapis.com/css?family=Diplomata+SC\|Jim+Nightshade\|Ranga\|Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Diplomata+SC\|Indie+Flower\|Jim+Nightshade\|Ranga\|Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Clicker+Script\|Diplomata+SC\|Indie+Flower\|Jim+Nightshade\|Ranga\|Roboto" rel="stylesheet">
	<main>
	<!-- there's nothing funny about comic sans -->
	<h1>Get ready cause</h1>
	<hr>
	<h2>this ain't funny</h2>
	<p>my name's Mike-D</p>
	<p>and i'm definitely not going to get any money with this horrible font. Can I get assistance?</p>
	</main>
	</body>

	Cmain {
	padding: 30px;
	}

	h1{
	font-family: 'Ranga', cursive;
	color:green;
	background-color:pink;
	}

	h2{
	font-family: 'Indie Flower', cursive;
	color:blue;
	background-color:gray;
	}


	p{
	font-family: 'Clicker Script', cursive;
	font-weight:bold;
	font-size:50px;
	}SS

	//END SOLUTION FOR PROBLEM #2

	3.) Background Images
	Two .divs: the first, .animal div should display the image once, and take up the full width/height of the container.
	The second, .animals should display the same background image four times.
	HTML
	<main>
	<div class="animal"></div>
	<div class="animals"></div>
	</main>

	CSS
	main {
	padding: 60px;
	}

	.animal {
	width: 400px;
	height: 400px;
	border: 1px solid black;
	margin-bottom: 50px;
	background-image:url("http://lorempixel.com/200/200/animals/");
	background-repeat: once;
	background-size: 400px, 400px;
	}

	.animals {
	border: 1px solid black;
	width: 400px;
	height: 400px;
	background-image:url("http://lorempixel.com/400/200/");
	background-repeat: four times;
	background-size:250px ;
	}

	//END SOLUTION FOR PROBLEM #3

	4.) Text Contrast Problem
	Edit image so that the text in the picture can be readable.

	HTML:
	<div class='main'>
	<header>
	<h1>Hero text...</h1>
	<h2>Oh how I engage you!</h2>
	</header>
	</div>

	<!-- fonts -->
	<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>


	CSS:
	* {
	color: white;
	font-family: 'Lato';
	font-weight:900;
	text-shadow: 0px 0px 3px #000;
	}

	.main {
	padding: 60px;
	height: 300px;
	background-image: url('https://tf-assets-prod.s3.amazonaws.com/tf-curric/FEWD-001/light-background.jpg');
	background-repeat: no-repeat;
	background-size: contain;
	}

	.opacity-layer {
	padding: 60px;
	}
	.inner {
	background-color: black;
	height: 100%

	}

	hr {
	width: 150px;
	margin-left: 0;
	color: white;
	}