diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..68b75e5b0 Binary files /dev/null and b/.DS_Store differ diff --git a/css/store-style.css b/css/store-style.css new file mode 100644 index 000000000..a1867c485 --- /dev/null +++ b/css/store-style.css @@ -0,0 +1,106 @@ +:root { + /* color variable */ + --orange: #e0633a; +} + +* h1 { + font-size: 40px; + color: var(--orange); + margin: 40px 20px; +} + +#form { + display: flex; + flex-direction: row; +} + +#form-img { + width: 50%; +} + +#names, +form>div:nth-child(3) { + display: flex; +} + +/* set the form divs display to flex and direction to column */ +#names>div:nth-child(1), +form>div:nth-child(2), +#names>div:nth-child(2), +#address-detail>div:nth-child(2) { + display: flex; + flex-direction: column; +} + +/* set postcode div width */ +#address-detail>div:nth-child(2) { + width: 30%; +} + +/* set style for city drop down list */ +#address-detail>div:nth-child(1) { + width: 90%; + display: flex; + flex-direction: column; +} + +label, +input[type=checkbox], +input[type=radio] { + margin: 20px; + text-align: justify; +} + + +#terms-condition { + padding: 0px; + color: var(--orange); + text-decoration: underline; +} + +#submit { + margin: 40px 20px; +} + +input[type=text], +select { + + font-size: 20px; + padding: 5px; + color: var(--orange); + margin: 0 20px; + border: 1.5px solid rgb(156, 155, 155); + border-radius: 4px; +} + +/* set the size for checkbox and radio */ +input[type=checkbox], +input[type=radio] { + transform: scale(1.5); +} + + +fieldset { + border: none; + margin: 40px 0; + padding: 0; +} + +button:hover { + background-color: rgb(255, 85, 0); + color: white; +} + +legend { + margin: 20px; +} + +#terms-container { + display: flex; +} + +section>div:nth-child(1) { + width: 50%; + padding: 7%; + +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5cb025cef..9075b5bea 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,13 @@ - - /* 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 { + --orange: #e0633a; +} body { - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; + font-weight: 200; + margin: 0; } /** @@ -15,5 +19,192 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/*Header section*/ +header { + margin: 0px; + display: flex; +} + +#logo-space { + width: 300px; + height: 100px; +} + +li { + list-style: none; + +} +ul { + display: flex; +} + + +#site-logo { + width: 300px; + height: 70px; + margin: 10px 0px; +} + +#navLink { + width: 100%; + height: 100px; + padding-right: 20px; + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +nav { + margin: 2.2rem; +} + +a { + padding: 0px 30px; + text-decoration: none; + font-style: normal; + color: gray; +} + + +a:hover { + color: var(--orange); +} + +#SiteName { + color: black; +} + +/*Introduction section*/ +.section-introduction { + width: 100%; + height: 750px; + background-image: url("../img/first-background.jpg"); + display: flex; + justify-content: center; + align-items: center; +} + +.introduction { + width: 800px; + height: 400px; + text-align: center; + color: white; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.introduction-title { + font-size: 50px; + margin: 0px; +} + +.introduction-tagline { + font-size: 30px; + margin: 25px; +} + +button { + margin: 20px; + background-color: var(--orange); + border: none; + color: white; + border-radius: 5px; + padding: 20px 40px; + font-size: 20px; +} + +button:hover { + background-color: white; + color: var(--orange); +} + +/*Services section*/ +.service-container { + display: flex; + justify-content: space-around; + align-items: center; + +} + +.section-services { + + text-align: center; + padding-top: 90px; +} + +.service-container>figure { + width: 150px; + padding: 50px; +} + +.service-container>figure>figcaption { + white-space: nowrap; + margin: 30px 0; +} + +/* #refill +{ + width: 150px; + height: 150px; +} */ +.services-title { + font-size: 50px; +} + +/*--------------get-start section---------------*/ +.get-start { + width: 100%; + display: flex; +} + +.get-start-portion { + width: 60%; + background-color: #fcefeb; + font-size: 40px; + padding: 0 10%; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.get-start-portion>p>span { + font-family: Arial, Helvetica, sans-serif; + color: var(--orange); +} + + + +/*--------------End of section---------------*/ +/*Footer section*/ +footer { + text-align: center; + display: flex; + flex-direction: column; + align-items: center; +} + +.footer-copyright { + margin-bottom: 100px; +} + +.footer-items>a>img { + width: 30px; + height: 30px; + margin: 10px; + border-collapse: separate; + border-spacing: 15px; + border-radius: 50%; + box-shadow: 0 0 2px #888; + padding: 10px; +} +#line { + width: 80%; + height: 10px; + border-bottom: 1px solid black; +} \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 000000000..3cc3f499b Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/homepage-feature.png b/img/homepage-feature.png new file mode 100644 index 000000000..3500b2e4c Binary files /dev/null and b/img/homepage-feature.png differ diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg index 56e207086..1028e03bd 100644 --- a/img/instagram-icon.svg +++ b/img/instagram-icon.svg @@ -1,18 +1,15 @@ - + + - - - + + + - - - + + + - - + + \ No newline at end of file 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..c4e04c7c0 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,13 +8,93 @@ - + + Welcome to Karma + + +
+
+ +
+ +
+ +
+ +
+
+
+

Introducing to Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+ +
+ Everyone needs a little Karma. +
+
+ Devices +
Internet for all devices
+
+
+ Coffee +
Boost your productivity
+
+
+ Refill +
Pay as you go
+
+
+
+
+
+ homepage feature + +
+
+

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

+ +
+
+
+
+ + - + + \ No newline at end of file diff --git a/store.html b/store.html new file mode 100644 index 000000000..22e2e1977 --- /dev/null +++ b/store.html @@ -0,0 +1,118 @@ + + + + + + + + + + + Place your Order + + + +
+
+ +
+ +
+ +
+
+ +
+
+ +

Order your Karma wifi device today!

+
+
+
+ + +
+
+ + +
+
+
+ + + + +
+
+
+ + +
+
+ + +
+
+
+
+ Select a color + + + + +
+
+
+
+ +
+ +
+
+ +
+
+
+ + Image for store page +
+
+
+ + + + + + \ No newline at end of file