diff --git a/index.html b/index.html index f4587c8..7f60fd0 100644 --- a/index.html +++ b/index.html @@ -1,196 +1,214 @@ - - - - - - + + + + + + - 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
    • +
+
+
+

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/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/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 new file mode 100644 index 0000000..1cc9474 --- /dev/null +++ b/style/styles.css @@ -0,0 +1,412 @@ +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; + clear: left; +} + +#contact h3 { + display: none; + +} + +#contact .contacts { + float: left; + padding-left: 200px; + +} + +#contact .contacts .contact { + float: left; + padding-left: 50px; + padding-right: 50px; + 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; + } + + #contact { + display: none; + } + +} + +@media only screen and (max-width: 767px) and (orientation: portrait) { + +} \ No newline at end of file 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