From 2bfe394831a203d8ef0c3f4e59a08951590d814b Mon Sep 17 00:00:00 2001 From: Philip Florita Date: Thu, 6 Apr 2023 09:23:11 -0500 Subject: [PATCH 1/4] Finished html and css tasks and updated README.md files --- ReadMe.md | 24 +++--- Wireframe Options/ReadMe.md | 12 +-- index.html | 65 ++++++++++++++- style/index.css | 155 +++++++++++++++++++++++++++++++++++- 4 files changed, 236 insertions(+), 20 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/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md index 2bf501338..e9d7d0788 100644 --- a/Wireframe Options/ReadMe.md +++ b/Wireframe Options/ReadMe.md @@ -2,11 +2,11 @@ From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include: -- [ ] A navigation bar with `About`, `Projects`, and `Contact` 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 (doesn't need to be functional) -- [ ] A `Contact Me` button (doesn't need to be functional) -- [ ] Link navigation items to new HTML pages +- [x] A navigation bar with `About`, `Projects`, and `Contact` 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 (doesn't need to be functional) +- [x] A `Contact Me` button (doesn't need to be functional) +- [x] Link navigation items to new HTML pages Some choices are easier than others, pick something that feels right to you. \ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..a749dfe20 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,71 @@ Document + - +
+

Philip Angelo Florita

+ +
+ +
+
+ random photos +
+
+

Philip Angelo Florita

+ My Projects +

+ I am a student at the University of the Philippines Diliman. I am currently taking up BS Computer Science. I am a web developer and a graphic designer. I am also a part time photographer. +

+
+
+ +
+
+
+ 1st image + Information Website +
+
+ 2nd image + Event Website +
+
+ 3rd image + Results Calculator +
+
+ 4th image + Portfolio Page +
+
+ 5th image + Product Display +
+
+ 6th image + Ticket Booking +
+
+ 7th image + Music Website +
+
+ 8th image + E-voting System +
+
+
+ + \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..aa367c7da 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,154 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ + +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + /* border: 0; */ + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Header */ + +* { + box-sizing: border-box; + border: 1px solid black; +} + +body { + font-size: 16px; + font-family: 'Courier New', Courier, monospace; +} + +h1 { + font-size: 3rem; + padding: 1rem; + font-weight: bold; +} + +nav{ + display: flex; + align-items: center; + padding: 1rem; + font-size: 1.5rem; +} + +.about { + margin-left: 1rem; + background-color: red; + color: white; +} + +.projects { + margin-left: 1rem; + background-color: green; + color: white; +} + +.contact { + margin-left: 1rem; + background-color: blue; + color: white;} +a { + padding: 0.5rem 1rem; + text-decoration: none; +} + +.main-content { + display: flex; + align-items: center; + padding: 1rem; +} + +.img1 { + height: 50vh; + width: 75vh; +} + +.projects { + margin: 0 2rem; +} + +.greetings h2{ + font-size: 3rem; +} + +.greetings { + font-size: 1.2rem; + line-height: 3; + padding: 0 4rem; +} + +.img-container{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9{ + height: 40vh; + width: 40vh; + margin: 0rem; +} + +footer { + text-align: center; + padding: 1rem; + font-size: 1.5rem; + line-height: 2; +} + +.contact-footer { + background-color: blue; + color: white; +} + +.proj { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 2%; + font-size: 1.3rem; + color: black; +} \ No newline at end of file From 021ef6d2fe1b6dc4810a095b1de34f7ed757fe22 Mon Sep 17 00:00:00 2001 From: Philip Florita Date: Thu, 6 Apr 2023 09:32:38 -0500 Subject: [PATCH 2/4] Updated CSS --- style/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index aa367c7da..b0b6f3ae5 100644 --- a/style/index.css +++ b/style/index.css @@ -20,7 +20,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - /* border: 0; */ + border: 0; font-size: 100%; font: inherit; vertical-align: baseline; From 1a1b5f5aed66d8bcf874d6a74f2c2c21fbd34dfb Mon Sep 17 00:00:00 2001 From: Philip Florita Date: Thu, 6 Apr 2023 19:06:05 -0500 Subject: [PATCH 3/4] Updated html and css --- index.html | 174 ++++++++++++++++++++++++++++++++++- style/index.css | 238 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 406 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index a749dfe20..8ce9b3a38 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,176 @@ Document +
@@ -17,8 +187,8 @@

Philip Angelo Florita

-
- random photos +
+ random photos

Philip Angelo Florita

diff --git a/style/index.css b/style/index.css index b0b6f3ae5..f663e6787 100644 --- a/style/index.css +++ b/style/index.css @@ -1,4 +1,4 @@ -/* Add CSS styling here */ +Add CSS styling here /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 @@ -20,7 +20,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 0; + /* border: 0; */ font-size: 100%; font: inherit; vertical-align: baseline; @@ -51,12 +51,13 @@ table { /* Header */ -* { +/* * { box-sizing: border-box; border: 1px solid black; } body { + max-width: 800px; font-size: 16px; font-family: 'Courier New', Courier, monospace; } @@ -151,4 +152,233 @@ footer { padding-bottom: 2%; font-size: 1.3rem; color: black; -} \ No newline at end of file +} */ + + + +/* Media queries for responsive design */ +/* @media (max-width: 800px) { */ + /* h1 { + text-align: center; + } + nav { + flex-direction: column; + justify-content: space-between; + align-items: center; + } + + .about { + padding: 0.5rem 1.5rem; + margin: auto; + } + + .projects { + padding: 0.5rem .15rem; + margin: auto; + } + + .contact { + padding: 0.5rem .6rem; + margin: auto; + } + + .main-content { + flex-direction: column; + align-items: center; + } + + .img1 { + height: 30%; + width: 120%; + } + + .greetings { + text-align: center; + } + + .img-container { + flex-wrap: nowrap; + } + + .proj { + text-align: center; + } + + .proj:not(:last-child) { + margin-right: 10px; + } + + .proj:nth-child(2n) { + margin-right: 0; + } + + footer { + display: flex; + justify-content: space-between; + align-items: center; + } */ + * { + box-sizing: border-box; + border: 1px solid black; + } + + body { + max-width: 1800px; + font-size: 16px; + font-family: 'Courier New', Courier, monospace; + } + + h1 { + font-size: 3rem; + padding: 1rem; + font-weight: bold; + } + + nav{ + display: flex; + align-items: center; + padding: 1rem; + font-size: 1.5rem; + } + + .about { + margin-left: 1rem; + background-color: red; + color: white; + } + + .projects { + margin-left: 1rem; + background-color: green; + color: white; + } + + .contact { + margin-left: 1rem; + background-color: blue; + color: white;} + a { + padding: 0.5rem 1rem; + text-decoration: none; + } + + .main-content { + display: flex; + align-items: center; + padding: 1rem; + } + + .projects { + margin: 0 2rem; + } + + .greetings h2{ + font-size: 3rem; + } + + .greetings { + font-size: 1.2rem; + line-height: 3; + padding: 0 4rem; + } + + .img-container{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + + .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9{ + height: 40vh; + width: 40vh; + margin: 0rem; + } + + footer { + text-align: center; + padding: 1rem; + font-size: 1.5rem; + line-height: 2; + } + + .contact-footer { + background-color: blue; + color: white; + } + + .proj { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 2%; + font-size: 1.3rem; + color: black; + } + + /* Media queries for responsive design */ + @media (max-width: 800px) { + h1 { + text-align: center; + } + nav { + flex-direction: column; + justify-content: space-between; + align-items: center; + } + + .about { + padding: 0.5rem 1.5rem; + margin: auto; + } + + .projects { + padding: 0.5rem .15rem; + margin: auto; + } + + .contact { + padding: 0.5rem .6rem; + margin: auto; + } + + .main-content { + flex-direction: column; + align-items: center; + } + + .img1 { + display: flex; + justify-content: center; + } + + .greetings { + text-align: center; + } + + .img-container { + justify-content: center; + } + + .proj { + text-align: center; + } + + .proj:not(:last-child) { + margin-right: 10px; + } + + .proj:nth-child(2n) { + margin-right: 0; + } + + .proj-half { + width: 50%; + text-align: center; + } + + footer { + display: flex; + justify-content: space-between; + align-items: center; + } + } \ No newline at end of file From 0988a81088b49abfd0475c7f20387d2bd18231bc Mon Sep 17 00:00:00 2001 From: Philip Florita Date: Thu, 6 Apr 2023 21:08:49 -0500 Subject: [PATCH 4/4] Updated index and css --- index.html | 170 --------------------------- style/index.css | 296 +++++++++++++++++++----------------------------- 2 files changed, 114 insertions(+), 352 deletions(-) diff --git a/index.html b/index.html index 8ce9b3a38..409e839da 100644 --- a/index.html +++ b/index.html @@ -5,176 +5,6 @@ Document -
diff --git a/style/index.css b/style/index.css index f663e6787..386fd1b42 100644 --- a/style/index.css +++ b/style/index.css @@ -20,7 +20,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - /* border: 0; */ + border: 0; font-size: 100%; font: inherit; vertical-align: baseline; @@ -50,180 +50,12 @@ table { } /* Header */ - -/* * { - box-sizing: border-box; - border: 1px solid black; -} - -body { - max-width: 800px; - font-size: 16px; - font-family: 'Courier New', Courier, monospace; -} - -h1 { - font-size: 3rem; - padding: 1rem; - font-weight: bold; -} - -nav{ - display: flex; - align-items: center; - padding: 1rem; - font-size: 1.5rem; -} - -.about { - margin-left: 1rem; - background-color: red; - color: white; -} - -.projects { - margin-left: 1rem; - background-color: green; - color: white; -} - -.contact { - margin-left: 1rem; - background-color: blue; - color: white;} -a { - padding: 0.5rem 1rem; - text-decoration: none; -} - -.main-content { - display: flex; - align-items: center; - padding: 1rem; -} - -.img1 { - height: 50vh; - width: 75vh; -} - -.projects { - margin: 0 2rem; -} - -.greetings h2{ - font-size: 3rem; -} - -.greetings { - font-size: 1.2rem; - line-height: 3; - padding: 0 4rem; -} - -.img-container{ - display: flex; - justify-content: space-between; - flex-wrap: wrap; -} - -.img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9{ - height: 40vh; - width: 40vh; - margin: 0rem; -} - -footer { - text-align: center; - padding: 1rem; - font-size: 1.5rem; - line-height: 2; -} - -.contact-footer { - background-color: blue; - color: white; -} - -.proj { - display: flex; - flex-direction: column; - align-items: center; - padding-bottom: 2%; - font-size: 1.3rem; - color: black; -} */ - - - -/* Media queries for responsive design */ -/* @media (max-width: 800px) { */ - /* h1 { - text-align: center; - } - nav { - flex-direction: column; - justify-content: space-between; - align-items: center; - } - - .about { - padding: 0.5rem 1.5rem; - margin: auto; - } - - .projects { - padding: 0.5rem .15rem; - margin: auto; - } - - .contact { - padding: 0.5rem .6rem; - margin: auto; - } - - .main-content { - flex-direction: column; - align-items: center; - } - - .img1 { - height: 30%; - width: 120%; - } - - .greetings { - text-align: center; - } - - .img-container { - flex-wrap: nowrap; - } - - .proj { - text-align: center; - } - - .proj:not(:last-child) { - margin-right: 10px; - } - - .proj:nth-child(2n) { - margin-right: 0; - } - - footer { - display: flex; - justify-content: space-between; - align-items: center; - } */ * { box-sizing: border-box; border: 1px solid black; } body { - max-width: 1800px; font-size: 16px; font-family: 'Courier New', Courier, monospace; } @@ -240,7 +72,12 @@ footer { padding: 1rem; font-size: 1.5rem; } - + + a { + padding: 0.5rem 1rem; + text-decoration: none; + } + .about { margin-left: 1rem; background-color: red; @@ -248,19 +85,12 @@ footer { } .projects { - margin-left: 1rem; + margin: 0 1rem; background-color: green; color: white; } - - .contact { - margin-left: 1rem; - background-color: blue; - color: white;} - a { - padding: 0.5rem 1rem; - text-decoration: none; - } + + /* image and introduction */ .main-content { display: flex; @@ -281,13 +111,19 @@ footer { line-height: 3; padding: 0 4rem; } + + .contact { + background-color: blue; + color: white; + } + /* Projects */ .img-container{ display: flex; justify-content: space-between; flex-wrap: wrap; } - + .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9{ height: 40vh; width: 40vh; @@ -300,7 +136,7 @@ footer { font-size: 1.5rem; line-height: 2; } - + .contact-footer { background-color: blue; color: white; @@ -318,6 +154,7 @@ footer { /* Media queries for responsive design */ @media (max-width: 800px) { h1 { + font-size: 2rem; text-align: center; } nav { @@ -349,11 +186,21 @@ footer { .img1 { display: flex; justify-content: center; + width: 100%; + max-height: 50vh; + } + + .main-content .img1 img { + width: 100vh; } .greetings { text-align: center; } + + .greetings h2{ + font-size: 1.5rem; + } .img-container { justify-content: center; @@ -378,7 +225,92 @@ footer { footer { display: flex; + flex-direction: column; justify-content: space-between; align-items: center; } + } + + @media (max-width: 500px) { + h1 { + text-align: center; + font-size: 1rem; + } + + a { + font-size: 0.8rem; + } + + .about { + padding: 0.5rem 0.89rem; + } + .contact { + padding: 0.5rem 0.4rem; + } + + .main-content { + flex-direction: column; + align-items: center; + } + + .img1 { + display: flex; + justify-content: center; + width: 100%; + max-height: 50vh; + } + + .main-content .img1 img { + width: 100vh; + } + + .greetings { + width: 100%; + text-align: center; + margin: 0 auto; + } + + .greetings h2{ + width: 120%; + font-size: 0.7rem; + position: relative; + left: -10%; + } + + .greetings a{ + font-size: 0.7rem; + } + + .greetings p{ + width: 150%; + font-size: 0.5rem; + position: relative; + left: -25%; + } + + .img-container { + justify-content: center; + } + + .proj { + width: 45%; + text-align: center; + } + + .project1 { + font-size: 0.5rem; + } + + footer { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + font-size: 0.5rem; + } + + .contact-footer { + font-size: 0.5rem; + padding: 0.3rem 0.4rem; + } } \ No newline at end of file