diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5cb025cef..a69a8a5df 100755 --- a/css/style.css +++ b/css/style.css @@ -10,10 +10,161 @@ body { * Add your custom styles below * * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks + * - Be organized, 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' */ +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + + +} + +nav{ + width: 100%; + overflow: auto; + background: white; + padding: 0px 100px; + +} + +.logo{ + width: 35px; + height: 35px; + margin-left: 80px; + margin-top: 30px; +} + +nav ul{ + float: right; + padding-bottom: 20px; +} + +nav ul li{ + display: inline-block; + list-style: none; + +} + +nav ul li a{ + color: gray; + text-decoration: none; + font-size: 22px; + padding: 0px 32px; + +} + +nav ul li a:hover{ + color: orangered; +} + +.meet-karma{ + color: black; +} + +.image img{ + width: 100%; + height: 0px auto; + +} + +.content{ + position: center; +} + +header{ +background-image: url(../img/first-background.jpg); +height: 100%; +width: 100%; +padding: 300px; +background-size: cover; +color: white; +text-align: center; +} + +header h1{ + font-size: 80px; + margin-top: 0px; + font-weight: 100; + +} + +header h2{ + font-size: 50px; + margin: 60px 20px; + font-weight: 100; + +} + +button{ + width: 200px; + padding: 15px 0; + text-align: center; + margin: 20px 10px; + border-radius: 15px; + background-color: orangered; + font-size: 28px; +} + +section{ + background-color: white; + margin: 100px 100px; +} + +.section-text{ + text-align: center; + font-size: 70px; + font-weight: 100; +} + + + +section{ + display: flex; + justify-content: space-around; +} + +.boxes{ + margin: 0 70px; + +} + + +footer{ + background-color:whitesmoke; + padding: 10% ; + text-align: center; + font-size: 40px; + +} + + + /* Social media */ + +.social-media{ + display:flex; + padding: 20px ; + border-radius: 100px; +} + +.twitter{ + background-color: white; +} + +.facebook { + background-color: white; +} + +.instagram { + background-color: white; +} + +.inc{ + font-size: 22px; + color: gray; +} diff --git a/img/checkmark.svg b/img/checkmark.svg new file mode 100644 index 000000000..17a3c14f3 --- /dev/null +++ b/img/checkmark.svg @@ -0,0 +1,3 @@ + + + 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/store-image_by-andrew-neel-unsplash.jpg b/img/store-image_by-andrew-neel-unsplash.jpg new file mode 100644 index 000000000..a8ad89099 Binary files /dev/null and b/img/store-image_by-andrew-neel-unsplash.jpg differ diff --git a/index.html b/index.html index 3e742ef04..373e27820 100755 --- a/index.html +++ b/index.html @@ -9,11 +9,103 @@ + + + + +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
+ +
+
+ + + +

Everyone Need a Little Karma

+
+ +
+ + + +

Internet for all devices

+
+
+ + + +

Boost your productivity

+
+
+ + + + +

Pay as You Go

+
+
- - - + - + \ No newline at end of file diff --git a/store/store.css b/store/store.css new file mode 100644 index 000000000..e421dd015 --- /dev/null +++ b/store/store.css @@ -0,0 +1,248 @@ +/* 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 organized, 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' + */ + +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + + +} + +nav { + width: 100%; + overflow: auto; + background: rgb(246, 246, 246); + padding: 50px 100px 0; + + margin-top: -60px; + +} + +.logo { + width: 35px; + height: 35px; + margin-left: 80px; + margin-top: 30px; +} + +nav ul { + float: right; + padding-bottom: 20px; +} + +nav ul li { + display: inline-block; + list-style: none; + +} + +nav ul li a { + color: gray; + text-decoration: none; + font-size: 22px; + padding: 0px 32px; + +} + +nav ul li a:hover { + color: orangered; +} + +.meet-karma { + color: black; +} + +.image img { + width: 100%; + height: 0px auto; + +} + +.content { + position: center; +} + + + + +header h1 { + font-size: 80px; + margin-top: 0px; + font-weight: 100; + +} + +header h2 { + font-size: 50px; + margin: 60px 20px; + font-weight: 100; + +} + +button { + width: 200px; + padding: 15px 0; + text-align: center; + margin: 20px 10px; + border-radius: 8px; + border: none; + background-color: orangered; + font-size: 22px; + color: white; +} + +section { + background-color: white; + margin: 100px 100px; +} + +.section-text { + text-align: center; + font-size: 70px; + font-weight: 100; +} + +.image1 { + width: 160px; + height: 160px; +} + +.image2 { + width: 160px; + height: 160px; +} + +.image3 { + width: 160px; + height: 160px; +} + +section { + display: flex; + justify-content: space-around; +} + +.boxes { + margin: 0 70px; + +} + +/* containter */ + +.tittle{ + font-size: 50px; + padding: 90px 20px; + margin: 0 70px; + color: orangered; + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 500; + + +} + + +.container { + display: flex; + justify-content: space-around; + + +} + +.storeimg{ +width: 900px; +height: auto; +} + +.content{ + + width: 900px; + height: 1350px; + padding: 30px; + justify-content: center; + align-content: center; +} + +input[type=text], select{ + width: 100%; + padding: 12px 20px; + margin: 28px 0; + font-size: 15px; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; +} + +a{ + color: orangered; +} + +fieldset{ + padding: 20px; +display: flex; +justify-content: space-around; +font-size: 20px; +} + + + + + + + + + + + + + + +/* footer */ +footer { + background-color: whitesmoke; + padding: 10%; + text-align: center; + font-size: 40px; + +} + + +/* Social media */ + +.social-media { + display: flex; + padding: 20px; + border-radius: 100px; +} + +.twitter { + background-color: white; +} + +.facebook { + background-color: white; +} + +.instagram { + background-color: white; +} + +.inc { + font-size: 22px; + color: gray; +} \ No newline at end of file diff --git a/store/store.html b/store/store.html new file mode 100644 index 000000000..09d1a30aa --- /dev/null +++ b/store/store.html @@ -0,0 +1,142 @@ + + + + + + + Karma + + + + + + + + + + + +
+ +
+

Order your Karma WiFi device today!

+ + + +
+ + +
+ + + + +
+ + +
+ + + + + +
+ + +
+ Select Colour + +
+ + +
+ +
+ + +
+
+
+
+
+
+ + +
+ + + +
+ +
+ store-image + +
+ +
+ + + + + + \ No newline at end of file