Skip to content

finishing karma project #209

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
samiadrabeea wants to merge 1 commit into from
Closed

finishing karma project #209

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
195 changes: 194 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

body {
font-family: 'Roboto', sans-serif;
font-family: sans-serif,'Roboto' ;
-webkit-font-smoothing: antialiased;

}

/**
Expand All @@ -16,4 +17,196 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

/*start css header code*/
.header{
margin:10px;
height: 50px;
width:auto;
padding: 30px;
margin-top: 0;
}

.header-img{
max-height:50px;
width: 50px;
vertical-align:top;
}

/*start css flex-box code*/
.flex-container {
display: flex;
justify-content: space-between;
align-items:center ;
vertical-align:top;
top:0;
}

/*start css nav-bar code*/
.nav-bar{
display: flex;
flex-wrap:wrap;
justify-content: space-between;
align-items:center ;
padding-bottom: 10px;
}

.nav-ul{
display: flex;
align-items:center ;
list-style-type: none;
}

/*start css link code*/
.nav-link {
display: block;
margin:20px;
float:left;
list-style:none;
list-style-type:none;

}
.nav-link:hover{
color:rgb(247, 7, 7);
}

/*end css menu-hamburger code*/
.hamburger {
display: none ;
}

/*start css introduce-section code*/
.introduce{
top:30px;
margin-top: 30px;
background: url("../img/first-background.jpg");
background-repeat: no-repeat;
background-size:cover;
background-position: center;
height: 300px;
padding: 100px 5%;
color:rgb(250, 248, 245);
display: flex;
justify-content: center;
}

.introduce-container{

width: 400px;
margin:30px ;
padding: 50px;
max-width: 400px;
border-radius:50px;
text-align: center;
}
.introduce-container button{
background-color: chocolate;
padding: 10px;
margin: 10px;
}

.introduce-container button:hover{
background-color: rgb(151, 65, 3);
}

.introduce-container h1{
font-size: 40px;
}

/*start css need-section code*/

.need h2{
text-align: center;
margin-top:50px;
padding:10px ;
}
.need-container{
display:flex;
justify-content: center;
margin: 0px;
padding: 0px;

}
.need-container img{
width:100px;
}
.need-container div{
display: block;
text-align: center;
margin: 20px;
}
.need-container a:hover{
color: red;
}

/*start css contact-section code*/
.contact{
display: flex;
justify-content: center;
padding: 10px;
}
.contact-img{
width:30px;
height:30px;
}

a{
color:black;
text-decoration: none;
}

/*start css footer code*/
footer{
font-size:10px;
color:darkgray;
margin: 20px;
text-align: center;
padding: 10px;
}

/*start css @media for Mobile screen code*/
@media screen and (min-width:300px) and (max-width:700px){

p,
h2
{
word-wrap:normal;
}
.nav-ul{
flex-direction: column;
display: none;
width: 100%;
}

.nav-ul.show{
display: flex;
}

.hamburger {
display: block;
border:0;
cursor: pointer;
font-size: 30px;
}

.need-container {

display: flex;
flex-direction: column;
margin: 30px;
align-items:center;
height: 500px;
padding: 20px;
}

.need-container div{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
padding: 20px;
margin: 20px;
}

}


96 changes: 93 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,109 @@

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

<!DOCTYPE html>
<html lang="en">
<!--start head -->
<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="javascript" href="../HTML-CSS-Coursework-Week2/script.js">
<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>
<!--start body -->
<body>
<header class="header">
<div class="flex-container">
<div> <!--start header image -->
<img class="header-img"
src="../HTML-CSS-Coursework-Week2/img/karma-logo.svg"
alt="Karma header images" />
</div>

<!-- 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 -->
<!--start nav-bar in the header-->
<div>
<button class="hamburger" id="hamburger" > <!--menu_hamburger for small screen-->
<img src="img/menu-hamburger.svg" alt="menu icon" />
</button >
<nav id="nav-bar">
<ul class="nav-ul">
<li><a class="nav-link" href="#">Meet Karma</a></li>
<li><a class="nav-link" href="#">How it Warks</a></li>
<li><a class="nav-link" href="#">Store</a></li>
<li><a class="nav-link" href="#">Blog</a></li>
<li><a class="nav-link" href="#">Help</a></li>
<li><a class="nav-link" href="#">login</a></li>
</ul>

</nav>
</div>
</div>
</header>

<!--start introduce section-->
<section class="introduce">
<div class="introduce-container">
<h1>Introducing Karma </h1>
<p>Bring WiFi with you ,everywher you go</p>
<button>Learn More</button>
</div>
</section>

<!--start need section-->
<section class="need">
<h2>Everyone needs a little Karma .</h2>
<div class="need-container">

<div>
<img src="../HTML-CSS-Coursework-Week2/img/icon-devices.svg"
alt="devices-image"/>
<a href="" target="_blank">Internit for all devices.</a>
</div>
<div>
<img src="../HTML-CSS-Coursework-Week2/img/icon-coffee.svg"
alt="devices-image"/>
<a href="" target="_blank">Boost your broductivity.</a>
</div>
<div>
<img src="../HTML-CSS-Coursework-Week2/img/icon-refill.svg"
alt="devices-image"/>
<a href="" target="_blank">Pay as You Go.</a>
</div>
</div>
</section>

<!--start footer-->
<footer>
<hr/>
<p style="color: black;font-size: small;"> Join US on </p>

<section class="contact">

<div>
<a href="" target="_blank">
<img class="contact-img" alt="Twitter icon" src="../HTML-CSS-Coursework-Week2/img/twitter-icon.svg" /> </a>
</div>
<div>
<a href="" target="_blank">
<img class="contact-img" alt="Facebook icon" src="../HTML-CSS-Coursework-Week2/img/facebook-icon.svg" /> </a>
</div>
<div>
<a href="" target="_blank">
<img class="contact-img" alt="instagram icon" src="../HTML-CSS-Coursework-Week2/img/instagram-icon.svg" /> </a>
</div>

</section>

<span>@ Karma Mobilety.Inc</span>
</footer>

</body>
</html>
6 changes: 6 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
const hamburger=document.getElementById('hamburger');
const navUL=document.getElementById('nav-ul');

hamburger.addEventListener('click',() => {
navUL.classList.toggle('show');
});