Skip to content

finished karma exercise #228

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
PeterArmstrong79 wants to merge 7 commits into from
Closed

finished karma exercise #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
44850f1
finished html? start css
PeterArmstrong79 Jun 15, 2021
810be8a
header style
PeterArmstrong79 Jun 15, 2021
25d2430
nav css style
PeterArmstrong79 Jun 15, 2021
c9c99de
hero picture css styles
PeterArmstrong79 Jun 15, 2021
209af0d
features css styles
PeterArmstrong79 Jun 15, 2021
362c1d9
footer css styles
PeterArmstrong79 Jun 15, 2021
86b8521
media queries finished?
PeterArmstrong79 Jun 15, 2021
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
210 changes: 208 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,216 @@

/* 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;
font-size: 15px;
}
/* Header Section */
header {
display: flex;
justify-content: space-evenly;
align-items: center;
}
header img {
height: 2.4rem;
padding: 1rem 0 1rem 2rem;
}

/* Navigation Section */

nav ul {
display: flex;
list-style: none;
}

nav ul a {
text-decoration: none;
color: #9c9fa7;
padding: 1rem;
}
nav ul a:focus, nav ul a:hover {
color: #e0633a;
}
li:first-child a {
color: rgb(117, 114, 114);
font-weight: 500;
}

/* Main Content Section */

.hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url("../img/first-background.jpg");
max-width: 73rem;
height: 76vh;
margin: 0 auto;
background-position-x: -200px;
background-position-y: -25px;
background-repeat: no-repeat;
}
.hero h1, .hero h2 {
color: white;
font-weight: 100;
margin: 0;
}
.hero h1 {
font-size: 3.5rem;
}
.hero h2 {
letter-spacing: 2px;
padding: 1rem 0 3.5rem;
}
.hero button {
background-color: #d35a32;
color: white;
padding: 0.8rem 1.2rem;
border-radius: 5%;
border: none;
}

/* Features Icon Section */

.features {
width: 44rem;
margin: 0 auto;
padding: 5rem 0;
box-shadow: 0px 1px 0px #eae5e5;
}
.features h2 {
color: black;
text-align: center;
font-weight: 300;
font-size: 1.8rem;
padding-bottom: 3rem;
}
.icon-container {
display: flex;
}
.icons {
padding: 0 2rem;
}
.icons p {
width: 11.5rem;
}
.features img {
width: 10rem;
height: 6rem;
}

/* Footer Section */

footer {
display: flex;
flex-direction: column;
align-items: center;
}
footer section {
display: flex;
}
footer img {
height: 1.6rem;
padding: 0.3rem 0;
border-radius: 100%;
}
footer h3 {
font-size: 1rem;
font-weight: 400;
}
footer small {
padding: 1rem;
color: #92949b;
}

/* Media Queries */
@media screen and (max-width: 375px) {
body{
width: fit-content;
}
main {
display: flex;
flex-direction: column;

}
header {
width: 100vh;
}
header nav ul {
overflow: hidden;
height:0;
}
header nav ul.open {
height: auto;
font-size: 1.8rem;
margin-top: 3rem;
display: flex;
flex-direction: column;
border-bottom: 1px solid grey;
border-top: 1px solid grey;
}
header nav ul li {
display: block;
width: 100%;
margin:0;
}
header nav ul li a {
display: block;
padding: 10px;
margin:0;
}
header img{
height: 3.4rem;
padding: 2rem 0 1rem 4rem;
}
.hero {
width: 46rem;
height: 116vh;

background-position: center;
}
.icon-container {
flex-direction: column;
align-items: center;
}
.features {
width: 46rem;
}
.features h2{
font-size: 3.6rem;
}
footer {
width: 50rem;
height: 4vh;
}
.icons img{
width: 21.7rem;
height: 7rem;
}
.icons p{
font-size: 2rem;
width: 21rem;
text-align: center;
}
.burger-nav {
display: block;
height: 40px;
width: 100%;
background: url("../img/menu-hamburger.svg") no-repeat 98% center;
background-size: 2.5rem;
cursor: pointer;
}
footer h3{
font-size: 1.2rem;
}
footer img{
height: 2.4rem;
}
footer small{
font-size: 1.2rem;
}
}


/**
* Add your custom styles below
Expand Down
70 changes: 60 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,69 @@

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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 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" />
</head>

<body>
<header>
<img src="img/karma-logo.svg" alt="Logo" />
<nav>
<ul>
<li><a href="#">Meet Karma</a></li>
<li><a href="#">How it Works</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Login</a></li>
</ul>
<a class="burger-nav" id="burger-btn"></a>
</nav>
</header>

<main>
<section class="hero">
<h1>Introducing Karma</h1>
<h2>Bring WiFi with you, everywhere you go.</h2>
<button>Learn More</button>
</section>
<section class="features">
<h2>Everyone needs a little Karma.</h2>
<section class="icon-container">
<section class="icons">
<img src="img/icon-devices.svg" alt="different internet devices" />
<p>Internet for all devices</p>
</section>
<section class="icons">
<img src="img/icon-coffee.svg" alt="coffee cup" />
<p>Boost your productivity</p>
</section>
<section class="icons">
<img src="img/icon-refill.svg" alt="Gas refill tank" />
<p>Pay as You Go</p>
</section>
</section>
</section>
</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 -->
<footer>
<h3>Join us on</h3>
<section>
<img src="img/twitter-icon.svg" alt="twitter icon"/>
<img src="img/facebook-icon.svg" alt="facebook icon" />
<img src="img/instagram-icon.svg" alt="instagram icon" />
</section>
<small>&copy; Karma Mobility, Inc.</small>
</footer>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="JS/menu.js"></script>
</body>
</html>
</html>