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

Huma H/C17/Sharks #100

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Huma H/C17/Sharks #100

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
abab163
created base design for about/index/portfolio.html
hhameed1 May 21, 2022
804bd5f
project validated
hhameed1 May 26, 2022
ab2aaa3
changed file roots
hhameed1 May 26, 2022
38a692e
changed files
hhameed1 May 26, 2022
5f6c9fd
files changed
hhameed1 May 26, 2022
0586448
css file change
hhameed1 May 26, 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
Binary file added images/mountain1.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/mountain2.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/swap-meet.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/tasklist-API.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/viewing-party.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.
25 changes: 25 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!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>
Copy link

Choose a reason for hiding this comment

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

Feel free to change this to something more descriptive since it'll show up in the tab of the browser

<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<nav>
<a href="index.html">HOME</a>
<a href="pages/about.html">ABOUT</a>
<a href="pages/portfolio.html">PORTFOLIO</a>
</nav>
<header>
<h1>Huma Hameed</h1>
<p>My journey to becoming a full stack software engineer.
</p>
Comment on lines +18 to +19
Copy link

Choose a reason for hiding this comment

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

Closing tag can live on line 18 with the opening tag and content

</header>
<footer>
"Copyright 2022" Huma Hameed "All rights reserved."
</footer>
</body>
</html>
21 changes: 20 additions & 1 deletion pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,27 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>

<nav>
<a href="../index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="portfolio.html">PORTFOLIO</a>
</nav>
<header>
<h1>About Me</h1>
<p>My journey to becoming a full stack software engineer.
</p>
Comment on lines +18 to +19
Copy link

Choose a reason for hiding this comment

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

Closing p tag can be on the same line as everything else here

</header>
<main>
<section><h3>Background</h3></section>
<section><h3>How it started</h3></section>
<section><h3>Education</h3></section>
<section><h3>Dreams</h3></section>
</main>
<footer>
"Copyright 2022" Huma Hameed "All rights reserved."
</footer>
</body>
</html>
12 changes: 0 additions & 12 deletions pages/index.html
View file
Open in desktop

This file was deleted.

37 changes: 35 additions & 2 deletions pages/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,41 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>

<nav>
<a href="../index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="portfolio.html">PORTFOLIO</a>
</nav>
<header>
<h1>Portfolio</h1>
<p>My journey to becoming a full stack software engineer.
</p>
</header>
<main class="container">
<section class="sec-container">
<a href="https://github.com/hhameed1/viewing-party">VIEWING PARTY</a>
<h3>A Python program to organize movies on your/friends watchlist</h3>
<img src="../images/viewing-party.jpg" alt="hand scrolling through stacked VHS videos" style="width:250px">
<cite>Photo by Lucas Pezeta: https://www.pexels.com/photo/assorted-title-movie-case-lot-2398354/</cite>
</section>
<section class="sec-container">
<a href="https://github.com/hhameed1/swap-meet">SWAP MEET</a>
<h3>This project utilizes object oriented programming, implementation of inheritance and tdd.</h3>
<img src="../images/swap-meet.jpg" alt="variety of items in a thrift store" style="width:250px">
<cite>Photo by Roman Kraft: https://unsplash.com/photos/ChSJFIAEoRM</cite>
</section>
<section class="sec-container">
<a href="https://github.com/hhameed1/task-list-api">TASK LIST API</a>
<h3>An API project that used SQL, Flask, external APIs and TDD.</h3>
<img src="../images/tasklist-API.jpg" alt="checklist of items in a book" style="width:250px">
<cite>Photo by Polina Kovaleva: https://www.pexels.com/photo/white-notebook-on-the-table-5717425/</cite>
</section>
Comment on lines +22 to +39
Copy link

Choose a reason for hiding this comment

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

Another way you might see this HTML written is with an unordered list and each section element would be nested in a list item

<ul>
  <li>
    <section class="sec-container">
      <a href="https://github.com/hhameed1/viewing-party">VIEWING PARTY</a>
      <h3>A Python program to organize movies on your/friends watchlist</h3>
      <img src="../images/viewing-party.jpg" alt="hand scrolling through stacked VHS videos" style="width:250px">
      <cite>Photo by Lucas Pezeta: https://www.pexels.com/photo/assorted-title-movie-case-lot-2398354/</cite>
    </section>
  </li>
</ul>

</main>
<footer>
"Copyright 2022" Huma Hameed "All rights reserved."
</footer>
</body>
</html>
</html>
69 changes: 69 additions & 0 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
html {
font-family: Palatino, Verdana;
background-image: url(../images/mountain1.jpeg);
background-size: cover;
}

nav{
display: grid;
height: 10vh;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
justify-items: center;
color: #1b0672;
background-color: rgba(224, 217, 204, 0.735);
}

header {
padding-top: 0%;
text-align: center;
justify-content: center;
margin-top: 5em;
color: #814105;
}

img {
border: 1px solid rgb(119, 75, 13);
border-radius: 4px;
padding: 5px;
width: 150px;
}

img:hover {
box-shadow: 0 0 4px 4px rgba(6, 95, 125, 0.956);
}

section {
display: grid;
justify-content: center;
text-align: center;
row-gap: 5vw;
padding: 5vw;
margin: 2%;
background-color: rgba(224, 217, 204, 0.33);
}

footer {
padding-top: 70%;
padding-bottom: 20%;
text-align: center;
justify-content: center;
color: white;
}

.container {
width: 50vw;
height: 100vh;
display: grid;
grid-template: 2fr 2fr 2fr/ 1fr 1fr 1fr 1fr;
align-items: center;
}

.sec-container {
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
margin: 20px;
align-items: center;
}