diff --git a/css/style.css b/css/style.css deleted file mode 100755 index 5cb025cef..000000000 --- a/css/style.css +++ /dev/null @@ -1,19 +0,0 @@ - - /* 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; -} - -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ - - diff --git a/index.html b/index.html index 3e742ef04..cee711ff7 100755 --- a/index.html +++ b/index.html @@ -6,14 +6,104 @@ Karma - + - +
+ + + + + + +
+
+ +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+ +
+

Everyone needs a little Karma.

+
+
+ device +

Internet for all devices

+
+ +
+ coffee +

Boost your productivity

+
+ +
+ refill +

Pay as You go

+
+
+
+ +
+
+ girl drinking coffee + +
+
+

+ "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..62c422e92 --- /dev/null +++ b/store.css @@ -0,0 +1,254 @@ +*{ + margin-right: 10px; + margin-left: 10px; +} +body { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; + margin: 0; +} + +main { + height: 900px; + display: flex; + flex-direction: row-reverse; +} + +a { + color: #f96203; +} + +.header, +.footer { + padding: 0rem 1rem 0rem 1rem; + max-width: 1200px; + margin: 0 auto; +} + +/* Header */ +.header_logo { + height: 45px; + margin-top: 3px; +} + +.header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + width: 90%; + height: 4rem; + margin-bottom: 0rem; + padding-left: 96px; + padding-right: 0rem; + padding-top: 0rem; + background-color: #e0e0e0; +} + +/* Navigation */ +.navigation_list { + display: flex; + list-style: none; + width: 80%; + justify-content: space-between; + padding-left: 300px; +} + +.navigation_item { + padding: 0.5rem 0; +} + +.navigation_link1 { + color: #414040; + font-weight: 600; + text-decoration: none; +} + +.navigation_link { + color: #6e6d6d; + font-weight: 400; + text-decoration: none; +} + +.navigation_link:hover { + color: #f96203; +} + +/* Main */ +.content2 { + width: 100%; + padding-top: 0px; + display: flex; + flex-direction: row-reverse; +} + +.imgContent2 { + text-align: end; +} + +.content3 { + text-align: center; + height: 900px; +} + +.h1Content3 { + width: 543px; + font-size: 40px; + margin: 100px 60px 15px 60px; + color: #f96203; +} + +.imgStore { + height: 900px; +} + +/* Input*/ +.nameText { + display: flex; + justify-content: start; + padding-top: 0px; + font-size: 20px; + height: 50px; + color: #414040; +} + +.h5name1 { + margin-bottom: 0px; + padding-left: 100px; + height: 25px; +} + +.h5name2 { + margin-bottom: 0px; + padding-left: 115px; + height: 25px; +} + +.inputName { + width: 190px; + height: 30px; + margin-left: 0; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; +} + +.inputAddress { + width: 398px; + height: 30px; + margin-left: 0; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; +} + +.inputCity { + width: 290px; + height: 36px; + padding: 1px 2px; + margin-left: 10px; + margin-right: 12px; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; +} + +.inputPostCode { + width: 100px; + height: 30px; + padding: 1px 2px; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; +} + +/* Select*/ +.h5name3 { + margin-bottom: 0px; + padding-left: 258px; + height: 25px; +} + +.h4SelectColour { + margin-top: 50px; + margin-left: 133px; +} + +.inputRadio1 { + margin-top: 40px; + margin-left: -125px; + accent-color: #f96203; +} + +.inputRadio2 { + margin-top: 40px; + margin-left: 20px; + accent-color: #f96203; +} + +.radioText { + font-size: 18px; + height: 50px; + margin-top: 10px; +} + +.checkbox { + display: flex; + text-align: left; + margin-top: 20px; + margin-left: 110px; + margin-right: 95px; + font-size: 18px; + accent-color: #f96203; +} + +.divPlace { + text-align: left; +} + +/* Button */ +.btnPlace { + margin-top: 10px; + margin-left: 130px; + width: 180px; + height: 50px; + font-size: 17px; + color: #ffffff; + background: #f96203; + border-radius: 8px; + border: solid 2px #ffffff; +} + +/* Footer */ +.footer { + width: 1000px; + font-size: 25px; + text-align: center; + color: #232121; + border-top: solid 2px #eae6e6; +} + +.textFooter { + text-align: center; + font-size: 25px; + color: #acacac; + font-weight: 400; + margin-top: 20px; +} + +.logosFooter { + display: flex; + justify-content: center; +} + +.iconFooter { + height: 30px; + border: solid 2px #d4ceceaa; + border-radius: 30px; + padding: 5px; + margin-right: 10px; + margin-left: 10px; +} + +.circle { + border: solid 1px #acacac; + border-radius: 20px; + padding: 0 4px 0 4px; + font-size: 15px; +} diff --git a/store.html b/store.html new file mode 100644 index 000000000..49d306671 --- /dev/null +++ b/store.html @@ -0,0 +1,183 @@ + + + + + + Store-desktop + + + + + +
+ + + + + +
+ +
+
+
+ girl drinking coffee + +
+
+

+ Order your Karma wifi device today! +

+
+
First Name *
+
Last Name *
+
+
+ + +
+
+
Address 1 *
+
+
+ +
+
+
Address 2
+
+
+ +
+
+
City *
+
PostCode *
+
+
+ +
+ +
+

Select a colour

+
+

+ Karma Orange + Space Grey +

+
+

By placing your order you agree to Karma's Terms and Conditions. *

+
+
+ +
+ +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..031c17789 --- /dev/null +++ b/style.css @@ -0,0 +1,227 @@ + + /* 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; +} + +.h1Introducing{ + font-family: 'Roboto'; + font-weight: lighter; + font-size: 65px; + margin-top: 80px; + margin-bottom: 0px; +} + +.pIntroducing{ + font-size: 35px; + font-weight: lighter; + margin-top: 25px; + margin-bottom: 35px; +} + +.logoPosition{ + display: flex; + flex-direction: row; + justify-content: space-around; +} + + +.h2Logos{ + font-family: 'Roboto'; + font-weight: lighter; + font-size: 50px; + height: 50px; + margin-top: 160px; + margin-bottom: 80px; + text-align: center; +} + +.h3Content3{ + width: 80%; + margin-top: 80px; + font-size: 40px; + font-weight: lighter; + padding-right: 106.5px; + padding-left: 106.5px; +} +/** + * Add your custom styles below + * + * Remember: + * - Be organised, use comments and separate your styles into meaningful chunks + * for example: General styles, Navigation styles, Hero styles, Footer etc. + * + * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' + */ +.header, .footer { + padding: 0rem 1rem 0rem 1rem; + margin: 0 auto; +} + +/* Header */ +.header_logo{ + height: 45px; + margin-top: 20px; +} + +.header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + height: 3rem; + margin-bottom: 1rem; + margin-left: 5rem; + padding-top: 0rem; + } + + /* Navigation */ + .navigation_list { + display: flex; + list-style: none; + width: 600px; + justify-content: space-between; + padding-left: 450px; + margin-top: 35px; + } + + .navigation_item { + padding: 0.5rem 0; + } + + .navigation_link1 { + color: #414040; + font-weight: 600; + text-decoration: none; + } + + .navigation_link { + color: #6e6d6d; + font-weight: 400; + text-decoration: none; + } + + .navigation_link:hover{ + color: #f96203; + } + + /* Content*/ + .content1{ + background-image: url("/img/first-background.jpg"); + width: 100%; + height: 700px; + } + + .Introducing{ + color: white; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 170px; + } + + .content2{ + width: 100%; + height: 400px; + padding-top: 120px; + display: flex; + padding-bottom: 80px; + } + + .content3{ + text-align: center; + background-color: #ffeaf0; + width: 100%px; + height: 400px; + } + + .imgDrinking{ + width: 550px; + height: 400px; + } + + .quotation{ + color: #ff0000; + font-size: 50px; + } + +/* Button */ + .btnLearn{ + background-color: #e05e0d; + width: 120px; + height: 50px; + border-radius: 5px; + font-size: 17px; + margin-top: 20px; + } + + .btnGetKarma{ + background-color: #e05e0d; + width: 180px; + height: 50px; + color: white; + border: solid white 2px; + border-radius: 5px; + font-size: 17px; + margin-top: 20px; + } + +/* Icons */ +.iconLogos{ + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + align-items: center; + +} + +.icon{ + height: 150px; +} + +.iconText{ + font-family: 'Roboto'; + font-size: 35px; + font-weight: 400; +} + + /* Footer */ + .footer{ + width: 1000px; + font-size: 25px; + text-align: center; + color: #232121; + border-top: solid 2px #eae6e6; + } + + .textFooter{ + text-align: center; + font-size: 25px; + color: #acacac; + font-weight:400; + margin-top: 20px; + } + + .logosFooter{ + display: flex; + justify-content: center; + } + + .iconFooter{ + height: 30px; + border: solid 2px #cdc5c5aa; + border-radius: 30px; + padding: 5px; + margin-right: 10px; + margin-left: 10px; + } + + .circle{ + border: solid 1px #acacac; + border-radius: 20px; + padding: 0 4px 0 4px; + font-size: 15px; + } \ No newline at end of file