From 19c65c4c3cb586836f0ddb6282ce9178bca29245 Mon Sep 17 00:00:00 2001 From: Xananax Date: Mon, 15 May 2017 20:22:57 +0300 Subject: [PATCH 1/2] first commit --- style/style.1.css | 224 ++++++++++++++++++++++++++++++++++++++++++++++ style/style.2.css | 196 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 420 insertions(+) create mode 100644 style/style.1.css create mode 100644 style/style.2.css diff --git a/style/style.1.css b/style/style.1.css new file mode 100644 index 0000000..f984532 --- /dev/null +++ b/style/style.1.css @@ -0,0 +1,224 @@ +@import "normalize.css"; + + +/** MAIN STUFF **/ + +body{ + font:16px Helvetica, Sans-Serif; + padding:50px 20px 20px 20px; +} + +header > div{ + max-width:960px; + margin:0 auto; + position: relative; +} + +hgroup{ + float:left; + margin:0; + border-bottom:1px solid #ccc; + width:100% +} + +header figure{ + position: absolute; + right:20px; +} + +header h2{ + display: none; +} + +header figure img{ + transform: rotate(-13deg); + width:200px; + height:200px; +} + +.content{ + padding:20px; + margin:0 auto; + max-width:960px; +} + +section{ + float:left; + padding-left:160px; + position:relative; + margin-bottom: 50px; +} + +h3{ + position: absolute; + top:0; + left:0; + width:150px; + margin-right:10px; + font-style: italic; + height:100%; + border-right:1px solid black; +} + +/** SKILLS STUFF **/ + +#competencies{ + +} + +.skills{ + padding-top:15px; +} + +.skill{ + width:130px; + margin:5px; + float:left; + padding:10px; + background:teal; + color:white; +} + +.skill span{ + width: 130px; + display:inline-block; +} + +.skill span::after{ + content:""; + color:white; + display:block; + float:right; +} + +.skill[data-skill="1"] span::after {content:"★";} +.skill[data-skill="1"] span::after {content:"★";} +.skill[data-skill="2"] span::after {content:"★★";} +.skill[data-skill="3"] span::after {content:"★★";} +.skill[data-skill="4"] span::after {content:"★★★";} +.skill[data-skill="5"] span::after {content:"★★★";} +.skill[data-skill="6"] span::after {content:"★★★★";} +.skill[data-skill="7"] span::after {content:"★★★★";} +.skill[data-skill="8"] span::after {content:"★★★★★";} +.skill[data-skill="9"] span::after {content:"★★★★★";} +.skill[data-skill="10"]span::after {content:"★★★★★";} + + +.skills-primary .skill{ + font-size: 1.2em; +} + +.skills-secondary .skill{ + font-size: .7em; +} + +/** ABOUT STUFF **/ + +#about{ + max-width:640px; + text-align: justify; + margin-bottom:100px; + font-style: italic; + color:#999; + padding-left:0; +} + +#about h3{ + display: none; +} + +/** EXPERIENCES STUFF **/ + +.experience h4{ + color:teal; + margin-bottom:3px; + float:left; +} + +.experience p{ + margin-top:30px; + float:left; +} + +.experience-details{ + color:#999; + float: right; + margin-top:18px; +} +.experience-type{ + font-weight:bold; +} +.experience-institution{ + display:none; +} + +.experience-date-separator{ + color:teal; +} + +/** CONTACTS STUFF **/ + +#contact h3{ + display: none; +} + +.contact{ + margin:0; + width:130px; + height:130px; + background-repeat: no-repeat; + background-size:80%; + background-position: 50% 50%; + float:left; + display: block; + margin:3px; +} + +.contact:hover{ + background-color:teal; +} + +.contact-type,.contact-value{ + display:block; + float:left; + margin:0; + width:100%; + height:100%; + text-align: center; +} + +.contact-type{ + display: none; +} + +.contact-value a{ + display:block; + width:100%; + height:100%; + font-size: 0; +} + +.contact-skype{ + display: none; +} + +.contact-phone{background-image:url("../images/phone.png");} +.contact-email{background-image:url("../images/email.png");} +.contact-github{background-image:url("../images/github.png");} +.contact-facebook{background-image:url("../images/facebook.png");} + +/** MEDIA QUERIES **/ + +@media only screen and (max-width: 650px) { + header figure{ + display: none; + } + section{ + padding-left:0; + } + h3{ + position: static; + border-right:none; + border-bottom:1px solid black; + } +} \ No newline at end of file diff --git a/style/style.2.css b/style/style.2.css new file mode 100644 index 0000000..70a260c --- /dev/null +++ b/style/style.2.css @@ -0,0 +1,196 @@ +@import "normalize.css"; + + +/** MAIN STUFF **/ + +body{ + font-family:'DroidSansBold', Arial, sans-serif; +} + +header{ + width:100%; + background:#999; + position: fixed; + top:0; + height:150px; + z-index: 2; + color:red; +} + +header > div{ + max-width:960px; + margin:0 auto; +} + +hgroup{ + float:left; + margin:0 30px; +} + + +.content{ + padding:200px 20px 20px 20px; + margin:0 auto; + max-width:960px; +} + +h3{ + border-bottom:1px solid #ccc; + padding-bottom:10px; + margin-bottom:10px; +} + +h3::before{ + content:""; + display:inline-block; + width:20px; + height:20px; + background:red; + margin-right:5px; + border-radius: 50%; +} + +section{ + width:50%; + float:left; + box-sizing: border-box; +} + + +/** SKILLS STUFF **/ + +.skill{ + background:#ccc; + margin:3px; + padding:5px; +} + +.skill span{ + width:0; + background:red; + display:block; + padding:5px; + color:white; + line-height: 1; +} + +.skill[data-skill="1"] span{width:10%;} +.skill[data-skill="2"] span{width:20%;} +.skill[data-skill="3"] span{width:30%;} +.skill[data-skill="4"] span{width:40%;} +.skill[data-skill="5"] span{width:50%;} +.skill[data-skill="6"] span{width:60%;} +.skill[data-skill="7"] span{width:70%;} +.skill[data-skill="8"] span{width:80%;} +.skill[data-skill="9"] span{width:90%;} +.skill[data-skill="10"] span{width:100%;} + +.skills-primary::before, .skills-secondary::before{ + margin-top:10px; + display: inline-block; +} + +.skills-primary::before{ + content:"Main" +} + +.skills-secondary::before{ + content:"Other" +} + +.skills-secondary .skill{ + opacity: .7 +} + +/** EXPERIENCES STUFF **/ + +.experience h4{ + color:red; + margin-bottom:3px; +} +.experience-details{ + color:#999; + margin-left:10px; +} +.experience-type{ + font-weight:bold; +} +.experience-institution{ + font-weight: normal; +} +.experience-institution::before{ + content:"@ "; +} +.experience-location::before{ + content:"In" +} +.experience-date::before{ + content:" on " +} +.experience-date-separator{ + color:red; +} + +/** CONTACTS STUFF **/ + +#contact{ + position:fixed; + top:10px; + right:10px; + z-index: 3; + background: black; +} + +#contact h3{ + display: none; +} + +.contact{ + margin:0; +} + +.contact-type,.contact-value{ + display:inline-block; + margin:0; + padding:3px; +} + +.contact-type{ + width:120px; + background:red; + color:white; +} + +.contact-value a{ + text-decoration: none; + color:red; +} + +/** MEDIA QUERIES **/ + +@media only screen and (max-width: 960px) { + section{ + width:100%; + } +} + +@media only screen and (max-width: 450px) { + header{ + height:300px; + } + hgroup{ + width:100%; + } + .content{ + padding-top:350px; + } + #contact{ + position:static; + top:auto; + right:auto; + background:transparent; + } + #contact h3{ + display:block; + } +} \ No newline at end of file From f08370cc11efc091be0d69a6881d7c40871d5eaa Mon Sep 17 00:00:00 2001 From: Xananax Date: Mon, 15 May 2017 20:24:55 +0300 Subject: [PATCH 2/2] first commit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f4587c8..8cfea1e 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ Jad Sarout | CV - +