CSS Memory Game

Essential Question: How is the new box model different than the previous box model?

Mastery Objectives:

SWBAT to use the new box model to accurately estimate the size and spacing on a page.
SWBAT add padding and borders to their page elements.
SWBAT to program a memory game in CSS and HTML.

In the default box model, box dimensions are affected by border thickness and padding.
The box-sizing property controls the box model used by the browser.
The default value of the box-sizing property is content-box.
The value for the new box model is border-box.
The border-box model is not affected by border thickness or padding.

Directions:

In style.css, change the box model for all elements on the web page to the new box model.

* {

box-sizing: border-box;

}

<!DOCTYPE html>

<html>

<head>

<title>Let's Test Your Memory!</title>

</head>

<body>

<h2>Classic Memory Game</h2>

<h1>Let's Test Your Memory!</h1>

<p>Click on a tile below to reveal a symbol. Click on another tile to try and reveal two of the same symbols. The game is over when all the cards have been matched.</p>

<a href="#">Reset Game</a>

<a href="#">Invite a Friend!</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

body {

background-color: #FFF;

margin: 0px;

padding: 50px 60px;

}

h1 {

color: #004E89;

font-family: 'Yantramanav', sans-serif;

font-size: 50px;

font-weight: 400;

margin: 0;

text-align: center;

}

h2 {

color: #AAA;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 100;

letter-spacing: 2px;

margin: 0;

text-align: center;

text-transform: uppercase;

}

p {

color: #333;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 100;

margin: 0;

text-align: center;

}

.actions {

text-align: center;

margin-top: 30px;

}

.actions a {

background-color: #9DD1F1;

border-radius: 3px;

color: #004E89;

font-family: 'Yantramanav', sans-serif;

font-size: 16px;

font-weight: 300;

display: inline-block;

margin: 10px;

padding: 12px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

}

#gameboard {

position: relative;

text-align: center;

top: 30px;

}

.card {

border: 2px solid #9DD1F1;

display: inline-block;

height: 200px;

margin-top: 4px;

padding: 30px auto;

text-align: center;

width: 215px;

}

.card:hover {

background-color: #004E89;

border-color: #004E89;

}

.card img {

padding-top: 40px;

}