diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..949483c4a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "html.autoClosingTags": false +} diff --git a/css/repeat.css b/css/repeat.css new file mode 100644 index 000000000..e69de29bb diff --git a/css/style.css b/css/style.css index 5cb025cef..9bfffe14c 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,183 @@ +* { + padding: 0; + margin: 0; + border: 0; + outline: 0; + box-sizing: border-box; +} +body { + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; +} +h1 { + font-size: 4vw; +} +h2 { + font-size: 2.5vw; +} +h3 { + font-size: 1.5vw; +} - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +.header { + width: 100%; + padding: 1em; +} +.nav { + width: 100%; + display: flex; + justify-content: space-around; + font-size: 1.5vw; +} +.ul_div { + width: 70%; + align-self: center; +} +.ul_div ul { + display: flex; + justify-content: space-evenly; +} +.ul_div ul li { + list-style: none; +} +.nav_link { + color: rgb(41, 39, 39); + text-decoration: none; +} +.nav_link:hover { + color: orangered !important; +} +.logo img { + width: 5vw; +} +/* =============================Hero======================== */ +.hero { + width: 100%; + height: 80vh; + background: url("../img/first-background.jpg"); + background-size: cover; + background-position: center; +} -body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; +.overlay_content { + padding-top: 10%; + width: 40%; + margin: 0 auto; + text-align: center; + color: white; + + text-shadow: 0 0 20px black; +} +.overlay_content h3 { + color: rgb(218, 207, 207); +} +.overlay_btn { + padding: 1em; + background: rgb(255, 102, 0); + border-radius: 5px; + margin-top: 5%; + font-size: 1.5vw; } -/** - * 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' - */ +/* =================Custom
==================== */ +hr { + width: 80%; + border: 1px solid gray; + margin: 3% auto; +} +/* ============================Features Styles====================== */ +.features { + width: 100%; + text-align: center; + margin-top: 10%; +} +.features h1 { + font-weight: 100; +} +.feature_item img { + width: 10vw; + margin-bottom: 20px; +} +.features_items { + width: 100%; + display: flex; + justify-content: space-evenly; + padding: 1em; +} +/* =====================================Request Styles============================ */ +.request { + width: 100%; + display: flex; + margin-top: 8%; +} +.request_text_item { + width: -webkit-fill-available; + padding: 3em; + text-align: center; +} +.request_text_item h1 { + font-size: 3vw; +} +.request_text_item button { + padding: 1em; + font-size: 1.5em; + border-radius: 10px; + background: #e0633a; + color: white; +} +.request_text_item button:hover { + background: #ff5319; +} +.request_text_item { + background: rgba(224, 99, 58, 0.1); +} +/* ========================================Footer Styles======================================= */ +.footer { + width: 100%; + text-align: center; + padding: 1em; +} +.icons_link { + padding: 1em; + border: 1px solid gray; + border-radius: 50%; + display: inline-block; +} +.icons_link img { + width: 30px; +} +.social_icons_div { + margin: 2%; +} +footer h4 { + color: gray; +} +/* ===================================store page=============================== */ +.container { + display: flex; + flex-direction: column; + padding-right: 0px; +} +.col-1 { + border: 1px solid rgba(153, 150, 150, 0.8); + padding: 0px; + font-size: 30px; + text-align: left; +} +.input { + border: 1px solid gray; +} +.fieldset { + border: 0; +} +.col-1 { + display: flex; + flex-direction: column; + border: 0; +} +.form-row { + display: flex; + flex-direction: row; +} diff --git a/img/homepage-feature.jpg b/img/homepage-feature.jpg new file mode 100644 index 000000000..2b02dc6d0 Binary files /dev/null and b/img/homepage-feature.jpg 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..657091cc6 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..8d4517831 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,104 @@ - - - - Karma - - - - - - + + + + Karma | HomePage + + + + + - - - + + +
+ +
+ +
+
+ +
+

Introducing to Karma

+

Bring WiFi with you, everywhere you go.

+
+ +
+ +
+
+

Everyone needs a little bit Karma

+
+
+
+ device +

Internet for all devices

+
+
+ coffee +

Boost your productivity

+
- +
+ refill +

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..2970bec8c --- /dev/null +++ b/store.html @@ -0,0 +1,117 @@ + + + + + + Karma | HomePage + + + + + + + + +
+ +
+
+
+
+ +
+ +
+ Order your Karma wifi device today! +
+
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+
+ + +
+ +
+
+

Select a color:*

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