diff --git a/css/style.css b/css/style.css index 5cb025cef..cc8e19a4e 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,274 @@ /* 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; -} + } + + /** + * 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' + */ + nav { + display: flex; + padding: 0.5rem 8rem; + } + + .nav-logo { + width: 100%; + } + .nav-logo-right { + display: flex; + justify-content: space-between; + align-items: center; + } + .karma-logo { + width: 2rem; + } + + .nav-link { + font-size: 19px; + font-weight: 500; + color: gray; + text-decoration: none; + } + + .nav-link:hover { + color: #FF5F1F ; + } + + .active { + color: #2b3956; + } + /* main - Freedom */ + + main { + padding: 2rem; + } + + .freedom { + padding: 10%; + background-image: url("../img/first-background.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + color: white; + font-weight: 400; + display: flex; + flex-direction: column; + align-items: center; + } + + .freedom-title { + font-size: 5rem; + font-weight: 400; + margin-bottom: 40px; + } + .freedom-description { + font-weight: 400; + font-size: 50px, + } -/** - * 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' - */ + .btn-freedom { + text-decoration: none; + color: white; + background-color: #FF5F1F; + font-size: 40px; + padding: 1.5rem 3rem; + border-radius: 20px; + border-color: white; + margin-top: 40px; + + + } + + /* INFO */ + + .info { + text-align: center; + font-weight: 250px; + padding: 60px 0px; + } + .info-title { + font-size: 40px; + font-weight: inherit; + margin-bottom: 5rem; + } + .cards-container { + display: flex; + justify-content: space-evenly; + width: 60%; + margin: 0 auto; + } + + .card img { + width: 8rem; + } + + .card p { + font-size: 1.8rem; + font-weight: 400; + } + + + /* ! STORE CSS */ + .store{ + width: 100%; + } + .store-container { + display: flex; + flex-direction: row; + color: #FF5F1F; + font-size:x-large; + } + + .store-container-1 { + padding-left: 100px; + padding-right: 250px; + width: 100%; + margin-top: 50px; + } + + + .store-container-2{ + margin-right: 30px; + height: auto; + + } + + + form { + margin-top: 80px; + } + fieldset { + border: none; + padding: 0; + } + label, + legend { + margin-bottom: 10px; + color: #6f6d6d; + font-size: 20px; + } + label, + input { + display: block; + } + .form-control { + display: inline; + } + .form-1, + .form-2 { + display: flex; + justify-content: space-between; + } + .form-1 div { + width: 45%; + } + + .form-2 div { + width: 45%; + } + + form > div:nth-child(2), + form > div:nth-child(3), + form > div:nth-child(4) { + margin-top: 30px; + } + form > div:nth-child(5) { + margin-top: 70px; + } + form > div:nth-child(6) { + margin-top: 90px; + } + form > div:nth-child(7) { + margin-top: 35px; + } + form button { + border: none; + } + label.form-control { + margin-left: 10px; + } + input[type="checkbox"] { + width: 20px; + height: 20px; + } + input[type="radio"] { + width: 20px; + height: 20px; + } + input[type="text"], + select { + height: 50px; + width: 100%; + border: 2px solid #666666; + border-radius: 4px; + } + .btn-place{ + text-decoration: none; + border-radius: 5px; + color: white; + background-color: #FF5F1F; + font-size: 20px; + padding: 20px 30px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + #city{ + height: 53px; + width: 15rem; + font-size: 21px; + } + #post-code{ + height: 48x; + width: 15rem; + font-size: 21px; + } + /* footer */ + + .footer { + position: absolute; + bottom:0; + width:100%; + height:60px; /* Height of the footer */ + text-align: center; + + } + + .container-social { + display: flex; + justify-content: space-between; + align-content: space-between; + width: 13%; + margin: 0 auto; + } + + .social { + border: 1px solid #bdc3c7; + border-radius: 100%; + padding: 0.6rem ; + } + + .social img { + width: 1.4rem; + } + + .footer-join { + font-size: 20px; + } + + .footer-text { + color: #acb0b2; + margin-top: 1.5rem; + } \ No newline at end of file diff --git a/img/homepage-feature.jpg b/img/homepage-feature.jpg new file mode 100644 index 000000000..3500b2e4c 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..73540bd5f 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..cbf3e7549 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,98 @@ + - - - Karma - - - - + + + Karma + + + + + - - + + + + + + +
+ +
+
+
+

Introducing Karma

+

+ Bring WiFi with you, everywhere you go. +

+ Learn More +
+ + +
+

Everyone needs a little Karma.

+
+
+ +

Internet for all devices

+
+
+ +

Boost your productivity

+
+
+ +

Pay as You Go

+
+
+ +
+
+
+
+

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

+ + +
+
+ + +
+ +
+ + - + + \ No newline at end of file diff --git a/store.html b/store.html new file mode 100644 index 000000000..52ca729dd --- /dev/null +++ b/store.html @@ -0,0 +1,175 @@ + + + + + + Karma + + + + + + +
+ +
+ +
+
+
+

Order your Karma wifi device today!

+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+
+ Select a colour + + + + +
+
+
+ + +
+
+ +
+
+
+ +
+ +
+
+
+
+ + + + \ No newline at end of file