Skip to content

Cape Town Adeline_Boka-HTML/CSS-WEEK2 #157

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

Cape Town Adeline_Boka-HTML/CSS-WEEK2 #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2fe9658
Update index.html
bigbaby01 Jan 15, 2021
bdbd554
Update style.css
bigbaby01 Jan 15, 2021
8065844
Merge branch 'master' of https://github.com/bigbaby01/HTML-CSS-Course…
bigbaby01 Jan 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
267 changes: 251 additions & 16 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,254 @@

/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

body {
font-family: 'Roboto', sans-serif;
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'
*/

margin: 0;
padding: 0;
font-size: 1.4vw;
}

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

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* nav bars section */
.menu_list {
width: 100%;
height: 80px;
}
img[alt="karma-logo"] {
width: 26px;
margin: 1em 2em;
}
.menu_list ul {
float: right;
margin-right: 3em;
}
.menu_list > ul li {
display: inline-block;
line-height: 80px;
text-decoration-line: none;
list-style: none;
margin: 0 5px;
}
.menu_list ul li a {
padding-right: 0.7em;
text-transform: capitalize;
color: gray;
text-decoration-line: none;
}
.menu_list li:first-child {
font-weight: bold;
}
.menu_list a:hover {
color: orangered;
transition: 0.5s;
}
/* bar icon font awesome */
.ba_icon {
margin-top: 23px;
margin-right: 19px;
font-size: 4em;
color: orangered;
float: right;
cursor: pointer;
display: none;
}
#responsive_bar {
display: none;
}
/* introduction section karma */
.hero_style {
background-image: url(../img/first-background.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 35em;
line-height: 4em;
}
.introducing_Kama {
color: white;
width: auto;
padding-top: 14%;
display: flex;
flex-direction: column;
align-items: center;
}
.introducing_Kama p {
font-size: 3.5em;
text-transform: capitalize;
width: 40%;
text-align: center;
font-family: inherit;
}
.introducing_Kama .second {
font-size: 1.2em;
text-transform: none;
}

.introducing_Kama button {
padding: 0.8rem;
background-color: orangered;
border: none;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
margin-top: 1.3em;
line-height: normal;
}
.introducing_Kama button:hover {
background-color: orange;
font-weight: bold;
transition: 0.5s;
}
/* features section */
.features {
width: 100%;
}
.description {
min-width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
}
.description div {
padding: 2.4em;
}
.images img {
width: 52%;
}
.imagesrefill img {
width: 80%;
}
header h1 {
text-align: center;
font-size: 2em;
font-weight: 100;
}
.images p,
.imagesrefill p {
font-size: 1.2em;
}

hr {
width: 70%;
margin: auto;
}

/* footer of the page */
footer {
text-align: center;
margin-bottom: 4em;
}
.social_icon img {
max-width: 3%;
border: 1px solid lightgray;
border-radius: 50%;
padding: 0.4em;
margin-right: 0.5em;
}
footer p {
padding: 1em;
}
footer div + p {
color: lightgray;
text-transform: capitalize;
}
/* bars icon */
.bars_icon {
float: right;
margin: 1em;
}
.bars_icon .fas {
font-size: 28px;
color: orangered;
cursor: pointer;
line-height: 70px;
display: none;
}

/* responsiveness */
@media (max-width: 952px) {
.logo {
font-size: 30px;
padding-left: 50px;
}
.menu_list ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.ba_icon {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: orange;
top: 80px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
.menu_list ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
.menu_list ul li a {
font-size: 20px;
}
#responsive_bar:checked ~ ul {
left: 0;
}
.introducing_Kama {
padding-top: 0em;
}
.introducing_Kama p {
font-size: 4em;
line-height: 1.1em;
margin-top: 1em;
}
.introducing_Kama button {
padding: 0.8em;
font-size: 0.7rem;
}
.introducing_Kama .second {
font-size: 2.6em;
line-height: 1.2em;
}
/* features section */
header h1 {
font-size: 4em;
width: 54%;
margin: auto;
}
.imagesrefill img {
width: 54%;
}
.images p,
.imagesrefill p {
font-size: 2.6em;
}
/* footer */
footer p {
font-size: 2.6em;
}
.social_icon img {
max-width: 7%;
}
}


93 changes: 83 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,92 @@
<!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">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Karma</title>
<link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<!-- Add a link to your CSS file here (use the line above to guide you) -->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</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 -->
<!-- Add your HTML markup here -->
<main>
<nav class="menu_list">
<input type="checkbox" id="responsive_bar">
<label for="responsive_bar" class="ba_icon">
<i class="fas fa-bars"></i>
</label>
<!-- logo -->
<picture>
<img src="img/karma-logo.svg" alt="karma-logo" />
</picture>
<ul>
<li><a href="#" title="meet Kama">meet kama</a></li>
<li><a href="#" title="how it work">how it works</a></li>
<li><a href="#" title="stores">stores</a></li>
<li><a href="#" title="blog">blog</a></li>
<li><a href="#" title="help">help</a></li>
<li><a href="#" title="login">log in</a></li>
</ul>
</nav>
<!-- introduction -->
<section class="hero_style">
<div class="introducing_Kama">
<p>introducing kama <br /></p>
<p class="second">Bring wi-fi with you, everywhere you go</p>
<button type="button">learn more</button>
</div>
</section>
<!-- features section -->
<section class="features">
<header>
<h1>Everyone need a little karma</h1>
</header>
<div class="description">
<div class="images">
<picture>
<img src="img/icon-devices.svg" alt="icon-devices" />
</picture>
<p>Internet for all devices </p>
</div>
<div class="images">
<picture>
<img src="img/icon-coffee.svg" alt="icon-coffee" />
</picture>
<p>Boost your productivity</p>
</div>
<div class="imagesrefill">
<picture>
<img src="img/icon-refill.svg" alt="icon-refill" />
</picture>
<p> Pay as you go</p>
</div>
</div>
</section>
<hr />
</main>

<!-- footer of the page -->
<footer>
<p>Join us on</p>
<div class="social_icon">
<a href="#"><img src="img/twitter-icon.svg" alt="twitter-icon" /></a>
<a href="#"><img src="img/facebook-icon.svg" alt="facebook-icon" /></a>
<a href="#"><img src="img/instagram-icon.svg" alt="instagram-icon." /></a>
</div>
<p>&copy; karma mobility inc</p>
</footer>

<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<!-- All the images you need are in the 'img' folder -->

</body>

</html>