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

Daniel carter week 2 website #81

Show file tree
Hide file tree
Changes from 9 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 number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
130 changes: 128 additions & 2 deletions week2/2-website/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff 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,131 @@ 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;
border-bottom: 1px solid black;
position: fixed;
}

#karma-logo {
margin-left: 50px;
float: left;
height: auto;
width: auto;
max-height: 50px;
max-width: 50px;
}

/* Section 1 Style */

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

#introducingKarma {
background-image: url("/2-website/img/first-background.jpg");
Copy link

@Codeama Codeama Jun 8, 2020

Choose a reason for hiding this comment

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

Update the path to "../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;
}

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

#learnMore:hover {
background-color: orangered;
}

/* Section 2 Style */

#everyoneNeedsKarma {
margin-left: 30%;
display: flex;
width: 650px;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}

/* Footer Style */

#iconContainer {
display: flex;
justify-content: center;
}

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

.iconBorder {
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;
}
57 changes: 53 additions & 4 deletions week2/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Expand All @@ -8,14 +9,62 @@
<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="stylesheet" href="/2-website/css/style.css">
Copy link

@Codeama Codeama Jun 8, 2020

Choose a reason for hiding this comment

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

Update this to: "./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">
Copy link

@Codeama Codeama Jun 8, 2020

Choose a reason for hiding this comment

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

Same as above.

<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="introducingKarma">
<h1>Introducing Karma</h1>
<h2>Bring WiFi with you, everywhere you go.</h2>
<button id="learnMore">Learn More</button>
</section>
<section id="everyoneNeedsKarma">
<h1>Everyone needs a little Karma.</h1>
<img id="device" src="img/icon-devices.svg" alt="device logo">
<img id="coffee" src="img/icon-coffee.svg" alt="coffee logo">
<img id="refill" src="img/icon-refill.svg" alt="device logo">
Copy link

@Codeama Codeama Jun 8, 2020

Choose a reason for hiding this comment

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

And these too as suggested above.

<h2>Internet for all devices</h2>
<h2>Boost your productivity</h2>
<h2>Pay as you go</h2>
</section>
<footer>
<hr>
<h2>Join us on</h2>
<div id="iconContainer">
<div class="iconBorder">
<i class="fa fa-twitter" style="font-size:20px;color:lightblue;" aria-hidden="true"></i>
</div>
<div class="iconBorder">
<i class="fa fa-facebook" style="font-size:20px;color:blue;" aria-hidden="true"></i>
</div>
<div class="iconBorder">
<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>