Skip to content

Day 21: Vegetables - CSS Exercise #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
damienteo wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Day 21: Vegetables - CSS Exercise #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/Importance-of-beetroots.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/asparagus.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/carrot-nutrition-facts.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 81 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,88 @@

<body>

<h1>Some Favorites</h1>
<ul>
<li><a href="#">Celery Root</a>
<li><a href="#">Spaghetti Squash</a>
<li><a href="#">Killer Mushrooms</a>
</ul>
<div class="d-inline-block align-top col-4 mt-3">
<h1 class="font-weight-bold">Some Favorites</h1>
<ul class="list-group">
<li class="list-group-item active"><a href="#"><span class="text-white">Celery Root<span></a></li>
<li class="list-group-item"><a href="#">Spaghetti Squash</a></li>
<li class="list-group-item"><a href="#">Killer Mushrooms</a></li>
</ul>
<button type="button" class="btn btn-primary mt-3">Search Recipes</button>
</div>

<h1>Wild & Wacky Vegetables</h1>
<p>Kale courgette salsify mustard broccoli seakale wakame potato fava bean tigernut leek celery spinach avocado cabbage celtuce rutabaga kohlrabi. Parsnip pea soko groundnut bitterleaf spring onion. Grape dulse rutabaga lentil gram kakadu plum water spinach cabbage lotus root.
</p>
<p>
Mung bean quandong kale prairie turnip celery gram zucchini pumpkin green bean silver beet chard endive komatsuna eggplant kakadu plum radish broccoli. Arugula amaranth fennel wakame peanut garlic chickweed. Sorrel jícama quandong kale chickpea water chestnut rock melon aubergine lettuce pea azuki bean cress onion sea lettuce dandelion nori dulse rutabaga. Coriander napa cabbage bok choy carrot kakadu plum brussels sprout bamboo shoot salad okra cucumber garlic kombu beet greens cauliflower summer purslane. Artichoke daikon horseradish arugula taro catsear kombu rock melon pea sprouts collard greens mustard courgette lettuce soko maize plantain.
</p>
<div class="d-inline-block col-7 mt-3">
<div class=""border border-light rounded">
<table class="table">
<tbody>
<tr class="table-danger">
<td class="text-danger border border-light rounded">Uh oh! Have you had your daily dose of veggies today?</td>
</tr>
</tbody>
</table>
</div>
<h1 class="font-weight-bold">Wild & Wacky Vegetables</h1>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0 text-justify">
The beet is the most intense of vegetables. The radish, admittedly, is more ferish, but the fire of the radish is a cold fire, the fire of discontent not of passion. Tomatoes are lusty enough, yet there runs through tomatoes an undercurrent of frivolity. Beets are deadly serious.
<footer class="blockquote-footer mt-3">Tom Robbins <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<div>
<h2 class="font-weight-bold mt-3">Some diseases</h2>
</div>
<div>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Veggie</th>
<th scope="col">Disease</th>
</tr>
</thead>
<tbody>
<tr>
<td>Beets</td>
<td>Beeturia</td>
</tr>
<tr>
<td>Carrots</td>
<td>Carotenosis</td>
</tr>
</tbody>
</table>
</div>
<div>
<div class="card d-inline-block" style="width: 14rem;">
<img class="card-img-top border border-light rounded" src="images/Importance-of-beetroots.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-text font-weight-bold">beets</h3>
<p class="card-text">Careful not to get your hands dirty</p>
</div>
</div>
<div class="card d-inline-block align-top" style="width: 14rem;">
<img class="card-img-top border border-light rounded" src="images/carrot-nutrition-facts.jpg" alt="Card image cap">
<div class="card-body">
<h3 class="card-text font-weight-bold">carrots</h3>
<p class="card-text">Not sticks, can motivate</p>
</div>
</div>
<div class="card d-inline-block align-top" style="width: 14rem;">
<img class="card-img-top border border-light rounded" src="images/asparagus.jpeg" alt="Card image cap">
<div class="card-body">
<h3 class="card-text font-weight-bold">Asparagus</h3>
<p class="card-text">Spears, spears, spears</p>
</div>
</div>
</div>
<div class="mt-3">
<h1 class="font-weight-bold">Really informative info</h1>
<p class="text-justify">
Mung bean quandong kale prairie turnip celery gram zucchini pumpkin green bean silver beet chard endive komatsuna eggplant kakadu plum radish broccoli. Arugula amaranth fennel wakame peanut garlic chickweed. Sorrel jícama quandong kale chickpea water chestnut rock melon aubergine lettuce pea azuki bean cress onion sea lettuce dandelion nori dulse rutabaga. Coriander napa cabbage bok choy carrot kakadu plum brussels sprout bamboo shoot salad okra cucumber garlic kombu beet greens cauliflower summer purslane. Artichoke daikon horseradish arugula taro catsear kombu rock melon pea sprouts collard greens mustard courgette lettuce soko maize plantain.
</p>
</div>
</div>

</body>
</html>