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 faucibusExplanation / 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>