Skip to content

Carets- Julia Meier - Static Website #40

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

Carets- Julia Meier - Static Website #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5dd403f
initial setup
julmeier Sep 17, 2017
5d77e05
completed first draft of home page, created outline and content for p…
julmeier Sep 17, 2017
a3bb23b
changed fonts, finished general formatting on portfolio page
julmeier Sep 18, 2017
883f5e7
completed primary requirements for four pages
julmeier Sep 18, 2017
e0a8670
formatting including fixing hover settings
julmeier Sep 18, 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
58 changes: 58 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Julia Meier - About Me</title>
<link REL=StyleSheet HREF="stylesheets/normalize.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="stylesheets/styles.css" TYPE="text/css" MEDIA=screen>
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee+Inline|Bungee+Shade|Faster+One|Miltonian|Ribeye+Marrow" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Biryani:800|Bungee|Bungee+Inline|Montserrat+Alternates:700|Open+Sans:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Harmattan|Julius+Sans+One|Lekton|Linden+Hill|Pavanam|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body class="about-me">
<header>
<h1><a href="index.html">Julia Meier</a></h1>
<nav>
<ul>
<li><a href="portfolio.html">Codery<a/></li>
<li><a href="hobby-blog.html">Hobby Blog<a/></li>
<li><a href="about.html">About Me<a/></li>
Copy link

@tildeee tildeee Oct 5, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

oh no! you incorrectly closed all of these links in almost all of the pages. You typed <a/> instead of </a> so it's producing some funky HTML

<!-- <li><i class="fa fa-facebook"></i></li> -->
</ul>
</nav>
</header>

<section class="introduction">
<span>
<img class="about-me-photo" src="images/me-bees2.jpg">
</span>
<div class="about-me-text">
<h2>I care about a lot of things!</h2>
<ul>
<li>coding</li>
<li>beekeeping</li>
<li>the next season of Stranger Things</li>
<li>social justice</li>
<li>renewable energy, specifically wind energy</li>
<li>telling people they have something on their face</li>
<li>cross-country skiing</li>
<li>helping people overcome their fear of water (n.b. 30% of the U.S. population has this fear) </li>
<li>experimental iron chef cooking (which doesn't always work out well...)</li>
<li>helping things grow (plants, sprouts, kombucha, cats, etc.)
</li>
<li>making lists</li>
</ul>
</div>
</section>
<footer>
<ul>
<li><i class="em em-some-emoji"></i>julia.meier@gmail.com
</li>
</ul>
</footer>

</body>
</html>
53 changes: 53 additions & 0 deletions hobby-blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Julia Meier - Hobby Blog</title>
<link REL=StyleSheet HREF="stylesheets/normalize.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="stylesheets/styles.css" TYPE="text/css" MEDIA=screen>
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee+Inline|Bungee+Shade|Faster+One|Miltonian|Ribeye+Marrow" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Biryani:800|Bungee|Bungee+Inline|Montserrat+Alternates:700|Open+Sans:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Harmattan|Julius+Sans+One|Lekton|Linden+Hill|Pavanam|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<header>
<h1><a href="index.html">Julia Meier</a></h1>
<nav>
<ul>
<li><a href="portfolio.html">Codery<a/></li>
<li><a href="hobby-blog.html">Hobby Blog<a/></li>
<li><a href="about.html">About Me<a/></li>
</ul>
</nav>
</header>

<body>
Copy link

@tildeee tildeee Oct 5, 2017

Choose a reason for hiding this comment

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

not how the <body> tag works: actually represents the idea of HTML that isn't the meta data (which goes in the tag)

Read more here: http://www.htmldog.com/references/html/tags/body/

You make this error in a few of the pages

<section class ="project-posts-and-hobbies-container">
<h1 class=page-heading>What's Been On My Mind Lately</h1>

<div class="project BeePostMay15">
<img class="projectimage BeePostMay15-image" src="images/multiple-eggs.jpg" alt="laying-workers-evidence"/>
Copy link

@tildeee tildeee Oct 5, 2017

Choose a reason for hiding this comment

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

convention for class names is the hyphenate them, so it's like "project-image"

<!-- <caption>
This cat deserves her own website.
</caption> -->
<div class="project-info">
<h2 class="projectname" <a href="#">Hive Check-in: The New Queen Lives!</a></h2>
<h3 class="technology">Topic(s): beekeeping</h3>
<h3 class="projectdate">Posted: May 15, 2017</h3>
<p class="projectdescription">
<a href="http://beecityusa.blogspot.com/2017/05/the-new-white-queen-lives-april-29th.html">The white hive was in deep trouble. It became extremely clear to us two weeks ago (April 29th) that our white hive queen was quite dead, and probably had died soon after we installed her on April 16th. What gave it away? Well, many signs - mostly in comparison to the blue hive. The first hint was that the activity level outside the white hive was much lower than the blue - a lot fewer bees coming in and out...(click to continue).</a>
</p>
</div>
</div>

</section>
</body>
<footer>
<ul>
<li><i class="em em-some-emoji"></i>julia.meier@gmail.com
</li>
</ul>
</footer>
</html>
Binary file added images/Arrow_Left_black.png
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/arrow.png
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/banana.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/headshot1.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/headshot2.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/hotel.jpeg
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/me-bees.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/me-bees2.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/meowspace.png
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/multiple-eggs.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/ppt_images.pptx
View file
Open in desktop
Binary file not shown.
Binary file added images/scrabble.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/tropical-leaves.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.
45 changes: 45 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Julia Meier - Home</title>
<link REL=StyleSheet HREF="stylesheets/normalize.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="stylesheets/styles.css" TYPE="text/css" MEDIA=screen>
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee+Inline|Bungee+Shade|Faster+One|Miltonian|Ribeye+Marrow" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Biryani:800|Bungee|Bungee+Inline|Montserrat+Alternates:700|Open+Sans:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Harmattan|Julius+Sans+One|Lekton|Linden+Hill|Pavanam|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<page-container>
<header>
<h1><a href="index.html">Julia Meier</a></h1>
<nav>
<ul>
<li><a href="portfolio.html">Codery<a/></li>
<li><a href="hobby-blog.html">Hobby Blog<a/></li>
<li><a href="about.html">About Me<a/></li>
<!-- <li><i class="fa fa-facebook"></i></li> -->
</ul>
</nav>
</header>

<body>
<div class="arrow-headshot">
<img class="bananas" src="images/bananas.jpg"/>
Copy link

@tildeee tildeee Oct 5, 2017

Choose a reason for hiding this comment

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

Oh no! You linked to the file bananas.jpg here, when your file is named banana.jpg!

<img class="arrow" src="images/arrow.png" alt="arrow" >
<div class="diamond">
<img class= "headshot dia" src="images/headshot1.jpg" alt="headshot" >
</div>
</div>

</body>
<footer>
<ul>
<li><i class="em em-email"></i>julia.meier@gmail.com
</li>
</ul>
</footer>
</page-container>
</html>
76 changes: 76 additions & 0 deletions portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Julia Meier - Portfolio</title>
<link REL=StyleSheet HREF="stylesheets/normalize.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="stylesheets/styles.css" TYPE="text/css" MEDIA=screen>
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC|Bungee+Inline|Bungee+Shade|Faster+One|Miltonian|Ribeye+Marrow" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Biryani:800|Bungee|Bungee+Inline|Montserrat+Alternates:700|Open+Sans:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Harmattan|Julius+Sans+One|Lekton|Linden+Hill|Pavanam|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<header>
<h1><a href="index.html">Julia Meier</a></h1>
<nav>
<ul>
<li><a href="portfolio.html">Codery<a/></li>
<li><a href="hobby-blog.html">Hobby Blog<a/></li>
<li><a href="about.html">About Me<a/></li>
</ul>
</nav>
</header>

<body>
<section class ="project-posts-and-hobbies-container">
<h1 class=page-heading>Some Project Examples</h1>

<div class="project MeowspaceProject">
<img class="projectimage Meowspace-image" src="images/meowspace.png" alt="meowspace-screenshot"/>
<!-- <caption>
This cat deserves her own website.
</caption> -->
<div class="project-info">
<h2 class="projectname" <a href="#">Meowspace</a></h2>
<h3 class="technology">Technology: HTML, CSS</h3>
<h3 class="projectdate">September 2017</h3>
<p class="projectdescription">
In our grand introduction to the HTML/CSS world, our Ada teachers asked us to design our first webpage project: Meowspace. Of course, most of us used the opportunity to show off our cats as the kitty-celebrities we always knew they should be. To be frank, it was incredibly difficult! My first foray into (and dismay of) the "fiddlyness" of CSS...
</p>
</div>
</div>

<div class="project HotelProject">
<a class="projectimage Scrabble-image" alt="scrabble-screenshot" title="By Jordiferrer (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3AEl_Palace_Hotel_Barcelona.JPG"><img width="256" alt="El Palace Hotel Barcelona" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/El_Palace_Hotel_Barcelona.JPG/256px-El_Palace_Hotel_Barcelona.JPG"/></a>
<div class="project-info">
<h2 class="projectname"><a href="https://github.com/julmeier/hotel">Hotel</a></h2>
<h3 class="technology">Technology: Ruby, Minitest</h3>
<h3 class="projectdate">September 2017</h3>
<p class="projectdescription">
Our first six weeks of school culminated in this week-long project to design a hotel backend reservation system using TDD and object-oriented design principles. Based on the user stories provided, I designed classes and methods that keep track of which rooms are reserved when.
</p>
</div>
</div>

<div class="project ScrabbleProject">
<img class="projectimage Scrabble-image" alt="scrabble-screenshot" src="images/scrabble.jpg" href="https://www.flickr.com/photos/30478819@N08/31421007673/" title="Creative Commons Attribution 2.0"</a>
<div class="project-info">
<h2 class="projectname"><a href="https://github.com/julmeier/Scrabble">Scrabble</a></h2>
<h3 class="technology">Technology: Ruby, Minitest</h3>
<h3 class="projectdate">September 2017</h3>
<p class="projectdescription">
For this in-class project, I practiced pair programming with my fantastic fellow student Christiane. We used Test Driven Development (TDD) to create a collection of Ruby classes that would provide the foundation for creating a scrabble game.
</p>
</div>

</section>
</body>
<footer>
<ul>
<li><i class="em em-some-emoji"></i>julia.meier@gmail.com
</li>
</ul>
</footer>
</html>
Loading