Skip to content

london-class-7/ramla-jama #143

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
ramla199 wants to merge 1 commit into from
+225 −6
Closed

london-class-7/ramla-jama #143

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
165 changes: 165 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,169 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

nav {
display: flex;
justify-content: space-around;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
justify-content: space-around;
justify-content: space-between;

align-items: center;
height: 40px;
margin: 30px;
padding: 0 40px;
}
.logo {
width: 40px;
height: 30px;
}

.menu-burger {
visibility: hidden;
}

ul {
list-style-type: none;
}

.nav-wrapper {
display: flex;
flex-direction :row;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

by default flex direction is flex row

Suggested change
flex-direction :row;

flex-wrap : nowrap;
justify-content:flex-end;
align-items:flex-start;
align-content:space-between;
Comment on lines +43 to +46

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
flex-wrap : nowrap;
justify-content:flex-end;
align-items:flex-start;
align-content:space-between;
flex-wrap : nowrap;
justify-content:flex-end;
align-items:flex-start;
align-content:space-between;

Do you need these? What will happen if we don't have them?

}

.nav-items {
color: gray;
font-size: 15px;
font-weight: 450;
text-decoration: none;
margin-right: 25px;
}

.nav-items:hover {
color: rgb(224, 103, 22);
}


main {
margin: 40px 0 30px 0;
}

h1, h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 0;
}

h2 {
text-align: center;
padding: 30px 0;
}

#info {
background: url("../img/first-background.jpg") center;
padding: 25px;
background-size: cover;
background-repeat: no-repeat;
background-size: 90% 100%;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
background-size: 90% 100%;

color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 50vh;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
height: 50vh;
height: 100vh;

}

button {
background: rgb(231, 105, 21);
width: 100px;
height: 35px;
border-radius: 5px;
border-style: none;
margin-top: 30px;
}


#store-wrapper {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

do we need this?

Suggested change
flex-wrap: wrap;
flex-wrap: wrap;

margin: 20px;

}

div {
text-align: center;
width: 250px;
}

#store-wrapper > div > img {
width: 80px;
}

#store-wrapper > p {
font-size: 12px;
}


hr {
border-top-style: none;
width: 80vw;
}


footer {
display:flex;
height: 100px;
text-align: center;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
text-align: center;

padding: 10px 0 10px 0;
flex-direction:column;
flex-wrap:nowrap;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
flex-wrap:nowrap;

justify-content:center;
align-items:center;
align-content:space-between;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
align-content:space-between;

}

.footer-text {
font-weight: 300;
font-size: 15px;
}
Comment on lines +142 to +145

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
.footer-text {
font-weight: 300;
font-size: 15px;
}
.footer-text {
font-weight: 300;
font-size: 15px;
}

Did you have this class name in your HTML :)


.blog-container {
display: flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
align-content:space-between;
justify-content: center;
list-style-type: none;
Comment on lines +147 to +155

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
.blog-container {
display: flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
align-items:center;
align-content:space-between;
justify-content: center;
list-style-type: none;
.blog-container {
display: flex;
align-items:center;

}

.blog-item {
margin: 20px;
position: relative;

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
position: relative;
position: relative;

Do we need this line?

}

.copy-write {
font-weight: 300;
font-size: 10px;
}

.blog-item::before {
position: absolute;
margin: 6px 0 0 -6px;
}


@media only screen and (max-width: 600px) {
.menu-burger {
visibility: visible;
display: block;
order: 1;
}
Comment on lines +178 to +179

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
order: 1;
}
order: 1;
margin-right: 120px;
}


.nav-items {
visibility: hidden;
}
}
Comment on lines +183 to +184

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
}
}
}
.nav-wrapper {
display: none;
}
nav {
padding: 0;
}
#info {
height: 60vh;
}
}

2 changes: 1 addition & 1 deletion img/instagram-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion img/twitter-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 58 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,69 @@
<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) -->
<!-- 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">
</head>
<body>
<header>
<nav>
<img class="logo" src="img/karma-logo.svg" alt="Karma Logo">
<a class="menu-burger" href="#"><img class="logo" src="img/menu-hamburger.svg" alt="menu Logo"></a>
<ul class="nav-wrapper">
<li><a class="nav-items" href="index.html">Meet Karma</a></li>
<li><a class="nav-items" href="#info">How it Works</a></li>
<li><a class="nav-items" href="#store-wrapper">Store</a></li>
<li><a class="nav-items" href="#blog-Wrapper">Blog</a></li>
<li><a class="nav-items" href="#">Help</a></li>
<li><a class="nav-items" href="#">Login</a></li>
</ul>

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change

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


Comment on lines +29 to +30

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change

</header>

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change

<main>

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change

<section id="info">
<h1>Introducing Karma</h1>
<p>Bring WIFI with you, everywhere you go.</p>
<button>Learn More</button>
</section>

<br>
<br>
<br>

Comment on lines +40 to +44

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
<br>
<br>
<br>

It is not a good practice to have
to achieve a styling goal. It is better to use CSS to do the styling

<h2>Everyone needs a little Karma.</h2>
<section id="store-wrapper">
<div>
<img src="img/icon-devices.svg" alt="devices icon">
<p >Internet for all devices</p>
</div>
<div>
<img src="img/icon-coffee.svg" alt="cup icon">
<p>Boost your productivity</p>
</div>
<div>
<img src="img/icon-refill.svg" alt="refill icon">
<p>Pay as You Go</p>
</div>
</section>
<hr>
</main>
<footer>
<p class="blog-text">Join us on</p>
<section id = "blog-Wrapper">
<ul class="blog-container">
<li><a class="blog-item" href="#"><img src="img/twitter-icon.svg" alt="twiter-icon"></a></li>
<li><a class="blog-item" href="#"><img src="img/instagram-icon.svg" alt="instagram-icon"></a></li>
<li><a class="blog-item" href="#"><img src="img/facebook-icon.svg" alt="facebook-icon"></a></li>
</ul>
</section>
<p class= "copy-write">&copy Karma Mobility, Inc.</p>
</footer>

@Behnazz Behnazz Dec 17, 2020

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change

</body>
</html>