diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/style.css b/css/style.css index 5cb025cef..649630b07 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,29 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +*{ + box-sizing: border-box; + +} body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + text-align: center; + color: black; +} +header { + display: flex; + justify-content: space-evenly; +} +.join { + display: flex; + justify-content: space-between; + gap: 15px; + +} +.join img{ + width: 20px; + height: 20px; } - /** * Add your custom styles below * @@ -16,4 +34,159 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ + + + nav { + justify-content: flex-end; + } + +ul li { + list-style: none; + display: inline-block; +} + +ul li a { + color: grey; + text-decoration: none; + margin: 0px 20px; +} + + +ul li a:hover{ +color: orangered; +} + +.high { + display: grid; + grid-template-columns: 50% 50%; + max-width: 1200px; + margin: 50px auto; +} + +.low { + background-color: rgb(245, 190, 184); display: flex; align-items: center; justify-content: center; text-align: center; +} +.low p{ + font-size: 21px; + font-style: italic; + +} +.main { +text-align: center; + background-image: url('./../img/first-background.jpg'); + background-size: cover; + padding: 150px 0; + color: white; +} +.store-main { + display: grid; + grid-template-columns: 50% 50%; + +} +.store-main img{ + width: 100%; + height: 100%; + object-fit: cover; +display: block; +} +.icons { + display: flex; + justify-content: center +} +.images { + padding-top: 50px; + padding-bottom: 50px; +} + .image-icon { + display: flex; + justify-content: center; + gap: 20px; + +} +.image-icon img{ +height: 170px; + + +} +h1 { + margin-top: 50px; + font-family: Roboto; + color: +#DE6E49; +} +.grid-2 { + display: grid; + grid-template-columns: 48% 48%; + justify-content: space-between; +} +.store { + color: #DE6E49; +} +input[type="text"], input[type="number"], select { display: block; padding: 7px; border: 2px solid #efefef; + width: 100%; + margin-bottom: 15px; + margin-top: 5px; + box-sizing: border-box; + border-color: +#666666 + } + form { + text-align: left; + padding: 50px 80px; + border: none; + } + + .term { + font-family: 'Roboto'; +font-style: normal; +font-weight: 400; +font-size: 18px; +line-height: 140%; + } + .terms { + font-family: 'Roboto'; + color: +#DE6E49; + } + button { + background-color: tomato; + padding: 12px 25px; + border-radius: 5px; + border: none; + color: white; + margin-top: 10px; + } + + .radio { + margin: 15px 0; + } + .checkbox { + margin-bottom: 15px; + } + .check { + color: +#DE6E49; + } + h2 { +margin-bottom: 30px; +font-size: 25px; +font-weight: 400; + } + +.icons img{ + width: 20px; + height: 20px; + border-radius: 50%; + + +} +.icons { + border-radius: 50%; + padding: 20px; +} +.cons { + display: flex; + justify-content: center; + +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..efde68aaa 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,74 @@ +
+ + +
+
+

Introducing Karma

+

Bring WiFi with you everywhere you go.

+ +
+
+ +

Every One needs a little karma

+
+
+
+ device +

Internet for devices

+
+
+
+
+ cup +

Boost your productivity

+
+
+
+
+ phone +

Pay as You Go

+
+
+
+
+
+
+ +
+
+

"Where never 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..59dfcd0e1 --- /dev/null +++ b/store.html @@ -0,0 +1,101 @@ + + + + + + + Store- Karma + + + + + +
+ + +
+
+
+
+

Add Your Karma Wifi Today!

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + + +
+
+ + +
+
+
+ Select a Color +
+ + +
+ + + +
+ +
+ By placing an order you agree to Karma's Terms and Conditions + + +
+
+ +
+
+ +
+ + +