Skip to content

Queues - Marisol Lopez - Static Site #46

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

Queues - Marisol Lopez - Static Site #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a4f79bd
added framework for folders
marisol-lopez Mar 17, 2017
aafb009
Navigation bar styled and added to top
marisol-lopez Mar 20, 2017
6d585dd
added nav bar to each page
marisol-lopez Mar 20, 2017
c1abc86
created main section and added to each html file
marisol-lopez Mar 20, 2017
12590af
added footer to bottom of each page
marisol-lopez Mar 20, 2017
0188cd0
final commit of working personal site
marisol-lopez Mar 20, 2017
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
41 changes: 41 additions & 0 deletions html/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marisol Lopez Personal Page</title>
<link href="../stylesheets/styles.css" rel="stylesheet">
<link href="../stylesheets/normalize.css" rel="stylesheet">
</head>

<body>
<header>
<h1><a class="home-button" href="index.html"> Marisol Lopez </a></h1>

<nav>
<ul class="nav-bar">
<li class="nav-link"><a href="about.html">ABOUT</a></li>
<li class="nav-link"><a href="portfolio.html">PROJECTS</a></li>
<li class="nav-link"><a href="code-journal.html">BLOG</a></li>
</ul>
</nav>
</header>

<main>
<section class ="main-section">
<h2>ABOUT MARISOL</h2>
<div>
<p>Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor hodor - hodor; hodor hodor hodor? Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor? Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor hodor - hodor; hodor hodor hodor? Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor? Hodor hodor HODOR! Hodor hodor... Hodor hodor hodor. Hodor hodor HODOR! Hodor hodor, hodor. Hodor hodor - hodor - hodor hodor! Hodor hodor - hodor; hodor hodor hodor? Hodor hodor HODOR! Hodor HODOR hodor, hodor hodor?</p>
</div>
</section>

Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Look out for extra white spaces.


</main>

<section class="footer">
<footer>
&copy; 2017 Marisol Lopez
</footer>
</section>

</body>
</html>
48 changes: 48 additions & 0 deletions html/code-journal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BLOG</title>
<link href="../stylesheets/styles.css" rel="stylesheet">
<link href="../stylesheets/normalize.css" rel="stylesheet">
</head>
<body>
<header>
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Good use of header! :)

<h1><a class="home-button" href="index.html"> Marisol Lopez </a></h1>

<nav>
<ul class="nav-bar">
<li class="nav-link"><a href="about.html">ABOUT</a></li>
<li class="nav-link"><a href="portfolio.html">PROJECTS</a></li>
<li class="nav-link"><a href="code-journal.html">BLOG</a></li>
</ul>
</nav>
</header>

<main>
<section class ="main-section">
<h2>BLOG</h2>
<div class="blog">
<p>
Topgallant square-rigged transom Privateer yardarm fire ship boom chandler wherry Blimey. Lanyard quarterdeck to go on account tender hogshead lugsail fire ship Spanish Main draft run a rig. Fire ship bowsprit Arr coffer topsail sheet fire in the hole gabion keel Barbary Coast. </p>
</div>
<div class="blog">
<p>
Me bilge water red ensign case shot mizzenmast pirate black spot tender ho grapple. Interloper chandler pillage no prey, no pay lookout haul wind belay Barbary Coast boatswain mizzen. Avast wherry jolly boat maroon boatswain clap of thunder cable lookout poop deck ahoy.

</p>
</div>

</section>


</main>

Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Is the use of section appropriate here? I might also use a element to wrap the copyright. (https://developers.facebook.com/docs/instant-articles/reference/footer)

<section class="footer">
<footer>
&copy; 2017 Marisol Lopez
</footer>
</section>

</body>
</html>
40 changes: 40 additions & 0 deletions html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marisol Lopez Personal Page</title>
<link href="../stylesheets/styles.css" rel="stylesheet">
<link href="../stylesheets/normalize.css" rel="stylesheet">
</head>

<body>
<header>
<h1><a class="home-button" href="index.html"> Marisol Lopez </a></h1>

<nav>
<ul class="nav-bar">
<li class="nav-link"><a href="about.html">ABOUT</a></li>
<li class="nav-link"><a href="portfolio.html">PROJECTS</a></li>
<li class="nav-link"><a href="code-journal.html">BLOG</a></li>
</ul>
</nav>
</header>

<main>
<article class="home-page">
<p>
Hey, welcome to my website.<br> Please feel free to use the links in the header<br> if you would like to know more about <a href="about.html">me</a>, my<a href="portfolio.html"> portfolio</a>, or <a href="code-journal.html">blog</a>.
</p>
</article>


</main>

<section class="footer">
<footer>
&copy; 2017 Marisol Lopez
</footer>
</section>

</body>
</html>
39 changes: 39 additions & 0 deletions html/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PROJECTS</title>
<link href="../stylesheets/styles.css" rel="stylesheet">
<link href="../stylesheets/normalize.css" rel="stylesheet">
</head>
<body>
<header>
<h1><a class="home-button" href="index.html"> Marisol Lopez<br> </a></h1>
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Look out for spaces between a tags.


<nav>
<ul class="nav-bar">
<li class="nav-link"><a href="about.html">ABOUT</a></li>
<li class="nav-link"><a href="portfolio.html">PROJECTS</a></li>
<li class="nav-link"><a href="code-journal.html">BLOG</a></li>
</ul>
</nav>
</header>

<main>
<section class ="main-section">
<h2>PROJECTS</h2>
<div class="project-images">
<a href="https://github.com/marisol-lopez/Random-Menu"><img src="../images/menu.jpg"></a>
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Don't forget alt.

<a href="https://github.com/marisol-lopez/Calculator"><img src="../images/calculator.jpg"></a><a href="#"></a>
<a href="https://github.com/marisol-lopez/Word-Guess"><img src="../images/hangman.jpg"></a>
</div>
</section>
</main>
<section class="footer">
<footer>
&copy; 2017 Marisol Lopez
</footer>
</section>

</body>
</html>
Binary file added images/calculator.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/hangman.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/menu.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file added stylesheets/normalize.css
View file
Open in desktop
Empty file.
137 changes: 137 additions & 0 deletions stylesheets/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
* {
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Good use of universal selector!

font-family: "Helvetica Neue";
}

/*****Navigation bar at top of page*****/
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Good job on separating code by including comments!

header {
border: 1px solid;
width: 100%;
top: 0px;
position: fixed;
display: flex;
justify-content: space-between;
background-color: white;
}

nav,
h1 {
margin: 0.67em;

}

nav {
margin-top: 1em;
}

.nav-bar{
padding: 0;
}

.nav-link{
list-style-type: none;
display: inline;
padding: 10px;
color: black;
}
.nav-link a{
color: black;
text-decoration: none;
}

.nav-link a:hover{
color: pink;
}

.home-button {
color: black;
text-decoration: none;
}

.home-button:hover {
color: pink;
}

/*******Body*******/

body {
padding-top: 100px;
margin: 0px;
}
/*****Section******/

.main-section {
border-bottom: 1px solid;
width: 100%;
height: 300px;
padding-bottom: 110px;
}

.main-section h2 {
width: 20%;
/*background-color: red;*/
margin-left: 5%;
/*border: solid;*/
font-size: 4rem;
text-align: center;
margin-top: 130px;
}

section div {
width: 50%;
/*background-color: yellow;*/
margin-right: 5%;
/*border: solid;*/
margin-left: 17%;
/*float: right;
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Unused CSS be sure to remove them :).

clear: both;*/
}

.blog {
width: 50%;
/*background-color: yellow;*/
/*margin-right: 5%;*/
/*border: solid;*/
/*margin-left: 17%;*/
float: right;
clear: both;
}

section h2,
section div{
display: inline-block;
}

.project-images {
margin-top: 60px;
}

.project-images img {
border-radius: 100%;
padding: 5px;
}

/******Footer******/
.footer {
position: fixed;
bottom: 10px;
width: 100%;
display: block;
}

.home-page {
font-size: 40px;
font-family: "Arial Narrow", Arial, sans-serif;
text-align: center;
padding-top: 100px;
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Could you have written this(paddings) in one line instead? (https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_shorthand)

padding-bottom: 70px;
border-bottom: 1px solid;
}

.home-page a {
text-decoration: none;
color: black;
}

.home-page a:hover {
Copy link
Copy Markdown

@beylulkbreab beylulkbreab Apr 4, 2017

Choose a reason for hiding this comment

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

Great use of hover! The color pink is used in few places. You might be able to to dry it.

color: pink;
}