Skip to content
This repository was archived by the owner on Oct 26, 2020. It is now read-only.

Html css/week2/nouri #67

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Html css/week2/nouri #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c1fb707
tick flexfroggy exercise as done
nouri89 May 17, 2020
e5b72c7
update html
nouri89 May 17, 2020
bc4672b
add an <a> to html
nouri89 May 18, 2020
c44fef6
update css
nouri89 May 18, 2020
7b755e8
update html
nouri89 May 19, 2020
43724ce
update css
nouri89 May 19, 2020
b23efc1
final html code
nouri89 May 23, 2020
fbe8aca
a further update
nouri89 May 23, 2020
5e510ce
update css
nouri89 May 23, 2020
9656c0e
update html
nouri89 May 29, 2020
8a5860a
update css
nouri89 May 29, 2020
c6ba8d0
Final update
nouri89 Jun 2, 2020
833fdb1
Final CSS update
nouri89 Jun 2, 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
2 changes: 1 addition & 1 deletion week2/1-flexbox-froggy/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ Flexbox Froggy is a really fun way of learning how Flexbox works.

You should complete all the levels

https://flexboxfroggy.com/
https://flexboxfroggy.com/ Done
253 changes: 240 additions & 13 deletions week2/2-website/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,246 @@
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
* {
padding: 0;
margin: 0;
}
body,
html {
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
}
/* Style the header and the navigation bar*/
.header {
position: fixed;
display: flex;
width: 100%;
height: 10%;
justify-content: center;
align-items: center;
text-align: center;
background-color: white;
}

.logo {
width: 40%;
height: 50%;
}

nav > ul {
font-weight: lighter;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 50px;
border: 50px;
min-height: 20%;
flex-wrap: nowrap;
list-style: none;
}

nav a {
text-decoration: none;
color: rgb(121, 116, 116);
font-weight: 400;
font-size: 1.3rem;
}
.nav-link1 {
color: rgb(31, 30, 30);
font-weight: 600;
}

nav a:hover {
font-weight: bold;
color: black;
}

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

body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
nav > ul {
width: 35vw;
font-weight: lighter;
display: flex;
flex-direction: row;
justify-content: space-between;
}

/**
* 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'
*/
a {
text-decoration: none;
}

/* Style the hero page including the main photo */

.hero {
display: flex;
flex-direction: column;

min-width: 100%;
min-height: 100%;
}

.hero-content {
background: url(../img/first-background.jpg) no-repeat;
padding: 16%;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
}

h1 {
font-weight: 300;
font-size: 4rem;
}
.hero h2 {
font-weight: 200;
font-size: 2rem;
padding-bottom: 30px;
border-bottom: 20px;
}
button {
font-weight: lighter;
font-size: 300%;
line-height: 50%;
}

button {
background: rgb(238, 88, 34);
border-radius: 5px;
border: none;
font-size: 20px;
height: 55px;
width: 140px;
height: 54px;
}

button:hover {
background: rgb(247, 68, 3);
border: none;
}
/* Style the icons section */
.icons {
width: 100%;
}
.iconSection {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#sectionHeader {
text-align: center;
font-weight: lighter;
width: 100%;
}

#sectionHeader h2 {
font-weight: lighter;
font-size: 320%;
padding: 5%;
}

.icons {
margin-bottom: 8%;
}
.listicons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.listicons > li {
width: 25%;
height: 25%;
text-align: center;
list-style: none;
}
.listicons {
display: flex;
justify-content: space-around;
width: 58%;
margin: auto;
}

#iconImage {
width: 9rem;
height: 9rem;
padding-left: 10%;
}

.cap {
width: 22rem;
height: 6rem;
}

.listicons h4 {
width: 120%;
font-weight: 400;
font-size: 190%;
text-align: center;
padding: 10% 0;


}
/* Style the footer*/

.footer {
display: flex;
flex-direction: column;
align-items: center;
}

hr {
font-weight: lighter;
width: 70%;
color: rgb(251, 251, 251);
}

.footer ul {
display: flex;
flex-direction: row;
}

.footer a {
font-size: 1.2rem;
border: 0.1rem solid rgb(218, 218, 243);
border: 5 rem;
border-radius: 5em;
padding: 50%;
}

#twitter {
color: rgb(110, 110, 253);
}
#facebook {
padding: 90%;
border-radius: 6em;
color: rgb(75, 75, 253);
}
#instagram {
padding: 60%;
color: rgb(75, 75, 253);
}
.footerIcons {
width: 10%;
height: 15%;
justify-content: space-around;
list-style: none;
}

h5 {
font-size: 130%;
font-weight: 400;
padding: 2%;
}

span {
color: #6d6b6b;
padding: 2%;
font-size: 120%;
}
101 changes: 83 additions & 18 deletions week2/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,86 @@
<!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='//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">
</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 -->

</body>
<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="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<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">
</head>
<body>
<header class="header">

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

<nav id="nav-bar">
<ul>
<li><a class="nav-link1" href=#meet-Karma>Meet Karma</a></li>
<li><a href=#How-it-Works>How it Works</a></li>
<li><a href=#Store>Store</a></li>
<li><a href=#Blog>Blog</a></li>
<li><a href=#Help>Help</a></li>
<li><a href=#Login>Login</a></li>
</ul>
</nav>
</header>
<div class ="hero">
<div class="hero-content">
<h1>Introducing Karma </h1>
<h2>Bring WiFi with you, everywhere you go.</h2>
<Button >Learn More</Button>
</div>
</div>
<section class="iconSection">
<div id="sectionHeader">
<h2>
Everyone needs a little Karma.
</h2>
</div>
<div class="icons" >
<ul class="listicons" >
<li>
<img src="img/icon-devices.svg" id="iconImage" alt="icon for devices">

<h4>Internet for all devices</h4>

</li>
<li>
<img src="img/icon-coffee.svg" id="iconImage" alt="Icon for cup of coffee">

<h4>Boost your productivity</h4>

</li>
<li>
<img src="img/icon-refill.svg" id="iconImage" alt="icon for refill">

<h4>Pay as you go</h4>

</li>
</ul>
</div>
</div>
</section>

<footer class="footer">
<hr>
<h5>Join us on</h5>

<ul class="footerIcons">
<li >
<a href="" class="fa fa-twitter" id="twitter"></a>
</li>
<li >
<a href=""class="fa fa-facebook" id="facebook"></a>
</li>
<li >
<a href="" class="fa fa-instagram" id="instagram"></a>
</li>
</ul>

<span>© Karma Mobility, Inc.</span>
</footer>
</body>
</html>