Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

Scotland Class 5 - Ivan Zhukov - HTML/CSS - Week 1 #68

Closed
zhkvivan wants to merge 11 commits into from
Closed

Scotland Class 5 - Ivan Zhukov - HTML/CSS - Week 1 #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
417dbe1
adding header
zhkvivan May 31, 2021
769f24d
adding header image
zhkvivan May 31, 2021
c32d42e
adding descripton box and ingredients
zhkvivan Jun 2, 2021
329681f
adding bg color to ingreditnts
zhkvivan Jun 2, 2021
897c585
adding all the steps and changing color scheme
zhkvivan Jun 2, 2021
44be079
adding footer
zhkvivan Jun 2, 2021
58bbace
sdf
zhkvivan Jun 2, 2021
f22d5af
changing header
zhkvivan Jun 2, 2021
ca0f9fc
adding box-shadow
zhkvivan Jun 2, 2021
c470c85
adding links
zhkvivan Jun 2, 2021
68ccfe2
adding info in footer
zhkvivan Jun 2, 2021
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
95 changes: 95 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,98 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/



body {
font-family: 'Noto Sans TC', sans-serif;
background-color: rgb(247, 247, 247);
color: rgb(65, 65, 65);
margin: 0;
}

.top-line {
width: 100%;
height: 80px;
background-color: rgb(18, 93, 190);
display: flex;
}

.logo {
width: 60px;
margin: 10px 0;
}

h1 {
font-size: 36px;
margin-top: 100px;
font-weight: 900;
color: rgb(3, 17, 36);
text-align: center;
}

h2 {
color: rgb(6, 156, 51);
}

.description {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 50px 0;
}

a {
color:rgb(65, 65, 65);
}

a:hover {
color:rgb(6, 156, 51);
}

#author-img {
height:40px;
width: 40px;
border-radius: 50%;
margin: 0px 30px;
background-image: url(https://www.gravatar.com/avatar/169771357cf99a0be07fbfae275a77d9?s=32&d=identicon&r=PG);
background-size: cover;
}


.steps-wrap {
padding: 20px;
margin: 50px 0;
box-shadow: 0px 0px 20px 7px rgba(18, 27, 68, 0.226);
}

.container {
margin: 0px auto;
max-width: 900px;
padding: 0px 30px;
}

.list-item {
margin: 10px 0;
}

.steps-wrap img {
width: 100%;
margin: 20px 0;
}

footer {
background-color: rgb(238, 238, 238);
padding: 20px 0;
}

.footer-wrap {
display: flex;
flex-direction: column;
align-items: center;
}

.steps-wrap:first-child {
font-size: 14px;
}
Binary file added img/food-serving.png
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.
167 changes: 147 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>My Blog</title>
<link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
</head>

<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<div class="top-line">
<div class="container">
<img src="img/food-serving.png" alt="" class="logo">
</div>
</div>
<div class="container">

<h1>How to Make Kimchi</h1>
<div class="description">

<a href="#" id="author-name">Ivan Zhukov</a>
<div id="author-img"></div>
<span id="page-date">02.06.2021</span>
</div>
<p>Kimchi, a staple in Korean cuisine, is a traditional side dish of salted and fermented vegetables, such
as napa cabbage and Korean radish, made with a widely varying selection of seasonings including
gochugaru (chili powder), spring onions, garlic, ginger, and jeotgal (salted seafood), etc. It is also
used in a variety of soups.</p>
</div>
</header>
<main>
<div class="container">
<article class="steps-wrap">
<h2>Ingredients</h2>
<ul class='list'>
<li class='list-item'>75g white cabbage</li>
<li class='list-item'> 75g red cabbage</li>
<li class='list-item'>50g fresh beetroot, peeled and chopped into matchsticks</li>
<li class='list-item'>1.5ltrs bottled water (or boiled and cooled tap water)</li>
<li class='list-item'>25g sea salt (don't worry, you won't be eating this!)</li>
</ul>
<span>For the flavourings</span>
<ul class="list">
<li class="list-item">1 carrot (50g), scrubbed and grated</li>
<li class="list-item">1 spring onion, thinly sliced</li>
<li class="list-item">50g radishes, chopped into matchsticks</li>
<li class="list-item">1 garlic clove, finely sliced</li>
<li class="list-item">2.5cm piece ginger, peeled and grated</li>
<li class="list-item">½ tsp chilli powder</li>
<li class="list-item">½ tsp paprika</li>
<li class="list-item">1 tbsp reduced-salt soy sauce</li>
</ul>
<span>You will need 500ml glass <a href="https://www.ikea.com/gb/en/cat/jars-tins-15950/"
target="_blank">jar with
lid</a>, and a small glass jar that fits inside it, both
sterilised</span>
</article>
<article class="steps-wrap">
<h2>1. Massage in the salt</h2>
<img src="https://realfood.tesco.com/media/images/kimchi-step-1-1639f53a-0fd9-4c9a-a13b-d2c5cc99cbfb-0-636x418.jpg"
alt="preparation">
<p>
Rinse the cabbage leaves under running water, pat dry with kitchen paper, then chop to your desired
thickness. Put in a bowl with the <a href="https://en.wikipedia.org/wiki/Beetroot"
target="_blank">beetroot</a>, add
the salt and, with clean hands, firmly massage it
into the vegetables. Salt is important for fermenting vegetables as it helps to draw the juices out
and preserves the crispy crunch. The majority of it will get rinsed off. If you’re limiting salt,
ferments can still work with lower levels, they just won’t last as long.</p>
<p>Pour 500ml water over the cabbage and beetroot, then sit a plate on top to push the vegetables down
so they are submerged. Set aside to soak for 2 hrs.</p>

</article>
<div class="steps-wrap">
<h2>2. Rinse the veg</h2>
<img src="https://realfood.tesco.com/media/images/kimchi-step-2-574ebb24-1335-4d1b-8236-11ee3f519bca-0-636x418.jpg"
alt="rinse the veg">
<p>Drain the cabbage and beetroot and, with the remaining water, rinse 3 times to get rid of the excess
salt. Squeeze out any excess water, then return to the bowl.</p>
<p>Chlorine found in tap water can inhibit the microbes required for <a
href="https://en.wikipedia.org/wiki/Fermentation" target="_blank">fermentation</a> – which is
why you use
bottled (or boiled and cooled) water for this recipe.</p>
</div>
<article class="steps-wrap">
<h2>3. Prepare the flavourings</h2>
<img src="https://realfood.tesco.com/media/images/kimchi-step-3-4fed613d-e881-4d11-96d3-25336ff45a9c-0-636x418.jpg"
alt="Prepare the flavourings">
<p>Add the flavourings to the bowl and mix well. Mix and match flavourings as you like – you could also
try adding cucumbers or <a href="https://en.wikipedia.org/wiki/Chives" target="_blank">chives</a>.
</p>
</article>
<article class="steps-wrap">
<h2>4. Cover the kimchi</h2>
<img src="https://realfood.tesco.com/media/images/kimchi-step-4-5c45dab4-0200-4f2f-ad87-93886fd8a0ae-0-636x418.jpg"
alt="kimchi in a jar">
<p>Transfer the mixture to a sterilised 500ml jar and use a spoon to press it down so there’s a layer of
liquid separating the raw kimchi and the air above. Put the small sterilised jar on top of the raw
kimchi, making sure that all the vegetables are fully submerged.</p>
<p>This helps remove oxygen, supporting the growth of the right types of microbes (which grow best
without oxygen). With the small <a href="https://www.ikea.com/gb/en/cat/jars-tins-15950/"
target="_blank">jar</a> still inside, screw the lid on and leave at room temperature
(ideally 18-22°C), out of direct sunlight, for 3 days.</p>
</article>
<article class="steps-wrap">
<h2>5. Unscrew the jar</h2>
<img src="https://realfood.tesco.com/media/images/kimchi-step-5-e88da2aa-aeee-4a79-b25a-9765366dcddb-0-636x418.jpg"
alt="kimchi in a jar">
<p>Each day, unscrew the lid for a few seconds to release any gas that has built up. Reseal. This allow
the gases to escape regularly so the pressure doesn’t build up too much inside the <a
href="https://www.ikea.com/gb/en/cat/jars-tins-15950/" target="_blank">jar</a>. Think of it
as 'burping' your kimchi!</p>
<p>After 3 days your kimchi is ready for its first taste. It should have a slight acidic bite and
softened crunch. If you’re missing that, leave for an extra 1-2 days.</p>
</article>
<article class="steps-wrap">
<h2>6. Enjoy your kimchi</h2>
<img src="https://realfood.tesco.com/media/images/1400x919-Kimchi-e46b14bf-9745-487f-aedc-1bb38b88f510-0-1400x919.jpg"
alt="kimchi in a jar">
<p>Once it’s reached your preferred flavour, remove the small jar and put the kimchi jar in the fridge
with the lid sealed tight to trap the gas, creating the fizziness of traditional kimchi. Leave it
for 2 weeks to allow the flavours to develop, then enjoy with eggs, salads or on crackers with <a
href="https://en.wikipedia.org/wiki/Feta" target="_blank">feta</a>.
</p>
</article>
</div>
</main>
<footer>
<div class="container">
<div class="footer-wrap">
<img src="img/food-serving.png" alt="" class="logo">
<span>Recipes from Safe Food for safe life</span>
</div>
</div>
</footer>
</body>

</html>