Skip to content

London Class 10 - Elena Barker - HTML/CSS - Module Project #611

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
ElenaBarker wants to merge 5 commits into
base: master
Choose a base branch
from
Open

London Class 10 - Elena Barker - HTML/CSS - Module Project #611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
27ec008
Fork and Clone
ElenaBarker Feb 10, 2023
e2f65dc
Update index.html
ElenaBarker Feb 11, 2023
3be2acc
Creating basic HTML
ElenaBarker May 2, 2023
b2d93ac
Updated HTML and CSS
ElenaBarker May 9, 2023
b749e30
Level 1 done
ElenaBarker May 9, 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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ The aim of this exercise is to create a page that looks just like this one:

### Set up

- **Fork and clone** this repo.
+ **Fork and clone** this repo.
- To fork, hit the 'fork' button in the top right corner of this page on Github.
Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page.
- To clone, click the green button that says 'Code' on that page.
Expand Down
124 changes: 124 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,128 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

header {
display: flex;
align-items: center;
justify-content: space-between;
height: 3.5rem;
padding: 0.5rem 6.5rem;
}
header a {
text-decoration: none;
padding: 10px;
color: gray;

}
.logo-img {
width: 1.5rem;
margin: 0 0.5rem;
padding: 0.7rem;
}

.IntrKarma {
background-image:url(/img/first-background.jpg);
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
height: 700px;
flex-direction: column;
position: relative;
margin: 0 40px 0 40px;
color: white;
font-size: 1.5rem;
}

.IntrKarma h1 {
font-weight: lighter;

}

.IntrKarma p {
font-weight: lighter;
}

.IntrKarma button {
background-color: orange;
border: none;
border-radius: 0.2rem;
height: 2.5rem;
font-size: 1rem;
padding: 0 1.5rem;
margin-top: 2.8rem;
}



.top-flex-container {
display: flex;
flex-direction: column;
padding-top: 70px;
padding-bottom: 50px;
}

.flex-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 1.2rem;

}

.icons {
width: 7rem;
}

.icons-text {
display: flex;
flex-direction: column;
justify-content: space-around;




}

.top-flex-container h2 {
justify-content: center;
align-self: center;
font-weight: lighter;
font-size: 2rem;
}

.footer-content {
display: flex;
flex-direction: column;
justify-content: space-around;
border-top: 1px solid lightgrey;
padding: 1rem;
margin: 1rem 4rem;
}

.footer-content span {
align-self: center;
}

.social-media {
display: flex;
flex-direction: row;
justify-content: center;

}

.social-media img{

width: 1rem;
border: solid 1px lightgrey;
border-radius: 50px;
margin: 10px;
padding: 8px;
}

.footer-inc {
color: gray;
}


51 changes: 46 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,51 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</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>
<img class="logo-img" src="img/karma-logo.svg" alt="karma-logo">
<nav class="topnav">
<a href="Karma">Meet Karma</a>
<a href="Howworks">How It Works</a>
<a href="Store">Store</a>
<a href="Blog">Blog</a>
<a href="Help">Help</a>
<a href="Login">Login</a>
</nav>
</header>

<main>
<div class="IntrKarma">
<h1>Introducing Karma</h1>
<p> Bring WiFi with you, everywhere you go.</p>
<button>Learn more</button>
</div>
<div class="top-flex-container">
<h2>Everyone needs a little Karma</h2>
<div class="flex-container">
<div class="icons-text">
<img src="img/icon-devices.svg" class="icons">
<p>Internet for all devices</p>
</div>
<div class="icons-text">
<img src="img/icon-coffee.svg" class="icons">
<p>Boost your productivity</p>
</div>
<div class="icons-text">
<img src="img/icon-refill.svg" class="icons">
<p>Pay As You Go</p>
</div>
</div>

</div>
</main>
<footer class="footer-content">
<span>Join us on</span>
<div class="social-media">
<img src="img/twitter-icon.svg">
<img src="img/facebook-icon.svg">
<img src="img/instagram-icon.svg">
</div>
<span class="footer-inc">@Karma Mobility Inc.</span>
</footer>
</body>
</html>