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/.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..39f0e9651 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,10 @@ - - /* 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 */ +:root { + --primary-color: rgb(226, 124, 0); +} body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; } /** @@ -16,4 +17,289 @@ 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; + background-color: rgba(196, 196, 196, 10%); +} +header img { + height: 3rem; +} +header nav ul li:first-child { + font-weight: 500; +} +nav ul { + display: flex; + gap: 2.5rem; + list-style-type: none; + color: #888; +} + +a { + color: #888; + text-decoration: none; +} +a:hover { + color: darkorange; + cursor: pointer; +} +main { + /* height: calc(100vh - 80px); */ + font-weight: 300; +} +.fxdc-jcc-aic { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +button { + background-color: var(--primary-color); + border: transparent; + border-radius: 0.5rem; + color: #fff; + font-weight: 400; + margin-top: 2rem; + padding: 1rem 2rem; +} + +.section1 { + background-image: url("../img/first-background.jpg"); + background-size: cover; + color: #fff; + width: 100%; + height: 735px; +} +.title { + font-size: 4rem; +} +.subtitle { + font-size: 2rem; +} + +.section2, +.iconContainer { + padding: 4rem 0; +} +.s2Container { + display: flex; + justify-content: center; + align-items: center; + gap: 3rem; +} +.iconContainer img { + height: 10rem; +} +footer { + border-top: 1px solid #eee; + text-align: center; + margin: 4rem 0; + padding: 0.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; + 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; +} + +/* store.html */ +.storeContainer { + display: flex; +} +.storeContainer img { + width: 50%; +} +.storeTitle { + font-weight: 400; + color: var(--primary-color); +} +.leftForm { + width: 50%; +} + +form { + display: flex; + flex-direction: column; + align-items: center; + width: 75%; +} + +label { + font-size: 1rem; + color: #434242; + margin-bottom: 0.5rem; + font-weight: 400; +} +input[type="text"] { + margin-bottom: 1rem; + height: 2rem; + border: 2px solid #434242; + border-radius: 4px; +} +.fillForm { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-areas: + "fn fn fn fn ln ln ln ln" + "ad ad ad ad ad ad ad ad" + "a2 a2 a2 a2 a2 a2 a2 a2" + "cy cy cy cy pc pc pc pc"; + column-gap: 1rem; +} +.firstName { + grid-area: fn; +} +.lastName { + grid-area: ln; +} +.address { + grid-area: ad; +} +.address2 { + grid-area: a2; +} +.city { + grid-area: cy; + grid-column: 1/6; +} +.postCode { + grid-area: pc; + grid-column: 6/-1; +} +.fxdc { + display: flex; + flex-direction: column; +} +select { + margin-bottom: 1rem; + height: 2.4rem; + border: 2px solid #434242; + background-color: #fff; + border-radius: 4px; +} +select:required:invalid { + color: gray; + font-style: italic; +} +option { + color: black; + font-style: normal; +} +.otherBox { + width: 100%; + margin-bottom: 2rem; + font-weight: 400; +} +label[for="selectOne"] { + margin-right: 1rem; +} +.sameLine { + white-space: nowrap; + margin-bottom: 3rem; +} +label[for="agree"] { + font-size: 0.8rem; +} +label[for="agree"] a { + color: var(--primary-color); + text-decoration: underline; +} +/*----- custom radio -----*/ +.sameLine label { + display: inline-block; + cursor: pointer; + position: relative; + padding-left: 25px; + margin-right: 25px; +} +input[type="radio"] { + display: none; +} +.sameLine label::before { + content: ""; + display: inline-block; + width: 12px; + height: 12px; + + position: absolute; + left: 0; + bottom: 3px; + border: 1px solid #666; + border-radius: 10px; +} +input[type="radio"]:checked + label::before { + content: "\2B24"; + color: var(--primary-color); + font-size: 8px; + text-align: center; + line-height: 11px; +} +/*----- custom checkbox -----*/ +label[for="agree"] { + display: inline-block; + cursor: pointer; + position: relative; + padding-left: 20px; +} +input[type="checkbox"] { + display: none; +} +label[for="agree"]::before { + content: ""; + display: inline-block; + width: 15px; + height: 15px; + position: absolute; + left: 0; + bottom: 0; + border: 1px solid #666; + border-radius: 3px; +} +input[type="checkbox"]:checked + label[for="agree"]::before { + background-size: cover; + background: no-repeat center url("../level-2/checkmark.svg"); +} diff --git a/index.html b/index.html index 3e742ef04..2153d7aca 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,87 @@ - - - + + + 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

+
+
+
+
+ homepage-feature +
+

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

+ +
+
+
+ - - + diff --git a/store.html b/store.html new file mode 100644 index 000000000..b424f8b93 --- /dev/null +++ b/store.html @@ -0,0 +1,137 @@ + + + + + + Karma + + + + + + + +
+ karma-logo + +
+
+
+
+

Order your Karma wifi
device today!

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Select a colour

+
+ + + + +
+ + + +
+ + +
+
+ +
+
+ + + + + + +