Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

I\'m using CSS to desing a webpage on html I have to use cards to make make the

ID: 3746873 • Letter: I

Question

I'm using CSS to desing a webpage on html

I have to use cards to make make the code look like the picture:

Inside the cards elements the cards have to be inline

Height and width:180px

Margin and padding: 9px

1px balck borde

Odd number cards have #fff background and #333 color text

Even cards have#333 background and #fff text

Here is the code in html:

Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus. Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus. Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus. Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus. Praesent rutrum Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus

Explanation / Answer

<html>
<head>
<style type="text/css">
.card{
display: inline-block;

width: 180px;
height: 180px;
margin: 9px;
padding: 9px;

}
.cards{
width: 700px;

}
</style>
</head>
<body>
<div class="cards">

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

<div class="card">

<h3>Praesent rutrum</h3>

<p>Maecenas lobortis quam dui, id ultricies enim sagittis quis. Aliquam gravida purus in lacus sollicitudin faucibus.</p>

</div>

</div>
</body>
</html>