diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..7a9dfa044 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5cb025cef..fc50b6942 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,171 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +nav { + padding-left: 10%; + padding-right: 10%; + padding-top: 1rem; + padding-bottom: 1rem; + background: rgba(196, 196, 196, 0.1); +} +nav img { + width: 2rem; + height: auto; +} +nav a { + float: right; + padding: 10px; + text-decoration: none; + color: #adb0b7; +} +nav a:hover { + color: #ea9376; +} + +.container { + background-image: url("/img/first-background.jpg"); + background-size: cover; + height: auto; + padding: 200px; +} +.container p { + color: white; + text-align: center; +} + +.container button { + display: flex; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; + color: white; + background-color: #e0633a; + border: none; +} + +#bigFont { + font-size: 55px; + margin-top: 20px; + margin-bottom: 20px; +} +#meetKarma { + color: #50525a; + text-decoration: solid; +} +#smallFont { + font-size: 30px; + margin-top: 20px; + margin-bottom: 20px; +} +.container2 { + display: flex; + flex-direction: row; + justify-content: space-around; +} +.container2 img { + width: 100%; + height: 100px; +} +.container2 p { + font-size: 30px; +} + +article p { + text-align: center; + font-size: 40px; + color: #50525a; +} + +footer { + padding-bottom: 40px; +} +footer hr { + width: 90%; +} +footer p { + text-align: center; +} + +.container3 { + display: flex; + flex-direction: row; + justify-content: center; +} + +#fb, +#tweeter, +#instagram { + border-radius: 100px; + border: 1px solid #adb0b7; + padding: 5px; + margin: 5px; + width: 20px; + height: 20px; +} +#copyright { + color: #adb0b7; +} +section { + display: flex; + flex-direction: row; + align-items: center; + background-color: rgba(224, 99, 58, 0.1); + margin-bottom: 50px; + margin-top: 100px; +} + +.description { + width: auto; + font-size: 42px; + text-align: center; +} + +.mainform { + display: flex; + flex-direction: row; + align-content: space-around; + padding-left: 10%; +} +.form h1 { + font-size: 50px; + color: #de6e49; +} +.mainform img { + width: 701px; +} +.flex { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-top: 5%; +} +.row { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-right: 20%; + margin-top: 5%; +} + +button { + background-color: #e0633a; + border-radius: 4px; + padding: 10px 20px; + border-style: none; + color: white; + margin-top: 10%; +} + +.radiob { + margin-bottom: 10%; +} +form p { + margin-top: 10%; +} +.form a { + text-decoration: none; +} diff --git a/img/sectionimg.png b/img/sectionimg.png new file mode 100644 index 000000000..3500b2e4c Binary files /dev/null and b/img/sectionimg.png differ diff --git a/img/store-image_by-andrew-neel-unsplash.jpeg b/img/store-image_by-andrew-neel-unsplash.jpeg new file mode 100644 index 000000000..86aa73607 Binary files /dev/null and b/img/store-image_by-andrew-neel-unsplash.jpeg differ diff --git a/index.html b/index.html index 3e742ef04..b61fcd8b2 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,76 @@ - - - + + + Karma - - - - - - - + + + + + + - - + +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+
+ icon devices + icon coffee + icon refill +
+
+

Internet for all devices

+

Boost your productivity

+

Pay as You Go

+
+
+
+ +
+

+ "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..ccf58a58e --- /dev/null +++ b/store.html @@ -0,0 +1,117 @@ + + + + + + Karma + + + + + + + + + + +
+
+

Order your Karma wifi device today!

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

Select a colour

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