diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..d88f53ef --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "editor.formatOnType": true +} diff --git a/css/style.css b/css/style.css index 75e9841e..8a374037 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html index 67dfc7f5..342de44b 100644 --- a/index.html +++ b/index.html @@ -18,5 +18,159 @@ +
+

The Football Room

+ +
+
+
+

Football News

+

+ 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. +

+
+
+

League Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RankTeamsPlayedWinDrawLostPoints
1Liverpool1081125
2Manchester City1071222
3Arsenal970221
4Chelsea1062220
5Crystal Palace1053218
+
+
+

Transfer market

+

+ 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. +

+
+
+