From f7fa58187c2c41a83d2d04b1a7b8dc59d66dc92c Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Sun, 19 Feb 2023 21:43:55 +0000 Subject: [PATCH 01/25] HTML-CSS-Module-project build html --- README.md | 2 +- img/karma-logo.svg | 5 +---- index.html | 17 +++++++++++++++++ package-lock.json | 6 ++++++ 4 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 package-lock.json diff --git a/README.md b/README.md index 31db35cef..77ea96c7f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# karma-clone +node# karma-clone The aim of this exercise is to create a page that looks just like this one: diff --git a/img/karma-logo.svg b/img/karma-logo.svg index d550e81d8..00bf0dedf 100755 --- a/img/karma-logo.svg +++ b/img/karma-logo.svg @@ -1,4 +1 @@ - - - \ No newline at end of file +http://www.w3.org/2000/svg \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..da1aa9b67 100755 --- a/index.html +++ b/index.html @@ -10,6 +10,23 @@ +
+ + + + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..9d7fc2242 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "HTML-CSS-Module-Project", + "lockfileVersion": 2, + "requires": true, + "packages": {} +} From d1ca3ab5db3aab35877dde57fc0e2a4b3aced7bc Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Mon, 20 Feb 2023 00:19:13 +0000 Subject: [PATCH 02/25] HTML-CSS-Module-Project build html --- css/style.css | 6 +++++- index.html | 21 +++++++++++++++++---- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..8655313bf 100755 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,8 @@ - +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ body { diff --git a/index.html b/index.html index da1aa9b67..daea02cfc 100755 --- a/index.html +++ b/index.html @@ -13,7 +13,9 @@
- - - +
+
+
+
From 3bf270c945b98bfa66ad798fcaa03a3bbf1e147b Mon Sep 17 00:00:00 2001 From: Danny Romero <108970600+Elenar9@users.noreply.github.com> Date: Mon, 20 Feb 2023 00:43:49 +0000 Subject: [PATCH 03/25] html-css-module-project build style --- css/style.css | 9 +++++++++ index.html | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 8655313bf..57d22e6d0 100755 --- a/css/style.css +++ b/css/style.css @@ -10,6 +10,15 @@ body { -webkit-font-smoothing: antialiased; } + +.banner{ + height: 100vh; + width: 100%; + background-image: linear-gradient(0,0,0,0.6)rgba(0,0,0,0.6)url(/img/first-background.jpg); + background-size: cover; + background-position:center; +} + /** * Add your custom styles below * diff --git a/index.html b/index.html index daea02cfc..95b76e7ab 100755 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
-
+ -
+
+

Pay as You Go

- +
- - - - -
-
Join us on
- -
- - - +
- -

©Karma Mobility, Inc.

- - - - + + + +
+ +
+

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

+ +
+
+ + + + + + From c6bb66bc6515d925951409b6f6b211cc935bc021 Mon Sep 17 00:00:00 2001 From: Elenar9 Date: Sun, 16 Apr 2023 18:32:08 +0100 Subject: [PATCH 12/25] Update style.css Update css --- css/style.css | 295 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 287 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index da6240886..9b65b9210 100755 --- a/css/style.css +++ b/css/style.css @@ -29,10 +29,8 @@ body { header { justify-content: space-between; align-items: center; - padding: 5px 100px; + padding: 0 100px; display: flex; - background-color: var(--grey-light); - margin: 0; } .logo-img { @@ -40,16 +38,29 @@ header { max-width: 32px; display: block; } +.nav-bar { + display: flex; + justify-content: center; + align-items: center; +} +.nav-menu { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} ul { list-style: none; display: flex; gap: 10px; } .nav-item { + list-style: none; color: var(--grey-dark); text-decoration: none; padding: 15px; + transition: 0.5s ease; } ul li a { @@ -62,16 +73,284 @@ ul li a { ul li a:hover { color: #CE5C08; } +.nav-link { + text-decoration: none; + transition: 0.7s ease; + color: #787c79; +} +.nav-link:hover { + color: #CE5C08; +} .nav-head { - color: var(--grey-dark); + list-style: none; font-weight: 500; - font-size: 14px; text-decoration: none; + padding: 20px; + transition: 0.5s ease; } -/* Styles for main section 1*/ +.hamburger { + display: none; + cursor: pointer; +} + +.bar { + display: block; + width: 25px; + height: 3px; + margin: 5px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: black; +} +/* Hero Styles*/ + +.main-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #FFFFFF; + background-image: url("../img/first-background.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 550px; +} + +h1 { + margin: 0; + font-size: 2.6rem; + font-weight: 200; + padding: 0; +} + +.main-container-phrase2 { + display: flex; + justify-content: space-around; + font-size: 1.4rem; + padding-bottom: 20px; +} + +button { + background-color: #CE5C08; + color: white; + padding: 15px 20px; + font-size: .875rem; + border-radius: 4px; + border: none; +} + +/* General Styles*/ + +.secondary-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 350px; + color: #39393F; +} + +.secondary-container-phrase1 { + margin-bottom: 0; + font-size: 1.7rem; + font-weight: 10; +} + +.secondary-imgs-text { + display: flex; + flex-direction: row; +} + +.info1 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-right: 65px; +} + +.info2 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.orange-imgs { + width: 100px; + height: 150px; + margin-bottom: 0; +} + +.catch-phrases { + margin-top: 0; + font-size: 1.125rem; +} + +hr { + color: #D9DBE0; +} +.block2 { + display: flex; + flex-direction: row; + margin: 40px 0 90px 0; + width: 100%; +} + +.block2-img { + width: 45%; +} + +.call-to-action { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #FFF5EE; + padding: 0 100px; + flex: 1; + width: 100%; +} + +.block2-button { + background-color: #CE5C08; + color: white; + padding: 15px 30px; + font-size: .875rem; + border-radius: 4px; + justify-content: center; + text-decoration: none; +} + +.button { + text-decoration: none; + color: white; +} + +.block2-text { + font-size: 3em; + text-align: center; + padding: 0; + margin: 0 0 20px 0; +} + +.block2-span { + color: #CE5C08; +} + +/* Footer styles */ + +footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 150px; + margin-bottom: 50px; + border-top: 1px solid #FAF6F6; +} + +.footer-imgs { + padding: 10px; + width: 15px; + height: 15px; + border: 1px solid #E9ECF3; + ; + border-radius: 50px; +} + +.footer-p { + color: #555151; +} +@media only screen and (max-width: 576px) { + + header { + padding: 10px; + } + + .hamburger { + display: block; + } + + .hamburger.active .bar:nth-child(2) { + opacity: 0; + } + + .hamburger.active .bar:nth-child(1) { + transform: translateY(8px) rotate(45deg) + } + + .hamburger.active .bar:nth-child(3) { + transform: translateY(-8px) rotate(-45deg) + } + + .nav-menu { + position: absolute; + left: -120%; + top: 35px; + gap: 0; + flex-direction: column; + width: 100%; + text-align: center; + transition: 0.3s; + background-color: #FFF5EE; + padding: 20px 0; + } + + .nav-item { + margin: 15px 0; + } + + .nav-menu.active { + left: 0; + } + .secondary-container { + height: 700px; + } + + .secondary-imgs-text { + flex-direction: column; + width: 100%; + padding: 0; + } + + .info1 { + padding-right: 0; + } + + .block2 { + flex-direction: column; + align-items: center; + justify-content: center; + } + + .block2-img { + width: 100%; + } + + .call-to-action { + width: auto; + } + + .block2-text { + padding: 80px 0 20px 0; + font-size: 1.8rem; + } + + .block2-button { + margin-bottom: 80px; + } + } + + + + +/* Styles for main section 1*/ +/* .section1 { display: flex; flex-direction: column; @@ -107,7 +386,7 @@ button { } /* section 2 styles: */ -.section2 { +/*.section2 { display: flex; flex-direction: column; justify-content: center; @@ -160,7 +439,7 @@ hr { /* Footer styles */ -footer { +/*footer { display: flex; flex-direction: column; justify-content: center; From 1999a74d75a0aabe989e58eaedb7bb03d686e1e0 Mon Sep 17 00:00:00 2001 From: Elenar9 Date: Sun, 16 Apr 2023 18:38:20 +0100 Subject: [PATCH 13/25] Update style.css update css --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 9b65b9210..c833d0144 100755 --- a/css/style.css +++ b/css/style.css @@ -350,7 +350,7 @@ footer { /* Styles for main section 1*/ -/* + .section1 { display: flex; flex-direction: column; From efc371fc710522021cf26edbbb72ddf015fd2a99 Mon Sep 17 00:00:00 2001 From: Elenar9 Date: Sun, 16 Apr 2023 21:15:49 +0100 Subject: [PATCH 14/25] HTML-CSS-Module-Project Update css and html --- css/style.css | 2 +- index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c833d0144..ecb936678 100755 --- a/css/style.css +++ b/css/style.css @@ -351,7 +351,7 @@ footer { /* Styles for main section 1*/ -.section1 { +/*.section1 { display: flex; flex-direction: column; justify-content: center; diff --git a/index.html b/index.html index 430d1ea2b..55546fa5f 100755 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
- Karma logo + Karma logo