diff --git a/css/style.css b/css/style.css index c04a811c1..d8827c7c9 100755 --- a/css/style.css +++ b/css/style.css @@ -1,142 +1,122 @@ -/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - -/** - * 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' - */ - -/* General styles */ - +/* Basic body styling */ body { font-family: "Roboto", sans-serif; - -webkit-font-smoothing: antialiased; + line-height: 1.6; + color: #333; margin: 0; - padding: 0; } -.container { +/* Header Styling */ +header { display: flex; justify-content: space-between; - padding: 1em 5em; align-items: center; + padding: 20px; + background-color: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } -.logo img { - width: 3em; +.karma-logo img { + height: 40px; } -/* Navigation Styles */ -header nav { +.navbar { + list-style: none; display: flex; - justify-content: space-between; - align-items: center; + gap: 20px; } -nav div a { - margin-left: 2em; +.navbar a { text-decoration: none; - color: #000; font-weight: 500; + color: #333; } -nav div a:hover { - color: #ff6f61; +.navbar a:hover { + color: #f15a22; } -/* Hero Section Styles */ -.hero-image { - position: relative; - width: 100%; - height: auto; -} - -.hero-image img { - width: 100%; - height: auto; +/* Hero Section */ +.hero { + background-image: url("../img/first-background.jpg"); + background-size: cover; + background-position: center; + padding: 100px 20px; + text-align: center; + color: #fff; } -.hero-image h2 { - position: absolute; - top: 40%; - left: 5%; - color: white; - font-size: 3em; - font-weight: 500; +.hero-content h1 { + font-size: 48px; + font-weight: 300; } -.hero-image p { - position: absolute; - top: 50%; - left: 5%; - color: white; - font-size: 1.2em; +.hero-content p { + font-size: 24px; + margin: 20px 0; } -.hero-image button { - position: absolute; - top: 60%; - left: 5%; - background-color: #ff6f61; - color: white; - padding: 1em 2em; +.hero-button { + padding: 10px 30px; + background-color: #f15a22; + color: #fff; border: none; - font-size: 1em; + font-size: 16px; cursor: pointer; } -.hero-image button:hover { - background-color: #ff5a45; +.hero-button :hover { + background-color: #e14e1b; } /* Features Section */ -section { +main { text-align: center; - padding: 4em 0; + padding: 40px 20px; } -.columns { - display: grid; - grid-template-columns: repeat(3, 1fr); - padding: 0 5em; +main h2 { + font-size: 32px; + margin-bottom: 40px; } -.column1, -.column2, -.column3 { +.columns { display: flex; - flex-direction: column; - align-items: center; + justify-content: space-between; } -.column1 img, -.column2 img, -.column3 img { - width: 5em; - margin-bottom: 1em; +.column { + width: 30%; } -.columns p { - font-size: 1.2em; - margin-top: 1em; +.column img { + width: 60px; + margin-bottom: 20px; } -/* Footer */ +.column p { + font-size: 18px; +} + +/* Footer Section */ footer { + background-color: #f9f9f9; + padding: 20px; text-align: center; - padding: 2em; - background-color: #f5f5f5; } -footer h4 { - margin-bottom: 1em; +footer h5 { + font-size: 16px; + margin-bottom: 20px; +} + +.social-media-icons img { + margin: 0 10px; + width: 30px; } -.social-media-container img { - width: 2em; - margin: 0 1em; +footer p { + margin-top: 20px; + font-size: 14px; + color: #888; } diff --git a/index.html b/index.html index ca656abc1..936c7495b 100755 --- a/index.html +++ b/index.html @@ -2,88 +2,69 @@ - + Karma - - - - +

- - - -

Introducing Karma

+ +

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/level-2/store.css b/level-2/store.css new file mode 100644 index 000000000..8cc94169c --- /dev/null +++ b/level-2/store.css @@ -0,0 +1,106 @@ +/* Store Form Styles */ + +.karma-logo img { + height: 40px; +} + +.store-form-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4em; + background-color: white; +} + +.order-form { + width: 50%; + padding: 2em; +} + +.order-form h2 { + color: #ff6f61; +} + +.order-form label { + display: block; + margin-bottom: 0.5em; + font-size: 1rem; +} + +.order-form input, +.order-form select { + width: 100%; + padding: 0.75em; + margin-bottom: 1em; + border: 1px solid #ddd; + border-radius: 4px; +} + +.form-row { + display: flex; + gap: 1em; +} + +.radio-container, +.checkbox-container { + display: flex; + align-items: center; + margin-bottom: 1em; +} + +.radio-container input, +.checkbox-container input { + display: none; +} + +/* Custom radio styles */ +.custom-radio { + width: 16px; + height: 16px; + border-radius: 50%; + border: 2px solid #ddd; + margin-right: 0.5em; + position: relative; +} + +input[type="radio"]:checked + .custom-radio { + background-color: #ff6f61; +} + +/* Custom checkbox styles */ +.custom-checkbox { + width: 16px; + height: 16px; + border: 2px solid #ddd; + margin-right: 0.5em; + position: relative; +} + +input[type="checkbox"]:checked + .custom-checkbox::after { + content: "\2713"; + position: absolute; + top: 0; + left: 0; + color: white; + font-size: 12px; + background-color: #ff6f61; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.store-image { + width: 50%; +} + +.store-image img { + max-width: 100%; + height: auto; +} + +.social-media-icons img { + margin: 0 10px; + width: 30px; +} diff --git a/store.html b/store.html new file mode 100644 index 000000000..007fa4341 --- /dev/null +++ b/store.html @@ -0,0 +1,110 @@ + + + + + + Karma Store + + + + + + + +

+ +

Order your Karma wifi device today!

+ +

+ + + + +