diff --git a/index.html b/index.html index f4587c8..e190e86 100644 --- a/index.html +++ b/index.html @@ -1,196 +1,204 @@ + - - - - - - + + + + + + + + Jad Sarout | CV - Jad Sarout | CV - - - - + + + + -
-
-
-
-

Jad Sarout

-

Codes and Sleeps

-
-
- Jad Sarout -
-
-
-
-
-

About

-

- Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. -

-
-
-

Competencies

-
-
- HTML -
-
- CSS -
-
- Javascript -
-
-
-
- HTML -
-
- CSS -
-
- Javascript -
-
-
-
-

Experiences

-
-

- Man2ouche Seller - Snack Edouard -

-
- +
+
+
+
+

Jad Sarout

+

Codes and Sleeps

+
+
+ Jad Sarout +
+
+
+
+
+

About

+

+ Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, + faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. +

+
+
+

Competencies

+
+
+ HTML +
+
+ CSS +
+
+ Javascript +
+
+
+
+ HTML +
+
+ CSS +
+
+ Javascript +
+
+
+
+

Experiences

+
+

+ Man2ouche Seller + Snack Edouard +

+
+ Paris - + 30 - / - 12 - / - 1995 - -
-

- Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. -

-
-
-

- Man2ouche Seller - Snack Edouard -

-
- + / + 12 + / + 1995 + +
+

+ Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, + faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. +

+
+
+

+ Man2ouche Seller + Snack Edouard +

+
+ Paris - + 30 - / - 12 - / - 1995 - -
-

- Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. -

-
-
-
-

Education

-
-

- Web Stack Training - Codi -

-
- + / + 12 + / + 1995 + +
+

+ Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, + faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. +

+
+
+
+

Education

+
+

+ Web Stack Training + Codi +

+
+ Beirut - + 30 - / - 12 - / - 1995 - -
-

- Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. -

-
-
-

- Man2ouche Seller - Snack Edouard -

-
- + / + 12 + / + 1995 + +
+

+ Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, + faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. +

+
+
+

+ Man2ouche Seller + Snack Edouard +

+
+ Paris - + 30 - / - 12 - / - 1995 - -
-

- Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. -

-
-
-
-

Hobbies

-
    -
  • Watching Youtube
    • -
  • Sleeping
    • -
  • Writing CVs
    • -
-
-
-

Contact

-
-
-
Email
-
- jad@codi.tech -
-
-
-
Skype
-
jad.sarout
-
-
-
Phone/Whatsapp
-
- +96170261482 -
-
-
-
Github
-
- Xananax -
-
-
-
Facebook
-
- Jad Sarout -
-
+ / + 12 + / + 1995 + +
+

+ Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, + faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus. +

+
+
+
+

Hobbies

+
    +
  • Watching Youtube
    • +
  • Sleeping
    • +
  • Writing CVs
    • +
+
+
+

Contact

+
+
+
Email
+
+ jad@codi.tech +
+
+
+
Skype
+
jad.sarout
+
+
+
Phone/Whatsapp
+
+ +96170261482 +
+
+
+
Github
+
+ Xananax +
+
+
+
Facebook
+
+ Jad Sarout +
+
+
+
-
- + \ No newline at end of file diff --git a/style/jad.css b/style/jad.css new file mode 100644 index 0000000..35cd371 --- /dev/null +++ b/style/jad.css @@ -0,0 +1,221 @@ + html { + width: 80%; + margin: auto; + } + + body { + width: 80%; + margin: auto; + } + + #wrapper { + width: 80%; + margin: auto; + } + + header { + background: gray; + color: red; + } + + hgroup { + padding: 1%; + padding-left: 10%; + } + + figure { + position: absolute; + top: 0; + left: 32%; + } + + img { + position: relative; + } + + .content { + margin: 2%; + width: 87%; + padding-left: 5%; + } + + section { + width: 50%; + float: left; + } + + #contact { + position: absolute; + top: 2%; + left: 51.4%; + width: 38%; + } + + dt, + dd { + float: left; + margin: 0; + width: 22%; + } + + dt { + clear: both; + } + + .contact-type { + color: white; + background-color: red; + } + + .contact-value { + color: red; + background-color: black; + width: 75%; + } + + .contact-value a { + color: red; + } + + h3::before { + display: block; + float: left; + content: ""; + text-indent: 20px; + width: 20px; + height: 20px; + background: red; + border-radius: 20px; + } + + h3 { + border-bottom: 1px solid #b6a9a9; + } + + .experience-date-separator { + color: red; + } + + .experience-date-separator span { + color: gray; + } + + .skill { + margin-top: 7px; + margin-bottom: 3px; + background-color: #c9c5c5; + color: white; + padding-top: 7px; + padding-bottom: 8px; + } + + .skills.skills-primary::before { + content: "Main"; + } + + .skills.skills-secondary::before { + content: "Other"; + } + + [data-skill="5"] span { + display: block; + background-color: red; + height: 30px; + width: 50%; + } + + [data-skill="3"] span { + display: block; + background-color: red; + height: 30px; + width: 30%; + } + + [data-skill="1"] span { + display: block; + background-color: red; + height: 30px; + width: 15%; + } + + [data-skill="9"] span { + display: block; + background-color: red; + height: 30px; + width: 90%; + } + + [data-skill="7"] span { + display: block; + background-color: red; + height: 30px; + width: 70%; + } + + .skills.skills-secondary span { + box-shadow: inset 0px 35px 0px 0px #a59c9ccb; + } + + h4 { + color: red; + } + + #contact h3 { + display: none; + } + + .contact-skype dd { + color: black; + } + + .experience-details { + color: gray; + } + + .experience-details::before { + content: "in"; + } + + .experience-institution::before { + content: "@" + } + + @media screen and (max-width:700px) { + htm { + width: 100%; + margin: 0 auto; + } + body { + width: 100%; + margin: 0 auto; + } + #wrapper { + width: 100%; + margin: 0 auto; + } + header { + width: 50%; + } + hgroup { + position: relative; + width: 50%; + } + section { + float: none; + position: relative; + } + figure { + position: relative; + left: 14px; + top: -26px; + } + #contact { + position: relative; + left: 0; + width: 49%; + } + dt, + dd { + width: 25%; + } + } \ No newline at end of file diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..059d2a2 --- /dev/null +++ b/style/style.css @@ -0,0 +1,201 @@ + body { + margin: 0 auto; + } + + #wrapper { + margin: 0 auto; + } + + header { + background: gray; + color: red; + padding: 1%; + } + + hgroup { + padding-left: 10%; + margin: 0; + font-size: 20px; + } + + img { + position: absolute; + left: 32%; + top: 10%; + } + + section { + float: left; + width: 50%; + margin: 0; + } + + .content { + width: 85%; + font-size: 26px; + margin: 7%; + padding-left: 20px; + } + + .contacts { + position: absolute; + top: -2%; + width: 57.8%; + } + + .contact-type { + float: left; + color: white; + background: red; + width: 24%; + padding: 1px; + } + + .contact-value { + float: left; + background: black; + width: 60%; + padding: 1px; + margin: 0; + } + + .contact-value a { + color: red; + text-decoration: none; + } + + h3::before { + display: block; + float: left; + content: ""; + text-indent: 20px; + width: 20px; + height: 20px; + background: red; + border-radius: 20px; + } + + h3 { + border-bottom: 1px solid #b6a9a9; + } + + .experience-date-separator { + color: red; + } + + .experience-date-separator span { + color: gray; + } + + .skill { + margin-top: 7px; + margin-bottom: 3px; + background-color: #c9c5c5; + color: white; + padding-top: 7px; + padding-bottom: 8px; + } + + .skills.skills-primary::before { + content: "Main"; + } + + .skills.skills-secondary::before { + content: "Other"; + } + + [data-skill~="5"] span { + display: block; + background-color: red; + height: 30px; + width: 50%; + } + + [data-skill~="3"] span { + display: block; + background-color: red; + height: 30px; + width: 30%; + } + + [data-skill~="1"] span { + display: block; + background-color: red; + height: 30px; + width: 15%; + } + + [data-skill~="9"] span { + display: block; + background-color: red; + height: 30px; + width: 90%; + } + + [data-skill~="7"] span { + display: block; + background-color: red; + height: 30px; + width: 70%; + } + + .skills.skills-secondary span { + box-shadow: inset 0px 35px 0px 0px #a59c9ccb; + } + + h4 { + color: red; + } + + #contact h3 { + display: none; + } + + p { + margin-top: 40px; + } + + .contact-skype dd { + color: black; + } + + .experience-details { + color: gray; + margin-top: -34px; + margin-left: 19px; + } + + .experience-details::before { + content: "in"; + } + + .experience-institution::before { + content: "@" + } + + @media screen and (max-width:1024px) { + #wrapper { + margin: 0; + } + section { + position: relative; + float: none; + width: 100% + } + .contacts { + width: 105%; + margin: -35px; + font-size: 22px; + } + .contact-type { + width: 52%; + } + .contact-value { + width: 46%; + } + img { + position: relative; + left: 15px; + top: -7px; + } + } \ No newline at end of file diff --git a/style/style2.css b/style/style2.css new file mode 100644 index 0000000..a16523e --- /dev/null +++ b/style/style2.css @@ -0,0 +1,110 @@ + #wrapper { + width: 80%; + } + + h1 { + border-bottom: 1px solid gray; + } + + img { + float: right; + margin: -30px 0 0 0; + transform: rotate(-20deg); + } + + h3 { + font-style: italic; + padding: 0 26px 0 0; + float: left; + height: 90px; + border-right: 1px solid #999; + } + + p { + margin: 0; + } + + h2 { + display: none; + } + + #about h3 { + display: none; + } + + .experience { + width: 84%; + margin-left: 13%; + } + + #contact { + display: none; + } + + dl { + background-image: url("/home/jad/css-cv/images/facebook.png"); + background-repeat: no-repeat; + } + + h4 { + color: rgb(109, 156, 109) + } + + .experience-details { + color: gray; + float: right; + margin-top: -37px; + } + + li { + margin-left: 104px; + padding-top: 17px; + height: 1px; + } + + section#about p { + width: 60%; + margin-bottom: 82px; + color: gray; + font-style: italic; + } + + .skill { + width: 22%; + float: left; + margin: 0px; + margin-left: 47px; + margin-bottom: 38px; + } + + [data-skill="5"] span { + display: block; + background-color: rgb(61, 117, 90); + width: 1px; + } + + [data-skill="3"] span { + display: block; + background-color: rgb(61, 117, 90); + } + + [data-skill="1"] span { + display: block; + background-color: rgb(61, 117, 90); + } + + [data-skill="9"] span { + display: block; + background-color: rgb(61, 117, 90); + } + + [data-skill="7"] span { + display: block; + background-color: rgb(61, 117, 90); + } + + [data-skill="7"] span::after { + content: '★★ ★ ★ '; + color: yellow; + margin: 0; + } \ No newline at end of file