From 7b708ea72524682279002b418d0328ac62e340c1 Mon Sep 17 00:00:00 2001 From: Gaby Karam Date: Thu, 18 May 2017 12:48:12 +0300 Subject: [PATCH 1/5] cv sone 1st style style.css second style styles.css --- .idea/css-cv.iml | 8 + .idea/misc.xml | 4 + .idea/modules.xml | 8 + .idea/workspace.xml | 32 +++ index.html | 387 +++++++++++++++-------------- index2.html | 591 ++++++++++++++++++++++++++++++++++++++++++++ style/style.css | 269 ++++++++++++++++++++ style/styles.css | 405 ++++++++++++++++++++++++++++++ 8 files changed, 1519 insertions(+), 185 deletions(-) create mode 100644 .idea/css-cv.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/workspace.xml create mode 100644 index2.html create mode 100644 style/style.css create mode 100644 style/styles.css diff --git a/.idea/css-cv.iml b/.idea/css-cv.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/css-cv.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..1719e44 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..672f38c --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..756c537 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,32 @@ + + + + + + + + + + + + 1494911348054 + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index f4587c8..4e12f79 100644 --- a/index.html +++ b/index.html @@ -1,196 +1,213 @@ - - - - - - + + + + + + - Jad Sarout | CV - - - - + Gaby Karam | CV + + + + + -
-
-
-
-

Jad Sarout

-

Codes and Sleeps

-
-
- Jad Sarout -
-
+
+
+
+
+

Gaby Karam

+

Codes and Sleeps

+
+
+ Gaby Karam +
+
-
-

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

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
    • +
+
+
-
+
\ No newline at end of file diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..230ad31 --- /dev/null +++ b/index2.html @@ -0,0 +1,591 @@ + + + + + + + + + + + Gaby Karam | CV + + + + + + + +
+
+
+
+

Gaby Karam

+

Codes and Sleeps

+
+
+ Gaby Karam +
+
+
+
+
+

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
+
+ Gaby Karam +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..7a02761 --- /dev/null +++ b/style/style.css @@ -0,0 +1,269 @@ +.fixed-contact { + width: 100%; + display: block; + z-index: 4; + +} + +.header { + position: fixed; + color: red; + + top: 0; + left: 0; + width: 100%; + background-color: #999999; + +} + +.header hgroup { + display: inline-block; + float: left; + width: 25%; + text-align: center; +} + +.fixed-contact .contacts { + background-color: black; + +} + +.fixed-contact h3 { + display: none; +} + +.fixed-contact { + position: fixed; + top: 10px; + right: 10px; + width: 50%; +} + +.float-left { + float: left; + +} + +.contact { + margin: 0; + padding: 0; +} + +.contact .contact-value { + + display: inline; + float: none; +} + +.contact .contact-type { + color: #fff; + background-color: red; + margin: 0; + padding: 0; + width: 28%; + float: left; +} + +.content { + + margin: 170px 10% 30px 10%; + font-size: 1em; + +} + +.header { + z-index: 3; + max-height: 180px; + +} + +h3::before { + content: ""; + width: 20px; + height: 20px; + background: red; + display: block; + float: left; + border-radius: 20px; + margin-right: 5px; +} + +h3:after { + background: none repeat scroll 0 0 red; + bottom: -10px; + content: ""; + display: block; + height: 2px; + position: relative; + width: 100%; +} + +section { + width: 50%; + height: 100%; + float: left; + margin: 0; + +} + +.skills-primary::before { + content: "Main"; + margin: 1em; +} + +.skills-secondary::before { + content: "Other"; + margin: 1em; + +} + +.skill { + margin: 10px; + background-color: gray; + padding: 5px; +} + +h4 { + margin: 0; + padding: 0; +} + +.skill span { + width: 0; + background: red; + display: block; + padding: 5px; + color: white; +} + +.experience-type { + color: red; + font-weight: bold; + +} + +.experience-institution { + color: red; + font-weight: 300; +} + +.experience-institution::before { + content: " @ "; +} + +[data-skill="1"] span { + width: 10%; +} + +[data-skill="2"] span { + width: 20%; +} + +[data-skill="3"] span { + width: 30%; +} + +[data-skill="4"] span { + width: 40%; +} + +[data-skill="5"] span { + width: 50%; +} + +[data-skill="6"] span { + width: 60%; +} + +[data-skill="7"] span { + width: 70%; +} + +[data-skill="8"] span { + width: 80%; +} + +[data-skill="9"] span { + width: 90%; +} + +[data-skill="10"] span { + width: 100%; +} + +.experience-details { + color: gray; + margin-left: 1em; +} + +.experience-location::before { + content: "In "; +} + +.experience-date::before { + content: "On"; +} + +.experience-date-separator { + color: red; +} + +.contact-value a { + text-decoration: none; + color: red; +} + +/*Mobile style*/ +@media only screen and (min-width: 768px) { + /* tablets and desktop */ + .fixed-contact { + top: 2.5%; + } +} + +@media only screen and (max-width: 767px) { + /* phones */ + .fixed-contact { + position: static; + top: 0; + display: none; + } + .header div { + margin-left: 20px; + } + figure { + margin: 0; + } + + + .header hgroup { + display: block; + text-align: left; + width: 100%; + } + + .content { + top: 200px; + } + + section { + width: 100%; + } + + .header { + max-height: 300px; + } + + .content { + margin-top: 300px; + } + +} + +@media only screen and (max-width: 767px) and (orientation: portrait) { + /* portrait phones */ + section { + width: 100%; + } + +} diff --git a/style/styles.css b/style/styles.css new file mode 100644 index 0000000..698b253 --- /dev/null +++ b/style/styles.css @@ -0,0 +1,405 @@ +html { + background-color: #fff; + +} + +#wrapper { + margin: 5%; +} + +.header { + width: 100%; +} + +.header hgroup::after { + background: none repeat scroll 0 0 red; + background-color: #d8d8d8; + bottom: -10px; + content: ""; + display: block; + height: 2px; + position: relative; + width: 100%; +} + +figure { + position: absolute; + top: 8%; + right: 8%; + -ms-transform: rotate(-30deg); /* IE 9 */ + -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */ + transform: rotate(-30deg); +} + +figure img { + + display: inline-block; + width: 150%; +} +hgroup { + + width: 100%; +} + +hgroup h1 { + margin: 0; +} + +hgroup h2 { + display: none; +} + +#competencies { + position: relative; + float: left; +} + +#competencies h3 { + position: absolute; + margin: 0px; + + height: 100%; + float: left; + border-right: 2px solid black; + +} + +#competencies .skills { + padding-left: 200px; + float: left; + width: 100%; + +} + +#competencies .skills .skill { + float: left; + + background-color: #008080; + + width: 24%; + margin: 10px; + +} +#competencies .skills .skill span::after{ + float: right; +} + + +#competencies .skills.skills-secondary .skill { + + padding: 5px 10px; + margin: 5px 10px; + +} + +#competencies .skills .skill:last-child { + clear: right; +} + +#experiences { + position: relative; + float: left; + margin-top: 15px; +} + +#experiences h3 { + margin: 0; + height: 100%; + +} + +.experience { + position: relative; + margin-top: 10px; + margin-bottom: 10px; +} + +.experience-details { + position: absolute; + top: 5px; + right: 5px; + color: #aeb2a9; +} + +#education { + position: relative; + float: left; + margin-top: 15px; +} + +#education h3 { + margin: 0; + height: 100%; + +} + +#hobbies { + position: relative; + float: left; + margin-top: 15px; +} + +#hobbies h3 { + margin: 0; + height: 100%; + +} + +#hobbies .experience { + float: left; + padding-left: 220px; + +} + +#hobbies ul { + float: left; + +} + +#contact { + position: relative; + float: left; + bottom: -150px; + left: -150px; +} + +#contact h3 { + display: none; + +} + +#contact .contacts { + float: left; + padding-left: 10px; + +} + +#contact .contacts .contact { + float: left; + padding-left: 200px; + width: 50px; + height: 50px; + +} + +#contact .contact-type { + display: none; +} + +.contact a, .contact-skype dd, .contact-github dd { + background-repeat: no-repeat; + background-size: 50px 50px; + height: 160px; + padding-left: 280px; + padding-top: 50px; + color: transparent; + display: inline-block; +} + +.contact-skype { + display: none; +} + +.contact-email a { + background-image: url("images/email.png"); + +} + +.contact-facebook a { + + background-image: url("images/facebook.png"); + +} + +.contact-skype dd { + + background-image: url("images/phone.png"); + +} + +.contact-github dd { + + background-image: url("images/github.png"); + +} + +.contact-phone a { + background-image: url("images/phone.png"); + +} + +#contact ul { + float: left; + +} + +[data-skill="1"] span::after { + content: "\2605"; +} + +[data-skill="2"] span::after { + content: "\2605\2605"; +} + +[data-skill="3"] span::after { + content: "\2605\2605\2605"; +} + +[data-skill="4"] span::after { + content: "\2605\2605\2605\2605"; +} + +[data-skill="5"] span::after { + content: "\2605\2605\2605\2605\2605"; +} + +[data-skill="6"] span::after { + content: "\2605\2605\2605\2605\2605\2605"; +} + +[data-skill="7"] span::after { + content: "\2605\2605\2605\2605\2605\2605\2605"; +} + +[data-skill="8"] span::after { + content: "\2605\2605\2605\2605\2605\2605\2605\2605"; +} + +[data-skill="9"] span::after { + content: "\2605\2605\2605\2605\2605\2605\2605\2605\2605"; +} + +[data-skill="10"] span::after { + content: "\2605\2605\2605\2605\2605\2605\2605\2605\2605\2605"; +} + +#about { + color: #d8d8d8; + width: 70%; + margin-bottom: 100px; +} + +#competencies .skills-primary .skill { + padding: 10px; + +} + +#competencies .skills-primary .skill span::after { + + font-size: 16px; +} + +#competencies .skills-secondary .skill span::after { + + font-size: 12px; +} + +#about h3 { + display: none; +} + +.experience-type { + color: #008080; +} + +.experience-institution { + display: none; +} + +/*Mobile style*/ +@media only screen and (min-width: 768px) { + /* tablets and desktop */ + #competencies h3 { + width: 170px; + } + + #experiences h3 { + position: absolute; + float: left; + width: 170px; + border-right: 2px solid black; + } + + #education h3 { + position: absolute; + float: left; + width: 170px; + border-right: 2px solid black; + } + + #education h3 { + width: 170px; + } + + #experiences .experience { + float: left; + padding-left: 200px; + + } + + #education .experience { + float: left; + padding-left: 200px; + + } + + #hobbies h3 { + position: absolute; + width: 170px; + border-right: 2px solid black; + float: left; + + } + #hobbies ul { + padding-left: 200px; + + } +} + +@media only screen and (max-width: 767px) { + /* phones */ + figure { + display: none; + } + + #about { + width: 100%; + } + + #experiences h3 { + display: inline-block; + border-bottom: 2px solid black; + } + + #competencies h3 { + display: inline-block; + position: static; + width: auto; + float: none; + border-right: none; + border-bottom: 2px solid black; + } + + #competencies .skills { + float: left; + + padding-left: 0; + } + #competencies .skills .skill { + width: 24%; + } + + #education h3 { + display: inline-block; + border-bottom: 2px solid black; + } + #hobbies h3 { + border-bottom: 2px solid black; + } + + +} + +@media only screen and (max-width: 767px) and (orientation: portrait) { + +} \ No newline at end of file From 48ebc6040930e851d465d54bae61779d6699d2fb Mon Sep 17 00:00:00 2001 From: Gaby Karam Date: Thu, 18 May 2017 13:15:46 +0300 Subject: [PATCH 2/5] cv sone 1st style style.css second style styles.css 2 --- index.html | 66 ++++++++++++++++++++++++------------------------ style/styles.css | 29 +++++++++++++-------- 2 files changed, 51 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 4e12f79..e0d1f93 100644 --- a/index.html +++ b/index.html @@ -174,39 +174,39 @@

Hobbies

  • Writing CVs
    • - +
    +

    Contact

    +
    +
    +
    Email
    +
    + jad@codi.tech +
    +
    +
    +
    Skype
    +
    jad.sarout
    +
    +
    +
    Phone/Whatsapp
    +
    + +96170261482 +
    +
    +
    +
    Github
    +
    + Xananax +
    +
    +
    +
    Facebook
    +
    + Gaby Karam +
    +
    +
    +
    diff --git a/style/styles.css b/style/styles.css index 698b253..0fbb8d2 100644 --- a/style/styles.css +++ b/style/styles.css @@ -159,8 +159,7 @@ hgroup h2 { #contact { position: relative; float: left; - bottom: -150px; - left: -150px; + clear: left; } #contact h3 { @@ -170,13 +169,15 @@ hgroup h2 { #contact .contacts { float: left; - padding-left: 10px; + padding-left: 200px; + } #contact .contacts .contact { float: left; - padding-left: 200px; + padding-left: 50px; + padding-right: 50px; width: 50px; height: 50px; @@ -186,45 +187,47 @@ hgroup h2 { display: none; } + .contact a, .contact-skype dd, .contact-github dd { background-repeat: no-repeat; background-size: 50px 50px; height: 160px; - padding-left: 280px; - padding-top: 50px; + /*padding-left: 280px;*/ + /*padding-top: 50px;*/ color: transparent; display: inline-block; } + .contact-skype { display: none; } .contact-email a { - background-image: url("images/email.png"); + background-image: url("../images/email.png"); } .contact-facebook a { - background-image: url("images/facebook.png"); + background-image: url("../images/facebook.png"); } .contact-skype dd { - background-image: url("images/phone.png"); + background-image: url("../images/phone.png"); } .contact-github dd { - background-image: url("images/github.png"); + background-image: url("../images/github.png"); } .contact-phone a { - background-image: url("images/phone.png"); + background-image: url("../images/phone.png"); } @@ -397,6 +400,10 @@ hgroup h2 { border-bottom: 2px solid black; } + #contact { + display: none; + } + } From 5e18c14bebbaf1f527764904136238b9a43778ee Mon Sep 17 00:00:00 2001 From: Gaby Karam Date: Thu, 18 May 2017 21:20:57 +0300 Subject: [PATCH 3/5] added minified css for each style --- style/stylem.css | 51 +++++++++++++++++++++++++++++++++++++ style/styles.css | 12 ++++----- style/stylesm.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 122 insertions(+), 6 deletions(-) create mode 100644 style/stylem.css create mode 100644 style/stylesm.css diff --git a/style/stylem.css b/style/stylem.css new file mode 100644 index 0000000..897339a --- /dev/null +++ b/style/stylem.css @@ -0,0 +1,51 @@ +.fixed-contact{display:block;z-index:4;position:fixed;top:10px;right:10px;width:50%} +.header{position:fixed;color:red;top:0;left:0;width:100%;z-index:3;max-height:180px;background:#999} +.header hgroup{display:inline-block;float:left;width:25%;text-align:center} +.fixed-contact .contacts{background:#000} +.fixed-contact h3{display:none} +.float-left,section{float:left} +.contact,h4{margin:0;padding:0} +.contact .contact-value{display:inline;float:none} +.contact .contact-type{color:#fff;margin:0;padding:0;width:28%;float:left;background:red} +.content{margin:170px 10% 30px;font-size:1em} +h3::before,h3:after{content:"";display:block} +h3::before{background:red;float:left;border-radius:20px;margin-right:5px;width:20px;height:20px} +h3:after{background:red;bottom:-10px;height:2px;position:relative;width:100%} +section{width:50%;height:100%;margin:0} +.skills-primary::before{content:"Main";margin:1em} +.skills-secondary::before{content:"Other";margin:1em} +.skill{margin:10px;padding:5px;background:gray} +.skill span{width:0;background:red;display:block;padding:5px;color:#fff} +.experience-type{color:red;font-weight:700} +.experience-institution{color:red;font-weight:300} +.experience-institution::before{content:" @ "} +[data-skill="1"] span{width:10%} +[data-skill="2"] span{width:20%} +[data-skill="3"] span{width:30%} +[data-skill="4"] span{width:40%} +[data-skill="5"] span{width:50%} +[data-skill="6"] span{width:60%} +[data-skill="7"] span{width:70%} +[data-skill="8"] span{width:80%} +[data-skill="9"] span{width:90%} +[data-skill="10"] span{width:100%} +.experience-details{color:gray;margin-left:1em} +.experience-location::before{content:"In "} +.experience-date::before{content:"On"} +.experience-date-separator{color:red} +.contact-value a{text-decoration:none;color:red} +@media only screen and (min-width: 768px) { + .fixed-contact{top:2.5%} +} +@media only screen and (max-width: 767px) { + .fixed-contact{position:static;top:0;display:none} + .header div{margin-left:20px} + figure{margin:0} + .header hgroup{display:block;text-align:left;width:100%} + .content{top:200px;margin-top:300px} + section{width:100%} + .header{max-height:300px} +} +@media only screen and (max-width: 767px) and (orientation: portrait) { + section{width:100%} +} \ No newline at end of file diff --git a/style/styles.css b/style/styles.css index 0fbb8d2..1cc9474 100644 --- a/style/styles.css +++ b/style/styles.css @@ -36,6 +36,7 @@ figure img { display: inline-block; width: 150%; } + hgroup { width: 100%; @@ -80,11 +81,11 @@ hgroup h2 { margin: 10px; } -#competencies .skills .skill span::after{ + +#competencies .skills .skill span::after { float: right; } - #competencies .skills.skills-secondary .skill { padding: 5px 10px; @@ -171,7 +172,6 @@ hgroup h2 { float: left; padding-left: 200px; - } #contact .contacts .contact { @@ -187,7 +187,6 @@ hgroup h2 { display: none; } - .contact a, .contact-skype dd, .contact-github dd { background-repeat: no-repeat; background-size: 50px 50px; @@ -198,7 +197,6 @@ hgroup h2 { display: inline-block; } - .contact-skype { display: none; } @@ -353,6 +351,7 @@ hgroup h2 { float: left; } + #hobbies ul { padding-left: 200px; @@ -388,6 +387,7 @@ hgroup h2 { padding-left: 0; } + #competencies .skills .skill { width: 24%; } @@ -396,6 +396,7 @@ hgroup h2 { display: inline-block; border-bottom: 2px solid black; } + #hobbies h3 { border-bottom: 2px solid black; } @@ -404,7 +405,6 @@ hgroup h2 { display: none; } - } @media only screen and (max-width: 767px) and (orientation: portrait) { diff --git a/style/stylesm.css b/style/stylesm.css new file mode 100644 index 0000000..0de25d3 --- /dev/null +++ b/style/stylesm.css @@ -0,0 +1,65 @@ +html{background:#fff} +#wrapper{margin:5%} +.header,hgroup{width:100%} +.header hgroup::after{background:#d8d8d8;bottom:-10px;content:"";display:block;height:2px;position:relative;width:100%;background-color:red} +figure{position:absolute;top:8%;right:8%;-webkit-transform:rotate(-30deg);transform:rotate(-30deg)} +figure img{display:inline-block;width:150%} +hgroup h1{margin:0} +hgroup h2{display:none} +#competencies{position:relative;float:left} +#competencies h3{position:absolute;margin:0;height:100%;float:left;border-right:2px solid #000} +#competencies .skills{padding-left:200px;float:left;width:100%} +#competencies .skills .skill{float:left;width:24%;margin:10px;background:teal} +#competencies .skills .skill span::after{float:right} +#competencies .skills.skills-secondary .skill{padding:5px 10px;margin:5px 10px} +#competencies .skills .skill:last-child{clear:right} +#education,#experiences,#hobbies{position:relative;float:left;margin-top:15px} +#education h3,#experiences h3,#hobbies h3{margin:0;height:100%} +.experience{position:relative;margin-top:10px;margin-bottom:10px} +.experience-details{position:absolute;top:5px;right:5px;color:#aeb2a9} +#hobbies .experience{float:left;padding-left:220px} +#contact,#contact ul,#hobbies ul{float:left} +#contact{position:relative;clear:left} +#contact .contacts{float:left;padding-left:200px} +#contact .contacts .contact{float:left;padding-left:50px;padding-right:50px;width:50px;height:50px} +#about h3,#contact .contact-type,#contact h3,.contact-skype{display:none} +.contact a,.contact-github dd,.contact-skype dd{height:160px;color:transparent;display:inline-block;background:50px 50px no-repeat} +.contact-email a{background:url(../images/email.png)} +.contact-facebook a{background:url(../images/facebook.png)} +.contact-phone a,.contact-skype dd{background:url(../images/phone.png)} +.contact-github dd{background:url(../images/github.png)} +[data-skill="1"] span::after{content:"\2605"} +[data-skill="2"] span::after{content:"\2605\2605"} +[data-skill="3"] span::after{content:"\2605\2605\2605"} +[data-skill="4"] span::after{content:"\2605\2605\2605\2605"} +[data-skill="5"] span::after{content:"\2605\2605\2605\2605\2605"} +[data-skill="6"] span::after{content:"\2605\2605\2605\2605\2605\2605"} +[data-skill="7"] span::after{content:"\2605\2605\2605\2605\2605\2605\2605"} +[data-skill="8"] span::after{content:"\2605\2605\2605\2605\2605\2605\2605\2605"} +[data-skill="9"] span::after{content:"\2605\2605\2605\2605\2605\2605\2605\2605\2605"} +[data-skill="10"] span::after{content:"\2605\2605\2605\2605\2605\2605\2605\2605\2605\2605"} +#about{color:#d8d8d8;width:70%;margin-bottom:100px} +#competencies .skills-primary .skill{padding:10px} +#competencies .skills-primary .skill span::after{font-size:16px} +#competencies .skills-secondary .skill span::after{font-size:12px} +.experience-type{color:teal} +.experience-institution{display:none} +@media only screen and (min-width: 768px) { + #competencies h3{width:170px} + #education h3,#experiences h3{position:absolute;float:left;border-right:2px solid #000} + #experiences h3{width:170px} + #education h3{width:170px} + #education .experience,#experiences .experience{float:left;padding-left:200px} + #hobbies h3{position:absolute;width:170px;border-right:2px solid #000;float:left} + #hobbies ul{padding-left:200px} +} +@media only screen and (max-width: 767px) { + #about{width:100%} + #experiences h3{display:inline-block;border-bottom:2px solid #000} + #competencies h3{position:static;width:auto;float:none;border-right:none;border-bottom:2px solid #000} + #competencies .skills{float:left;padding-left:0} + #competencies .skills .skill{width:24%} + #competencies h3,#education h3{display:inline-block} + #education h3,#hobbies h3{border-bottom:2px solid #000} + #contact,figure{display:none} +} \ No newline at end of file From 783cc87b4732743009b5cd59cf59a6a086898973 Mon Sep 17 00:00:00 2001 From: Gaby Karam Date: Thu, 18 May 2017 21:26:35 +0300 Subject: [PATCH 4/5] Note Solution was available in the repo from day 1 :) --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index e0d1f93..7f60fd0 100644 --- a/index.html +++ b/index.html @@ -202,7 +202,7 @@

    Contact

    Facebook
    - Gaby Karam + Gaby Karam
    @@ -210,4 +210,5 @@

    Contact

    + \ No newline at end of file From d5872484f2a718a23b8adf6495288bec84ded209 Mon Sep 17 00:00:00 2001 From: Gaby Karam Date: Mon, 22 May 2017 10:03:16 +0300 Subject: [PATCH 5/5] removing .idea files and add .gitignore --- .idea/css-cv.iml | 8 -------- .idea/misc.xml | 4 ---- .idea/modules.xml | 8 -------- .idea/workspace.xml | 32 -------------------------------- 4 files changed, 52 deletions(-) delete mode 100644 .idea/css-cv.iml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/workspace.xml diff --git a/.idea/css-cv.iml b/.idea/css-cv.iml deleted file mode 100644 index c956989..0000000 --- a/.idea/css-cv.iml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 1719e44..0000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 672f38c..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml deleted file mode 100644 index 756c537..0000000 --- a/.idea/workspace.xml +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - 1494911348054 - - - - - - - - - - \ No newline at end of file