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 d01f779ff..106abe2e1 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,148 @@ - - - - Document - - - - - \ No newline at end of file + + + + Portfolio + + + +
+
+
+
+

Orlando Castillo

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

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, 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. +

+
+
+
+
+
+
+
+
+ +
Project 1
+
+
+
+
+ +
Project 2
+
+
+
+
+ +
Project 3
+
+
+
+
+ +
Project 4
+
+
+
+
+ +
Project 5
+
+
+
+
+ +
Project 6
+
+
+
+
+ +
Project 7
+
+
+
+
+ +
Project 8
+
+
+
+
+ +
+ + 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..548955b14 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,361 @@ -/* 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: 2rem; + margin-bottom: 2rem; + background-color: #fff; + cursor: pointer; + padding: 1rem 2rem; +} + +.main-section .text-content--text p { + font-size: 2rem; + margin-bottom: 2rem; + padding-right: 2rem; + width: 50rem; +} + +/* 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: 1rem; + 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: 2rem; + margin-bottom: 2rem; +} + +.footer-text--button { + /* width: 80%; */ + font-size: 1.8rem; + padding: 1rem 2rem; +} + +.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; + } +}