diff --git a/MultiPage-Clone/contact.html b/MultiPage-Clone/contact.html new file mode 100644 index 00000000..495b4bff --- /dev/null +++ b/MultiPage-Clone/contact.html @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + + Pedro Ricciardi - Contact + + + +
+
+

Pedro Ricciardi

+

/

+

WEB DEVELOPER

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

Let's Talk

+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/MultiPage-Clone/css/main.css b/MultiPage-Clone/css/main.css deleted file mode 100644 index aa561706..00000000 --- a/MultiPage-Clone/css/main.css +++ /dev/null @@ -1,3 +0,0 @@ -/* Add your CSS here */ - -/* Dont' forget to link this file to your HTML in the */ diff --git a/MultiPage-Clone/css/normalise.css b/MultiPage-Clone/css/normalise.css new file mode 100644 index 00000000..4322a83a --- /dev/null +++ b/MultiPage-Clone/css/normalise.css @@ -0,0 +1,51 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a:any-link, +a, +a:hover, +a:focus, +a:visited { + text-decoration: none; + color: inherit; + transition: all 0.2s ease-in-out; +} + +h1, +h2, +h3, +h4 { + font-family: "Poppins", sans-serif; + margin: 0; + padding: 0; +} + +span, +p, +a, +label, +input { + font-family: "Nunito Sans", sans-serif; + font-weight: 300; +} + +p { + line-height: 1.5em; +} + +input, +textarea { + appearance: none; + resize: none; + border: none; + outline: none; + margin: 0; + padding: 0; +} + +button { + cursor: pointer; +} diff --git a/MultiPage-Clone/css/otherPages.css b/MultiPage-Clone/css/otherPages.css new file mode 100644 index 00000000..9b429fb9 --- /dev/null +++ b/MultiPage-Clone/css/otherPages.css @@ -0,0 +1,263 @@ +:root { + --fs-xxl: calc(var(--fs-min) + 1.4375rem); + --fs-xl: calc(var(--fs-min) + 0.8125rem); + --fs-lg: calc(var(--fs-min) + 0.5rem); + + --colour-form-field-border: #3b3b3b; +} + +main { + background: var(--colour-background); +} + +.other-pages__content { + width: 740px; + margin: 0 auto; + padding: var(--gap-xxl) 0; + + display: grid; + gap: var(--gap-xl); +} + +a.button-blue { + padding: var(--gap-sm) var(--gap-m); +} + +main h2 { + font-size: var(--fs-xxl); + text-align: center; +} + +main h3 { + font-size: var(--fs-xl); +} + +/* Resume Section */ + +.resume__section { + width: 100%; + margin-top: var(--gap-lg); + + display: grid; + gap: var(--gap-xl); +} + +#experience-cv__container { + display: flex; + justify-content: space-between; +} + +/* Cards */ + +.card { + background-color: var(--colour-white); + box-shadow: var(--shadow); +} + +/* Resume Card (history) */ + +.resume-card-history { + padding: var(--gap-xxl) var(--gap-xl); + + display: flex; + flex-direction: row; + gap: var(--gap-xxl); +} + +.card-history__summary { + margin-bottom: var(--gap-xl); + + flex: 0.6; + + display: grid; + align-items: center; + grid-template-rows: repeat(auto-fill, var(--fs-xxl)); +} + +main h4 { + font-size: var(--fs-lg); + + color: var(--colour-accent); +} + +.card-history__text { + margin-top: var(--gap-xl); + + flex: 1; + text-align: justify; + + display: grid; + align-items: center; + gap: var(--gap-m); +} + +.card-history__more p { + display: block; + font-size: var(--fs-sm); +} + +/* Resume Card (skills) */ + +.resume-card-skills { + padding: var(--gap-xxl) var(--gap-xl); + + display: flex; + flex-direction: column; + gap: var(--gap-xxl); +} + +.card-skills__container { + display: grid; + gap: var(--gap-lg); +} + +.skill-list { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: var(--gap-m); +} + +/* blue box beside elements */ + +main h2, +.skill { + position: relative; +} + +main h2 { + margin-left: 0.8em; +} + +.skill { + margin-left: 1.2em; +} + +main h2::before { + content: ""; + position: absolute; + background-color: var(--colour-accent); + height: calc(0.6 * 1em); + aspect-ratio: 1; + + transform: translate(-0.8em, 80%); +} + +.skill::before { + content: ""; + position: absolute; + background-color: var(--colour-accent); + height: calc(0.75 * 1em); + aspect-ratio: 1; + + transform: translate(-1.2em, 35%); +} + +/* Projects page */ + +#projects-page__intro { + text-align: center; +} + +#projects-list { + display: grid; + gap: var(--gap-lg); +} + +.project { + display: flex; + flex-wrap: wrap; + + width: 100%; +} + +.project-info { + flex: 1.2; +} + +.project-name { + margin: var(--gap-xxl) 0 var(--gap-lg); + padding-left: var(--gap-lg); + border-left: solid 0.6em var(--colour-accent); +} + +.project-description { + padding-left: calc(var(--gap-lg) + 0.6em); + padding-right: var(--gap-lg); + text-align: justify; +} + +.project-name p { + font-weight: bold; + font-size: var(--fs-sm); +} + +.project-image { + flex: 0.8; +} + +.project-image img { + height: 100%; + object-fit: cover; +} + +/* Contact Page */ + +form { + padding: var(--gap-xxl); + + display: grid; + gap: var(--gap-xl); +} + +.contact-field { + display: grid; + gap: var(--gap-m); +} + +label { + font-weight: bold; + font-size: var(--fs-sm); +} + +#contact-name { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--gap-xl); +} + +input, +textarea { + padding: 1em; + text-align: justify; + color: var(--colour-accent); + font-weight: bold; + border-bottom: 2px solid var(--colour-form-field-border); +} + +input:hover, +input:focus, +input:active, +textarea:hover, +textarea:focus, +textarea:active { + padding-left: 1em; + color: var(--colour-accent); + font-weight: bold; + border-bottom: 3px solid var(--colour-accent); +} + +input:not(:focus):not(:placeholder-shown):invalid { + border-bottom: 2px solid var(--colour-warning); +} + +button { + justify-self: flex-start; +} + +/* blue asterisk for required fields */ + +.required-field::after { + content: " *"; + color: var(--colour-accent); + font-weight: normal; +} diff --git a/MultiPage-Clone/css/responsive.css b/MultiPage-Clone/css/responsive.css new file mode 100644 index 00000000..9653afe3 --- /dev/null +++ b/MultiPage-Clone/css/responsive.css @@ -0,0 +1,295 @@ +@media screen and (max-width: 728px) { + :root { + --fs-xxl: calc(var(--fs-min) + 1.4375rem); + --fs-xl: calc(var(--fs-min) + 0.8125rem); + --fs-lg: calc(var(--fs-min) + 0.5rem); + --fs-sm: calc(var(--fs-min) + 0.25rem); + } + + /* show and hide elements */ + #main-card__buttons { + display: flex; + } + + #greetings__buttons, + #main-card__role, + /* #nav-list, */ + .divider { + display: none; + } + + /* Header */ + + header { + height: 91px; + padding: 0 var(--gap-m); + grid-template-columns: 1fr 0.2fr; + } + + header section:first-child { + display: grid; + } + + #nav-list { + opacity: 0; + + position: fixed; + top: 0; + left: 0; + right: 0; + height: 100vh; + + transform: translateY(-5vh); + + background-color: var(--colour-foreground); + + z-index: -1; + + flex-direction: column; + justify-content: center; + align-items: center; + + transition: all 0.5s ease-in; + } + + #nav__toggle:checked ~ #nav-list { + display: flex; + transform: translateY(0); + opacity: 1; + + transition: all 0.5s ease-in; + z-index: 1; + } + + a.nav-item { + opacity: 0; + transform: translateY(-10vh); + + font-family: "Poppins", sans-serif; + font-size: var(--fs-lg); + font-weight: 700; + + transition: all 1s ease-in; + } + + #nav__toggle:checked ~ #nav-list a.nav-item { + opacity: 1; + transform: translateY(0); + transition: all 0.5s ease-in-out; + } + /* hamburger menu */ + + #hamburger__button-container { + display: block; + position: absolute; + top: var(--gap-m); + right: var(--gap-sm); + + cursor: pointer; + z-index: 2; + } + + .hamburger__button { + background-color: var(--colour-accent); + border-radius: 2px; + + height: 3px; + } + + #hamburger__button-bars { + width: 26px; + height: 21px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + transition: transform 0.33s ease-out; + } + + #hamburger__button-bar1 { + width: 50%; + + transform-origin: right; + transition: transform 0.33s cubic-bezier(0.54, -0.81, 0.57, 0.57); + } + + #hamburger__button-bar2 { + width: 100%; + } + + #hamburger__button-bar3 { + align-self: flex-end; + width: 50%; + + transform-origin: left; + transition: transform 0.33s cubic-bezier(0.54, -0.81, 0.57, 0.57); + } + + #nav__toggle:checked + ~ #hamburger__button-container + #hamburger__button-bars + .hamburger__button { + background-color: var(--colour-black); + } + + #nav__toggle:checked ~ #hamburger__button-container { + position: fixed; + } + + #nav__toggle:checked ~ #hamburger__button-container #hamburger__button-bars { + transform: rotate(-45deg); + transition: transform 0.33s ease-out; + } + + #nav__toggle:checked + ~ #hamburger__button-container + #hamburger__button-bars + #hamburger__button-bar1 { + transform: rotate(-90deg) translateX(4px); + transition: transform 0.33s cubic-bezier(0.54, -0.81, 0.57, 0.57); + } + + #nav__toggle:checked + ~ #hamburger__button-container + #hamburger__button-bars + #hamburger__button-bar3 { + transform: rotate(-90deg) translateX(-4px); + transition: transform 0.33s cubic-bezier(0.54, -0.81, 0.57, 0.57); + } + + /* Main */ + + main.main-index { + background: linear-gradient( + to top, + var(--colour-background) 80%, + var(--colour-white) 80% + ); + } + + #info { + width: auto; + margin: 0 var(--gap-m); + padding: 0; + + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + } + + #main-card__info h1 { + width: 50%; + } + + a.button-blue, + .button-blue, + a.button-white { + padding: var(--gap-sm) var(--gap-lg); + } + + #greetings { + gap: var(--gap-m); + padding: 0 var(--gap-m); + } + + #greetings h2 { + margin-bottom: var(--gap-sm); + } + + /* Footer */ + + footer { + grid-template-columns: 1fr; + gap: var(--gap-m); + + height: unset; + padding: var(--gap-m); + } + + #footer__contacts { + grid-row: 1; + flex-wrap: wrap; + + justify-content: center; + gap: var(--gap-m); + + width: 100%; + } + + #credits p { + width: 100%; + text-align: justify; + } + + /* other pages standards */ + + .other-pages__content { + width: 100%; + padding: var(--gap-xxl) var(--gap-sm); + } + + /* Resume */ + + .resume-card-history { + flex-direction: column; + gap: var(--gap-lg); + + padding: var(--gap-lg); + } + + .card-history__summary { + flex: unset; + margin: 0; + } + + .card-history__more { + margin-top: var(--gap-sm); + } + + .card-history__text { + flex: unset; + margin: 0; + } + + .skill-list { + grid-template-columns: 1fr; + } + + /* Projects */ + + .project { + gap: var(--gap-m); + } + + .project-info { + flex: initial; + } + + .project-name { + margin: var(--gap-m) 0; + } + + .project-image { + flex: initial; + width: 100%; + aspect-ratio: 1.41; + } + + .project-image img { + display: block; + width: 100%; + object-fit: cover; + } + + /* contact */ + + #contact-name { + grid-template-columns: 1fr; + gap: var(--gap-m); + } + + form { + padding: var(--gap-xl) var(--gap-m); + gap: var(--gap-m); + } +} diff --git a/MultiPage-Clone/css/style.css b/MultiPage-Clone/css/style.css new file mode 100644 index 00000000..f97953fe --- /dev/null +++ b/MultiPage-Clone/css/style.css @@ -0,0 +1,311 @@ +:root { + --colour-background: #e6dacd; + --colour-foreground: #f4ece6; + --colour-accent: #0150fd; + --colour-black: #000; + --colour-white: #fff; + --colour-warning: #c91d1d; + + /* base font size 12 */ + --fs-min: 12px; + --fs-xxl: calc(var(--fs-min) + 5.5rem); + --fs-xl: calc(var(--fs-min) + 1rem); + --fs-lg: calc(var(--fs-min) + 0.8125rem); + --fs-m: calc(var(--fs-min) + 0.3125rem); + --fs-sm: calc(var(--fs-min) + 0.125rem); + --fs-xs: var(--fs-min); + + --gap-xxl: 4.75rem; + --gap-xl: 2.375rem; + --gap-lg: 1.5rem; + --gap-m: 1rem; + --gap-sm: 0.5rem; + --gap-xs: 0.25rem; + + --shadow: -12px 12px 20px rgba(0, 0, 0, 0.1); +} + +strong { + font-size: var(--fs-xxl); +} + +h1 { + font-size: var(--fs-lg); +} + +h2 { + font-size: var(--fs-m); +} + +h3 { + font-size: var(--fs-sm); +} + +p { + font-size: var(--fs-m); + display: inline-block; +} + +a { + font-size: var(--fs-sm); +} + +a:hover, +a:focus, +a.actual-page { + color: var(--colour-accent); + fill: var(--colour-accent); + transition: all 0.2s ease-in-out; +} + +body { + min-width: 100vw; + margin: 0 auto; +} + +/* header */ + +#hamburger__button-container, +#nav__toggle { + display: none; +} + +header { + position: relative; + + height: 126px; + padding: 0 var(--gap-xxl); + + background-color: var(--colour-white); + + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: space-between; +} + +.divider { + font-family: Arial, Helvetica, sans-serif; + margin: 0 var(--gap-sm); +} + +#nav-list { + display: flex; + flex-direction: row; + justify-content: flex-end; + gap: var(--gap-lg); +} + +/* blue box beside h1 */ + +header h1 { + position: relative; + margin-left: 0.8em; + display: inline-block; +} + +header h1::before { + content: ""; + position: absolute; + background-color: var(--colour-accent); + height: calc(0.6 * 1em); + aspect-ratio: 1; + + transform: translate(-0.8em, 75%); +} + +/* main */ + +main.main-index { + background: linear-gradient( + to right, + var(--colour-background) 40%, + var(--colour-white) 40% + ); +} + +#info { + width: 800px; + margin: 0 auto; + padding: calc(var(--gap-xxl) * 1.5) 0; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + gap: var(--gap-lg); +} + +/* main card */ + +#main-card { + background-color: var(--colour-foreground); + + display: grid; + justify-items: center; + text-align: center; + + box-shadow: var(--shadow); +} + +#main-card__info { + display: grid; + gap: var(--gap-lg); + justify-items: center; + + margin: var(--gap-xl) 0; +} + +#main-card__info img { + width: 200px; + height: auto; + border-radius: 50%; +} + +#main-card__info h1 { + width: 80%; + line-height: var(--fs-xl); +} + +#main-card__divider { + width: 50px; + height: 2px; + margin: 0 auto; + background-color: var(--colour-accent); +} + +#main-card__footer { + display: flex; + justify-content: center; + gap: var(--gap-lg); + padding: var(--gap-m) 0; + background-color: var(--colour-white); + width: 100%; +} + +#main-card__footer svg { + height: var(--fs-lg); +} + +/* greetings */ + + +#greetings { + display: flex; + flex-direction: column; + gap: var(--gap-xl); + + text-align: justify; +} + +#greetings__welcome { + font-size: var(--fs-xl); + font-weight: 400; +} + +.resume-projects-buttons { + display: flex; + gap: var(--gap-sm); +} + +a.button-blue, +.button-blue, +a.button-white { + padding: var(--gap-sm) var(--gap-xl); + font-family: "Poppins", sans-serif; + border-radius: var(--fs-lg); +} + +a.button-white { + background-color: transparent; + border: 2px solid var(--colour-black); +} + +a.button-white:focus, +a.button-white:hover, +a.button-white:active { + background-color: var(--colour-accent); + border: 2px solid var(--colour-white); + color: var(--colour-white); +} + +a.button-blue, +.button-blue { + background-color: var(--colour-accent); + border: 1px solid var(--colour-white); + color: var(--colour-white); +} + +a.button-blue:focus, +a.button-blue:hover, +a.button-blue:active, +.button-blue:focus, +.button-blue:hover, +.button-blue:active { + background-color: transparent; + border: 2px solid var(--colour-accent); + color: var(--colour-black); +} + +#more-about-me { + display: grid; + gap: var(--gap-lg); +} + +/* footer */ + +footer { + padding: 0 var(--gap-xxl); + height: 110px; + + background-color: var(--colour-white); + + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: space-between; +} + +#credits { + font-size: var(--fs-xs); +} + +#credits p { + text-align: left; + font-size: 1em; + + width: 60%; +} + +#credits a { + font-size: 1em; +} + +#footer__contacts { + display: flex; + justify-content: flex-end; + gap: var(--gap-xl); + + width: 100%; +} + +#footer__contacts > div { + display: grid; + justify-items: center; + gap: var(--gap-sm); +} + +#social-media { + display: flex; + justify-content: space-between; + + min-width: 80px; +} + +#social-media svg { + height: var(--fs-m); +} + +/* hidden class */ +.hidden { + display: none; +} diff --git a/MultiPage-Clone/designs/Cactus shop.png b/MultiPage-Clone/designs/Cactus shop.png deleted file mode 100644 index c543d741..00000000 Binary files a/MultiPage-Clone/designs/Cactus shop.png and /dev/null differ diff --git a/MultiPage-Clone/designs/Juice bar.png b/MultiPage-Clone/designs/Juice bar.png deleted file mode 100644 index 53869d3d..00000000 Binary files a/MultiPage-Clone/designs/Juice bar.png and /dev/null differ diff --git a/MultiPage-Clone/index.html b/MultiPage-Clone/index.html index cd704c69..1db74fd0 100644 --- a/MultiPage-Clone/index.html +++ b/MultiPage-Clone/index.html @@ -1,21 +1,154 @@ + - - - - + + + + + + + + + + + - Responsive grid project + + Pedro Ricciardi - About me +
+
+

Pedro Ricciardi

+

/

+

WEB DEVELOPER

+
+
+ - - + + +
+
+
+
+ +
+
+

Hello

+

Welcome to my page

+
+
+ RESUME + PROJECTS +
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium harum voluptas beatae commodi + similique nulla, aliquam quasi quas ea recusandae vero placeat cumque officiis eligendi?

+

Lorem ipsum dolor sit amet consectetur.

+
+
+
+
+ \ No newline at end of file diff --git a/MultiPage-Clone/projects.html b/MultiPage-Clone/projects.html new file mode 100644 index 00000000..7902c48a --- /dev/null +++ b/MultiPage-Clone/projects.html @@ -0,0 +1,161 @@ + + + + + + + + + + + + + + + + + + Pedro Ricciardi - Projects + + + +
+
+

Pedro Ricciardi

+

/

+

WEB DEVELOPER

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

Projects

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit eveniet omnis + suscipit aperiam nulla itaque + dolores, eum deleniti aspernatur autem facilis dicta nam maxime quibusdam architecto inventore quasi iusto ex! +

+
+
+
+
+

Project 1

+

Frontend Developer

+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati repellendus quos deserunt sunt optio + officiis dolor vero inventore, laudantium earum doloremque. Similique at dolores accusamus. +

+
+
+ +
+
+
+
+
+

Project 2

+

Frontend Developer

+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati repellendus quos deserunt sunt optio + officiis dolor vero inventore, laudantium earum doloremque. Similique at dolores accusamus. +

+
+
+ +
+
+
+
+
+

Project 3

+

Frontend Developer

+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati repellendus quos deserunt sunt optio + officiis dolor vero inventore, laudantium earum doloremque. Similique at dolores accusamus. +

+
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/MultiPage-Clone/resume.html b/MultiPage-Clone/resume.html new file mode 100644 index 00000000..afc1adc1 --- /dev/null +++ b/MultiPage-Clone/resume.html @@ -0,0 +1,200 @@ + + + + + + + + + + + + + + + + + + Pedro Ricciardi - Resume + + + +
+
+

Pedro Ricciardi

+

/

+

WEB DEVELOPER

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

Resume

+ +
+
+

Experience

+ DOWNLOAD CV +
+
+
+

2022 - Present

+

WAREHOUSE OPERATIVE

+
+

L'Oréal Warehouse

+

Manchester

+
+
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius maiores itaque dolor quae modi tenetur + nulla, nam recusandae. Quia, necessitatibus.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, debitis.

+
+
+
+
+

2016 - 2021

+

TEACHER

+
+

Soma Educational Institution

+

Brazil

+
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius soluta sequi impedit eum libero obcaecati + animi vero sed accusantium laborum?

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, eius.

+
+
+
+ +
+

Education

+
+
+

2014 - 2017

+

FACIMED

+
+

Licentiate Degree in Physics

+

Brazil

+
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, mollitia odit iste praesentium dolor + vel provident commodi nostrum cumque quod!

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, deleniti.

+
+
+
+
+

2023 - Present

+

CYF

+
+

Web Development Bootcamp

+

Manchester

+
+
+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident optio deserunt modi ipsam commodi + poro fugiat eligendi necessitatibus a laudantium?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, dicta.

+
+
+
+ +
+
+
+

Professional skillset

+
+

Teamwork & Collaboration

+

Logical-Mathematical Intelligence

+

Attention to detail

+

Resilience

+
+
+
+

Languages

+
+

English

+

Spanish

+

Portuguese

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