Skip to content

Html css/week2/berhane #1

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

Html css/week2/berhane #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
df597a6
index file update
bireworld May 22, 2020
c52aa70
html update
bireworld May 22, 2020
b5ffa1c
add comment
bireworld May 22, 2020
520b8bd
index update
bireworld May 23, 2020
1ca5fbf
index update
bireworld May 24, 2020
c6e37ca
style update
bireworld May 24, 2020
8dabe81
final style update
bireworld May 24, 2020
3514b7e
final html update
bireworld May 24, 2020
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
240 changes: 239 additions & 1 deletion week2/2-website/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,247 @@

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

html{
height: 100%;
width: 100%;
}
body {
width: 100%;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;

}
/* flexbox*/
.parent {
background-color: #ffffff;
margin: 0;
padding: 30px;
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

padding here is causing a weird offset.
Although I see that it seems to fix something else - maybe we'll take a look at debugging this in the session later as these things can be frustrating to find the root cause

height:100%;
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

I don't think this height 100% is necessary.
Let the content dictate the height of your website :)

width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content:center;

}
.header {

width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content:center;
border-bottom: 1px solid #DDD;

}
.header .logo{
margin-right: 150px;
width: 40px;
height: 40px;

}
.nav .nav-menu {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content:center;
text-decoration: none;
color: #838994

}
.nav-menu li.active {
color: #2c2e31;
font-weight: 500;
}

.top_content {
/* background-color: #f800db;*/
background-image: url(../img/first-background.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
height: 500px;
width: 100%;
margin: inherit;
padding: inherit;
display: flex;
justify-content: center;

}
.top_content_container{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;

}
.top_content h1{

color: white;
text-align: center;
font-family: inherit;




}
.top_content h3{
/*padding-left: 12.5rem;*/
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

It's good practice to remove any commented / unnecessary code before submitting a PR.

color: white;
text-align: center;
font-weight: 300;




}
.top_content .btn{
/*padding-left: 12.5rem;*/
color: white;
text-align: center;
margin-top: 1.563rem;
}
button{

width: 9.688rem;
background-color: #f15a29;
border-color: #f15a29;
text-shadow: none;
border-style: none;
border-radius: 4px;
padding: 1rem 1.5rem;
color: white;
font-size: 1.125rem;

}
.bottom_content{
display: flex;
flex-direction: column;
align-items: center;
justify-content:center;
width: 100%;


}
.bottom_content h2{
font-size: 2.75rem;
margin: 1.625rem 0 3.125rem;
font-weight: 100;

}
.case{
display: flex;
flex-direction: row;
align-items: center;
justify-content:center;
width: 100%;
list-style: none;
}
.case_list{
padding: 40px;
margin: 40px;

}
.caption{

text-align: center;
font-size: 1.563rem;
}
.caption h5{
text-align: center;
padding: 10px;
}
ul .case_list .caption {
/*background-color: lightcoral;*/
display: block;

width: 100%;


}
hr{
width: 100%;
}
.footer {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;

}
.footer h5{
text-align: center;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.icons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 20px;
margin: 20px;
border: 0;

}
ul{
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

In general - if the value is 0 we don't specify px
zero is zero :)

Suggested change
margin-inline-end: 0px;
margin-inline-end: 0;

padding-inline-start: 40px;

}
li{
list-style: none;
padding: 10px;


}
.footer .icons > li {
border-radius: 1.25rem;
width: 2.5rem;
height: 2.5rem;
display: inline-block;
margin: 1.25rem 5px;
border: 1px solid #eaebec;
padding: 0.625rem 0;
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

Some problems with the shape of these icons.
To get a circle shape the border-radius must be 50%
Also - you are adding vertical padding but no horizontal padding. I would remove the padding altogether and use flexbox to position the icons.

    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    /* display: inline-block; */
    margin: 1.25rem 5px;
    border: 1px solid #eaebec;
    /* padding: 0.625rem 0; */
    /* text-align: center; */

text-align: center;
}
.footer .twitter {
color: #55acee;
}
.footer .facebook {
color: #4c66a4;
}
.footer .instagram{
color: #3f729b;
}
.fa {
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

In general I would be trying to stay away from editing 3rd party classes...
Although it looks like this was done with purpose... lets chat about it later :)

display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/****Media Queries****/



@media only screen and (min-width:400){
.nav .nav-menu {
height: 200px;
flex-direction: column;
}
.header .logo{
margin: 0;
}
}

/**
Expand Down
115 changes: 108 additions & 7 deletions week2/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<!------Head and Title-->
<head>
<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='//fonts.googleapis.com/css?family=Roboto:400' 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">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<!-- Navigation content -->
<div class="parent">

<header class="header">

<img class="logo" src="img/karma-logo.svg" alt="karma-logo">


<div class="nav">
<ul class="nav-menu">

<li class="active">Meet Karma</li>
<li class="item">How it Works</li>
<li class="item">Store</li>
<li class="item">Blog</li>
<li class="item">Help</li>
<li class="item">Login</li>
</ul>
</div>

</header>



<!-- Main body content -->
<div class="top_content">
<div class="top_content_container">
<h1>Introducing Karma</h1>
<h3>Bring Wifi with you, everywhere you go.</h3>
<div class="btn"><button>Learn More</button></div>
</div>

</div>
<div class="bottom_content">

<h2>Everyone needs a little karma.</h2>
<ul class="case">
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

ul elements direct children should ALWAYS be li
You can have divs within the li but should always be

<ul>
  <li>
    ...anything you like
  </li>
  <li>
    ...anything you like
  </li>
  <li>
    ...anything you like
  </li>
</ul>

I actually think it may be this that is causing the whitespace on the right of the webpage

<div>
<li class="case_list"><img width="127" height="127" src="img/icon-devices.svg"
alt="Internet for all devices image"></li>
<div class="caption">
<h5>Internet for all devices</h5>
</div>
</div>
<div>
<li class="case_list"><img width="127" height="127" src="img/icon-coffee.svg"
alt="Boost your productivity image"></li>
<div class="caption">
<h5>Boost your productivity</h5>
</div>
</div>

<div>
<li class="case_list"><img width="127" height="127" src="img/icon-refill.svg"
alt="Pay as You Go image">
</li>
<div class="caption">
<h5>Pay as you go</h5>
</div>
</div>

</ul>


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

</div>

<!-- Footer content -->
<hr>

<div class="footer">


<div>
<h5>Join us on</h5>
</div>



<ul class="icons">
<li class="twitter">
<i class="fa fa-twitter"></i>
</li>
<li class="facebook">
<i class="fa fa-facebook"></i>
</li>
<li class="instagram">
<i class="fa fa-instagram"></i>
</li>
</ul>




<!--div><ul class="icons">
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

remove commented code :)

<li class="twitter"></li><i class="fa fa-twitter"></i>
<li class="facebook"></li><i class="fa fa-facebook"></i>
<li class="instagram"></li><i class="fa fa-instagram"></i>
</ul></div-->

<div> © Karma Mobility, Inc.</div>

</div>
</div>
</body>
</html>

</html>
Copy link
Copy Markdown

@Rody-Kirwan Rody-Kirwan Jun 4, 2020

Choose a reason for hiding this comment

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

FYI
Formatting and indentation could be improved throughout this file.
Sometimes it is easier to create large spaces between elements as you are developing - but you should remove these before you submit your work as it is quite difficult to read