From 837f11a3fdace7792814a2763d5e002632846348 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 3 Dec 2023 17:21:01 -0500 Subject: [PATCH 1/5] finished html and most of css styling --- ReadMe.md | 14 ++++---- index.html | 85 ++++++++++++++++++++++++++++++++++++++++++++----- style/index.css | 71 ++++++++++++++++++++++++++++++++++++++++- 3 files changed, 154 insertions(+), 16 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index 81b445e03..83668e36d 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -23,18 +23,18 @@ 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 +- [x] 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 diff --git a/index.html b/index.html index d01f779ff..e7f732277 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,80 @@ - - - + + + + Document - - - - - \ No newline at end of file + + +
+
+

Rakan B Abulatou

+
+
+ +
+
+
+
+
+ +
+
+

Rakan B Abulatou

+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam placeat incidunt porro maiores fugit voluptas, voluptate maxime nesciunt natus, repudiandae sit eligendi quisquam dolor assumenda officia quam dicta molestiae quo! +

+
+
+
+
+
+
+ +

Project Title

+
+
+ +

Project Title

+
+
+ +

Project Title

+
+
+ +

Project Title

+
+
+
+
+ +

Project Title

+
+
+ +

Project Title

+
+
+ +

Project Title

+
+
+ +

Project Title

+
+
+
+ + + diff --git a/style/index.css b/style/index.css index 440e53514..7d5f387c3 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,70 @@ -/* Add CSS styling here */ \ No newline at end of file +header { + background-color: lightgrey; + padding: 20px; + margin-bottom: 15px; +} +.name { + display: flex; + justify-content: flex-start; + align-content: center; +} + +.headerNav { + display: flex; + align-content: flex-start; + justify-content: flex-start; +} + +.container { + display: flex; + flex-direction: row; + justify-content: center; +} + +.topBodyRight { + padding: 20px; + width: 50%; +} + +.mainBodyBottom { + text-align: center; +} + +.topRow { + display: flex; + justify-content: space-evenly; + flex-direction: row; + padding: 20px; +} + +.bottomRow { + display: flex; + justify-content: space-evenly; + flex-direction: row; + padding: 20px; +} + +footer { + background-color: lightgrey; + text-align: center; + padding: 20px; +} + +button { + padding: 10px; + background-color: white; + color: black; + border: black solid 1px; +} + +button:hover { + padding: 15px; + background-color: black; + color: white; + border: white solid 1px; +} + +button a { + text-decoration: none; + color: inherit; +} From 40724073b82b409e5161df53599843a1e6a26e71 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 3 Dec 2023 17:21:40 -0500 Subject: [PATCH 2/5] committing index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e7f732277..d93974fc5 100644 --- a/index.html +++ b/index.html @@ -77,4 +77,4 @@

Like what you see?

- + \ No newline at end of file From 71c99476096b1b2e57b2aa1052c5928a4de77ea6 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 5 Dec 2023 17:32:23 -0500 Subject: [PATCH 3/5] initial push --- ReadMe.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ReadMe.md b/ReadMe.md index 83668e36d..fec9d5c79 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -35,11 +35,11 @@ Follow these steps to set up and work on your project: 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: - [x] 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] 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 From d0ae6d9742234ef9228e2d86b5237469f9c8aefb Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 5 Dec 2023 17:46:42 -0500 Subject: [PATCH 4/5] second initial commit attempt --- ReadMe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReadMe.md b/ReadMe.md index fec9d5c79..08ace12cc 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -45,7 +45,7 @@ Once your repository is set up, practice what you learned today to create a port The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today. -- [ ] Make your webpage work at different browser widths, including mobile +- [x] Make your webpage work at different browser widths, including mobile - [ ] Add CSS animations - [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages - [ ] Host your website on Netlify.com From ae2bc142f2ec4aaa08e048bf405c0f35951ea3a0 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 6 Dec 2023 05:35:43 -0500 Subject: [PATCH 5/5] added css for new responsive layouts at 800px and 500px --- style/index.css | 166 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) diff --git a/style/index.css b/style/index.css index 7d5f387c3..758279a44 100644 --- a/style/index.css +++ b/style/index.css @@ -1,3 +1,11 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + +} + header { background-color: lightgrey; padding: 20px; @@ -68,3 +76,161 @@ button a { text-decoration: none; color: inherit; } + +@media (max-width: 800px) { + header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .headerNav { + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + width: 100%; + } + + .headerNav nav { + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + width: 100%; + } + + button { + width: 40%; + margin: 1% 0; + } + + button a { + width: 80%; + } + + .container { + display: flex; + flex-direction: column; + align-items: center; + } + + .topBodyRight { + display: flex; + flex-direction: column; + align-items: center; + width: 90%; + } + + .topBodyLeft { + display: flex; + } + + .mainBodyBottom { + display: flex; + } + + .topRow { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + .bottomRow { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + .topRow div{ + margin: 4%; + } + + .bottomRow div{ + margin: 4%; + } + + footer { + width: 100%; + } +} + +@media (max-width: 500px) { + header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .headerNav { + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + width: 100%; + } + + .headerNav nav { + display: flex; + flex-direction: column; + align-items: center; + align-content: center; + width: 100%; + } + + button { + width: 40%; + margin: 1% 0; + } + + button a { + width: 80%; + } + + .container { + display: flex; + flex-direction: column; + align-items: center; + } + + .topBodyRight { + display: flex; + flex-direction: column; + align-items: center; + width: 90%; + } + + .topBodyLeft { + display: flex; + } + + .mainBodyBottom { + display: flex; + } + + .topRow { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + .bottomRow { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + + .topRow div{ + margin: 4%; + } + + .bottomRow div{ + margin: 4%; + } + + footer { + width: 100%; + } +}