<meta charset="utf-8" />
<title>Responsive Web Design Task: Task</title>
<link rel="stylesheet" href="css/RD1.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
html {
font: 1.2em/1.4 Arial, Helvetica, sans-serif;
}
body {
padding: 0 0 1em;
}
header {
background-color: #333;
color: #fff;
border: 5px solid #000;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header a {
color: #fff;
text-decoration: none;
display: block;
padding: 0.5em 1em;
border-top: 1px solid #999;
}
header .title {
font-size: 150%;
font-style: italic;
font-weight: bold;
padding: 1em;
}
main {
padding: 0 1em;
}
.cards {
list-style: none;
margin: 0;
padding: 0;
}
.cards li {
border: 5px solid #000;
margin-bottom: 1em;
}
.cards h2 {
background-color: #333;
color: #fff;
margin: 0;
padding: 0.5em 1em;
}
.cards .inner {
padding: 0.5em 1em;
}
.sidebar {
background-color: #333;
border: 5px solid #000;
padding: 0.5em 1em;
color: #fff;
}
@media screen and (min-width: 70em) {
body {
display: grid;
grid-template-rows: 100px 1fr;
gap: 1em;
}
header {
display: grid;
grid-template-columns: 3fr 1fr;
}
header ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3em;
}
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
}
</style>
<header>
<div class="title">My Website</div>
<nav>
<ul>
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 3</a>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h1>This is the main heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
courgette tatsoi pea sprouts fava bean collard greens dandelion okra
wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
<ul class="cards">
<li>
<h2>Card One</h2>
<div class="inner">
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea
lettuce kohlrabi amaranth water spinach avocado.
</p>
</div>
</li>
<li>
<h2>Card Two</h2>
<div class="inner">
<p>
Daikon napa cabbage asparagus winter purslane kale. Celery
potato scallion desert raisin horseradish spinach carrot soko.
</p>
</div>
</li>
<li>
<h2>Card Three</h2>
<div class="inner">
<p>
Lotus root water spinach fennel kombu maize bamboo shoot green
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
</p>
</div>
</li>
<li>
<h2>Card Four</h2>
<div class="inner">
<p>
Lotus root water spinach fennel kombu maize bamboo shoot green
bean swiss chard seakale pumpkin onion chickpea gram corn pea.
</p>
</div>
</li>
<li>
<h2>Card Five</h2>
<div class="inner">
<p>
Nori grape silver beet broccoli kombu beet greens fava bean
potato quandong celery. Bunya nuts black-eyed pea prairie turnip
leek lentil turnip greens parsnip.
</p>
</div>
</li>
</ul>
</article>
<aside class="sidebar">
<p>
Have you discovered all of the other excellent content on this
website?
</p>
</aside>
</main>
