Skip to content
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

Sharks - Philomena Kelly #29

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Sharks - Philomena Kelly #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4e887c
requirement is only 3 pages.
jericahuang May 18, 2022
8a1ed88
created basic structure for personal portfolio project
May 23, 2022
62569b6
added project placeholders and github link
May 23, 2022
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
2 changes: 1 addition & 1 deletion feedback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Appropriate Git Usage |
Answered comprehension questions |
Page fully loads |
No broken links (regular or images) |
Includes at least 4 pages and styling |
Includes at least 3 pages and styling |
**HTML** |
Uses the high-level tags for organization: `header, footer, main` |
Appropriately using semantic tags: `section, article`, etc. |
Expand Down
Binary file added images/bird.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/footer.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/itme.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/its-me.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/messy.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/pure-footer.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/site-runner.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.
31 changes: 26 additions & 5 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
Copy link
Contributor

Choose a reason for hiding this comment

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

👍 no validation errors!

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my cool portfolio</title>
<!-- Link to Style Sheet -->
<link href="/styles/main-style.css" rel="stylesheet" />
<link href="/styles/about-me-style.css" rel="stylesheet" />
</head>
<body>
<body>
<header>
<nav>

<a href="about.html">about me</a>
<a href="portfolio.html">portfolio</a>
<a href="index.html">home</a>

</nav>
</header>
<main>
<section class="name_container">
<img src="/images/its-me.jpg" alt="cute picture of me holding plants" class="about_me_image">

<div id="about_me_box"><p>Means, loosely, 25% 75%. Except that those percentage values are much more firm than fractional units are. For example, if you added padding to those percentage-based columns, now you’ve broken 100% width (assuming a content-box box model). Fractional units also much more friendly in combination with other units, as you can imagine:</p></div>
</section>

</main>
<footer><div class="bottom">(c) philomena</div></footer>
Copy link
Contributor

Choose a reason for hiding this comment

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

Careful with using div tags as a text container. They are used to divide collections of content.

Instead, let's use a p tag or other elements that are text-specific

</body>

</html>
34 changes: 28 additions & 6 deletions pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my cool portfolio</title>
<!-- Link to Style Sheet -->
<link href="/styles/main-style.css" rel="stylesheet" />
<link href="/styles/index-style.css" rel="stylesheet" />
</head>
<body>

<body>
<header>
<nav>

<a href="about.html">about me</a>
<a href="portfolio.html">portfolio</a>
<a href="index.html">home</a>

</nav>
</header>
<main>
<section class="name_container">
<div id="name_text"><h1>Philomena <br>Kelly</h1><i>Fullstack Software Development Student</i></div>
<div id="links"><a href="https://github.com/Philomena-Kelly">github</a>
<br>
</div>
Comment on lines +24 to +27
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's get rid of these surrounding div tags and style the h1 and a tags directly instead. We could surround the a tag with a p tag or change the styling so it is display: block

Copy link
Contributor

Choose a reason for hiding this comment

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

and let's get rid of br tags, too. We can use the styling of the surrounding elements instead. The section or div just above line 26 can be given some bottom margin.

</section>

</main>
<footer><div class="bottom">(c) philomena</div></footer>
</body>

</html>
37 changes: 31 additions & 6 deletions pages/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta charset="UTF-8">
Copy link
Contributor

Choose a reason for hiding this comment

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

👍 no validation errors!

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my cool portfolio</title>
<!-- Link to Style Sheet -->
<link href="/styles/main-style.css" rel="stylesheet" />
<link href="/styles/portfolio-style.css" rel="stylesheet" />
</head>
<body>

<body>
<header>
<nav>

<a href="about.html">about me</a>
<a href="portfolio.html">portfolio</a>
<a href="index.html">home</a>

</nav> <h1>my workio</h1>
</header>
<main>
<div id="container">


<div class="project"><h1>project</h1></div>
<div class="project"><h1>project</h1></div>
<div class="project"><h1>project</h1></div>


</div>
Comment on lines +23 to +31
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's make the div.container a section instead

Also there should only ever be one h1 per page, so perhaps h2 would be better here


</main>
<footer>(c) philomena</footer>
Copy link
Contributor

Choose a reason for hiding this comment

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

Oops, you are missing your styling class like the other pages

</body>

</html>
28 changes: 28 additions & 0 deletions styles/about-me-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

.name_container {
display: grid;
width: 700px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr ;
text-align: center;
margin: auto;
height: 100%;
}

.about_me_image {
height: 200px;
border-radius: 100%;
padding: 8px;
border: 3px solid white;
object-fit: cover;
/* object-position: 0% 10%; */
/* filter: hue-rotate(300deg); */
Comment on lines +18 to +19
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/* object-position: 0% 10%; */
/* filter: hue-rotate(300deg); */

grid-column: 1 / 2;
grid-row: 1 / 34;
}

#about_me_box {
grid-column: 2 / 5;
grid-row: 1 / 3;
padding: 25px;
}
67 changes: 67 additions & 0 deletions styles/index-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@


/* #hello {
background-color: lightpink;
top: 25%;
left: 0px;
position: absolute;
height: 50%;
width: 100%;
text-align: center;
} */

Comment on lines +1 to +12
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/* #hello {
background-color: lightpink;
top: 25%;
left: 0px;
position: absolute;
height: 50%;
width: 100%;
text-align: center;
} */

.name_container {
display: grid;
width: 700px;
/* background: grey; */
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/* background: grey; */

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr ;
text-align: center;
margin: auto;
height: 100%;
}

#name_text {

/* background-color: yellow; */
Comment on lines +25 to +26
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/* background-color: yellow; */

grid-column: 1 / 4;
grid-row: 1 / 4;
text-align: left;
padding: 10px;
color: white;
}

#name_text h1 {
line-height: 80%;
font-size: 50pt;
font-weight: lighter;
margin: 0px;
}

#links {
grid-row: 1/4;
grid-column: 3/4;
text-align: right;
color: white;
}

i {
margin-left: 25px;
}

/* nav {
text-align: right;
background: none;
padding: none;

}

nav a {
text-decoration: none;
font-size: 20pt;
font-weight: lighter;
background: white;
padding-left: 20px;
line-height: 125%;
color: black;
} */
Comment on lines +52 to +67
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
/* nav {
text-align: right;
background: none;
padding: none;
}
nav a {
text-decoration: none;
font-size: 20pt;
font-weight: lighter;
background: white;
padding-left: 20px;
line-height: 125%;
color: black;
} */

45 changes: 45 additions & 0 deletions styles/main-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@

body {
background: linear-gradient(to bottom, #FFCADD, white 190%) no-repeat fixed;
padding: none;
text-align: center;
font-family: Helvetica;
font-weight: lighter;
font-size: 14pt;
margin: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 150px 2fr 20px;
width: 100vw;
height: 100vh;
color: white;
}

main{
grid-row: 2 / 3;
}
header {
grid-row: 1 / 2;
}

nav {
text-align: left;
margin: 5px;
margin-left: 0px;

}

nav a {
font-size: 20pt;
text-decoration: none;
color: #FFCADD;
letter-spacing: .1em;
background-color: white;
padding: 5px;
}

footer {
text-align: right;
grid-row: 3/4;
padding-right: 10px;
}
19 changes: 19 additions & 0 deletions styles/portfolio-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:center;
align-items: center;
width: 80%;
margin: auto;
}



.project {
width: 250px;
height: 250px;
background-color: #f49cbb;
margin: 10px;
padding: 20px;
}