Skip to content

London_10-Saliha_Popal/HTML-CSS-Module-Project #595

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

Open
SalihaPopal wants to merge 2 commits into
base: master
Choose a base branch
from
Open

London_10-Saliha_Popal/HTML-CSS-Module-Project #595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eba584c
Creating Karma-Project
SalihaPopal Feb 9, 2023
d314f8d
adding level2
SalihaPopal May 5, 2023
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}
245 changes: 241 additions & 4 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@

/* 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
Expand All @@ -16,4 +12,245 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

:root{
--gray-dark: #292b2c;
--gray-light: #e4e4e4;
--orange-dark: #c05326;
--orange-light: #f7eae4;
--white: #fff;
}


body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
margin: 0;
}

/*. header. */

.header{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 6rem;
align-items: flex-end;
padding-right: 4rem;
}


.header-logo{
width: 1.5rem;
padding-left: 4rem;
}

/*. hero. */

.hero-img{
background-image: url("/img/first-background.jpg");
background-color: var(--gray-light);
height: 42rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.hero-header{
font-weight: lighter;
font-size: 3.5rem;
margin: 1rem 0;
color: var(--gray-light);
}

.hero-p{
font-size: 1.9rem;
font-weight: lighter;
color: var(--gray-light);
}

.hero-btn{
background-color: var(--orange-dark);
width: 10rem;
height: 4rem;
margin-top: 1rem;
border-radius: 5px;
color: var(--gray-light);
}

.hero-btn:hover{
background-color: var(--orange-light);
color: black;
}

/*. navbar. */

.nav-li{
display: flex;
flex-direction: row;
list-style: none;
margin-bottom: 2rem;
}
.nav-item{
display: inline;
text-align: center;
list-style: none;
padding: 0.5rem;

}
.nav-link{
color: var(--gray-dark);
font-weight: 600;
text-decoration: none;
padding: 0.5rem;
color: var(--gray-dark);
font-weight: 100;
}

#nav-link1{
color: black;
font-weight: bold;
}
#nav-link1:hover{
color: var(--orange-dark);
}

.nav-link:hover{
color: var(--orange-dark);
}


.service-header{
display: flex;
justify-content: center;
text-align: center;
justify-content: space-evenly;
margin-top: 6rem;
font-size: 2.5rem;
}

.services{
display: flex;
justify-content: space-evenly;
}

.svg{
display: flex;
flex-direction: row;
width: 200px;
}
.service-p{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
font-size: 1.5rem;
text-decoration: none;
color: black;
}

.service-link{
color: black;
text-decoration: none;
margin-bottom: 6rem;
}

.karma{
display: flex;
flex-direction: row;
padding-bottom: 2rem;
height: 30rem;
}

.karma-img{
width: 50rem;
}

.karma2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
background-color:rgb(250, 231, 234);
}

.karma-p{
background-color:rgb(250, 231, 234);
font-family: 'Roboto', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 2rem;
color: #666666;
}

.quote{
content: "";
font-weight: 400;
}

.karma-btn{
background-color: #c05326;
border-radius: 5px;
color: white;
border: none;
padding: 1rem 2rem;
margin-bottom: 4rem;
}

.karma-btn a{
color: white;
text-decoration: none;
}

.join-us{
text-align: center;
/* font-size: 2rem; */
}
.footer{
display: flex;
flex-direction: column;
}
.fa{
display: flex;
justify-content: center;
align-items: center;
}
.fa-twitter{
border: 1px solid var(--gray-light);
border-radius: 100px;
color: rgb(113, 191, 194);
padding: 7px;
width: 1rem;
height: 1rem;
padding: 0.5rem;
}
.fa-facebook{
border: 1px solid var(--gray-light);
border-radius: 100px;
color: midnightblue;
/* padding: 6.8px 14px; */
padding: 0.5rem;
margin-left: 2px;
width: 1rem;
height: 1rem;
}
.fa-instagram{
border: 1px solid var(--gray-light);
border-radius: 100px;
padding: 7px 9px;
width: 1rem;
height: 1rem;
padding: 0.5rem;
}
#copyright{
text-align: center;
font-size: x-small;
color: var(--gray-dark);
margin-top: 1rem;
margin-bottom: 2rem;
}
120 changes: 120 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,132 @@
<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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<!-- 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 -->


<header>

<section class="header">

<div class="header-logo">
<img
class="logo-img" src="./favicon.ico" alt="favicon">
</div>

<nav>
<ul class="nav-li" >
<li class="nav-item">
<a href="" class="nav-link" id="nav-link1">Meet Karma</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">How it works</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Store</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Blog</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Help</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Login</a>
</li>
</ul>
</nav>
</section>
</header>

<section class="hero">
<div class="hero-img">
<div class="hero-text">

<h1 class="hero-header">
Introducing Karma
</h1>

<p class="hero-p">Bring WiFi with you, everywhere you go.</p>

<button class="hero-btn">Learn More</button>
</div>
</div>
</section>

<!---end of hero-->

<div class="service-header">
<p>Everyone needs a little Karma</p>
</div>

<section class="services">

<svg class="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>
<!--<p class="info-p">Internet for all devices</p>---->

<svg class="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 class="info-p">Boost your productivity</p>----->

<svg class="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>
</section>
<!-----<p class="info-p">Pay as You Go</p>----->
<section class="service-p">
<a href="" class="service-link">
<p class="info-p">Internet for all devices</p>
</a>
<a href="" class="service-link">
<p class="info-p">Internet for all devices</p>
</a>
<a href="" class="service-link">
<p class="info-p">Boost your productivity</p>
</a>
</section>


<section class="karma">
<img src="level-2/homepage-feature.png" alt="" class="karma-img">
<div class="karma2">
<p class="karma-p"><q class="quote">Wherever I am, I just don't worry<br>
about my connection<br>
anymore!</q>
</p>
<button class="karma-btn">
<a href="" class="karma-link">Get Karma today</a>
</button>
</div>
</section>


<hr>
<footer class="footer">
<h4 class="join-us">Join us on</p>
<div class="fa">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
</div>

<div class="copyright">
<i class="fa fa-copyright" id="copyright">Karma Mobility.Inc</i>
</div>

</footer>

@anuthapaliy anuthapaliy Feb 23, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

well done saliha

</body>
</html>