From a752bed814cd07fba4fe403c27bb4b740400fce4 Mon Sep 17 00:00:00 2001 From: Orlando Castillo Date: Sat, 4 Mar 2023 15:48:09 -0500 Subject: [PATCH 1/7] html done --- index.html | 70 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 61 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index d01f779ff..9e18656fc 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,63 @@ - - - - Document - - - - - \ No newline at end of file + + + + Portfolio + + +
+
+
+

Orlando Castillo

+
+ +
+
+
+ +
+
+
+

Orlando Castillo

+
+
+ +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae + magni aliquam optio deserunt id est tenetur autem officiis facere. + Quo unde praesentium sint repellat provident. Quibusdam nobis + doloremque ea earum? +

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

Like what you see?

+ +
+
+
+
+ + From 29bca61c98d8f38266870af89994843c8e9d5b94 Mon Sep 17 00:00:00 2001 From: Orlando Castillo Date: Sat, 4 Mar 2023 21:36:59 -0500 Subject: [PATCH 2/7] Finished CSS --- about.html | 30 ++++-- contact.html | 33 ++++-- index.html | 141 +++++++++++++++++++------ projects.html | 30 ++++-- style/index.css | 268 +++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 445 insertions(+), 57 deletions(-) diff --git a/about.html b/about.html index df1043036..eda000d0c 100644 --- a/about.html +++ b/about.html @@ -1,11 +1,25 @@ - - - + + + Document - - -

ABOUT

- - \ No newline at end of file + + + +
+
+
+

Orlando Castillo

+
+ +
+
+

ABOUT

+ + diff --git a/contact.html b/contact.html index 7c293bd11..1ec03ae2f 100644 --- a/contact.html +++ b/contact.html @@ -1,11 +1,28 @@ - - - + + + Document - - -

CONTACT

- - \ No newline at end of file + + + +
+
+
+

Orlando Castillo

+
+ +
+
+

CONTACT

+ + diff --git a/index.html b/index.html index 9e18656fc..466697e10 100644 --- a/index.html +++ b/index.html @@ -4,55 +4,132 @@ Portfolio +
-
-

Orlando Castillo

+
+
+

Orlando Castillo

+
+
-
-
- -
-
-
-

Orlando Castillo

-
-
- +
+
+ picture of a mountain
-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae - magni aliquam optio deserunt id est tenetur autem officiis facere. - Quo unde praesentium sint repellat provident. Quibusdam nobis - doloremque ea earum? -

+
+
+

Orlando Castillo

+
+
+ +
+
+

+ Orlando is a web developer with a passion for creating intuitive + and engaging user experiences. With several years of experience + in the industry, he has honed his skills in web design, + front-end development, and back-end programming. Orlando prides + himself on his attention to detail and his ability to deliver + high-quality projects on time and within budget. In his free + time, Orlando enjoys hiking, playing guitar, and exploring the + latest trends in web development. +

+
-
-
-
-
-
-
-
-
+
+
+ +
Project 1
+
+
+
+
+ +
Project 2
+
+
+
+
+ +
Project 3
+
+
+
+
+ +
Project 4
+
+
+
+
+ +
Project 5
+
+
+
+
+ +
Project 6
+
+
+
+
+ +
Project 7
+
+
+
+
+ +
Project 8
+
+
-
+

Like what you see?

diff --git a/projects.html b/projects.html index 266e620b0..6f59a9838 100644 --- a/projects.html +++ b/projects.html @@ -1,11 +1,25 @@ - - - + + + Document - - -

PROJECTS

- - \ No newline at end of file + + + +
+
+
+

Orlando Castillo

+
+ +
+
+

PROJECTS

+ + diff --git a/style/index.css b/style/index.css index 440e53514..7b15b13ea 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,267 @@ -/* Add CSS styling here */ \ No newline at end of file +:root { + font-size: 62.5%; +} + +/* 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; + font-size: 16px; +} +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; +} + +/* Add CSS styling here */ + +/* HEADER SECTION */ +.header-section { + background-color: #d3d3d3; + margin-bottom: 1rem; +} + +.header-style { + padding: 2rem; +} + +/* NAME */ + +.title-box { + margin-bottom: 1rem; +} + +.title-box--name { + font-size: 6rem; +} + +/* LINKS */ +.links { + display: flex; + margin-left: 2rem; +} + +.links .link { + font-size: 2rem; + border: 0.1rem solid #000; + padding: 0.3rem; + text-decoration: none; + color: black; +} + +#active { + color: #fff; + background-color: #000; +} +/* END HEADER SECTION */ + +/* MAIN SECTION */ +.main-style { + display: flex; + /* justify-content: space-around; */ + align-items: center; +} + +.main-section .large-image-left { + margin-left: 1rem; + margin-right: 6rem; + margin-bottom: 2rem; +} + +.main-section .large-image-left img { + /* width: 45rem; */ + width: 50vw; +} + +.main-section .text-content--name p { + font-size: 4rem; + margin-bottom: 2rem; +} + +.main-section .text-content--button button { + font-size: 3rem; + margin-bottom: 2rem; + background-color: #fff; +} + +.main-section .text-content--text p { + font-size: 3rem; + margin-bottom: 2rem; + padding-right: 2rem; +} + +/* END MAIN SECTION */ + +/* GALLERY SECTION */ +.gallery-section .boxes { + display: flex; + /* flex-flow: row wrap; */ + flex-wrap: wrap; + justify-content: center; + align-items: center; + /* margin: 0 auto; + width: 120rem; */ +} + +.gallery-section .project { + margin-bottom: 10rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.gallery-section .project img { + margin: 2rem; + margin-bottom: 1rem; + width: 40rem; + /* width: 95%; */ + /* margin-bottom: 20px; */ +} + +/* FOOTER */ +.footer-section .footer-style { + display: flex; + justify-content: center; + align-items: center; + background-color: #d3d3d3; + padding: 5rem; +} + +.footer-style--footer-text { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.footer-text--text { + font-size: 3rem; + margin-bottom: 2rem; +} + +.footer-text--button { + width: 80%; + font-size: 2rem; + padding: 1rem 2rem; +} From 37fd7820f29b74a9dcbdb1c080e76338e9abd89f Mon Sep 17 00:00:00 2001 From: Orlando Castillo Date: Sat, 4 Mar 2023 21:47:12 -0500 Subject: [PATCH 3/7] MVP --- index.html | 12 ++++++++++-- style/index.css | 5 +++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 466697e10..8d8dfc026 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,9 @@

Orlando Castillo

Orlando Castillo

- +

@@ -131,7 +133,13 @@

Orlando Castillo

Like what you see?

- +
diff --git a/style/index.css b/style/index.css index 7b15b13ea..864ffac49 100644 --- a/style/index.css +++ b/style/index.css @@ -202,6 +202,7 @@ table { font-size: 3rem; margin-bottom: 2rem; background-color: #fff; + cursor: pointer; } .main-section .text-content--text p { @@ -265,3 +266,7 @@ table { font-size: 2rem; padding: 1rem 2rem; } + +.footer-text--button:hover { + cursor: pointer; +} From 86b19f0d77f65734dfe803406783da3a43d8da5d Mon Sep 17 00:00:00 2001 From: Orlando Castillo Date: Sun, 5 Mar 2023 06:21:34 -0500 Subject: [PATCH 4/7] Made a few more edits --- index.html | 16 ++++++++-------- style/index.css | 11 ++++++----- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 8d8dfc026..d951bb2fa 100644 --- a/index.html +++ b/index.html @@ -40,14 +40,14 @@

Orlando Castillo

- Orlando is a web developer with a passion for creating intuitive - and engaging user experiences. With several years of experience - in the industry, he has honed his skills in web design, - front-end development, and back-end programming. Orlando prides - himself on his attention to detail and his ability to deliver - high-quality projects on time and within budget. In his free - time, Orlando enjoys hiking, playing guitar, and exploring the - latest trends in web development. + I'm a web developer with a passion for creating intuitive and + engaging user experiences. With several years of experience in + the industry, he has honed his skills in web design, front-end + development, and back-end programming. Orlando prides himself on + his attention to detail and his ability to deliver high-quality + projects on time and within budget. In his free time, Orlando + enjoys hiking, playing guitar, and exploring the latest trends + in web development.

diff --git a/style/index.css b/style/index.css index 864ffac49..6dc468f67 100644 --- a/style/index.css +++ b/style/index.css @@ -199,16 +199,17 @@ table { } .main-section .text-content--button button { - font-size: 3rem; + font-size: 2rem; margin-bottom: 2rem; background-color: #fff; cursor: pointer; } .main-section .text-content--text p { - font-size: 3rem; + font-size: 2rem; margin-bottom: 2rem; padding-right: 2rem; + width: 50rem; } /* END MAIN SECTION */ @@ -257,13 +258,13 @@ table { } .footer-text--text { - font-size: 3rem; + font-size: 2rem; margin-bottom: 2rem; } .footer-text--button { - width: 80%; - font-size: 2rem; + /* width: 80%; */ + font-size: 1.8rem; padding: 1rem 2rem; } From 32bcd643b65a7e1b025854e74cda92905c448752 Mon Sep 17 00:00:00 2001 From: Orlando Castillo Date: Sun, 5 Mar 2023 06:23:30 -0500 Subject: [PATCH 5/7] fixed the gallery a bit --- style/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index 6dc468f67..c770f960a 100644 --- a/style/index.css +++ b/style/index.css @@ -234,7 +234,7 @@ table { } .gallery-section .project img { - margin: 2rem; + margin: 1rem; margin-bottom: 1rem; width: 40rem; /* width: 95%; */ From c46825f451cd69523fdaa0717b0c3969339ad345 Mon Sep 17 00:00:00 2001 From: Orlando Castillo Date: Sun, 5 Mar 2023 17:46:48 -0500 Subject: [PATCH 6/7] fixed bio --- index.html | 12 ++++++------ style/index.css | 1 + 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d951bb2fa..106abe2e1 100644 --- a/index.html +++ b/index.html @@ -42,12 +42,12 @@

Orlando Castillo

I'm a web developer with a passion for creating intuitive and engaging user experiences. With several years of experience in - the industry, he has honed his skills in web design, front-end - development, and back-end programming. Orlando prides himself on - his attention to detail and his ability to deliver high-quality - projects on time and within budget. In his free time, Orlando - enjoys hiking, playing guitar, and exploring the latest trends - in web development. + the industry, I have honed his skills in web design, front-end + and back-end development. I pride myself on attention to detail + and ability to deliver high-quality projects on time and within + budget. In my free time, I enjoy writing short stories, building + model houses, and exploring the latest trends in web + development.

diff --git a/style/index.css b/style/index.css index c770f960a..798c6fe2a 100644 --- a/style/index.css +++ b/style/index.css @@ -203,6 +203,7 @@ table { margin-bottom: 2rem; background-color: #fff; cursor: pointer; + padding: 1rem 2rem; } .main-section .text-content--text p { From c8da0c98e25ab3004b855c009117f25cf93b7dad Mon Sep 17 00:00:00 2001 From: Orlando Castillo Date: Mon, 6 Mar 2023 09:11:55 -0500 Subject: [PATCH 7/7] mobile response finished --- style/index.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/style/index.css b/style/index.css index 798c6fe2a..548955b14 100644 --- a/style/index.css +++ b/style/index.css @@ -272,3 +272,90 @@ table { .footer-text--button:hover { cursor: pointer; } + +@media only screen and (max-width: 800px) { + .header-style { + flex-direction: column; + align-items: flex-start; + } + + .links { + flex-direction: column; + align-items: flex-start; + margin-top: 20px; + } + + .link { + display: block; + margin-bottom: 10px; + } + + .main-style { + flex-direction: column; + align-items: center; + /* justify-content: center; */ + text-align: center; + } + + .large-image-left { + width: 100%; + margin-bottom: 20px; + } + + .text-content { + width: 100%; + } + .main-screen .text-content--text p { + margin: 0; + } + + .main-screen .text-content--text p { + padding-right: 0; + padding-right: 0; + text-align: center; + width: 100%; + } + + .project { + width: 100%; + margin-bottom: 20px; + } +} + +@media only screen and (max-width: 500px) { + .title-box--name { + text-align: center; + font-size: 5rem; + } + .main-section .large-image-left { + margin-left: 0; + margin-right: 0; + } + + .main-section .large-image-left img { + width: 100%; + } + + .links { + justify-content: center; + align-items: center; + } + .links a { + font-size: 4rem; + } + + .main-section .text-content--name { + text-align: center; + } + + .main-section .text-content--text { + display: flex; + justify-content: center; + align-items: center; + /* display: none; */ + } + + .text-content--button { + text-align: center; + } +}