diff --git a/README.md b/README.md index 31db35cef..f97ccf759 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # karma-clone +live version https://tiritaki.github.io/HTML-CSS-Module-Project/ The aim of this exercise is to create a page that looks just like this one: diff --git a/css/store.css b/css/store.css new file mode 100644 index 000000000..a3f6f3f42 --- /dev/null +++ b/css/store.css @@ -0,0 +1,227 @@ + + /* 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 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' + */ + + body { + margin: 0; + } + + body, + button { + color: var(--grey-dark); + font-size: 1rem; + } + + h1,h2,h3,h4,h5,h6 { + margin-top: 0; + margin-bottom: 0; + } + + p { + margin-top: 0; + margin-bottom: 0; + } + + .header, + .content, + .footer { + padding: 0 1.5rem; + margin: 0 auto; + } +/* Header */ + .header { + display: flex; + align-items: center; + justify-content: space-around; + height: 5rem; + margin-bottom: 1rem; + padding-top: 1rem; + } + + .header__logo { + max-height: 40px; + width: 40px; + } + +/* Navigation */ + +.navigation__list { + display: flex; + list-style: none; + gap: 20px; + } + + .navigation__item { + padding: 0.5rem 0; + } + + .navigation__link { + color: var(--grey-dark); + font-weight: 300; + text-decoration: none; + } + + .navigation__link:hover { + color: #c05326; + } + +/* karma-store */ +.content-store { + display: flex; + justify-content: space-evenly; +} + +.article__summary { + font-size: 50px; + font-weight: 500; + color: #c05326; +} +/* contact-form */ +.orderForm{ + display : flex; + flex-direction : column; + width: 501px; + height: 1200px; + left: 122px; + /* background-color: aquamarine; */ + } + +.orderForm h2 { + justify-content: center; + margin-top: 117px; +} + .Line { + margin-top: 60px; + display: flex; + justify-content: space-between; + } + input { + width: 100%; + padding: 12px 20px; + margin: 8px 0px; + display: block; + border-radius: 4px; + box-sizing: border-box; + } + + input:checked { + border: 1px solid black; + } + .address { + width: 100%; + } + + select { + width: 170%; + padding: 12px 20px; + margin: 8px 0px; + display: block; + border: 1px solid black; + border-radius: 4px; + box-sizing: border-box; + } + legend { + font-size: 21px; + font-weight: 500; + } + fieldset { + margin-top: 60px; + border: 0px; + } + .radio { + display: flex; + gap: 10px; + margin-top: 10px; + } + + #orange { + width: 30px; + accent-color: #c05326; + + } + #grey { + width: 30px; + accent-color: #c05326; + } + .label { + font-size: 21px; + font-weight: 400; + } + .get_karma { + background-color: #c05326; + border-radius: 3px; + border: none; + margin-top: 20px; + padding: 15px; + color: white; + font-size: 22px; + font-weight: 500; + width: 200px; + } + .checkbox { + accent-color: #c05326; + margin-top: 60px; + width: 100%; + display: flex; + } + + .checkbox-line{ + margin-left: 10px; + font-size: 18px; + font-weight: 400; + display: block; + } + + .checkbox-input { + height: 20px; + width: 20px; + background-color: #eee; + } +/* Footer */ + +.footer { + margin-top: 2rem; + } + +.footer__content { + border-top: 2px solid lightgray; + padding-top: 0; + padding-bottom: 1rem; + } + +.footer p { + padding-bottom: 1rem; + text-align: center; + font-size: 0.85rem; + } + .social { + display: flex; + justify-content: center; + gap: 20px; + } +.social-icons { + max-height: 30px; + width: 30px; + border: solid 1px lightgray; + border-radius: 50%; +} + +.footer__content p { + padding-top: 20px; + font-size: 1rem; + font-weight: 300; +} diff --git a/css/style.css b/css/style.css index 5cb025cef..e2e4bcefa 100755 --- a/css/style.css +++ b/css/style.css @@ -16,4 +16,214 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ + body { + margin: 0; + } + + body, + button { + color: var(--grey-dark); + font-size: 1rem; + } + + h1,h2,h3,h4,h5,h6 { + margin-top: 0; + margin-bottom: 0; + } + + p { + margin-top: 0; + margin-bottom: 0; + } + + .header, + .content, + .footer { + padding: 0 1.5rem; + margin: 0 auto; + } +/* Header */ + .header { + display: flex; + align-items: center; + justify-content: space-around; + height: 5rem; + margin-bottom: 1rem; + padding-top: 1rem; + } + + .header__logo { + max-height: 40px; + width: 40px; + } + +/* Navigation */ +.navigation__list { + display: flex; + list-style: none; + gap: 20px; + } + + .navigation__item { + padding: 0.5rem 0; + } + + .navigation__link { + color: var(--grey-dark); + font-weight: 300; + text-decoration: none; + } + + .navigation__link:hover { + color: #c05326; + } + +/* karma-intro */ + +.karma-intro { + background-image: url("/HTML-CSS-Module-Project/img/first-background.jpg"); + height: 420px; + color:white; + padding-top: 250px; + text-align: center; + background-repeat: no-repeat; + background-size: cover; + background-position: right; + } + + .karma-intro h1 { + margin-bottom: 1rem; + font-size: 4.5rem; + font-weight: 400; + } + + .karma-intro p { + font-size: 3rem; + margin-bottom: 2rem; + } + + .learn { + background-color: #c05326; + border-radius: 3px; + border: none; + margin-top: 10px; + padding: 15px; + } + + /* Headings */ + +.heading-underline { + position: relative; + margin-bottom: 2rem; + margin-top: 2rem; + padding-bottom: 0.5rem; + padding-left: 22%; + padding-top: 5%; + border-bottom: 2px solid var(--orange-light); + font-size: 3.8rem; + font-weight: 300; + } + + .article__thumbnail { + object-fit: contain; + width: 10rem; + padding-left: 35px; + } + + .flex-article{ + display: flex; + gap: 15px; + justify-content: space-evenly; + } + + .article { + margin-bottom: 1rem; + padding: 10px; + gap: 30px; + } + + .article__summary { + margin-top: 0; + margin-bottom: 1rem; + font-size: 1.5rem; + } +/* Footer */ + +.footer { + margin-top: 2rem; + } + +.footer__content { + border-top: 2px solid lightgray; + padding-top: 2rem; + padding-bottom: 2rem; + } + +.footer p { + padding-bottom: 1rem; + text-align: center; + font-size: 0.85rem; + } + .social { + display: flex; + justify-content: center; + gap: 20px; + } +.social-icons { + max-height: 30px; + width: 30px; + border: solid 1px lightgray; + border-radius: 50%; +} + +.footer__content p { + padding-top: 20px; + font-size: 1rem; + font-weight: 300; +} + +/* section connection */ + +.flex-connection { + display: flex; + justify-content: center; + margin-top: 30px; + margin-bottom: 30px; +} + +.article_flex_content { + display: flex; + flex-direction: column; + justify-content:center; + align-items: center; + background-color: rgba(224, 99, 58, 0.1); + margin: 0; + +} + +.get_karma { + background-color: #c05326; + border-radius: 3px; + border: none; + margin-top: 10px; + padding: 15px; + color: white; + font-size: 24px; + font-weight: 400; +} + +.article__connection { + margin-top: 0; + margin-bottom: 1rem; + font-size: 1.5rem; + padding: 50px 137px 20px 156px ; + text-align: center; + font-style: italic; + font-size: 42px; + font-weight: 400; +} + +.orange-brk { + color: #c05326; +} \ No newline at end of file diff --git a/img/Girl working at desk.png b/img/Girl working at desk.png new file mode 100644 index 000000000..691317bbf Binary files /dev/null and b/img/Girl working at desk.png differ diff --git a/img/smiling woman.png b/img/smiling woman.png new file mode 100644 index 000000000..3500b2e4c Binary files /dev/null and b/img/smiling woman.png differ diff --git a/index.html b/index.html index 3e742ef04..8f33f4001 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,134 @@ - - - + + + Karma - - - - - - - + + + + + + - - +
+ + + + +
+
+
+
+

Introducing Karma

+

Bring WIFI with you, everywhere you go.

+ +
+
+
+

Everyone needs a little Karma.

+
+
+ internet-devices +
+

Internet for all devices

+
+
+
+ internet-devices +
+

Boost you productivity

+
+
+
+ internet-devices +
+

Pay as You Go

+
+
+
+
+
+
+ smiling woman +
+

"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..02c2f6999 --- /dev/null +++ b/store.html @@ -0,0 +1,147 @@ + + + + + + Store + + + + + + + + + +
+ + + + +
+
+
+

Order your Karma wifi device today!

+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ Select a color +
+ + + + +
+
+
+
+ +
+
+
+ + +
+ +
+ working-woman +
+ + +