From 94d93498bad641b0ffce163f8446005f1c3dd5f1 Mon Sep 17 00:00:00 2001 From: hkuhku609 <107769663+hkuhku609@users.noreply.github.com> Date: Thu, 27 Oct 2022 17:14:03 +0100 Subject: [PATCH 1/8] finished --- .vscode/settings.json | 3 ++ css/style.css | 104 ++++++++++++++++++++++++++++++++++++++++-- index.html | 82 ++++++++++++++++++++++++++++----- 3 files changed, 174 insertions(+), 15 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/style.css b/css/style.css index 5cb025cef..ca2404e18 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,8 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; } /** @@ -16,4 +15,101 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +header { + height: 80px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2rem; +} +header img { + height: 3rem; +} +nav ul { + display: flex; + gap: 2.5rem; + list-style-type: none; +} +nav li { + color: #888; +} +nav li:hover { + color: darkorange; + cursor: pointer; +} +nav li:first-child { + font-weight: 500; + color: #555; +} + +main { + height: calc(100vh - 80px); +} +.s1Container { + padding-top: 10rem; + text-align: center; +} + +.section1 { + background-image: url("../img/first-background.jpg"); + background-size: cover; + color: #fff; + font-weight: lighter; + height: 735px; +} +.section1 button { + background-color: rgb(226, 124, 0); + border: transparent; + font-weight: 500; + border-radius: 5px; + padding: 1rem; +} +.title { + font-size: 4rem; +} +.subtitle { + font-size: 2rem; +} +.section2, +.iconContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.s2Container { + display: flex; + justify-content: center; + align-items: center; + gap: 3rem; +} +.iconContainer img { + height: 10rem; +} +.footer { + border-top: 2px solid #555; + text-align: center; + padding: 5rem 0; +} +.footer .icons { + display: flex; + justify-content: center; + align-items: center; +} +.footer .icon { + border: 1px solid #ccc; + border-radius: 50%; + padding: 1rem; + margin: 1rem; +} +.footer img { + height: 1.5rem; +} +.join { + font-size: 1.5rem; +} +.copyright { + font-size: 1.5rem; + color: #aaa; +} diff --git a/index.html b/index.html index 3e742ef04..1369ddb38 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,79 @@ - - - + + + Karma - - - - - - + + + + + + +
+ karma-logo + +
+
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+
+

Everyone needs a little Karma.

+
+
+ icon-devices +

Internet for all devices

+
+
+ icon-coffee +

Boost your productivity

+
+
+ icon-refill +

Pay as You Go

+
+
+
+ +
- - + From 9ccb3a2dd53b6c7a10f1d302176d84060ad6b299 Mon Sep 17 00:00:00 2001 From: hkuhku609 <107769663+hkuhku609@users.noreply.github.com> Date: Sun, 30 Oct 2022 02:09:30 +0000 Subject: [PATCH 2/8] adding a new block(section3) --- .github/pull_request_template.md | 36 ------------------------- .github/workflows/close.yml | 17 ------------ css/style.css | 46 ++++++++++++++++++++++++++------ index.html | 14 ++++++++-- 4 files changed, 50 insertions(+), 63 deletions(-) delete mode 100644 .github/pull_request_template.md delete mode 100644 .github/workflows/close.yml diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index 46c150e15..000000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,36 +0,0 @@ - - -**Volunteers: Are you marking this coursework?** _You can find a guide on how to mark this coursework in `HOW_TO_MARK.md` in the root of this repository_ - -# Your Details - -- Your Name: -- Your City: -- Your Slack Name: - -# Homework Details - -- Module: -- Week: - -# Notes - -- What did you find easy? - -- What did you find hard? - -- What do you still not understand? - -- Any other notes? diff --git a/.github/workflows/close.yml b/.github/workflows/close.yml deleted file mode 100644 index 137dc57e9..000000000 --- a/.github/workflows/close.yml +++ /dev/null @@ -1,17 +0,0 @@ -name: "Close stale issues and PRs" -on: - workflow_dispatch: - schedule: - - cron: "30 1 * * *" - -jobs: - stale: - runs-on: ubuntu-latest - steps: - - uses: actions/stale@v3 - with: - stale-pr-message: "Your coursework submission has been closed because nobody has interacted with it in six weeks. You are welcome to re-open it to get more feedback." - days-before-stale: 42 - days-before-close: 0 - days-before-issue-stale: -1 - days-before-issue-close: -1 diff --git a/css/style.css b/css/style.css index ca2404e18..b37bf8db4 100755 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,7 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +:root { + --primary-color: rgb(226, 124, 0); +} body { font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; @@ -54,18 +56,21 @@ main { background-image: url("../img/first-background.jpg"); background-size: cover; color: #fff; - font-weight: lighter; + font-weight: 300; + width: 100%; height: 735px; } -.section1 button { - background-color: rgb(226, 124, 0); +button { + background-color: var(--primary-color); border: transparent; - font-weight: 500; - border-radius: 5px; + border-radius: 0.5rem; padding: 1rem; + color: #fff; + font-weight: 400; } .title { font-size: 4rem; + font-weight: 300; } .subtitle { font-size: 2rem; @@ -88,9 +93,10 @@ main { height: 10rem; } .footer { - border-top: 2px solid #555; + border-top: 1px solid #eee; text-align: center; - padding: 5rem 0; + margin: 4rem 0; + padding: 0.5rem 0; } .footer .icons { display: flex; @@ -112,4 +118,28 @@ main { .copyright { font-size: 1.5rem; color: #aaa; + font-weight: 300; +} +.section3 { + display: flex; +} +.s3Content button { + font-size: 1.5rem; + padding: 1.5rem 2rem; +} +.section3 h1 { + font-weight: 400; + font-size: 3rem; + font-style: italic; + color: #434242; +} +.s3Content { + background-color: rgba(224, 99, 58, 0.1); + width: 100%; + text-align: center; +} +/* Quotation mark */ +.qm { + color: var(--primary-color); + font-size: 4rem; } diff --git a/index.html b/index.html index 1369ddb38..89400041d 100755 --- a/index.html +++ b/index.html @@ -7,10 +7,10 @@ content="width=device-width, initial-scale=1, shrink-to-fit=no" /> Karma + @@ -55,6 +55,16 @@ +
+ homepage-feature +
+

+ “Wherever I am, I just don't
worry + about my connection
anymore!” +

+ +
+