diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/Form-Controls/images (1).jpg b/Form-Controls/images (1).jpg new file mode 100644 index 00000000..91167255 Binary files /dev/null and b/Form-Controls/images (1).jpg differ diff --git a/Form-Controls/img/download.png b/Form-Controls/img/download.png new file mode 100644 index 00000000..d5bfe486 Binary files /dev/null and b/Form-Controls/img/download.png differ diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..7313f055 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,124 @@ - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file + + + + My form exercise + + + + + +
+
+
+ +
+

CYF T-SHIRT

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

Product pic

+

Slim-Fit Stretch-Cotton Jersey T-Shirt

+

$70

+ +

color :

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

Size :

+ + + + + + +
+ + + + +
+
+
+ +
+ +
+
+ +
+
+ +
+ +
+ + + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..449614a9 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,161 @@ +/* header */ +.header-div, +.header-right { + display: flex; + justify-content: space-between; + align-items: center; +} +.black { + background-color: black; +} +.img-div { + cursor: pointer; +} +span { + color: red; +} +.title { +} + +.search { + width: 55%; + padding: 0.5em 1.5em; + border: none; + box-shadow: 2px 4px; + border-radius: 5px; + outline: none; +} + +.navigation { + border-bottom: 1px solid gray; + border-top: 6px solid black; +} + +.nav-ul { + display: flex; + justify-content: space-around; + list-style-type: none; +} + +ul li { + font-weight: bold; + cursor: pointer; +} + +ul li:hover { + color: rgb(218, 39, 39); +} +/* section-div*/ +.section-div { + display: flex; + justify-content: space-around; + margin-top: 2em; +} +.shirt-img { + width: 25%; + padding-bottom: 2em; +} +/* input-section */ + +.form-section { + margin-top: 1.5em; +} + +/* size-button */ +.size-color-date { + display: inline-block; +} +button { + color: white; + font-weight: bold; + background-color: rgb(53, 40, 40); + border: none; + cursor: pointer; +} +button:hover { + color: red; + background-color: white; +} +/* radio-button */ +/* radio1 */ + +#radio1 { + opacity: 0; +} +.label-1 { + padding: 8px 15px; + background-color: rgb(235, 27, 27); + cursor: pointer; +} + +#radio1:checked ~ .color-div { + background-color: rgb(232, 40, 26); +} +/* radio2 */ +#radio2 { + opacity: 0; +} +.label-2 { + padding: 8px 15px; + background-color: gray; + cursor: pointer; +} + +#radio2:checked ~ .color-div { + background-color: gray; +} + +/* radio3 */ + +#radio3 { + opacity: 0; +} +.label-3 { + padding: 8px 15px; + background-color: black; + cursor: pointer; +} + +#radio3:checked ~ .color-div { + background-color: black; +} + +.color-div { + width: 1em; + height: 1em; + border: 1px solid black; +} + +#submit-button { + margin-left: 4em; + margin-top: 1.5em; + border-style: none; + padding: 0.5em; + color: red; + font-weight: bold; + cursor: pointer; +} + +#submit-button:hover { + color: black; +} +/* footer */ +footer { + background-color: black; +} +.footer { + display: flex; + justify-content: center; +} +h5:hover { + color: red; +} +h5 { + cursor: pointer; + color: white; + margin-left: 2em; +} +h4 { + text-align: center; + color: white; +} diff --git a/MultiPage-Clone/20230418_233231noh.jpg b/MultiPage-Clone/20230418_233231noh.jpg new file mode 100644 index 00000000..9ec76729 Binary files /dev/null and b/MultiPage-Clone/20230418_233231noh.jpg differ diff --git a/MultiPage-Clone/Resume.html b/MultiPage-Clone/Resume.html new file mode 100644 index 00000000..df9f3069 --- /dev/null +++ b/MultiPage-Clone/Resume.html @@ -0,0 +1,259 @@ + + + + + + + + + + + + + + Resume + + + +
+ +
+
+
+

Nohe Tekelmariyam

+
+
/
+

PROJECT MANGER

+
+ + +
+ +
+
+
+
+
+

Resume

+
+ +
+

Experience

+ +
+ +
+

2035 - Present

+ +
+
+

JOB POSITION

+

Company Name

+

Company Location

+
+ +
+

+ i'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. +

+ +

+ I’m a great place for you to tell a story and let your users know + a little more about you. +

+
+
+
+ +
+

2035 - 2035

+ +
+
+

JOB POSITION

+

Company Name

+

Company Location

+
+ +
+

+ i'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. +

+ +

+ I’m a great place for you to tell a story and let your users know + a little more about you. +

+
+
+
+ +
+

Education

+
+ +
+

2035 - 20353

+ +
+
+

UNIVERSITY NAME

+

Degree Level

+

University Location

+
+ +
+

+ i'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. +

+ +

+ I’m a great place for you to tell a story and let your users know + a little more about you. +

+
+
+
+ +
+

2035 - 2035

+ +
+
+

UNIVERSITY NAME

+

Degree Level

+

University Location

+
+ +
+

+ i'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. +

+ +

+ I’m a great place for you to tell a story and let your users know + a little more about you. +

+
+
+
+ +
+

professional skillset

+ +
+
+
+
+

Entrepreneurial Mindset

+
+ +
+
+

Teamwork & Collaboration

+
+
+ +
+
+
+

Go-to-Market Planning

+
+ +
+
+

Digital Analytics

+
+ +
+ + +

Languages

+ +
+ +
+
+

English (native)

+
+ +
+
+

French (proficient)

+
+ +
+ +
+
+

Spanish (proficient)

+
+ + +
+
+ + + + diff --git a/MultiPage-Clone/contact.html b/MultiPage-Clone/contact.html new file mode 100644 index 00000000..8ae1335b --- /dev/null +++ b/MultiPage-Clone/contact.html @@ -0,0 +1,135 @@ + + + + + + + + + + + + + + project + + + +
+
+
+
+

Nohe Tekelmariyam

+
+
/
+

PROJECT MANGER

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

Let's talk

+
+
+
+
+
+ +
+ +
+
+ +
+
+ + + + + + + +
+ +
+
+
+ + + + + + diff --git a/MultiPage-Clone/css/contact.css b/MultiPage-Clone/css/contact.css new file mode 100644 index 00000000..5ea2866b --- /dev/null +++ b/MultiPage-Clone/css/contact.css @@ -0,0 +1,377 @@ +/* contact */ +body { + margin: 0; + padding: 0; + background-color: #e6dacd; + height: 50em; +} + +header { + display: flex; + justify-content: space-around; + align-items: center; + + width: 100%; + padding: 2em 0; + background-color: #fff; + position: fixed; + top: 0; + left: 0; + z-index: 1; +} + +.blue-div { + width: 1.2em; + height: 1.2em; + background-color: blue; +} + +.separation { + margin-right: 0.3em; +} +.nav-naming { + font-family: "Poppins", sans-serif; + + display: flex; + flex-wrap: wrap; + align-items: center; + width: 50%; +} + +.smalldiv-name { + display: flex; + align-items: center; +} +.smalldiv-name p { + font-size: 1.4rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; +} +.navigation { + width: 40%; +} +.navigation ul { + display: flex; + align-items: center; + justify-content: space-around; +} +.navigation ul li { + padding-right: 1em; + cursor: pointer; + list-style-type: none; +} +.navigation ul li a { + font-family: "Poppins", sans-serif; + text-decoration: none; +} +.navigation ul li:last-child { + color: #0150fd; +} +.humburger-div { + display: none; +} + +.navigation ul li:hover { + color: #0150fd; +} +.title-resume { + margin-top: 10em; + margin-bottom: 2em; + display: flex; + justify-content: center; + align-items: center; +} + +.title-resume p { + font-size: 2rem; + margin-left: 0.4em; + font-family: "Poppins", sans-serif; + font-weight: bolder; +} +.container { + font-family: "Poppins", sans-serif; + + box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6)); + width: 60%; + height: auto; + background-color: #fff; + padding-top: 2em; + padding-bottom: 5em; + margin-left: auto; + margin-right: auto; +} +/**/ +.name-place { + display: flex; + font-weight: bolder; + width: auto; + align-items: center; + justify-content: center; + margin-top: 3em; +} +#firstname { + border: none; + border-bottom: 2px solid black; + outline: none; + width: 90%; + padding: 1em 2em; + color: #0150fd; +} + +#firstname:hover { + border-color: #0150fd; +} +.email-div { + font-weight: bolder; + margin: 3em 0 0 7.5em; +} +#email { + border: none; + border-bottom: 2px solid black; + outline: none; + padding: 1em 2em; + color: #0150fd; + width: 78%; +} +#email:hover { + border-color: #0150fd; +} +.firstname-clas { + margin-left: 5em; +} +span { + color: #0150fd; +} +.text-area { + margin-left: auto; + margin-right: auto; +} +.submit-div { + margin: 1em 0 0 7.5em; +} +.send-button { + font-weight: bolder; + border: none; + border-radius: 3em; + background-color: #0150fd; + color: #fff; + padding: 0.8em 2.8em; +} +footer { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #fff; + padding: 1.5em 0; + margin-top: 3em; +} + +.link-wix { + width: 15.5%; + text-align: center; + margin-left: 2em; +} +.link-wix p { + margin-top: 1.5em; +} +.footer-section h5 { + margin-bottom: 0.6em; +} +.socialmedia-pic { + width: 14%; + padding: 0 0.2em 0 0.2em; +} +.footer-section { + display: flex; + justify-content: space-around; + align-items: center; + width: 50%; + float: right; + text-align: center; +} +footer p { + font-size: 14px; + margin-top: 0px; + margin-bottom: 0px; +} + +@media screen and (max-width: 540px) { + .navigation { + display: none; + } + body { + margin: 0px; + } + header { + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + padding: 0.7em 0px; + } + + .blue-div { + width: 1em; + height: 1em; + background-color: blue; + } + + .nav-naming { + font-family: "Poppins", sans-serif; + display: flex; + width: 70%; + flex-wrap: wrap; + align-items: flex-start; + flex-direction: column; + justify-content: space-around; + padding-top: 1em; + margin-left: 2em; + } + #firstname { + border-bottom: 2px solid black; + width: 90%; + } + + .smalldiv-name p { + font-size: 1.2rem; + font-weight: 800; + margin: 0px; + } + .separation { + display: none; + } + .work-title { + margin-top: 0px; + margin-left: 0.6em; + } + .smalldiv-name { + display: flex; + align-items: center; + margin-bottom: 0px; + } + .smalldiv-name p { + font-size: 1rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; + } + .work-title { + margin: 0px; + } + .title-resume { + display: flex; + justify-content: center; + align-items: center; + margin-top: 1.5em; + margin-bottom: 0px; + } + .name-place { + display: flex; + align-items: flex-start; + flex-direction: column; + margin-left: 1em; + } + .firstname-clas { + margin-left: 0px; + margin-top: 1em; + } + .email-div { + margin: 1em 0 0 1em; + font-weight: bolder; + } + .container { + width: 90%; + height: auto; + margin: 0 0px 0px 1em; + padding: 1em 0 2em 0; + box-shadow: 2px 2px 2px 2px rgb(200, 198, 198); + } + .footer-section { + display: flex; + width: 100%; + flex-wrap: wrap; + } + footer { + display: flex; + flex-wrap: wrap; + align-content: space-between; + flex-direction: column-reverse; + } + .socicalmedia-section { + padding-left: 0px; + } + .link-wix { + display: none; + } + + #hamburger__button-container { + display: block; + position: absolute; + top: 2em; + right: 2em; + cursor: pointer; + z-index: 2; + } + #hamburger__button-bars { + width: 26px; + height: 21px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + transition: transform 0.33s ease-out; + } + + .hamburger__button { + background-color: blue; + border-radius: 2px; + height: 3px; + } + #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 { + transform: rotate(-45deg); + transition: transform 0.33s ease-out; + } + + #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); + } + + #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 { + display: none; + } + .humburger-div { + display: block; + } +} diff --git a/MultiPage-Clone/css/main.css b/MultiPage-Clone/css/main.css index aa561706..33dcc637 100644 --- a/MultiPage-Clone/css/main.css +++ b/MultiPage-Clone/css/main.css @@ -1,3 +1,458 @@ /* Add your CSS here */ /* Dont' forget to link this file to your HTML in the */ +/* header */ +body { + margin: 0; + padding: 0; + font-family: "Quicksand", sans-serif; +} +/* */ + +header { + display: flex; + justify-content: space-around; + align-items: center; + + width: 100%; + padding: 2em 0; + background-color: #fff; + position: fixed; + top: 0; + left: 0; + z-index: 1; +} + +.blue-div { + width: 1.2em; + height: 1.2em; + background-color: blue; +} + +.separation { + margin-right: 0.3em; +} +.nav-naming { + font-family: "Poppins", sans-serif; + display: flex; + flex-wrap: wrap; + align-items: center; + width: 50%; +} + +.smalldiv-name { + display: flex; + align-items: center; +} +.smalldiv-name p { + font-size: 1.4rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; +} +.navigation { + width: 40%; +} +.navigation ul { + display: flex; + align-items: center; + justify-content: space-around; +} +.navigation ul li { + padding-right: 1em; + cursor: pointer; + list-style-type: none; +} +.navigation ul li a { + font-family: "Poppins", sans-serif; + text-decoration: none; +} +.navigation ul li:first-child { + pointer-events: auto; + color: #0150fd; +} +.humburger-div { + display: none; +} + +.navigation ul li:hover { + color: #0150fd; +} +/* main */ +.about-main { + display: flex; + margin-top: 8em; +} +/* left-side */ +.left-section { + position: relative; + background-color: #e6dacd; + width: 70%; + height: 50em; +} +/* middle */ +.midle-profile { + position: absolute; + top: 9em; + right: -3em; + background-color: #f4ece6; + width: 70%; + height: auto; + + box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6)); +} + +.profile-img { + margin: 2em 4em 1em 4em; + max-width: 60%; + max-height: 40%; + border-radius: 50%; +} + +.myname { + display: block; + font-size: 2rem; + text-align: center; + margin: 0.2em auto 1em auto; +} + +.smallblue-div { + width: 3em; + height: 0.2em; + background-color: #0150fd; + margin: 0 auto; +} +.resumeproject-button { + display: none; +} +.project { + margin-left: 4em; + text-align: center; + margin-top: 1.7em; + letter-spacing: 0.3em; +} +.profile-footer { + padding: 1em 0; + margin-top: 2em; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; +} +.profile-footer img { + width: 6%; +} + +.right-section { + align-self: center; + margin-left: 5em; +} +.hello { + font-weight: 700; + font-size: 6.25rem; + margin: 0px; + padding: 0px; + display: block; +} +.second-p { + font-size: 1.5rem; + padding: 0px; + margin-top: 0px; +} + +.resume-button { + background-color: #0150fd; + color: #fff; + font-weight: bold; + border: 2px solid #0150fd; + border-radius: 1em; + padding: 0.5em 2em; + cursor: pointer; +} +.resume-button:hover { + background-color: #fff; + color: black; +} +.project-button { + background-color: #fff; + border: 1px solid black; + border-radius: 1em; + padding: 0.5em 2em; + margin-left: 1em; + cursor: pointer; +} +.project-button:hover { + background-color: #0150fd; + color: #fff; + border: 1px solid #0150fd; +} +.aboutmepar-div { + width: 60%; +} +.aboutme-p { + font-family: "Poppins", sans-serif; + line-height: 1.5em; +} +.credit-p { + margin: 0px; +} + +/* i used the same css for all page footer */ +/* footer */ +footer { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #fff; + padding: 1.5em 0; +} + +.link-wix { + width: 15.5%; + text-align: center; + margin-left: 2em; +} +.link-wix p { + margin-top: 1.5em; +} +.footer-section h5 { + margin-bottom: 0.6em; +} +.socialmedia-pic { + width: 14%; + padding: 0 0.2em 0 0.2em; +} +.footer-section { + display: flex; + justify-content: space-around; + align-items: center; + width: 50%; + float: right; + text-align: center; +} +footer p { + font-size: 14px; + margin-top: 0px; + margin-bottom: 0px; +} + +@media screen and (max-width: 540px) { + .navigation { + display: none; + } + + #header { + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + padding: 0 0 1em 0; + } + .humburger-div { + display: block; + } + .blue-div { + width: 1em; + height: 1em; + background-color: blue; + } + + .nav-naming { + font-family: "Poppins", sans-serif; + display: flex; + width: 70%; + flex-wrap: wrap; + align-items: flex-start; + flex-direction: column; + justify-content: space-around; + padding-top: 1em; + margin-left: 2em; + } + + .name { + font-size: 1.2rem; + font-weight: 800; + margin: 0px; + } + .separation { + display: none; + } + .work-title { + margin-top: 0px; + margin-left: 0.6em; + } + .smalldiv-name { + display: flex; + align-items: center; + margin-bottom: 0px; + } + .smalldiv-name p { + font-size: 1rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; + } + .work-title { + margin: 0px; + } + .about-main { + display: flex; + flex-direction: column; + } + .midle-profile { + position: absolute; + top: -10em; + left: 2em; + background-color: #f4ece6; + min-width: 90%; + height: auto; + box-shadow: var(--shd, 0 1px 4px rgba(0, 0, 0, 0.6)); + } + + .profile-img { + width: 60%; + border-radius: 50%; + } + .profileimg-div { + margin: 1em 0px; + text-align: center; + } + + .left-section { + position: relative; + background-color: #e6dacd; + width: 100%; + height: 23em; + } + .myname { + font-size: 1.2rem; + font-weight: 700; + } + .project { + display: none; + } + .resumeproject-button { + display: flex; + justify-content: space-evenly; + align-items: center; + margin-top: 2em; + } + /* right-section */ + .right-section { + background-color: #e6dacd; + padding-left: 7%; + padding-top: 5em; + margin-left: 0px; + } + .hello { + font-weight: 700; + font-size: 2.3rem; + margin: 0px 0px 0.5em 0.2em; + padding: 0px; + display: block; + } + .second-p { + font-size: 1.3rem; + padding: 0px; + margin-top: 0px; + margin-left: 0.4em; + } + + .buttonsfor-mainpage { + display: none; + } + .aboutmepar-div { + width: 80%; + } + .aboutme-p { + width: 100%; + } + .credit-p { + font-family: "Quicksand", sans-serif; + font-size: 0.7rem; + margin: 0px; + } + .footer-section { + display: flex; + width: 100%; + flex-wrap: wrap; + } + footer { + display: flex; + flex-wrap: wrap; + align-content: space-between; + flex-direction: column-reverse; + } + .socicalmedia-section { + padding-left: 0px; + } + .link-wix { + display: none; + } + #hamburger__button-container { + display: block; + position: absolute; + top: 2em; + right: 2em; + cursor: pointer; + z-index: 2; + } + #hamburger__button-bars { + width: 26px; + height: 21px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + transition: transform 0.33s ease-out; + } + + .hamburger__button { + background-color: blue; + border-radius: 2px; + height: 3px; + } + #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 { + transform: rotate(-45deg); + transition: transform 0.33s ease-out; + } + + #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); + } + + #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 { + display: none; + } +} diff --git a/MultiPage-Clone/css/project.css b/MultiPage-Clone/css/project.css new file mode 100644 index 00000000..f279a727 --- /dev/null +++ b/MultiPage-Clone/css/project.css @@ -0,0 +1,348 @@ +/* pr0jects */ +body { + background-color: #e6dacd; +} +header { + display: flex; + justify-content: space-around; + align-items: center; + + width: 100%; + padding: 2em 0; + background-color: #fff; + position: fixed; + top: 0; + left: 0; + z-index: 1; +} + +.blue-div { + width: 1.2em; + height: 1.2em; + background-color: blue; +} + +.separation { + margin-right: 0.3em; +} +.nav-naming { + font-family: "Poppins", sans-serif; + display: flex; + flex-wrap: wrap; + align-items: center; + width: 50%; +} + +.smalldiv-name { + display: flex; + align-items: center; +} +.smalldiv-name p { + font-size: 1.4rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; +} +.navigation { + width: 40%; +} +.navigation ul { + display: flex; + align-items: center; + justify-content: space-around; +} +.navigation ul li { + padding-right: 1em; + cursor: pointer; + list-style-type: none; +} +.navigation ul li a { + font-family: "Poppins", sans-serif; + text-decoration: none; +} +.navigation ul li:first-child { + pointer-events: auto; + color: #0150fd; +} +.humburger-div { + display: none; +} + +.navigation ul li:hover { + color: #0150fd; +} +.title-resume { + margin-top: 10em; + display: flex; + justify-content: center; + align-items: center; +} +.title-resume h1 { + margin-left: 1em; +} +.project-p { + font-family: "Poppins", sans-serif; + width: 51%; + font-size: 1em; + margin: 1em auto 3em auto; + text-align: center; + line-height: 1.5em; + color: rgb(70, 63, 63); +} +#project-title { + line-height: 1.5em; + color: rgb(70, 63, 63); +} +.project-title { + margin-left: 1.5em; +} + +.mainproject-div { + font-family: "Poppins", sans-serif; + display: flex; + justify-content: space-between; + width: 55%; + margin: 0 auto 4em auto; + background-color: #fff; +} +#mainproject-div { + margin-bottom: 8em; +} +.mainproject-div p { + margin-left: 1.5em; +} +.projectname-div { + margin: auto 0; + width: 57%; +} +.projectname-div p { + line-height: 1.7em; +} +.projectname-div h3 { + color: #0150fd; + margin-top: 0px; + margin-bottom: 0.5em; +} +.projectname-div h5 { + margin-top: 0px; +} +.project-img { + width: 45%; +} +.project-img img { + width: 100%; + height: 100%; +} +.projectblue-div { + width: 0.5em; + height: 3em; + background-color: #0150fd; + display: block; +} +.bluediv-box { + display: flex; +} +footer { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #fff; + padding: 1.5em 0; +} + +.link-wix { + width: 15.5%; + text-align: center; + margin-left: 2em; +} +.link-wix p { + margin-top: 1.5em; +} +.footer-section h5 { + margin-bottom: 0.6em; +} +.socialmedia-pic { + width: 14%; + padding: 0 0.2em 0 0.2em; +} +.footer-section { + display: flex; + justify-content: space-around; + align-items: center; + width: 50%; + float: right; + text-align: center; +} +footer p { + font-size: 14px; + margin-top: 0px; + margin-bottom: 0px; +} +@media screen and (max-width: 540px) { + .navigation { + display: none; + } + body { + margin: 0px; + } + header { + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + padding: 1em 0px; + } + + .blue-div { + width: 1em; + height: 1em; + background-color: blue; + } + + .nav-naming { + font-family: "Poppins", sans-serif; + display: flex; + width: 70%; + flex-wrap: wrap; + align-items: flex-start; + flex-direction: column; + justify-content: space-around; + padding-top: 1em; + margin-left: 2em; + } + + .smalldiv-name p { + font-size: 1.2rem; + font-weight: 800; + margin: 0px; + } + .separation { + display: none; + } + .work-title { + margin-top: 0px; + margin-left: 0.6em; + } + .smalldiv-name { + display: flex; + align-items: center; + margin-bottom: 0px; + } + .smalldiv-name p { + font-size: 1rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; + } + .work-title { + margin: 0px; + } + + .project-p { + width: 90%; + } + .mainproject-div { + display: flex; + flex-direction: column; + width: 98%; + margin: 0 auto 4em auto; + background-color: #fff; + } + .projectname-div { + width: 95%; + } + .project-img { + width: 100%; + height: 40%; + } + .project-img img { + width: 100%; + } + .footer-section { + display: flex; + width: 100%; + flex-wrap: wrap; + } + footer { + display: flex; + flex-wrap: wrap; + align-content: space-between; + flex-direction: column-reverse; + } + .socicalmedia-section { + padding-left: 0px; + } + .link-wix { + display: none; + } + /* nav */ + #hamburger__button-container { + display: block; + position: absolute; + top: 2em; + right: 2em; + cursor: pointer; + z-index: 2; + } + #hamburger__button-bars { + width: 26px; + height: 21px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + transition: transform 0.33s ease-out; + } + + .hamburger__button { + background-color: blue; + border-radius: 2px; + height: 3px; + } + #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 { + transform: rotate(-45deg); + transition: transform 0.33s ease-out; + } + + #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); + } + + #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 { + display: none; + } + .humburger-div { + display: block; + } +} diff --git a/MultiPage-Clone/css/resume.css b/MultiPage-Clone/css/resume.css new file mode 100644 index 00000000..9b3c11bf --- /dev/null +++ b/MultiPage-Clone/css/resume.css @@ -0,0 +1,429 @@ +/* resume-page*/ + +header { + display: flex; + justify-content: space-around; + align-items: center; + + width: 100%; + padding: 2em 0; + background-color: #fff; + position: fixed; + top: 0; + left: 0; + z-index: 1; +} + +.blue-div { + width: 1.2em; + height: 1.2em; + background-color: blue; +} + +.separation { + margin-right: 0.3em; +} +.nav-naming { + font-family: "Poppins", sans-serif; + display: flex; + flex-wrap: wrap; + align-items: center; + width: 50%; +} + +.smalldiv-name { + display: flex; + align-items: center; +} +.smalldiv-name p { + font-size: 1.4rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; +} +.navigation { + width: 40%; +} +.navigation ul { + display: flex; + align-items: center; + justify-content: space-around; +} +.navigation ul li { + padding-right: 1em; + cursor: pointer; + list-style-type: none; +} +.navigation ul li a { + font-family: "Poppins", sans-serif; + text-decoration: none; +} +.navigation ul li:first-child { + pointer-events: auto; + color: #0150fd; +} + +.navigation ul li:hover { + color: #0150fd; +} +.humburger-div { + display: none; +} +.resume-body, +.main-project { + background-color: #e6dacd; + position: relative; +} +.title-resume { + display: flex; + justify-content: center; + align-items: center; + margin-top: 15em; +} +.title-resume h1 { + font-weight: bolder; + font-family: "Poppins", sans-serif; + margin-left: 0.3em; +} +.information-area { + display: flex; + justify-content: space-between; + align-items: center; + width: 56%; + margin: auto; + margin-top: 4em; +} +.information-area h2 { + font-family: "Poppins", sans-serif; + font-weight: bolder; +} +.cv-button { + background-color: #0150fd; + color: #fff; + font-weight: bold; + border: 2px solid #0150fd; + border-radius: 1em; + padding: 0.5em 1em; + cursor: pointer; +} +.cv-button:hover { + background-color: #e6dacd; + color: black; +} +.title-grid p { + color: #403b3b; + display: block; + font-family: "Poppins", sans-serif; +} +.second-child, +.third-child { + margin-top: 0px; + font-size: 12px; +} +.main-section { + width: 50%; + margin: 2em auto 5em auto; + + padding: 3em 3em; + background-color: #fff; + box-shadow: 2px 2px 2px 2px rgb(200, 198, 198); +} +.main-section h3 { + margin-bottom: 0; + color: #0150fd; +} +.main-section h2 { + font-family: "Poppins", sans-serif; +} +.cv-article { + display: flex; + justify-content: space-between; +} +.section-p { + width: 50%; +} +.section-p p { + font-family: "Poppins", sans-serif; + font-size: 14px; + line-height: 25px; + color: #403b3b; +} +.education-line { + margin: 7em 0 3.5em 16.3em; +} +.education-line h2 { + font-family: "Poppins", sans-serif; +} +.professional-skillset { + display: flex; + align-items: center; + font-size: 14px; + color: #403b3b; +} +.professional-skillset p { + margin-left: 3px; +} +.skill-set { + margin-left: 4em; +} +#blue-div { + margin-left: 0px; +} +.professional-flex { + display: flex; +} +.skillset h2 { + margin-top: 4em; +} +.language-section { + margin-bottom: 4em; +} +.professional-skillset1 { + display: flex; + align-items: center; + margin-left: 5em; + font-size: 14px; + color: #403b3b; +} +.professional-skillset1 p { + margin-left: 3px; +} +footer { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #fff; + padding: 1.5em 0; +} + +.link-wix { + width: 15.5%; + text-align: center; + margin-left: 2em; +} +.link-wix p { + margin-top: 1.5em; +} +.footer-section h5 { + margin-bottom: 0.6em; +} +.socialmedia-pic { + width: 14%; + padding: 0 0.2em 0 0.2em; +} +.footer-section { + display: flex; + justify-content: space-around; + align-items: center; + width: 50%; + float: right; + text-align: center; +} +footer p { + font-size: 14px; + margin-top: 0px; + margin-bottom: 0px; +} + +@media screen and (max-width: 540px) { + .navigation { + display: none; + } + body { + margin: 0px; + } + header { + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + padding: 1em 0px; + } + + .blue-div { + width: 1em; + height: 1em; + background-color: blue; + } + + .nav-naming { + font-family: "Poppins", sans-serif; + display: flex; + width: 70%; + flex-wrap: wrap; + align-items: flex-start; + flex-direction: column; + justify-content: space-around; + padding-top: 1em; + margin-left: 2em; + } + + .smalldiv-name p { + font-size: 1.2rem; + font-weight: 800; + margin: 0px; + } + .separation { + display: none; + } + .work-title { + margin-top: 0px; + margin-left: 0.6em; + } + .smalldiv-name { + display: flex; + align-items: center; + margin-bottom: 0px; + } + .smalldiv-name p { + font-size: 1rem; + font-family: "Poppins", sans-serif; + font-weight: 900; + padding-left: 0.5em; + padding-right: 0.5em; + } + .work-title { + margin: 0px; + } + .information-area { + width: 90%; + margin-top: 0px; + } + .title-resume { + display: flex; + justify-content: center; + align-items: center; + margin-top: 1.5em; + } + .education-line { + margin: 1em 0 0 1em; + } + .education-line h2 { + margin: 0px; + } + .professional-flex { + display: flex; + flex-direction: column; + } + .skillset h2 { + margin-top: 0px; + } + .professional-flex p { + font-size: 1rem; + } + .skill-set { + margin-left: 0px; + } + .professional-skillset1 { + margin-left: 0px; + font-size: 1rem; + } + .cv-article { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + width: 90%; + } + .section-p { + width: 80%; + } + .section-p p { + font-size: 1rem; + } + .main-section { + margin: 2em 0px 0px 1em; + width: 90%; + + padding: 1.3em 1em 1.3em 2em; + + background-color: #fff; + box-shadow: 2px 2px 2px 2px rgb(200, 198, 198); + } + .footer-section { + display: flex; + width: 100%; + flex-wrap: wrap; + } + footer { + display: flex; + flex-wrap: wrap; + align-content: space-between; + flex-direction: column-reverse; + } + .socicalmedia-section { + padding-left: 0px; + } + .link-wix { + display: none; + } + /* nav */ + #hamburger__button-container { + display: block; + position: absolute; + top: 2em; + right: 2em; + cursor: pointer; + z-index: 2; + } + #hamburger__button-bars { + width: 26px; + height: 21px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + transition: transform 0.33s ease-out; + } + + .hamburger__button { + background-color: blue; + border-radius: 2px; + height: 3px; + } + #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 { + transform: rotate(-45deg); + transition: transform 0.33s ease-out; + } + + #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); + } + + #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 { + display: none; + } + .humburger-div { + display: block; + } +} diff --git a/MultiPage-Clone/index.html b/MultiPage-Clone/index.html index cd704c69..ae26bbc7 100644 --- a/MultiPage-Clone/index.html +++ b/MultiPage-Clone/index.html @@ -1,21 +1,167 @@ - - - - + + + + + + + + + + + Responsive grid project - + - + + + +
+
+
+
+ +
+

Nohe
Tekelmariyam

+ +
+
+
+

PROJECT MANAGER

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

Hello

+

Here's who I am & what I do

+
+ + +
+
+

+ I'm a paragraph. Click here to add your own text and edit me.It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. +

+ +

+ I’m a great place for you to tell a story and let your users know a + little more about you. +

+
+
+
+ -

This website design was created by Wix.com, and is used here for strictly educational purposes.

- +

+ This website design was created by Wix.com, and is used here for strictly + educational purposes. +

+ + + + diff --git a/MultiPage-Clone/project.html b/MultiPage-Clone/project.html new file mode 100644 index 00000000..3bef7e19 --- /dev/null +++ b/MultiPage-Clone/project.html @@ -0,0 +1,173 @@ + + + + + + + + + + + + + project + + + +
+
+
+
+

Nohe Tekelmariyam

+
+
/
+

PROJECT MANGER

+
+ + +
+ +
+
+
+
+
+

Projects

+
+ +
+

+ I'm a paragraph. Click here to add your own text and edit me. + It’s easy. Just click “Edit Text” or double click me to add your + own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you. +

+
+
+ +
+
+
+
+

Project name 01

+
Role Title
+
+
+

+ I'm a paragraph. Click here to add your own text and edit me. + It’s easy. Just click “Edit Text” or double click me to add your + own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you. +

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

Project name 02

+
Role Title
+
+
+

+ I'm a paragraph. Click here to add your own text and edit me. + It’s easy. Just click “Edit Text” or double click me to add your + own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you. +

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

Project name 03

+
Role Title
+
+
+

+ I'm a paragraph. Click here to add your own text and edit me. + It’s easy. Just click “Edit Text” or double click me to add your + own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you. +

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