diff --git a/index.html b/index.html index f4587c8..8886220 100644 --- a/index.html +++ b/index.html @@ -11,13 +11,13 @@ Jad Sarout | CV - + -
-
-
+
+
+

Jad Sarout

Codes and Sleeps

@@ -193,4 +193,4 @@

Contact

- \ No newline at end of file + 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; + } +}