From 0986308acdc074cd3e8cc5c10fcc3eb0124e82dc Mon Sep 17 00:00:00 2001 From: Anu Date: Sat, 28 Jan 2023 13:42:16 +0000 Subject: [PATCH 1/3] editted --- .vscode/launch.json | 31 +++++++++++++++++++++++++++++++ index.html | 28 ++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..098de2c9f --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,31 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + { + "name": "Launch Chrome", + "request": "launch", + "type": "chrome", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + }, + { + "name": "Launch Chrome", + "request": "launch", + "type": "chrome", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + }, + + + { + "type": "chrome", + "request": "launch", + "name": "Open index.html", + "file": "/home/cyf/Desktop/Cyberpunk/HTML-CSS-Module-Project/index.html" + } + ] +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..0610a4f2d 100755 --- a/index.html +++ b/index.html @@ -9,7 +9,35 @@ +
+ +
+ +

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

+ + + + From b79d50fb87419d2b5b8ffc3e18d642ac8c2ad6a6 Mon Sep 17 00:00:00 2001 From: Anu Date: Fri, 3 Feb 2023 18:00:07 +0000 Subject: [PATCH 2/3] done html but css not fully done --- css/style.css | 57 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 64 ++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 107 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..c59478d3c 100755 --- a/css/style.css +++ b/css/style.css @@ -16,4 +16,61 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +*{ + margin: 0; + padding: 0; +} +Body{ + background: rgba(0 0 0 0.7) url('first-background.jpg') center center fixed; + background-size: cover; + background-position: 20px; + background-blend-mode: darken; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +} + +.navbar ul li{ + + display: inline-block; + padding: 18px; + text-transform: uppercase; +} +.navbar ul li a{ + text-decoration: none; + color: #fff; + padding: 4px; + transition: 3.ms; +} + +.navbar ul li a:hover{ + box-shadow: 0 3px 50px orangered inset, 0 3px 50px orangered inset, 0 3px 50px orangered inset +} + +.content{ + position: absolute; + color: #fff; + top: 40%; + left: 30%; +} +.content h1{ + font-family: sans-serif; + font-size: 20px; + margin-left: 30%; +} +.content p{ + text-align: center; + margin-top: 17px; +} +.content button{ + font-size: 30px; +} +.logo img{ + float: left; + position: absolute; + margin-top: 15px; + margin-left: 10px; + height: auto; + width: 100px; +} + + diff --git a/index.html b/index.html index 0610a4f2d..3e7f785a9 100755 --- a/index.html +++ b/index.html @@ -9,33 +9,69 @@ -
- -
+
+ + + + +

Introducing Karma

Bring WiFi with you, everywhere you go

-

Everyone needs a little karma

+
+ + +
+

Everyone needs a little karma

+
+ + + device icon

Internet for all devices

-

Boost your productivity

+ + + +coffee icon +

Boost your productivity

+ + + + refill icon

Pay as you Go

+ + + -
+

Join us on

+ +
    twitter icon Facebook icon Instagram icon +
+ + +
+

@ Karma Mobility, Inc.

+
-
+ From 73f8a545fec181f8f8dc22ca8ca0a72232f476bd Mon Sep 17 00:00:00 2001 From: Anu Date: Wed, 15 Feb 2023 14:21:04 +0000 Subject: [PATCH 3/3] change on html n css but still not happy exactly not same as pic --- .vscode/settings.json | 3 + css/style.css | 158 +++++++++++++++++++++++++++--------------- index.html | 81 +++++++++++++--------- 3 files changed, 154 insertions(+), 88 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index c59478d3c..f0806ecf3 100755 --- a/css/style.css +++ b/css/style.css @@ -1,76 +1,126 @@ /* 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; padding: 0; } -Body{ - background: rgba(0 0 0 0.7) url('first-background.jpg') center center fixed; - background-size: cover; - background-position: 20px; - background-blend-mode: darken; - font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +.header{ + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 1rem; + margin-bottom: 1rem; + align-items: flex-end; + padding-right: 4rem; + height: 5rem; } - -.navbar ul li{ - - display: inline-block; - padding: 18px; - text-transform: uppercase; +.header-logo{ + height: 50px; + width: 50px; + padding-left: 4rem; +} +logo-img{ + margin-bottom: -10rem; } -.navbar ul li a{ +ul{ + width: 100%; + margin: 0 0 0 250px; + list-style: none; +} +nav{ + width: 100%; + overflow: auto; + +} +li{ + float: left; +} +li a{ + width: 100%; + display: block; + padding: 20px 15px; text-decoration: none; - color: #fff; - padding: 4px; - transition: 3.ms; + font-family: sans-serif; + color: black; + text-align: center; } - -.navbar ul li a:hover{ - box-shadow: 0 3px 50px orangered inset, 0 3px 50px orangered inset, 0 3px 50px orangered inset +.main{ + background-image: url(../img/first-background.jpg); + height: 100vh; + width: 100%; + color: white; + text-align: center; + font-size: 1.8rem; + margin-bottom: 1rem; +} +.main h1{ + font-family: 'Times New Roman', Times, serif; + margin-bottom: 1rem; + font-size: 1.8rem; + text-align: center; + margin-top: 5rem; } -.content{ - position: absolute; - color: #fff; - top: 40%; - left: 30%; +.main p{ + font-size: 1.2rem; + margin-bottom: 1rem; + text-align: center; } -.content h1{ - font-family: sans-serif; - font-size: 20px; - margin-left: 30%; +.main button{ + color: black; + background-color: orangered; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem; + padding: 0.8rem; + margin-bottom: 6rem; +background-size: cover; +} + + +.main2{ +margin-top: 5rem; +margin-bottom: 1rem; +text-align: center; } -.content p{ +h1{ + font-weight: lighter; text-align: center; - margin-top: 17px; + font-size: 2rem; } -.content button{ - font-size: 30px; +.icons{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + column-gap: 7rem; } -.logo img{ - float: left; - position: absolute; - margin-top: 15px; - margin-left: 10px; - height: auto; - width: 100px; +.footer{ + border-top: 1px solid grey; + margin: 1rem 4rem; +} +p{ + font-weight: normal; + text-align: center; + font-size: medium; +} +.join us logo { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + column-gap: 1.3em; + width: auto; + height: 0.5rem; + border-radius: 50%; + padding: 0.5rem; } - +.footer-end{ + text-align: center; + color: black; + font-size: small; +} diff --git a/index.html b/index.html index 3e7f785a9..7ea018e01 100755 --- a/index.html +++ b/index.html @@ -5,19 +5,20 @@ Karma - - + + -
- - + + + + + + +
+ +

Introducing Karma

+

Bring WiFi with you, everywhere you go

+ + + +
+ + -
-

Introducing Karma

-

Bring WiFi with you, everywhere you go

- -

Everyone needs a little karma

-
+ + + +
- - device icon +
+ device icon

Internet for all devices

- +
- -coffee icon +
+coffee icon

Boost your productivity

- +
- - refill icon +
+ refill icon

Pay as you Go

+
+ +
- -

Join us on

- -
    - twitter icon - Facebook icon - Instagram icon -
+ + + twitter icon + Facebook icon + Instagram icon + -
+

@ Karma Mobility, Inc.