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

London Class 10 - Andrius Isin - HTML-CSS - Week 1 #303

Open
AndriusIsin wants to merge 6 commits into
base: master
Choose a base branch
from
Open

London Class 10 - Andrius Isin - HTML-CSS - Week 1 #303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
450fd08
added structure of html document
AndriusIsin Jan 24, 2023
c6f1ff3
added content
AndriusIsin Jan 25, 2023
dbf7a6c
added css style
AndriusIsin Jan 25, 2023
11527f9
added first-child and padding for footer
AndriusIsin Jan 25, 2023
734ecb3
added comments
AndriusIsin Jan 25, 2023
afd012a
added some explanation for css
AndriusIsin Jan 29, 2023
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
56 changes: 48 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,48 @@
/**
* Add your custom styles below
*
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

html {
font-family: 'Inconsolata', monospace;
}
/** General styles */
body{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding-bottom: 40px;
background-color: #f5ebe0;
margin: 0;
}
/** Header */
header{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url("https://www.freewebheaders.com/wp-content/gallery/swimming/pool-swimming-sport-header.jpg");
width: 80%;
}
/** Text styles */
h1{
font-size: 50px;
align-items: center;
color: rgb(236, 252, 252);
}
h2{
font-size: 15px;
width: 50rem;
color: rgb(236, 252, 252);
}/** Articles */
section {
padding: 1rem;
width: 40rem;
align-items: center;
}

article:first-child{
padding: 1rem;
border: 1rem solid bisque;
}
/** Footer */
footer {
padding: 10px 20px;
}
37 changes: 34 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>My Website about Swimming</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -16,7 +16,38 @@
<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 -->
<header class="header">
<h1>
Benefits of Swimming
</h1>
<h2>
Swimming is one of the few sports you can do from a young age and all the way up into your 90s and beyond. </h2>
</header>
<main>
<section>
<article>
<h3>Swimming is Good for Asthma</h3>
<p>Swimming is great for people who suffer from chronic lung conditions such as asthma. Asthma sufferers, especially those with sports-induced asthma, can experience trouble because the loss of heat and moisture in the bronchial tubes causes the tubes to contract. This happens when the air is dry and/or cold outside. Swimming is the best exercise for asthma patients because the moisture from the water replaces the moisture expelled during vigorous breathing.
</p>
<a href="https://www.massgeneralbrigham.org/en/patient-care/services-and-specialties/asthma-center">Read more...</a>
</article>
<article>
<h3>Swimmers are More Confident</h3>
<p>Swimming is a confidence-building sport. Early evidence from an ongoing study out of Griffith University in Australia revealed that young swimmers are more confident than their non-swimming peers. This is also true for competitive and non-competitive adult swimmers. Swimming teaches confidence in the pool and in the open water, which translates to confidence on land as well.</p>
<a href="https://www.smh.com.au/national/does-swimming-make-you-smarter-20101102-17bgh.html">Read more...</a>
</article>
<article>
<h3>Swimming Teaches Team-Building Skills</h3>
<p>Swimmers on teams or in swim classes have better team-building skills. Swimmers learn to work together, to encourage each other, to communicate, and to become leaders. All of these skills translate into effective leaders in adulthood. Team-building skills encourage collaboration, goal orientation, inspiration, strategy development, and coordination, which all result in successful careers and professional relationships.</p>
<a href="https://www.swimmingworldmagazine.com/news/10-hidden-benefits-swimming/">Read more...</a>
</article>
</section>

</main>
<footer class="footer">
<hr>
<p>Author: Andrius Isin<br>
<a href="mailto:Isin.andrius@gmail.com">Isin.andrius@gmail.com</a></p>
</footer>
</body>
</html>