Skip to content

glasgow-class5/salem-dayfan-html/css-week2 #222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sSalem123 wants to merge 1 commit into from
Closed

glasgow-class5/salem-dayfan-html/css-week2 #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .vscode/launch.json
View file
Open in desktop
Empty file.
115 changes: 96 additions & 19 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,96 @@

/* 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'
*/


/* 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;
}

ul {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-left: 550px;
margin-right: 150px;
}
Comment on lines +8 to +14

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
ul {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-left: 550px;
margin-right: 150px;
}
.header {
display: flex;
justify-content: space-between;
padding: 1rem;
}
.header img {
height: 2rem;
width: 2rem;
}
ul {
display: flex;
list-style: none;
margin: 0;
}
.header li {
padding: 1rem;
}

Instead of using a specific margin-left to create space between the logo and the links, we can do this instead.

  • We can use flex to put space between the logo and the links
  • We can add padding to the list links so that there's space between them


#red {
color: red;
}

.wifi {
padding-left: 240px;
padding-top: 380px;
margin-left: 70px;
margin-right: 70px;
background-image: url("file:///C:/Users/New%20User/Documents/GitHub/HTML-CSS-Coursework-Week1/HTML-CSS-Coursework-Week2/img/first-background.jpg");
display: flex;
justify-content: center;
}
Comment on lines +20 to +28

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.wifi {
padding-left: 240px;
padding-top: 380px;
margin-left: 70px;
margin-right: 70px;
background-image: url("file:///C:/Users/New%20User/Documents/GitHub/HTML-CSS-Coursework-Week1/HTML-CSS-Coursework-Week2/img/first-background.jpg");
display: flex;
justify-content: center;
}

We can move this to .karma, because we don't need both the .wifi and .karma sections, just one is enough


.little {
display: flex;
align-content: center;
flex-direction: row;

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
flex-direction: row;

flex-direction is row by default, so we don't need to add this

text-align: center;
justify-content: space-around;
}

.h3 {
text-align: center;
}

.karma {
color: white;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 120px;
font-size: 20px;
}
Comment on lines +42 to +49

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.karma {
color: white;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 120px;
font-size: 20px;
}
.karma {
color: white;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 120px;
font-size: 20px;
/* moved from .wifi */
height: 40rem;
background-image: url("../img/first-background.jpg");
justify-content: center;
}

We can move these properties from .wifi. We also should use a relative URL instead of putting in file://C:/....


button {
width: 130px;
height: 50px;
Comment on lines +52 to +53

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
width: 130px;
height: 50px;
padding: 1rem;

Instead of adding a specific width and height, we can add padding. We should also use relative units like rem instead of absolute ones like px

border-radius: 10;
background-color: brown;
}

.internet {
width: 190px;
height: 100px;

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
height: 100px;

We don't need to add a specific height here, because we can use its natural height instead

}

.product {
width: 190px;
height: 100px;
}

.pay {
width: 130px;
height: 100px
}

.footer {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-right: 550px;
margin-left: 550px;
}

.last h4 {
text-align: center;
margin-top: 180px;
font-weight: bold;
}

.mobile p {
text-align: center;
font-weight: lighter;
}

@media all and (max-width: 764px) {
main {
backgrond-color: blue;
}
}
106 changes: 101 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,115 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Karma</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<header class="header">
<img src="file:///C:/Users/New%20User/Documents/GitHub/HTML-CSS-Coursework-Week1/HTML-CSS-Coursework-Week2/favicon.ico" alt="logo">

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<img src="file:///C:/Users/New%20User/Documents/GitHub/HTML-CSS-Coursework-Week1/HTML-CSS-Coursework-Week2/favicon.ico" alt="logo">
<img src="img/karma-logo.svg" alt="Karma logo">

We can use the karma-logo.svg image here. We can also give it a slightly more descriptive description

<nav class="nav-bar">
<ul>
<a>meet karma</a>
<a>how its works</a>
<div id="red"><a>store</a></div>
<a>blog</a>
<a>help</a>
<a>login</a>
Comment on lines +19 to +24

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<a>meet karma</a>
<a>how its works</a>
<div id="red"><a>store</a></div>
<a>blog</a>
<a>help</a>
<a>login</a>
<li><a>meet karma</a></li>
<li><a>how its works</a></li>
<li id="red"><a>store</a></li>
<li><a>blog</a></li>
<li><a>help</a></li>
<li><a>login</a></li>

These links are within a ul element, so we should put them in li ones


</ul>
</nav>
</header>
<main class="main">


<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<!-- All the images you need are in the 'img' folder -->
<div class="wifi">

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="wifi">

We don't need this .wifi div — the .karma section is enough

<section class="karma">
<h1>interducing karma</h1>

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h1>interducing karma</h1>
<h1>Introducing Karma</h1>

We should try to use the same letters as the mockup screenshots, because this is what users see

<p>bring WIFI with you, Everywhere you go.</p>
<button class="learn">learn more</button>
</section>
</div>

<div class="h3">
<h1>Everyone need a little karma</h1>

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h1>Everyone need a little karma</h1>
<h2>Everyone need a little karma</h2>

We should only have one h1, so we can change this to h2 instead

</div>
<div class="little">
<section class="internet">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<path fill="#F05A29"
d="M122 66.463h-1.106v-48.41c0-3.033-2.468-5.5-5.5-5.5H13.521a5.506 5.506 0 00-5.5 5.5v38.126h-2.02a5.506 5.506 0 00-5.5 5.5v51.996c0 3.032 2.467 5.5 5.5 5.5h35.546c3.033 0 5.5-2.468 5.5-5.5V90.627H57.69v10.04h-5.422a1.5 1.5 0 100 3H81.5a1.5 1.5 0 000-3h-5.421v-10.04h23.944v16.562c0 3.032 2.468 5.5 5.5 5.5H122c3.032 0 5.5-2.468 5.5-5.5V71.963c0-3.033-2.468-5.5-5.5-5.5zm-77.953 47.212c0 1.379-1.122 2.5-2.5 2.5H6.001a2.503 2.503 0 01-2.5-2.5v-4.286h40.546v4.286zm0-7.286H3.501v-44.71c0-1.378 1.122-2.5 2.5-2.5l35.546-.001c1.378 0 2.5 1.122 2.5 2.5v44.711zm29.032-5.722h-12.39v-10.04h12.39v10.04zm-26.032-13.04v-9.548h52.976v9.548H47.047zm52.976-15.664v3.116H47.047V61.678c0-3.033-2.467-5.5-5.5-5.5l-30.525.001V18.053c0-1.378 1.122-2.5 2.5-2.5h101.873c1.379 0 2.5 1.122 2.5 2.5v48.41h-12.371a5.507 5.507 0 00-5.501 5.5zm24.477 35.226c0 1.379-1.121 2.5-2.5 2.5h-16.477a2.502 2.502 0 01-2.5-2.5v-4.08H124.5v4.08zm0-7.08h-21.477V71.963c0-1.379 1.121-2.5 2.5-2.5H122c1.379 0 2.5 1.121 2.5 2.5v28.146z" />
</svg>
Comment on lines +45 to +48

@bonboh bonboh Jun 22, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<path fill="#F05A29"
d="M122 66.463h-1.106v-48.41c0-3.033-2.468-5.5-5.5-5.5H13.521a5.506 5.506 0 00-5.5 5.5v38.126h-2.02a5.506 5.506 0 00-5.5 5.5v51.996c0 3.032 2.467 5.5 5.5 5.5h35.546c3.033 0 5.5-2.468 5.5-5.5V90.627H57.69v10.04h-5.422a1.5 1.5 0 100 3H81.5a1.5 1.5 0 000-3h-5.421v-10.04h23.944v16.562c0 3.032 2.468 5.5 5.5 5.5H122c3.032 0 5.5-2.468 5.5-5.5V71.963c0-3.033-2.468-5.5-5.5-5.5zm-77.953 47.212c0 1.379-1.122 2.5-2.5 2.5H6.001a2.503 2.503 0 01-2.5-2.5v-4.286h40.546v4.286zm0-7.286H3.501v-44.71c0-1.378 1.122-2.5 2.5-2.5l35.546-.001c1.378 0 2.5 1.122 2.5 2.5v44.711zm29.032-5.722h-12.39v-10.04h12.39v10.04zm-26.032-13.04v-9.548h52.976v9.548H47.047zm52.976-15.664v3.116H47.047V61.678c0-3.033-2.467-5.5-5.5-5.5l-30.525.001V18.053c0-1.378 1.122-2.5 2.5-2.5h101.873c1.379 0 2.5 1.122 2.5 2.5v48.41h-12.371a5.507 5.507 0 00-5.501 5.5zm24.477 35.226c0 1.379-1.121 2.5-2.5 2.5h-16.477a2.502 2.502 0 01-2.5-2.5v-4.08H124.5v4.08zm0-7.08h-21.477V71.963c0-1.379 1.121-2.5 2.5-2.5H122c1.379 0 2.5 1.121 2.5 2.5v28.146z" />
</svg>
<img src="img/icon-devices.svg">

We can link to the icon-devices.svg image instead

<p>internet for all dvices</p>
</section>
<section class="product">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<path fill="#F05A29"
d="M117.37 60.607h-7.385v-8.1a1.5 1.5 0 00-1.5-1.5H2a1.5 1.5 0 00-1.5 1.5v16.639c0 30.186 24.558 54.744 54.742 54.744 26.217 0 48.178-18.529 53.502-43.176v.146h8.626c5.586 0 10.13-4.542 10.13-10.125 0-5.585-4.544-10.128-10.13-10.128zm-62.128 60.284c-27.676 0-50.344-21.843-51.678-49.195H106.92c-1.333 27.352-24.001 49.195-51.678 49.195zm51.743-52.196H3.5V54.008h103.485v14.687zm10.385 9.165h-8.086c.456-2.839.701-5.748.701-8.714v-5.539h7.385c3.932 0 7.13 3.197 7.13 7.128 0 3.929-3.198 7.125-7.13 7.125zM30.883 41.137c-5.583 0-10.126-4.543-10.126-10.127 0-5.583 4.543-10.125 10.126-10.125 3.93 0 7.127-3.198 7.127-7.128a7.135 7.135 0 00-7.127-7.127 1.5 1.5 0 110-3c5.584 0 10.127 4.543 10.127 10.127 0 5.584-4.543 10.128-10.127 10.128-3.93 0-7.126 3.196-7.126 7.125 0 3.93 3.196 7.127 7.126 7.127a1.5 1.5 0 110 3zM56.767 41.137c-5.584 0-10.128-4.543-10.129-10.126.001-5.583 4.545-10.125 10.129-10.125 3.928 0 7.124-3.198 7.124-7.128s-3.196-7.127-7.124-7.127a1.5 1.5 0 110-3c5.582 0 10.124 4.543 10.124 10.127 0 5.584-4.542 10.128-10.124 10.128-3.93 0-7.128 3.196-7.129 7.125.001 3.929 3.199 7.126 7.129 7.126a1.5 1.5 0 110 3zM82.646 41.137c-5.583 0-10.126-4.543-10.127-10.126.001-5.583 4.544-10.125 10.127-10.125 3.931 0 7.128-3.198 7.128-7.128s-3.197-7.127-7.128-7.127a1.5 1.5 0 110-3c5.585 0 10.128 4.543 10.128 10.127 0 5.584-4.543 10.128-10.128 10.128-3.929 0-7.126 3.196-7.127 7.125.001 3.929 3.198 7.126 7.127 7.126a1.5 1.5 0 110 3z" />
</svg>
<p>Boost your productivity</p>
</section>
<section class="pay">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<path fill="#F05A29"
d="M52.154 51.104H12.621a1.5 1.5 0 01-1.5-1.5v-30.5a1.5 1.5 0 011.5-1.5h39.533a1.5 1.5 0 011.5 1.5v30.5a1.5 1.5 0 01-1.5 1.5zm-38.033-3h36.533v-27.5H14.121v27.5z" />
<path fill="#F05A29"
d="M126.654 50.874a11.336 11.336 0 00-8.061-3.34h-.001a11.324 11.324 0 00-8.059 3.34l-3.285 3.327a6.904 6.904 0 00-3.873-1.187c-3.885 0-7.045 3.198-7.045 7.129 0 .31.026.615.064.915-2.691 2.086-4.43 5.344-4.43 9.004 0 6.287 5.114 11.402 11.4 11.402 10.093 0 18.305 8.212 18.305 18.305 0 10.314-8.392 18.705-18.697 18.705a18.57 18.57 0 01-13.189-5.561 18.584 18.584 0 01-5.395-13.263 1.499 1.499 0 00-.179-.721l-.208-.386V59.451c0-6.289-5.116-11.404-11.404-11.404h-8.401V14.026c0-4.136-3.364-7.5-7.5-7.5H8.406c-4.136 0-7.5 3.364-7.5 7.5V118.92a1.5 1.5 0 001.5 1.5h60.29a1.5 1.5 0 001.5-1.5V51.047h8.401c4.634 0 8.404 3.77 8.404 8.404v39.471c0 .248.062.492.179.711l.209.388a21.552 21.552 0 006.259 15c4.073 4.126 9.51 6.418 15.315 6.453 11.969 0 21.706-9.737 21.706-21.705 0-11.747-9.558-21.305-21.305-21.305-4.632 0-8.4-3.77-8.4-8.402 0-2.346.968-4.469 2.522-5.994 1.261 1.949 3.427 3.241 5.888 3.241 3.874 0 7.026-3.215 7.026-7.166a7.145 7.145 0 00-1.077-3.775l3.331-3.373a8.334 8.334 0 015.937-2.461c2.243 0 4.353.875 5.941 2.462a1.5 1.5 0 002.122-2.122zM8.406 9.526h48.29c2.482 0 4.5 2.019 4.5 4.5V117.42H3.906V14.026c0-2.481 2.019-4.5 4.5-4.5zm94.969 54.783c-2.23 0-4.045-1.869-4.045-4.166 0-2.277 1.814-4.129 4.045-4.129 2.22 0 4.026 1.852 4.026 4.129 0 2.297-1.806 4.166-4.026 4.166z" />
</svg>
<p>Pay as you Go</p>
</section>
</div>
</main>

<footer class="last">
<h4>Join us on</h4>
<div class="footer">
<div clss="twiter">
<svg xmlns="http://www.w3.org/2000/svg" width="50pt" height="50pt" viewBox="0 0 50 50">
<path
d="M50.063 10.438a20.57 20.57 0 01-5.91 1.62 10.309 10.309 0 004.523-5.687 20.648 20.648 0 01-6.531 2.492 10.258 10.258 0 00-7.504-3.246c-5.68 0-10.286 4.602-10.286 10.281 0 .805.094 1.59.27 2.344-8.547-.43-16.121-4.523-21.195-10.746a10.243 10.243 0 00-1.39 5.172c0 3.566 1.812 6.715 4.573 8.562a10.274 10.274 0 01-4.66-1.289v.13c0 4.984 3.547 9.136 8.246 10.085a10.29 10.29 0 01-4.644.172c1.312 4.082 5.11 7.063 9.605 7.145A20.613 20.613 0 012.39 41.87c-.831 0-1.648-.047-2.449-.144a29.053 29.053 0 0015.762 4.62c18.914 0 29.258-15.667 29.258-29.253 0-.446-.012-.895-.027-1.332a20.904 20.904 0 005.129-5.325zm0 0"
fill="#3498db" /></svg>
</div>
<div class="face">

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 30 30">
<path
d="M12 27V15H8v-4h4V8.852C12 4.785 13.98 3 17.36 3c1.62 0 2.476.121 2.882.176V7h-2.305C16.5 7 16 7.758 16 9.29V11h4.203l-.57 4H16v12zm0 0"
fill="#173f8a" />
</svg>
</div>
<div class="enstigram">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" width="50" height="60">
<defs>
<radialGradient id="a" cx="332.14" cy="2511.81" r="3263.54" gradientUnits="userSpaceOnUse">
<stop offset=".09" stop-color="#fa8f21" />
<stop offset=".78" stop-color="#d82d7e" />
</radialGradient>
<radialGradient id="b" cx="1516.14" cy="2623.81" r="2572.12" gradientUnits="userSpaceOnUse">
<stop offset=".64" stop-color="#8c3aaa" stop-opacity="0" />
<stop offset="1" stop-color="#8c3aaa" />
</radialGradient>
</defs>
<path
d="M833.4 1250c0-230.11 186.49-416.7 416.6-416.7s416.7 186.59 416.7 416.7-186.59 416.7-416.7 416.7-416.6-186.59-416.6-416.7m-225.26 0c0 354.5 287.36 641.86 641.86 641.86s641.86-287.36 641.86-641.86S1604.5 608.14 1250 608.14 608.14 895.5 608.14 1250m1159.13-667.31a150 150 0 10150.06-149.94h-.06a150.07 150.07 0 00-150 149.94M745 2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28 7.27-505.15c5.55-121.87 26-188 43-232.13 22.72-58.36 49.78-100 93.5-143.78s85.32-70.88 143.78-93.5c44-17.16 110.26-37.46 232.13-43 131.76-6.06 171.34-7.27 505-7.27s373.28 1.31 505.15 7.27c121.87 5.55 188 26 232.13 43 58.36 22.62 100 49.78 143.78 93.5s70.78 85.42 93.5 143.78c17.16 44 37.46 110.26 43 232.13 6.06 131.87 7.27 171.34 7.27 505.15s-1.21 373.28-7.27 505.15c-5.55 121.87-25.95 188.11-43 232.13-22.72 58.36-49.78 100-93.5 143.68s-85.42 70.78-143.78 93.5c-44 17.16-110.26 37.46-232.13 43-131.76 6.06-171.34 7.27-505.15 7.27s-373.28-1.21-505-7.27M734.65 7.57c-133.07 6.06-224 27.16-303.41 58.06C349 97.54 279.38 140.35 209.81 209.81S97.54 349 65.63 431.24c-30.9 79.46-52 170.34-58.06 303.41C1.41 867.93 0 910.54 0 1250s1.41 382.07 7.57 515.35c6.06 133.08 27.16 223.95 58.06 303.41 31.91 82.19 74.62 152 144.18 221.43S349 2402.37 431.24 2434.37c79.56 30.9 170.34 52 303.41 58.06C868 2498.49 910.54 2500 1250 2500s382.07-1.41 515.35-7.57c133.08-6.06 223.95-27.16 303.41-58.06 82.19-32 151.86-74.72 221.43-144.18s112.18-139.24 144.18-221.43c30.9-79.46 52.1-170.34 58.06-303.41 6.06-133.38 7.47-175.89 7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95 97.54 2068.86 65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17 1.51 1589.56 0 1250.1 0S868 1.41 734.65 7.57"
fill="url(#a)" />
<path
d="M833.4 1250c0-230.11 186.49-416.7 416.6-416.7s416.7 186.59 416.7 416.7-186.59 416.7-416.7 416.7-416.6-186.59-416.6-416.7m-225.26 0c0 354.5 287.36 641.86 641.86 641.86s641.86-287.36 641.86-641.86S1604.5 608.14 1250 608.14 608.14 895.5 608.14 1250m1159.13-667.31a150 150 0 10150.06-149.94h-.06a150.07 150.07 0 00-150 149.94M745 2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28 7.27-505.15c5.55-121.87 26-188 43-232.13 22.72-58.36 49.78-100 93.5-143.78s85.32-70.88 143.78-93.5c44-17.16 110.26-37.46 232.13-43 131.76-6.06 171.34-7.27 505-7.27s373.28 1.31 505.15 7.27c121.87 5.55 188 26 232.13 43 58.36 22.62 100 49.78 143.78 93.5s70.78 85.42 93.5 143.78c17.16 44 37.46 110.26 43 232.13 6.06 131.87 7.27 171.34 7.27 505.15s-1.21 373.28-7.27 505.15c-5.55 121.87-25.95 188.11-43 232.13-22.72 58.36-49.78 100-93.5 143.68s-85.42 70.78-143.78 93.5c-44 17.16-110.26 37.46-232.13 43-131.76 6.06-171.34 7.27-505.15 7.27s-373.28-1.21-505-7.27M734.65 7.57c-133.07 6.06-224 27.16-303.41 58.06C349 97.54 279.38 140.35 209.81 209.81S97.54 349 65.63 431.24c-30.9 79.46-52 170.34-58.06 303.41C1.41 867.93 0 910.54 0 1250s1.41 382.07 7.57 515.35c6.06 133.08 27.16 223.95 58.06 303.41 31.91 82.19 74.62 152 144.18 221.43S349 2402.37 431.24 2434.37c79.56 30.9 170.34 52 303.41 58.06C868 2498.49 910.54 2500 1250 2500s382.07-1.41 515.35-7.57c133.08-6.06 223.95-27.16 303.41-58.06 82.19-32 151.86-74.72 221.43-144.18s112.18-139.24 144.18-221.43c30.9-79.46 52.1-170.34 58.06-303.41 6.06-133.38 7.47-175.89 7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95 97.54 2068.86 65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17 1.51 1589.56 0 1250.1 0S868 1.41 734.65 7.57"
fill="url(#b)" />
</svg>

</div>
</div>
<div class="mobile">
<p>karma mobility inc</p>
</div>
</footer>
</body>
</html>

</html>