diff --git a/css/style.css b/css/style.css index 5cb025cef..773ccb793 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,277 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ -body { + body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + margin: 4rem; +} +.navbar { + display: flex; + padding-left: 5%; + align-items: flex-end; + justify-content: space-between; +} + +.logo img { +width: 50px; +height: 50px; +} + + + /* hamburger menu */ + #menu__toggle { + + opacity: 0; + } + + #menu__toggle:checked ~ .menu__btn > span { + transform: rotate(45deg); + } + #menu__toggle:checked ~ .menu__btn > span::before { + top: 0; + transform: rotate(0); + } + #menu__toggle:checked ~ .menu__btn > span::after { + top: 0; + transform: rotate(90deg); + } + #menu__toggle:checked ~ .menu__box { + visibility: visible; + left: 0; + } + + .menu__btn { + + display: flex; + align-items: center; + position: absolute; + top: 20px; + right: 20px; + + width: 26px; + height: 26px; + + cursor: pointer; + z-index: 1; + } + + .menu__btn > span, + .menu__btn > span::before, + .menu__btn > span::after { + display: block; + position: absolute; + + width: 100%; + height: 2px; + + background-color: #616161; + + transition-duration: .25s; + } + .menu__btn > span::before { + content: ''; + top: -8px; + } + .menu__btn > span::after { + content: ''; + top: 8px; + } + + .menu__box { + + display: block; + position: fixed; + visibility: hidden; + top: 0; + left: -100%; + + width: 300px; + height: 100%; + + margin: 0; + padding: 80px 0; + + list-style: none; + + background-color: #ECEFF1; + box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); + + transition-duration: .25s; + } + + .menu__item { + + display: block; + padding: 12px 24px; + + color: #333; + + font-family: 'Roboto', sans-serif; + font-size: 20px; + font-weight: 600; + + text-decoration: none; + + transition-duration: .25s; + } + .menu__item:hover { + background-color: #CFD8DC; + } + +.links { + padding-right: 5%; +} + +.links a { + padding-right: 37px; + text-decoration: none; + color: rgb(191, 191, 191); + font-size: large; +} + + +/* CSS for banner */ + +.banner { + background-image: url("../img/first-background.jpg"); + height: 46rem; + margin: 2rem; + background-size: cover; + color: white; + background-position: bottom; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.content { + text-align: center; +} + +.content h1 { + font-size: 70px; + font-weight: 100; +} + +.content p { + font-size: 40px; + font-weight: 100; +} + +.button button { + color: #fff; + background-color: #e0633a; + padding: 15px 28px; + border-style: none; + border-radius: 4%; +} + +.button button:hover { + background-color: grey; +} + +/* CSS for features */ + +.feature { + color: black; + display: flex; + flex-direction: column; + align-items: center; +} + +.feature-heading h1 { + font-size: 4rem; + font-weight: 100; + padding-top: 3rem; +} + +.feature-content { + display: flex; + align-items: flex-end; +} + +.feature-content-item { + display: flex; + margin: 4rem 7rem; + align-items: center; + flex-direction: column; +} + +.feature-content-item img { + width: 50%; +} + +.feature-content-item p { + font-size: 1.5rem; +} + +/* CSS for section two */ +.feature2{ + display: grid; + grid-template-rows: auto; + grid-template-columns: 1.5fr 2fr; +} + +.feature2-content-pic{ + background-color: #363434; + height: 100%; + background-image: url(/level-2/homepage-feature.png); + background-repeat: no-repeat; + background-size: cover; +} + +.feature-heading2{ + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + padding: 8rem; + background-color: #e0633a; + color: grey; + font-weight: 400; + font-size: 24px; + text-align: center; +} + +.button2 { + color: #fff; + background-color: #e0633a; + padding: 15px 28px; + border-style: none; + border-radius: 4%; + } + + .button2:hover { + background-color: grey; +} + + + + +/* css for footer*/ + +footer { + display: flex; + flex-direction: column; + align-items: center; +} + +.footer-icon { + display: flex; + justify-content: center; +} + +.footer-icon img { + padding: 7px; + width: 1%; + border-radius: 50%; +} + +.footer-ending { + color:rgb(207, 207, 207); } -/** - * 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/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..e73c39c51 100755 --- a/index.html +++ b/index.html @@ -3,17 +3,108 @@ - Karma + + Karma + +
+ + + +
+ + + + +
+ + +
+ Meet Karma + How it Works + Store + Blog + Help + Login +
+ + +
+ +
+ - - - +
+
+

Everyone needs a little karma

+
+
+
+ icon-devices +

Internet for all devices

+
+
+ icon-coffee +

Boost your productivity

+
+
+ icon-refill +

Pay as You Go

+
+
+
+
+
+ pic-homepage + +
+
+

Wherever I am, I just don't worry about my connection anymore!

+ +
+ + +
+
+ +
+ + - diff --git a/media.css b/media.css new file mode 100644 index 000000000..49a251852 --- /dev/null +++ b/media.css @@ -0,0 +1,118 @@ +/* mobile size */ +@media screen and (max-width: 489px) { + + .links { + + display: none; + + } + + .hamburger-menu { + display: flex; + } + /* hamburger menu */ +#menu__toggle { + + opacity: 0; + } + + #menu__toggle:checked ~ .menu__btn > span { + transform: rotate(45deg); + } + #menu__toggle:checked ~ .menu__btn > span::before { + top: 0; + transform: rotate(0); + } + #menu__toggle:checked ~ .menu__btn > span::after { + top: 0; + transform: rotate(90deg); + } + #menu__toggle:checked ~ .menu__box { + visibility: visible; + left: 0; + } + + .menu__btn { + visibility: visible; + display: flex; + align-items: center; + position: absolute; + top: 20px; + right: 20px; + + width: 26px; + height: 26px; + + cursor: pointer; + z-index: 1; + } + + .menu__btn > span, + .menu__btn > span::before, + .menu__btn > span::after { + display: block; + position: absolute; + + width: 100%; + height: 2px; + + background-color: #616161; + + transition-duration: .25s; + } + .menu__btn > span::before { + content: ''; + top: -8px; + } + .menu__btn > span::after { + content: ''; + top: 8px; + } + + .menu__box { + visibility: visible; + display: block; + position: fixed; + visibility: hidden; + top: 0; + left: -100%; + + width: 300px; + height: 100%; + + margin: 0; + padding: 80px 0; + + list-style: none; + + background-color: #ECEFF1; + box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); + + transition-duration: .25s; + } + + .menu__item { + visibility: visible; + display: block; + padding: 12px 24px; + + color: #333; + + font-family: 'Roboto', sans-serif; + font-size: 20px; + font-weight: 600; + + text-decoration: none; + + transition-duration: .25s; + } + .menu__item:hover { + background-color: #CFD8DC; + } + + .form-section h1 { + text-align: center; + } + + +} \ No newline at end of file diff --git a/store.css b/store.css new file mode 100644 index 000000000..908dfeb1c --- /dev/null +++ b/store.css @@ -0,0 +1,261 @@ +/* store page */ +.header { +width: 100%; +display: flex; +flex-direction: row; +justify-content: space-between; +align-items: center; +} + +.hamburger-menu { + display: none; +} + +/* main */ +.store-main { + + flex-direction: row; + flex-wrap: wrap; + display: grid; + grid-template-rows: auto; + grid-template-columns: 2fr 2fr; +} + +/* section one */ +.form-section { + width: 50%; + display: flex; + flex-direction: column; + padding: 2rem; + gap: 30px; +} +/* form */ +form { + display: flex; + flex-direction: column; + gap: 20px; +} + +/* form title */ +.form-section h1 { + color: #e0633a; +} + +/* form classes */ +label { + font-size: 12px; + font-weight: 400; + color: grey; +} + +.fieldset { + display: flex; + flex-direction: row; + align-items: stretch; + flex-wrap: wrap; + border: none; + gap: 30px; +} + +.flex { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 5px; +} + +/* input style */ +input[type="text"] { + height: 30px; + padding: 2px; +} + +input:focus { + outline-color: #e0633a; !important; +} + +input[type="checkbox"] { + color: #e0633a; + background-color: #e0633a;; +} + +#postcode { + width: 100px; + text-transform: uppercase; +} +/* select & option */ +select { + font-style: italic; + font-size: 12px; + font-weight: 400; + color: grey; + width: 250px; + height: 30px; +} + +select:focus { + outline-color: #e0633a;; +} + +/* radio-box */ +.radio-box { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 10px; +} + +.radio-box legend { + font-size: 12px; + font-weight: 400; + color: grey; +} + +.radio-box ul { + display: flex; + gap: 20px; + list-style: none; +} + +/* changed radio-box color */ +.radio-box input[type="radio"] { + appearance: none; + width: 15px; + height: 15px; + border: 1px solid grey; + border-radius: 50%; + background-clip: content-box; + padding: 2px; + display: inline-block; + margin-right: .1rem; + vertical-align: -3px; +} + +.radio-box input[type="radio"]:checked { + background-color: var(--orange); +} + +/* check box */ +.check-box { + gap: 2px; + margin-top: 20px; +} + +.check-box a { + color: var(--orange); +} + +/* change checkbox mark */ + +.check-box input[type="checkbox"] { + appearance: none; + width: 15px; + height: 15px; + border: 1px solid grey; + border-radius: 20%; + background-clip: content-box; + padding: 1px; + background-color: white; + display: inline-block; + margin-right: .1rem; + vertical-align: -3px; +} + +.check-box input[type="checkbox"]:checked { + background-image: url(/level-2/checkmark.svg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-color: transparent; +} + +/* button */ +button { + background-color: #e0633a; + color: var(--white); + border: 1px solid #e0633a; + border-radius: 5px; + padding: 10px 25px; + transition: all .3s ease-in-out; +} + +button:hover { + color: var(--orange); + background-color: white; + border: 1px solid #e0633a; +} +/* section two */ + +.img-section { + background-image: url("./level-2/store-image_by-andrew-neel-unsplash.jpg"); + background-position: center; + background-repeat: no-repeat; + +} + +.store-img { + + background-position: center; + background-repeat: no-repeat; + background-size: 60px 20px; + width: 50%; + margin: 0; + height: 100%; +} + +/* tablet and mobile size */ +@media screen and (max-width: 890px) { + + /* fix textbox names */ + .fieldset { + display: flex; + flex-direction: column; + align-items: stretch; + flex-wrap: wrap; + } + +/* fix positions */ + .store-main { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; +} + +select { + width: 320px; +} + +.form-section { + width: 100%; + display: flex; + flex-direction: column; + padding: 2rem; + gap: 30px; +} + +.img-section { + + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + width: 100%; + margin: 0; + padding: 2rem; +} +.store-img { + width: 30rem; + height: 50rem; +} + +.radio-box ul { + display: flex; + flex-direction: column; + gap: 10px; + list-style: none; +} +} + + + diff --git a/store.html b/store.html new file mode 100644 index 000000000..52ac00035 --- /dev/null +++ b/store.html @@ -0,0 +1,155 @@ + + + + + + Karma - Store + + + + + + + + +
+ + +
+ + + + +
+ +
+ Meet Karma + How it Works + Store + Blog + Help + Login +
+
+
+
+

Order your Karma wifi device today!

+ +
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+ Select a color +
    +
  • + + +
    • +
  • + + +
    • +
+
+ +
+ + +
+ +
+ +
+
+
+ +
+ store-img +
+
+ + + + \ No newline at end of file