Introducing Karma
+Bring WiFi with you, everywhere you go.
+ +Everyone needs a little Karma
+Internet for all devices
+Boost your productivity
+Pay as You Go
+
+ diff --git a/css/storeStyle.css b/css/storeStyle.css new file mode 100644 index 000000000..be6f58a2f --- /dev/null +++ b/css/storeStyle.css @@ -0,0 +1,224 @@ +body { + font-family: 'Roboto', sans-serif; + margin: 0; + background-color: #fff; + text-align: center; + -webkit-font-smoothing: antialiased; +} + +a { + text-decoration: none; + color: inherit; +} + +/* ---------- Layout Containers ---------- */ +.container { + max-width: 100%; + margin: 0 auto; + padding: 0; +} + +/* ---------- Header ---------- */ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2rem 2rem; + background: #f9f9f9; + border-bottom: 1px solid #eee; +} + +.logo img { + height: 40px; +} + +.navigation { + list-style: none; + display: flex; + gap: 1.5rem; + margin: 0; + padding: 0; +} + +.nav-item { + font-weight: 400; +} + +.nav-current { + color: #f15a29; +} + +.nav-link:hover { + color: #f15a29; + transition: color 0.3s ease; +} + +/* ---------- Main Layout ---------- */ +.main { + display: flex; + align-items: flex-start; + gap: 2.5rem; + box-sizing: border-box; +} + +.left { + flex: 1 1 50%; + max-width: 50%; + box-sizing: border-box; + text-align: left; + padding: 3rem; +} + +.right { + flex: 0 0 50%; + max-width: 50%; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + padding: 0; +} + +.right img { + width: 100%; + height: 100vh; + object-fit: cover; + display: block; + margin: 0; + padding: 0; +} + +/* ---------- Heading ---------- */ +.left h1 { + padding: 0 0 2rem 0; + font-size: 1.9rem; + color: #f15a29; +} + +/* ---------- Order Form ---------- */ +.order-form { + width: 100%; + max-width: 620px; +} + +.order-form .row { + margin-bottom: 1rem; + display: block; +} + +.field { + display: flex; + flex-direction: column; +} + +/* ---- Name Row ---- */ +.name-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-bottom: 1rem; +} + +/* ---- Address Rows ---- */ +.field.full { + width: 100%; + margin-bottom: 1rem; +} + +/* ---- City + Postcode ---- */ +.city-post { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 1rem; + margin-bottom: 1rem; +} + +/* ---- Inputs & Labels ---- */ +.order-form label { + font-weight: 500; + margin-bottom: 0.4rem; + font-size: 0.95rem; + color: #777171; +} + +.order-form input[type="text"], +.order-form select { + padding: 0.6rem 0.75rem; + border: 1px solid #d0d0d0; + border-radius: 6px; + font-size: 1rem; + box-sizing: border-box; + width: 100%; +} + +/* ---- Radio Buttons ---- */ +.radios .group-label { + display: block; + font-weight: 500; + margin-bottom: 0.4rem; +} + +.radio-row { + margin: 2rem; + display: flex; + gap: 1.25rem; + align-items: center; +} + +/* ---- Checkbox ---- */ +.checkbox-label { + display: inline-flex; + gap: 0.5rem; + align-items: center; + font-size: 0.95rem; +} + +/* ---- Accent Colors ---- */ +input[type="radio"], +input[type="checkbox"] { + accent-color: #f15a29; + cursor: pointer; +} + +/* ---- Submit Button ---- */ +.order-form .submit-btn { + display: inline-block; + padding: 0.8rem 1.6rem; + background: #f15a29; + color: #fff; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 1rem; + margin-top: 0.5rem; + transition: background 0.3s ease; +} + +.order-form .submit-btn:hover { + background: #d44f25; +} + +/* ---------- Footer ---------- */ +.footer { + background: #f9f9f9; + padding: 2rem 1.5rem; + border-top: 1px solid #eee; +} + +.social { + display: flex; + justify-content: center; + gap: 1.5rem; + margin: 1rem 0; +} + +.social img { + width: 30px; + height: 30px; + opacity: 0.8; + cursor: pointer; + transition: opacity 0.3s ease; +} +.social img:hover { + opacity: 1; +} diff --git a/css/style.css b/css/style.css index 5cb025cef..203f7731b 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,151 @@ +/* ---------- Base Styles ---------- */ +body { +font-family: 'Roboto'; +margin: 0; +background-color: #fff; +text-align: center; +-webkit-font-smoothing: antialiased; +} - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +a { +text-decoration: none; +color: inherit; +} -body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; +button{ +margin-top: 2rem; +padding: 0.8rem 2rem; +font-size: 1rem; +color: #fff; +background: #f15a29; +border: none; +border-radius: 4px; +cursor: pointer; +transition: background 0.3s ease; +} + +/* ---------- Layout Containers ---------- */ +.container { +max-width: 100%; +margin: 0 auto; +padding: 0; +} +/* ---------- Header ---------- */ +.header { +display: flex; +justify-content: space-between; +align-items: center; +padding: 1.2rem 2rem; +background: #f9f9f9; +border-bottom: 1px solid #eee; +} +.logo img { +height: 40px; +} +.navigation { +list-style: none; +display: flex; +gap: 1.5rem; +margin: 0; +padding: 0; +} +.nav-item { +font-weight: 400; +} +.nav-current { +color: #f15a29; +} +.nav-link:hover { +color: #f15a29; +transition: color 0.3s ease; +} + +/* ---------- Hero Section ---------- */ +.imageBckg { +width: 100%; +height: 100vh; +background-image: url('../img/first-background.jpg'); +background-size: cover; +background-position: center; +background-repeat: no-repeat; +display: flex; +flex-direction: column; +align-items: center; +justify-content: center; +text-align: center; +} +.imageBckg h1, +.imageBckg h2 { +color: #fff; +text-shadow: 0 2px 4px rgba(0,0,0,0.4); +} + +/* ---------- Features Section ---------- */ +.whiteBckg { +background-color: #fff; +padding: 6rem 1.5rem; +} +.features { + padding: 6rem; +display: grid; +grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); +gap: 2rem; +justify-items: center; +} + +.item { +display: flex; +flex-direction: column; +align-items: center; +text-align: center; +} + +.item img { +width: 120px; +height: 120px; +margin-bottom: 1rem; +} + +.getKarma { + background-color: #f9c4c38d; + display: flex; + align-items: center; + gap: 5rem; } -/** - * 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' - */ +.getKarma img { + width: 40%; + object-fit: cover; +} + +.getKarma-content { + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +/* ---------- Footer ---------- */ +.footer { +background: #f9f9f9; +padding: 2rem 1.5rem; +border-top: 1px solid #eee; +} + +.social { +display: flex; +justify-content: center; +gap: 1.5rem; +margin: 1rem 0; +} +.social img { +width: 30px; +height: 30px; +opacity: 0.8; +cursor: pointer; +transition: opacity 0.3s ease; +} diff --git a/index.html b/index.html index 3e742ef04..6630cd633 100755 --- a/index.html +++ b/index.html @@ -11,9 +11,79 @@
- - - +
+