From ab5188697c063a0b047b99c47324a917cd281d05 Mon Sep 17 00:00:00 2001 From: Elias Vakkuri Date: Tue, 4 Jul 2023 09:57:21 +0300 Subject: [PATCH] Section 5 --- .vscode/settings.json | 3 + starter/04-CSS-Layouts/css-grid.html | 40 +++- starter/04-CSS-Layouts/index.html | 36 +-- starter/04-CSS-Layouts/style.css | 72 ++++-- starter/05-Design/font/Inter-Bold.otf | Bin 0 -> 271436 bytes starter/05-Design/font/Inter-BoldItalic.otf | Bin 0 -> 278016 bytes starter/05-Design/font/Inter-Italic.otf | Bin 0 -> 271400 bytes starter/05-Design/font/Inter-Medium.otf | Bin 0 -> 269692 bytes starter/05-Design/font/Inter-MediumItalic.otf | Bin 0 -> 278472 bytes starter/05-Design/font/Inter-Regular.otf | Bin 0 -> 258992 bytes starter/05-Design/font/Inter-V.ttf | Bin 0 -> 805396 bytes starter/05-Design/index.html | 210 ++++++++++++++++++ starter/05-Design/style.css | 120 ++++++++-- 13 files changed, 427 insertions(+), 54 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 starter/05-Design/font/Inter-Bold.otf create mode 100644 starter/05-Design/font/Inter-BoldItalic.otf create mode 100644 starter/05-Design/font/Inter-Italic.otf create mode 100644 starter/05-Design/font/Inter-Medium.otf create mode 100644 starter/05-Design/font/Inter-MediumItalic.otf create mode 100644 starter/05-Design/font/Inter-Regular.otf create mode 100644 starter/05-Design/font/Inter-V.ttf diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..ad92582bd --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..d1981784a 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -11,6 +11,9 @@ } .el--2 { background-color: orangered; + /* grid-column: 1 / span 4; */ + /* grid-column: 1 / -1; */ + grid-row: 2; } .el--3 { background-color: green; @@ -30,6 +33,8 @@ } .el--8 { background-color: crimson; + grid-column: 2 / 3; + grid-row: 1 / 3; } .container--1 { @@ -40,6 +45,18 @@ margin: 40px; /* CSS GRID */ + display: grid; + /* grid-template-columns: 3fr 1fr 1fr 1fr; */ + /* grid-template-rows: 1fr 1fr; */ + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + /* height: 500px; */ + + column-gap: 10px; + row-gap: 40px; + + /* TEMP */ + display: none; } .container--2 { @@ -47,12 +64,29 @@ font-family: sans-serif; background-color: black; font-size: 40px; - margin: 100px; + margin: 40px; - width: 1000px; + width: 700px; height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + gap: 20px; + + /* Aligning tracks inside container: distribute empty space*/ + justify-content: center; + align-content: center; + + /* Aligning items inside cells: move items around inside cells */ + align-items: center; + justify-items: center; + } + + .el--3 { + align-self: end; + justify-self: end; } @@ -64,7 +98,7 @@
(4) are
(5) amazing
(6) languages
-
(7) to
+
(8) learn
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..eca207321 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -34,16 +34,18 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

- Headshot of Laura Jones +
+ Headshot of Laura Jones -

- Posted by Laura Jones on Monday, June 21st 2027 -

+

+ Posted by Laura Jones on Monday, June 21st 2027 +

+

Why should you learn HTML?

Related posts