Skip to content

Harley statum day2 #1146

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

Harley statum day2 #1146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33e4c54
completed all tasks
KethlasX May 23, 2023
dfb7c56
completed all tasks
KethlasX Jun 12, 2023
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
24 changes: 12 additions & 12 deletions ReadMe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,23 @@ Portfolio websites are a great way to show off your work to friends, family, and

Follow these steps to set up and work on your project:

- [ ] Fork and clone this repository.
- [ ] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
- [ ] DO NOT MAKE A BRANCH! You will be pushing to main/master today.
- [ ] cd into your repository on the command line and use code . to open VS Code.
- [ ] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
- [ ] Complete your work making regular commits; your submitted URL will always reflect your most recent work.
- [x] Fork and clone this repository.
- [x] Go into Canvas and connect your repository by copy-pasting its Github URL into the submission slot.
- [x] DO NOT MAKE A BRANCH! You will be pushing to main/master today.
- [x] cd into your repository on the command line and use code . to open VS Code.
- [x] Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
- [x] Complete your work making regular commits; your submitted URL will always reflect your most recent work.

### Task 2: Minimum Viable Product

Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements:

- [ ] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
- [ ] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
- [ ] Information about you in place of the given placeholder
- [ ] A `My Projects` button that links to the projects page
- [ ] A `Contact Me` button that links to the contact page
- [ ] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page
- [x] A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
- [x] Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you
- [x] Information about you in place of the given placeholder
- [x] A `My Projects` button that links to the projects page
- [x] A `Contact Me` button that links to the contact page
- [x] Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page

### Task 3: Stretch Goals

Expand Down
37 changes: 34 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,42 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style/index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Lora:wght@400;700&display=swap" rel="stylesheet">

<title>HMS Production</title>
</head>
<body>

<section class="tophalf">
<h1>Harley Statum</h1>
<nav>
<button><a href="index.html">Home</a></button>
<button><a href="about.html">About</a></button>
<button><a href="contact.html">Contact</a></button>
<button><a href="projects.html">Projects</a></button>
</nav>
<h1>My latest projects...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae semper quis lectus nulla at volutpat. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Libero nunc consequat interdum varius sit amet mattis. Cras pulvinar mattis nunc sed blandit. Sed augue lacus viverra vitae congue. Enim sit amet venenatis urna cursus. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Tincidunt nunc pulvinar sapien et ligula. Neque egestas congue quisque egestas. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Vitae semper quis lectus nulla at volutpat.</p>
</section>
<section class="bg-img">

</section>
<section class="row">
<img src="https://picsum.photos/200/400" alt="rando pic">
<img src="https://picsum.photos/200/400" alt="rando pic">
<img src="https://picsum.photos/200/400" alt="rando pic">
<img src="https://picsum.photos/200/400" alt="rando pic">
<div class="desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae semper quis lectus nulla at volutpat. Mattis ullamcorper velit sed ullamcorper morbi tincidunt.</p>
</div>
</section>
<footer>
<button><a href="contact.html">Contact Me</a></button>
</footer>
</body>
</html>
</html>
143 changes: 142 additions & 1 deletion style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,142 @@
/* Add CSS styling here */

/* color pallete:
442b48 - dark purp
b8b3e9 - light purp
ffd485 - yellow
76d4f9 - blue
adf7b6 - green*/

/* lorem ipsum:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae semper quis lectus nulla at volutpat. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Libero nunc consequat interdum varius sit amet mattis. Cras pulvinar mattis nunc sed blandit. Sed augue lacus viverra vitae congue. Enim sit amet venenatis urna cursus. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Tincidunt nunc pulvinar sapien et ligula. Neque egestas congue quisque egestas. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Vitae semper quis lectus nulla at volutpat.*/

* {
box-sizing: border-box;
padding: 0;
margin: 0;
max-width: 100%;
border: 1px solid grey;
}

html {
font-size: 62.5%;
}

body {
font-size: 1.6rem;
line-height: 1.5;
}

section {
padding: 4% 0;
}

.tophalf {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background-color: #ffd485;
width: 80%;
margin: 0 auto;
}

.bg-img {
background-image: url('https://t4.ftcdn.net/jpg/02/18/89/83/360_F_218898398_wnLuoR9GY4qhLB2tc7o3tSJbQCRfq0xc.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 50vh;
}

h1, h2 {
margin: 2% 0;
}

h1 {
font-family: 'Dancing Script', cursive;
font-size: 4rem;
}

h2 {
font-size: 3.5rem;
}

p {
font-family: 'Lora', serif;
font-size: 1.5rem;
}

footer {
background-color: #b8b3e9;
text-align: center;
padding: 25px;
}

button {
background-color: #76d4f9;
color: #442b48;
border: black solid 1px;
padding: 5px 10px;
font-size: 20px;
}

button:hover {
background-color: #442b48;
color: #76d4f9;
border: black solid 1px;
}

button a{
text-decoration: none;
color: inherit;
}

.row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 20px;
background-color: #ffd485;
}

.desc {
width: 200px;
text-align: center;
padding: 20px;
}

@media(max-width: 800px) {
.row {
flex-wrap: wrap;
}

.row img {
width: 20%;
}

.row div {
width: 100%;
}
}

@media(max-width: 500px) {
.links {
display: flex;
flex-direction: column;
align-items: center;
}

.links button {
width: 40%;
margin: 3% 0;
}

.row {
flex-wrap: wrap;
}

.row img {
width: 40%;
margin: 4% 0;
}
}