Making Cards

In the lesson today we made cards.

we had to make 10 cards. to make them we had to make individual dive classes for each card so we could change them to what we want them to look like.

to get the images go in the place I wanted them to stay where they at the correct size I had to put the codes img { width:100%:}

.container{

width: 90%;

margin:auto;

}

into the css section.

To actually insert the picture we had to write <img src=> and in between the equals and the right arrow  paste the picture.

To add the text we had to put <p></p> and in between the highlighted section put what you want to write.To make text at the top be where it is put the <p></p> above the <img src=>.

To make one card we had to have this in the html section

<div class="red-box">

<p class="text">Lion Rider</p>

<img src="https://i.kinja-img.com/gawker-media/image/upload/s--3wtXh6PJ--/c_scale,fl_progressive,q_80,w_800/18bltictofxg7jpg.jpg">

<p class="text">When this card is placed any lion card gets +5 attack</p>

and the section in the css to make one card look like this 

.red-box{

width:300px; 

height:400px;

background-color:red;

margin: 20px;

float: left;

border: 5px solid black;

}