diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..e84f36573 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..10393b3e4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["colour", "guildford", "neel", "organised", "smicon"] +} diff --git a/css/style.css b/css/style.css index 5cb025cef..fbaea6ba2 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,149 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/*HEADER STYLES*/ + +#karma-logo { + width: 25px; + margin-left: 50px; + margin-top: 50px; + margin-bottom: 20px; +} + +nav { + float: right; + margin-top: 50px; + margin-right: 50px; +} + +nav a { + margin-right: 40px; + text-decoration: none; + color: gray; +} + +#karma-meet { + font-weight: bold; +} +nav a:hover { + color: #c05326; +} + +/*CONTENT STYLES*/ +h1 { + text-align: center; + color: white; + font-size: 75px; + font-weight: lighter; +} + +h2 { + text-align: center; + color: white; + font-weight: lighter; + font-size: 40px; + margin-top: 0; +} + +button { + align-content: center; + color: white; + background-color: #c05326; + border: none; + border-radius: 8px; + padding: 15px 20px; + /*margin-left: 650px;*/ + margin-top: 50px; +} + +#first-page { + background-image: url("../img/first-background.jpg"); + background-repeat: no-repeat; + background-size: 100%; + padding-bottom: 130px; + padding-top: 200px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.need-karma { + color: black; + font-size: 55px; +} + +.icons { + width: 100px; +} + +#icon-info { + display: flex; + justify-content: space-evenly; + align-items: center; + text-align: center; + margin-top: 50px; +} + +#next-page { + margin-top: 100px; +} + +#third-page { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + margin-left: 0; + margin-top: 100px; +} + +#quote-button { + background-color: #e0633a1a; + height: 440px; + align-items: center; + justify-content: center; + width: 840px; + text-align: center; +} + +.quote { + font-size: 42px; + text-align: center; + font-style: italic; + padding-top: 50px; + width: 550px; + padding-left: 140px; + margin-bottom: 0; +} +span { + color: #e0633a; +} + +button a { + text-decoration: none; + color: white; +} + +/*STYLING FOR FOOTER*/ + +footer { + text-align: center; + margin: 50px 70px 0 70px; + border-top: 1px solid #ebebeb; +} + +.smicon { + width: 20px; + border: 1px solid #ebebeb; + padding: 10px; + border-radius: 20px; + margin-right: 5px; +} + +#copyright { + color: #cccccc; + text-align: center; + margin-bottom: 20px; +} diff --git a/index.html b/index.html index 3e742ef04..20eccc8ff 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,96 @@ - - - + + + Karma - - - - - - - + + + + + + - +
+ + +
+ +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+
+
+ Picture showing a monitor, phone and tablet +

Internet for all devices

+
+
+ Picture showing a steamy teacup +

Boost your productivity

+
+
+ Picture showing gas pump +

Pay as You Go

+
+
+
+
+ woman on a tablet smiling with a coffee cup on the table +
+

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

+ +
+
+
+ + diff --git a/store.css b/store.css new file mode 100644 index 000000000..d6fa541bc --- /dev/null +++ b/store.css @@ -0,0 +1,197 @@ +/*STYLING FOR HEADER*/ + +#karma-logo { + width: 25px; + margin: 50px 0 20px 50px; +} + +nav { + float: right; + margin-top: 50px; + margin-right: 50px; +} + +nav a { + margin-right: 40px; + text-decoration: none; + color: gray; +} + +#karma-meet { + font-weight: bold; +} +a:hover { + color: #c05326; +} + +/*STYLING FOR BODY*/ + +body { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; +} + +/*main { + background-image: url(level-2/store-image_by-andrew-neel-unsplash.jpg); + position: absolute; +}*/ + +h1 { + color: #de6e49; + font-size: 50px; + font-weight: lighter; + width: 500px; +} + +.form { + display: flex; + flex-direction: column; + width: 100%; +} + +.image { + width: 50%; +} + +.image img { + width: 100%; + height: 100%; +} + +section { + display: flex; + justify-content: space-between; + border-top: 1px solid #ebebeb; + width: 100%; + gap: 50px; +} + +.title-form { + flex-direction: column; + margin-left: 50px; + margin-top: 70px; + width: 50%; + gap: 50px; +} + +label, +fieldset { + margin-top: 15px; +} + +fieldset { + border: none; + accent-color: #de6e49; + padding: 0; + margin: 20px 0 0 0; +} + +input { + margin-top: 5px; + padding: 10px; +} + +.first-input, +.last-input { + width: 50%; +} + +.name-wrapper { + display: flex; + gap: 50px; +} + +.name { + width: 100%; +} + +.city-wrapper { + width: 70%; + margin-top: 15px; +} + +#city { + width: 100%; + padding: 10px; + margin-top: 5px; +} + +.postcode-wrapper { + width: 30%; + margin-top: 15px; +} + +.box-terms { + display: inline; + margin-top: 30px; + accent-color: #de6e49; +} + +.box-terms a { + color: #de6e49; + margin-left: 3px; +} + +/* .box-terms label { + display: flex; + flex-direction: row; +} + +input[type="checkbox"] { + appearance: none; + background-color: white; + margin: 0; +} */ + +.tick-wrapper { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid black; + display: flex; + justify-content: center; + align-content: center; +} + +.tick-wrapper svg { + display: none; +} + +.box-terms input[type="checkbox"]:checked + .tick-wrapper .icon { + display: inline; +} + +button { + align-content: center; + color: white; + background-color: #e0633a; + border: none; + border-radius: 8px; + padding: 15px 20px; + /*margin-left: 650px;*/ + margin-top: 50px; + font-size: 20px; + width: fit-content; +} + +/*STYLING FOR FOOTER*/ + +footer { + text-align: center; + margin: 0 70px 0 70px; + border-top: 1px solid #ebebeb; +} + +.smicon { + width: 20px; + border: 1px solid #ebebeb; + padding: 10px; + border-radius: 20px; + margin-right: 5px; +} + +#copyright { + color: #cccccc; + text-align: center; + margin-bottom: 20px; +} diff --git a/store.html b/store.html new file mode 100644 index 000000000..a1cd5bc74 --- /dev/null +++ b/store.html @@ -0,0 +1,164 @@ + + + + + + + Karma Store + + + + + +
+ + +
+ +
+
+
+

Order your Karma wifi device today

+
+
+
+ + +
+ +
+ + +
+
+ + + + + + + +
+
+ + +
+ +
+ + +
+
+ +
+ Select a colour + + + + + + +
+ +
+ +
+ + + +
+ +
+ + +
+
+
+ girl working at desk +
+
+
+ + +