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

Html css/week2/adebola #66

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

Html css/week2/adebola #66

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
f706104
i made changes to my section
Ade0211 May 19, 2020
500238b
Adjusted images in my section
Ade0211 May 19, 2020
9b2312b
made adjustments to my nav-bar
Ade0211 May 20, 2020
7b4dda6
redesigned my header
Ade0211 May 20, 2020
013893d
media query and active link adjusted
Ade0211 May 21, 2020
f26487c
Media query issue
Ade0211 May 23, 2020
45767dc
adjusted my nav-bar
Ade0211 May 23, 2020
b92640c
indented my code
Ade0211 May 23, 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
4 changes: 2 additions & 2 deletions week2/2-website/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Karma-clone

The aim of this exercise is to create a page that looks just like this one: http://thinkful-ed.github.io/karma-clone/

The aim of this exercise is to create a page that looks just like this one:
http://thinkful-ed.github.io/karma-clone/
## Tasks

- Fork and clone this repo.
Expand Down
251 changes: 237 additions & 14 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,242 @@

/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
*{
padding: 0rem;
margin: 0rem;
}

body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
background-color: white;
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'
*/


.nav-bar{
background-color: #fff;
position: fixed;
width: 100%;

height: 4.375rem;
border-bottom: 1px solid #DDD;
z-index: 9999;

}

.img1 {
display: inline-block;
width: 1.5rem;
line-height: .5rem;
}

li {
margin-left: 2rem;
display: inline-block;
align-items: center;

}
.nav-link {
align-items: center;
padding: 1rem 0.938rem;
margin: 0 auto;
max-width: 35.5rem

}

.active a{
color: black;
}

a {

text-decoration: none;
color: grey;
}

a:hover {
color: black;
}

/* Background image and intext messages */
.top-image h1 {
margin-top: 17.5rem;
font-size: 3.125rem;
}
.top-image h1, h3 {
color: white;
text-align: center;
font-weight: 300;
}
.top-image {
background-image: url('../img/first-background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
height: 45.938rem;
overflow: hidden;
vertical-align: baseline;
box-sizing: border-box;
display: inline-block;
text-align: center;
align-items: flex-start;
}
.intext {
padding: 15rem .938rem;
margin: 0 auto;
min-width: 37.5rem;
}

.feeder h2 {
font-size: 2.75rem;
margin: 1.625rem 0 3.125rem;
font-weight: 300;
}
h1:first-child {
font-weight: lighter;
font-size: 3rem;
color: ivory;
margin-top: 2.5rem;
}
div>h2:first-child {
text-align: center;
padding-top: 1.875rem;
font-size: 2.81rem;
font-weight: lighter;
}
.intext >:nth-child(2) {
font-weight: lighter;
font-size: 1.6rem;
color: ivory;

}
/* button */

#button {
height: 3.4375rem;
width: 3rem;
min-width: 9rem;
border: black;
background-color:#F15A29;
margin-top: 0.625rem;
padding: 0.625rem;
border-radius: 0.3125rem;
}
/* Refill Devices Coffee and Assigned Text */
.items {
display: flex;
flex-direction: row;
justify-content: center;
padding-bottom: 0.9375rem;

}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 11rem;
padding-right: 1.5rem;
}

.caption {
display: flex;
font-size: 1rem;

}
.caption1 {
display: flex;
font-size: 1rem;

padding-right: .5rem;
}
.caption2 {
display: flex;

padding-right: 1rem;
font-size: 1rem;
}
span {
padding-top: 1.25rem;
padding-left: 0.625rem;
}
/* footer */


.footer{
margin-top: 1.875rem;
text-align: center;
}
hr {
margin-top: 1.25rem;
}
.footer-logo {
font-size: 1.5rem;
font-weight: lighter;
}

.footer-social-icons {
padding-bottom: 0.625rem;
color: #4c66a4;
}
.fa-twitter {
margin-left: 0.625rem;
background-color:whitesmoke;
padding: 0.625rem;
border-radius: 50%;
}

.fa-facebook {
margin-right: 0.125rem;
background-color:whitesmoke;
padding: 0.625rem;
border-radius: 50%;
}

.fa-instagram {
margin-right: 0.625rem;
background-color:whitesmoke;
padding: 1rem;
border: grey;
border-radius: 50%;
}

@media only screen and (max-width: 1200px) {
html{
font-size: 0.625rem;
}

.top-image {
width: 100%;
background-image: cover;
}
.items{
width: 100%;
}
.intext h1{
width:100%;
}
.nav-bar{
width: 100%;
}

}

@media only screen and (min-width: 1200px) {
html{
font-size: 1rem;
}

.top-image {
width: 100%;
background-image: cover;
}
.items{
width: 100%;
padding-left: 2rem;
}
.intext h1{
width:100%;
}


}
100 changes: 81 additions & 19 deletions week2/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,83 @@
<!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>
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<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>
<header>

<nav class="nav-bar">

<div class="container">

<ul class="nav-link">
<img class="img1" src="img/karma-logo.svg" alt="My pic" width="15">
<li class="active"><a href="#">Meet Karma</a></li>
<li class="link"><a href="#">How it Works</a></li>
<li class="link"><a href="#">Store </a></li>
<li class="link"><a href="#">Blog</a></li>
<li class="link"><a href="#">Help</a></li>
<li class="link"><a href="#">Login</a></li>
</ul>


</div>
</nav>

</header>
<main>
<section class="top-image">

<div class="intext">
<h1>Introducing Karma</h1>
<h3>Bring WiFi with you, everywhere you go.</h3>
<div class="learn-more">
<button id="button">Learn More</button>
</div>
</div>
</section>

<section class="feeder">
<div>
<h2>Everyone needs a little Karma.</h2>
</div>
<div class="items">
<div class="item">
<img src="img/icon-devices.svg"/>
<span class="caption">Internet for all devices</span>
</div>
<div class="item">
<img src="img/icon-coffee.svg"/>
<span class="caption1">Boost your production</span>
</div>
<div class="item">
<img src="img/icon-refill.svg"/>
<span class="caption2">Pay as you go</span>
</div>
</div>

</section>
</main>

<!-- 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 -->
<footer class="footer">
<hr>
<h2 class="footer-logo">Join us on</h2>

<div class="footer-social-icons">
<i id="icon1" class="fa fa-twitter" aria-hidden="true"></i>
<i id="icon2" class= " fa fa-facebook"></i>
<i id="icon3" class="fa fa-instagram"></i>
</div>
<p>© Karma Mobility, Inc.</p>
</footer>

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