From 33e4c54379e1f6ecfcd7e7afb0a58bc526df9a25 Mon Sep 17 00:00:00 2001 From: Harley Statum Date: Tue, 23 May 2023 12:58:05 -0400 Subject: [PATCH 1/2] completed all tasks --- ReadMe.md | 24 ++++++++--------- index.html | 35 ++++++++++++++++++++++--- style/index.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 111 insertions(+), 16 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index 81b445e03..fec9d5c79 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -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 diff --git a/index.html b/index.html index d01f779ff..ec828a3dd 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,40 @@ + - Document + + + + + + HMS Production - +
+

Harley Statum

+ +

My latest projects...

+

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.

+ rando pic +
+
+ rando pic + rando pic + rando pic + rando pic +
+

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.

+
+
+ - \ No newline at end of file + diff --git a/style/index.css b/style/index.css index 440e53514..9b9194884 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,67 @@ -/* Add CSS styling here */ \ No newline at end of file + +/* 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.*/ + + .tophalf { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + background-color: #ffd485; + } + + h1 { + font-family: 'Dancing Script', cursive; + font-size: 3rem; + } + + 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; + } From dfb7c56dc025ccddbcf4f166e50e3bc216126ed9 Mon Sep 17 00:00:00 2001 From: Harley Statum Date: Mon, 12 Jun 2023 11:14:10 -0400 Subject: [PATCH 2/2] completed all tasks --- index.html | 4 ++- style/index.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 79 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ec828a3dd..b4fff836f 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,9 @@

Harley Statum

My latest projects...

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.

- rando pic + +
+
rando pic diff --git a/style/index.css b/style/index.css index 9b9194884..f44059759 100644 --- a/style/index.css +++ b/style/index.css @@ -9,17 +9,56 @@ /* 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: 3rem; + font-size: 4rem; + } + + h2 { + font-size: 3.5rem; } p { @@ -65,3 +104,39 @@ 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; + } + } \ No newline at end of file