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

Glasgow Class 6 - Appolin Semegni Fotso - HTML/CSS - Week 1 #293

Open
AppolinFotso wants to merge 1 commit into
base: master
Choose a base branch
from
+244 −0
Open

Glasgow Class 6 - Appolin Semegni Fotso - HTML/CSS - Week 1 #293

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
5 changes: 5 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true
}
85 changes: 85 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,88 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

* {
box-sizing: border-box;
}

body {
background-color: gray;
color: white;
}

header {
display: flex;
flex-direction: column;
align-items: center;
background-color: brown;
color: white;
width: 100vw;
height: 15vh;
}

header nav {
display: flex;
flex-direction: row;
justify-content: center;

gap: 1rem;
}

header a {
display: block;
color: white;
text-decoration: none;
}

a:hover {
color: turquoise;
}

main h1 {
text-align: center;
}

article:first-child {
margin-top: 5rem;
margin-bottom: 4rem;
border-bottom: 1rem solid black;
}

#art-1 h1 {
text-decoration: underline solid black;
}

#art-2 {
background-color: white;
color: black;
padding-top: 2rem;
padding-bottom: 1rem;
}

#art-2 table {
text-align: center;
width: 80%;
margin: auto;
border: 3px solid;
border-collapse: collapse;
}

#art-2 th,
td {
border: 3px solid brown;
}

#art-3 {
margin-top: 5rem;
}

footer {
width: 100vw;
height: 8vh;
background-color: black;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 1rem;
}
154 changes: 154 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,159 @@
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<h1>The Football Room</h1>
<nav>
<a href="#art-1">News</a>
<a href="#art-2">Standings</a>
<a href="#art-3">Transfer</a>
</nav>
</header>
<main>
<article id="art-1" class="art1">
<h1>Football News</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
aliquid soluta itaque doloribus consequatur. Sequi nobis laborum
possimus, in repellat fugiat, numquam debitis dignissimos nihil
incidunt, blanditiis magnam! Maxime amet ducimus labore voluptates nam
non ipsa ab. Voluptatibus tempora eum, velit iusto fuga ab iure
repellendus optio tenetur ullam dicta commodi error autem, eos ratione
labore quasi veniam, pariatur illo laudantium asperiores facere sit?
Atque ad error eos iusto assumenda nisi temporibus itaque quod minus,
officia ex a quidem aperiam! Ratione ex neque aliquid cumque rem ad
nobis unde eaque ipsa pariatur! Deserunt necessitatibus dignissimos
sit cum? Explicabo possimus doloremque eveniet nostrum illum quia
provident. Quasi, deserunt repudiandae. Rem facilis id modi numquam
natus ratione, perspiciatis in mollitia alias. Tenetur excepturi,
praesentium incidunt maxime reprehenderit sit dolore non perferendis
officia tempora, quia totam, ab deserunt veritatis deleniti odio iure
ducimus saepe? Hic quo earum quod magni voluptates veritatis optio
explicabo nisi, alias nam maiores ex, temporibus facere modi error
saepe, nobis eos incidunt cupiditate iste voluptatibus. Pariatur vero
quidem repellendus labore! Obcaecati voluptatum doloremque rerum,
veritatis officia itaque fugit ipsam nobis necessitatibus, asperiores
ipsum saepe explicabo voluptas aliquam amet eos, quis iusto nihil fuga
facilis assumenda labore quia modi! Doloribus blanditiis veritatis
recusandae tempora magni explicabo quae aliquam eos voluptas delectus
itaque laboriosam mollitia autem sit a quibusdam, ipsum veniam hic!
Libero sint, debitis alias pariatur esse neque magnam suscipit,
similique iusto nobis quisquam non veritatis architecto, possimus
iste? Nostrum magnam voluptas non consequuntur facilis distinctio
error in aut obcaecati, facere totam enim? Assumenda maxime
repudiandae blanditiis ullam alias nulla veritatis incidunt, nostrum
tempora. Harum doloremque expedita iusto fuga, iure asperiores vitae
ad soluta corporis voluptatem blanditiis libero sequi, error dolor
tempore commodi suscipit praesentium maxime quaerat. Veritatis ad
commodi earum excepturi maxime alias deleniti a cumque officiis eos
delectus praesentium, sapiente fugit! Temporibus odio fuga aut quae
enim, numquam doloribus. Dolore quibusdam, odit ut facilis qui facere
a commodi vero. Unde, quibusdam? Nesciunt aliquam perferendis corrupti
minus ut recusandae non eaque sapiente? Ipsum libero aspernatur sint
tempora consequatur. Nam eaque a consectetur optio asperiores deleniti
nisi fugiat similique sunt. Reprehenderit autem odio sed, placeat in,
nihil dolor atque aperiam expedita obcaecati alias, maiores incidunt
facere hic nobis! Odit sunt, minima voluptatum repellat fugiat rerum
nisi nemo quod sequi quam, aliquam, tenetur placeat delectus fugit
suscipit aliquid ipsum laborum reprehenderit. Obcaecati minima quo
suscipit doloribus numquam illo modi, fuga voluptatem recusandae error
commodi soluta quos delectus rerum blanditiis quidem harum voluptates.
At inventore dolores esse! Ipsam voluptas nostrum distinctio inventore
facilis minus maxime eos error molestiae. Amet, iure atque. Nemo,
quidem placeat corporis voluptatibus itaque aut quae enim voluptas.
Cum voluptatem culpa harum corporis. Quas fugiat, sequi in sed
deleniti odio ducimus ex fuga magni voluptas? Consequuntur voluptate
eligendi, est nobis error eaque commodi optio, incidunt laudantium
tempore inventore vel, beatae omnis laborum sequi! Culpa et ea
necessitatibus totam iusto laudantium cumque eveniet in ut quas, natus
consequatur aliquid? Blanditiis numquam facere nobis enim veritatis
voluptatum sed sequi repellat odit.
</p>
</article>
<article id="art-2">
<h1>League Table</h1>
<table class="main-table">
<thead>
<tr>
<th>Rank</th>
<th>Teams</th>
<th>Played</th>
<th>Win</th>
<th>Draw</th>
<th>Lost</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Liverpool</td>
<td>10</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Manchester City</td>
<td>10</td>
<td>7</td>
<td>1</td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>Arsenal</td>
<td>9</td>
<td>7</td>
<td>0</td>
<td>2</td>
<td>21</td>
</tr>
<tr>
<td>4</td>
<td>Chelsea</td>
<td>10</td>
<td>6</td>
<td>2</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>Crystal Palace</td>
<td>10</td>
<td>5</td>
<td>3</td>
<td>2</td>
<td>18</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</article>
<article id="art-3">
<h1>Transfer market</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sapiente
minus fugit maiores asperiores quaerat molestias eos, repudiandae sed
necessitatibus ullam, unde qui. Ipsa, omnis. Placeat eveniet harum quo
fugiat voluptas cupiditate eum at, tempora illum. Inventore, veniam
dolore natus pariatur voluptatem repellat, autem, amet quis at iste
voluptas! Cupiditate reiciendis magnam inventore illum ipsam fuga quos
maxime aut adipisci, iure accusamus molestiae sed accusantium. Quae
ullam nesciunt adipisci officiis? Natus, dolores! Alias nemo vel animi
similique nam? Aut, doloremque a? Possimus ipsam velit maxime est
laborum voluptatum eos porro iusto molestiae asperiores! Culpa alias
veniam quas ratione. Ab, quidem.
</p>
</article>
</main>
<footer>
<p>&copy;copyright</p>
<p>Designed by Appolin</p>
</footer>
</body>
</html>