From 87d686085426cc49cff4dc84824cea8cb575adcd Mon Sep 17 00:00:00 2001 From: salehsaadi Date: Mon, 11 Dec 2017 11:26:03 +0200 Subject: [PATCH 1/2] Style1Finished --- index.html | 115 ++++++++++++++- index1.html | 413 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 525 insertions(+), 3 deletions(-) create mode 100644 index1.html diff --git a/index.html b/index.html index f4587c8..ab290cb 100644 --- a/index.html +++ b/index.html @@ -11,11 +11,120 @@ Jad Sarout | CV - + + -
+
@@ -193,4 +302,4 @@

Contact

- \ No newline at end of file + diff --git a/index1.html b/index1.html new file mode 100644 index 0000000..5c6717b --- /dev/null +++ b/index1.html @@ -0,0 +1,413 @@ + + + + + + + + + + + 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 +

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

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

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

+
+ + 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 +
+
+
+
+
+
+ + From 2610b05669e9b323675ead66f9c49029b9cfeb4a Mon Sep 17 00:00:00 2001 From: salehsaadi Date: Fri, 22 Dec 2017 04:36:06 +0200 Subject: [PATCH 2/2] second commit --- index.html | 115 +------------ index1.html | 413 ----------------------------------------------- style/style1.css | 253 +++++++++++++++++++++++++++++ style/style2.css | 220 +++++++++++++++++++++++++ 4 files changed, 476 insertions(+), 525 deletions(-) delete mode 100644 index1.html create mode 100644 style/style1.css create mode 100644 style/style2.css diff --git a/index.html b/index.html index ab290cb..8886220 100644 --- a/index.html +++ b/index.html @@ -11,122 +11,13 @@ Jad Sarout | CV - + -
-
-
+
+

Jad Sarout

Codes and Sleeps

diff --git a/index1.html b/index1.html deleted file mode 100644 index 5c6717b..0000000 --- a/index1.html +++ /dev/null @@ -1,413 +0,0 @@ - - - - - - - - - - - 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 -

-
- - 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 -

-
- - 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 -

-
- - 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 -

-
- - 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 -
-
-
-
-
-
- - diff --git a/style/style1.css b/style/style1.css new file mode 100644 index 0000000..d357eae --- /dev/null +++ b/style/style1.css @@ -0,0 +1,253 @@ + + body { + background: #fff; + font: 14px 'Open Sans', 'tahoma', verdana, arial, sans-serif; + color: #333; + +} +html { + height: 100%; + width: 100%; +} +* { + margin: 0px; + padding: 0px; +box-sizing: border-box; + } +#wrapper { + width: 90%; + margin: 0px auto; + margin-top: 150px; +} + header { + width: 100%; + height: 150px; + background: gray; + position: absolute; + right: 0px; + top: 0px; + } + header>div { + width: 900px; + margin: 0px auto; + position: relative; + } + hgroup { + position: absolute; + left: 3%; + top: 40px; + color: red; + } + hgroup h1 { + padding-bottom: 15%; + } + figure { + position: absolute; + left: 25%; + top: 20px; + } + section { + width: 50%; + float: left; + } + section P { + margin-right: 5%; + } + .contacts { + width: 40%; + position: absolute; + top:2%; + right: 0%; + } + .contact-type { + float: left; + width: 30%; + color: white; + background: red; +padding: 0px 2px; +} + .contact-value { + float: left; + width: 70%; + background: black; + padding-left: 5px; + } + .contact-value a { + color:red; + text-decoration: none; + } + .contact-skype dd { +color: black; + } + .content { + padding: 5% 0%; + } + .content h3 { + border-bottom: 1px solid lightgray; + padding:2% 0% ; + } +.content p { +padding-top: 2%; +} +.skills { +padding-top: 2%; +} + h3::before { + content: " "; + width: 15px; + height: 15px; + border-radius: 7.5px; + display: inline-block; + margin-right: 3px; + background: red; + } +.skills-secondary { + margin-top: 10px; + } + .skills-primary::before { + content: "Main"; + display: block; + font-size: 16px; + } + .skills-secondary::before { + content: "Other"; + display: block; + font-size: 16px; + } + #competencies div { +margin-bottom: 5px; + } + + .skill { + background: gray; + height: 30px; + } + .skills-primary span { + background: red; + display: inline-block; +height: 20px; +margin: 4px; + } + .skills-secondary span { + background:rgb(232, 55, 55); + display: inline-block; +height: 20px; +margin: 4px; + } + div[data-skill='5'] span { + width: 50%; + } + div[data-skill='3'] span { + width: 30%; + } + div[data-skill='1'] span { + width: 6%; + } + div[data-skill='9'] span { + width: 85%; + } + div[data-skill='7'] span { + width: 70%; + } + .experiences { + width: 50%; + } + #experiences h3 { + border-bottom: 1px solid lightgray; + } + .education h3 { + padding-top: 2px; + } + + #experiences h4 { + color: rgb(232, 55, 55); + margin-top: 10px; + } + .experience-type::after { + content:" @"; + } + .experience-location::before { + content:"In"; + } + .experience-location::after { + content:"on"; + } + .experience-details { + color: lightgray; + padding-left: 7px; + } + .experience-date-separator { + color: rgb(232, 55, 55); + } + .experience-description { + margin-top: 10px; + } + #education h4 { + color: rgb(232, 55, 55); + margin-top: 10px; + } + #hobbies { + clear: both; + margin-bottom: 10%; + } + #hobbies h3 { + padding-bottom: 10px; + border-bottom: 1px solid lightgrey; + } + #hobbies ul { + margin: 10px 0px 0px 30px; + } + #contact h3 { + visibility: hidden; + } + @media only screen and (max-width:700px){ + body { + width: 100%; + } + #wrapper{ + width:100%; + padding:0 10%; + } + header { + height: 250px; + background: gray; + margin-bottom: 40px; + } + section { + width: 80%; + } + hgroup { + position: static; + padding: 2% 0% 0% 10%; + } + hgroup h1{ + padding-bottom: 2%; + } + figure{ + position: static; + padding: 1% 0% 0% 11%; + } + #about { + margin-top: 150px; + padding: 0%; + } + #about h3 { + width: 100%; + } + #contact { + display: none; + } + .content p{ + padding: 2% 0%; + } + + .experience:nth-last-of-type(2n){ + display: none; + } + #education { + display: none; + } + #hobbies { + display: none; + } + } diff --git a/style/style2.css b/style/style2.css new file mode 100644 index 0000000..710e78d --- /dev/null +++ b/style/style2.css @@ -0,0 +1,220 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} +body { + font: 14px 'Open Sans', 'tahoma', verdana, arial, sans-serif; + color: #333; +} +#wrapper { + width: 90%; + padding: 7%; +} + header { + margin-bottom: 2%; + } +header>div { +position: relative; +} +hgroup h1 { + border-bottom: 1px solid lightgray; + padding-bottom: 10px; +} +hgroup h2{ +display: none; +} +figure { + position: absolute; + top: 20%; + right: 5%; + transform: rotate(-12deg); +} + +section{ + float:left; + width: 100%; + position:relative; + margin-bottom: 50px; +} +h3 { + color: black; + font-style: italic; +} +#about h3 { + display: none; +} +#about p { + width: 58%; + text-align: justify; + color: gray; +} +#competencies h3 { + float: left; + height: 90px; + padding-right: 50px; + border-right: 2px solid #999; + } + #competencies .skill { + display: inline-block; + padding: 5px; + color: white; + } + .skills span { + display: inline-block; + width: 130px; + height: 30px; + background-color: #006666; + padding: 6px; + +} + +.skills-primary[data-skill='5'] span::after { + content: "★★★"; +} +[data-skill='3'] span::after { + content: "★★★★"; +} +[data-skill='1'] span::after { + content: "★"; +} +[data-skill='9'] span::after { + content: "★★★★"; +} +[data-skill='5'] span::after { + content: "★★★"; +} +[data-skill='7'] span::after { + content: "★★★★"; +} +.skills-secondary span { + font-size: 8px; + } + .skill span::after { + float: right; + } + #experiences h3{ + float: left; +} +.experience { + width: 80%; + height: 150px; + position: relative; + top: 0px; + left: 158px; + border-left: 2px solid #999; +} +.experience-type { + position: absolute; + top: 0%; + left: 2%; + color: #066666; + +} +.experience-institution { + display: none; +} +.experience-details { + position: absolute; + top: 0%; + right: 0%; + color: gray; +} +.experience-description { + position: absolute; + top: 20%; + left: 2%; +} +#hobbies ul { + position: absolute; + top: 0%; + left: 158px; + border-left: 2px solid #999; +} +li { + margin-left: 35px; +} +#contact h3 { + display: none; +} +#contact{ +margin: 5% 15%; +} +.contact{ + width: 50px; + height: auto; + float: left; + margin-left: 5%; + } +.contact-type, .contact-value{ + visibility: hidden; +} +.contact-email { +content: url(".//../images/email.png"); +} +.contact-skype { + display: none; +} +.contact-phone { + content: url(".//../images/phone.png"); +} +.contact-github { + content: url(".//../images/github.png"); +} +.contact-facebook { + content: url(".//../images/facebook.png"); +} +@media all and (max-width: 700px) { + + #wrapper { + width: 100%; + padding: 5%; + } + hgroup h1 { + color: black; + } + figure { + display: none; + } + #about p { + width:100%; + padding: 0% 2%; + margin-bottom: 10%; + } +h3 { + width: 140px; + color: black; + margin-bottom: 5%; + border-bottom: 1px solid black; + border-right: none; + } + #competencies h3 { + height: auto; + border-right: none; + } + .skills { + float: left; + } + #experiences { + margin-top: 20%; + } + .experience { + position: relative; + top: 30px; + left: 0; + width: 100%; + border-left: none; + } + #education .experience-description { + display: none; + } + #education .experience:nth-last-of-type(2n){ + display: none; + } + #hobbies { + display: none; + } + #contact { + display: none; + } +}