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

Daniel carter week 2 website#81

Open
carterd888 wants to merge 13 commits into
base:master
Choose a base branch
from
+212 −9
Open

Daniel carter week 2 website #81

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
f43624e
added nav bar html + css
carterd888 May 17, 2020
9de90b4
added intro section html + css
carterd888 May 18, 2020
d1459c6
minor changes
carterd888 May 19, 2020
ac25625
added html and css for everyone needs karma section
carterd888 May 19, 2020
1ff0eb8
added footer html + css
carterd888 May 19, 2020
1f519e7
structured CSS page with comments
carterd888 May 19, 2020
306a370
made some changes to CSS to demonstrate coding for blog
carterd888 May 21, 2020
de2d905
added test comment
carterd888 Jun 7, 2020
2123753
added testing comment
carterd888 Jun 7, 2020
fcc59e3
updated links
carterd888 Jun 8, 2020
cc4598a
changed naming convention from camel case to hyphens
carterd888 Jun 8, 2020
0ce26fe
added divs around everyone needs karma section to try and improve it
carterd888 Jun 8, 2020
87947c1
updated nav bar and logo
carterd888 Jun 8, 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
3 changes: 3 additions & 0 deletions week2/.vscode/settings.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
147 changes: 145 additions & 2 deletions week2/2-website/css/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@

/* 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 */

body {
font-family: 'Roboto', sans-serif;
Expand All@@ -16,4 +15,148 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

/* General Styles */

h1 {
font-size: 3em;
font-weight: lighter;
}

h2 {
font-weight: lighter;
}

/* Nav Bar */

nav {
display: flex;
color: gray;
}

nav ul {
text-decoration: none;
list-style: none;

}

nav ul li {
display: inline;
padding: 5px;
margin: 5px;
}

nav ul li:first-child {

font-weight: bold;
}

nav ul li:hover {

color: black;
}

.navigation-container {
background-color: white;
width: 100%;
text-align: center;
align-items: center;
border-bottom: 1px solid black;
position: fixed;
padding-top: 15px;
}

#karma-logo {
margin-left: 20%;
float: left;
height: auto;
width: auto;
padding: 15px;
max-height: 40px;
max-width: 50px;
}

/* Section 1 Style */

#first-background {
width: 100%;
height: auto;
}

#introducing-karma {
background-image: url("../img/first-background.jpg");
max-width: 100%;
height: auto;
background-repeat: no-repeat;
color: white;
padding-top: 50px;
text-align: center;
padding: 270px 0;
font-family: 'Roboto', sans-serif;
}

#learn-more {
background-color: rgb(255, 81, 0);
color: white;
box-shadow: none;
border: 0px;
padding: 10px 20px 10px 20px;
border-radius: 5px;
}

#learn-more:hover {
background-color: orangered;
}

/* Section 2 Style */

#everyone-needs-karma {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 50%;
margin-right: auto;
margin-left: auto;
}

.karma-flexbox-1 {
width: 100%;
align-self: center;
justify-self: center;
}

.karma-flexbox-2 {
width: 20%;
align-self: center;
justify-self: center;
padding: 5%;
}


/* Footer Style */

#icon-container {
display: flex;
justify-content: center;
}

#icon-container i {
margin: 5px;
padding-top: 5px;
}

.icon-border {
margin: 5px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 40px;
border: 1px solid lightgrey;
}

footer {
text-align: center;
font-size: 10px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
71 changes: 64 additions & 7 deletions week2/2-website/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,78 @@
<!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">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href="http://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="stylesheet" href="./css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
</head>
<body>

<body>
<!-- header>nav>ul>(li>a)*6 -->
<header>
<nav>
<div class="navigation-container">
<img id="karma-logo" src="./img/karma-logo.svg" alt="karma logo">
<ul>
<li><a href="#"></a>Meet Karma</li>
<li><a href="#"></a>How it Works</li>
<li><a href="#"></a>Store</li>
<li><a href="#"></a>Blog</li>
<li><a href="#"></a>Help</li>
<li><a href="#"></a>Login</li>
</ul>
</div>
</nav>
</header>
<section id="introducing-karma">
<h1>Introducing Karma</h1>
<h2>Bring WiFi with you, everywhere you go.</h2>
<button id="learn-more">Learn More</button>
</section>
<section id="everyone-needs-karma">
<div class="karma-flexbox-1">
<h1>Everyone needs a little Karma.</h1>
</div>
<div class="karma-flexbox-2">
<img id="device" src="./img/icon-devices.svg" alt="device logo">
<h2>Internet for all devices</h2>
</div>
<div class="karma-flexbox-2">
<img id="coffee" src="./img/icon-coffee.svg" alt="coffee logo">
<h2>Boost your productivity</h2>
</div>
<div class="karma-flexbox-2">
<img id="refill" src="./img/icon-refill.svg" alt="device logo">
<h2>Pay as you go</h2>
</div>
</section>
<footer>
<hr>
<h2>Join us on</h2>
<div id="icon-container">
<div class="icon-border">
<i class="fa fa-twitter" style="font-size:20px;color:lightblue;" aria-hidden="true"></i>
</div>
<div class="icon-border">
<i class="fa fa-facebook" style="font-size:20px;color:blue;" aria-hidden="true"></i>
</div>
<div class="icon-border">
<i class="fa fa-instagram" style="font-size:20px;color:darkblue;" aria-hidden="true"></i>
</div>
</div>
<h2> &copy; Karma Mobility, Inc.</h2>
</footer>
<!-- 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>
</html>
<!-- Test Comment-->

</html>