diff --git a/index.html b/index.html index f4587c8..cfa4452 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ -
+
@@ -31,22 +31,24 @@

Codes and Sleeps

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. + 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 + HTML
CSS
-
+
Javascript
+
HTML @@ -54,7 +56,7 @@

Competencies

CSS
-
+
Javascript
@@ -151,14 +153,13 @@

Hobbies

-
    +
    • Watching Youtube
    • Sleeping
    • Writing CVs
-

Contact

Email
@@ -166,7 +167,7 @@

Contact

jad@codi.tech
-
+
Skype
jad.sarout
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 diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..49ea4cd --- /dev/null +++ b/style/style.css @@ -0,0 +1,176 @@ + +body{ + width: 1200px; + padding:40px; + +} + +.content{ margin :67px; +overflow:hidden;} +header{background:grey; +} + +#wrapper{ width: 80%; + margin: auto ;} + +figure{ + position: absolute; + left: 450px; + top: 50px; } + +hgroup{padding: 10px 70px; + color:red;} + + +section{ + float:left; + width:49%; + +} + +h4{color:red;} + +body{ + font-family: sans-serif; + } + +h3{ + border-bottom: 1px solid rgba(153, 153, 153, 0.61); + } +h3:before{ + content: ""; + width: 15px; + height: 15px; + float: left; + margin: 0 6px 0 0; + border-radius: 7.5px; + background-color:red +} + + + +.experience-date-separator{color:red;} + + + + +.skill{ +text-align: left; +padding-right: 30px; +height: 30px; +color:white; +width: 92%; background-color:grey; + margin :2px; + +} + [data-skill="5"] span{ + display: block; + background-color: red; + height: 30px; + width: 62%; + +} +[data-skill="3"] span{ + display: block; + background-color: red; + height: 30px; + width: 50%; +} +[data-skill="1"] span{ + display: block; + background-color:red; + height: 30px; + width: 30%;} + + [data-skill="9"] span{ + display: block; + background-color: red; + height: 30px; + width: 95%;} + + [data-skill="7"] span{ + display: block; + background-color: red; + height: 30px; + width: 80%;} + .skills.skills-primary::before{ + content:"Main"; + } + .skills.skills-secondary::before{ + content:"Others"; + } + .skills.skills-secondary span { + box-shadow: inset 0px 35px 0px 0px #a59c9c62 + } + .contacts{ + + position: absolute; + top: 80px; + right: 348px; + width: 340px; + color: orangered + + + } + dl { + width: 150%; + + padding: 0; + margin: 0; + } + dt { + float: left; + width: 21%; + background:orangered; + color:white; + + } + dd { + float: left; + width: 70%; + background:black; + padding: 0; + margin: 0; + color:orangered; + } + a:link{text-decoration: none; + color: orangered; + + } + @media screen and (max-width:1018px) { + .contacts { + position: absolute; + left:200px; + top:2000px; + }} @media screen and (max-width:704px) { + figure { + position: relative; + left: 70px; + top: -15px; }} + @media screen and (max-width:1018px) { + #competencies{ + position:absolute; + top:540px; + left:200px; + width:390px; + + } + } + + @media screen and (max-width:1018px) { + #experiences{ position:absolute; + top:830px; + left:200px; + width:390px;}} + + @media screen and (max-width:1018px) { + #education{ position:absolute; + top:1350px; + left:200px; + width:390px;}} + + @media screen and (max-width:1018px) { + #hobbies{ position:absolute; + top:1870px; + left:200px; + width:390px;}} \ No newline at end of file diff --git a/style/style2.css b/style/style2.css new file mode 100644 index 0000000..b8a574f --- /dev/null +++ b/style/style2.css @@ -0,0 +1,158 @@ + +body{ width: 900px; + margin: auto; + font-size: 16px ; + + + } + h1{ + font-size: 35px; + border-bottom: 1px solid rgb(153, 153, 153); +} +h2{display: none;} +#about h3{display :none;} +#about p{color:grey;} +figure{ + position: relative; + float: right; + top:-70px; + left:-20px; + transform: rotate(-10deg); + } + img { + width:150px; + height:150px ;} + + #competencies h3{ + + display: inline-block; + padding-right: 9px; + border-right: 1px solid black; + height:90px; + position: relative; + bottom:-60px; + } + #competencies .skill{ + display: inline-block; + margin:3px; + background-color: rgba(1, 106, 129, 0.925); + color:white; + height: 20px; + padding: 5px; + position: relative; + bottom:50px; + left: 130px; + width:110px + } + .skills-primary + [data-skill="5"] span::after{content:"***";position: relative; bottom:-4px; float:right; + } + [data-skill="3"] span::after{content:"**";position: relative; bottom:-4px; float:right; + } + [data-skill="1"] span::after{content:"*";position: relative; bottom:-4px; float:right; + } + .skills-secondary{font-size:small;} + [data-skill="9"] span::after{content:"******";position: relative; bottom:-4px; float:right; + } + [data-skill="5"] span::after{content:"***";position: relative; bottom:-4px; float:right; + } + [data-skill="7"] span::after{content:"****";position: relative; bottom:-4px; float:right; + } + #experiences h3{ + + display: inline-block; + padding-right: 24px; + border-right: 1px solid black; + height:270px; + } + + #experiences .experience{ + position: relative; + bottom:305px; + left: 130px; + width: 800px; + } + .experience-location{ + float: right; + margin: -40px 125px 9px 0; + position: relative; + color:grey; + + } + .experience-date{ + float: right; + margin: -40px 29px 9px 0; + position: relative; + color:grey; + } + #education h3{ + + display: inline-block; + padding-right: 38px; + border-right: 1px solid black; + height:270px; + position: relative; + bottom:275px; + + } + #education .experience{ + position: relative; + bottom:580px; + left: 130px; + width: 800px;} + + #hobbies h3{display: inline-block; + padding-right: 55px; + border-right: 1px solid black; + height:80px; + position: relative; + bottom:550px;} + + #hobbies ul{position: relative; + bottom:670px; + left: 125px; + width: 800px;} + + + + h4{color:rgba(1, 106, 129, 0.925);} + + + .contact-type,.contact-value{display:none} + .contact-email{height: 100px;width:100px; + background-image: url(/home/ali/css-cv/images/email.png) ; + background-size: 100px 100px; + position: relative; + bottom:590px; + left: 160px; + } + .contact-skype{ + height: 100px;width:100px; + background-image: url(/home/ali/css-cv/images/phone.png) ; + background-size: 100px 100px; + position: relative; + bottom:705px; + left: 300px; + } + + .contact-phone{ + height: 100px;width:100px; + background-image: url(/home/ali/css-cv/images/github.png); + background-size: 100px 100px; + position: relative; + bottom:820px; + left:440px; + + } + + .contact-github + { + height: 100px;width:100px; + background: url(/home/ali/css-cv/images/facebook.png) right bottom no-repeat; + background-size: 100px 100px; + position: relative; + bottom:935px; + left:600px; + + } + \ No newline at end of file diff --git a/style2.css/style2.css b/style2.css/style2.css new file mode 100644 index 0000000..5eb223c --- /dev/null +++ b/style2.css/style2.css @@ -0,0 +1,158 @@ + +body{ width: 900px; + margin: auto; + font-size: 16px ; + + + } + h1{ + font-size: 35px; + border-bottom: 1px solid rgb(153, 153, 153); +} +h2{display: none;} +#about h3{display :none;} +#about p{color:grey;} +figure{ + position: relative; + float: right; + top:-70px; + left:-20px; + transform: rotate(-10deg); + } + img { + width:150px; + height:150px ;} + + #competencies h3{ + + display: inline-block; + padding-right: 9px; + border-right: 1px solid black; + height:90px; + position: relative; + bottom:-60px; + } + #competencies .skill{ + display: inline-block; + margin:3px; + background-color: rgba(1, 106, 129, 0.925); + color:white; + height: 20px; + padding: 5px; + position: relative; + bottom:50px; + left: 130px; + width:110px + } + .skills-primary + [data-skill="5"] span::after{content:"***";position: relative; bottom:-4px; float:right; + } + [data-skill="3"] span::after{content:"**";position: relative; bottom:-4px; float:right; + } + [data-skill="1"] span::after{content:"*";position: relative; bottom:-4px; float:right; + } + .skills-secondary{font-size:small;} + [data-skill="9"] span::after{content:"******";position: relative; bottom:-4px; float:right; + } + [data-skill="5"] span::after{content:"***";position: relative; bottom:-4px; float:right; + } + [data-skill="7"] span::after{content:"****";position: relative; bottom:-4px; float:right; + } + #experiences h3{ + + display: inline-block; + padding-right: 24px; + border-right: 1px solid black; + height:270px; + } + + #experiences .experience{ + position: relative; + bottom:307px; + left: 130px; + width: 800px; + } + .experience-location{ + float: right; + margin: -40px 125px 9px 0; + position: relative; + color:grey; + + } + .experience-date{ + float: right; + margin: -40px 29px 9px 0; + position: relative; + color:grey; + } + #education h3{ + + display: inline-block; + padding-right: 38px; + border-right: 1px solid black; + height:270px; + position: relative; + bottom:275px; + + } + #education .experience{ + position: relative; + bottom:580px; + left: 130px; + width: 800px;} + + #hobbies h3{display: inline-block; + padding-right: 55px; + border-right: 1px solid black; + height:80px; + position: relative; + bottom:550px;} + + #hobbies ul{position: relative; + bottom:670px; + left: 125px; + width: 800px;} + + + + h4{color:rgba(1, 106, 129, 0.925);} + + + .contact-type,.contact-value{display:none} + .contact-email{height: 100px;width:100px; + background-image: url(/home/ali/css-cv/images/email.png) ; + background-size: 100px 100px; + position: relative; + bottom:590px; + left: 160px; + } + .contact-skype{ + height: 100px;width:100px; + background-image: url(/home/ali/css-cv/images/phone.png) ; + background-size: 100px 100px; + position: relative; + bottom:705px; + left: 300px; + } + + .contact-phone{ + height: 100px;width:100px; + background-image: url(/home/ali/css-cv/images/github.png); + background-size: 100px 100px; + position: relative; + bottom:820px; + left:440px; + + } + + .contact-github + { + height: 100px;width:100px; + background: url(/home/ali/css-cv/images/facebook.png) right bottom no-repeat; + background-size: 100px 100px; + position: relative; + bottom:935px; + left:600px; + + } + \ No newline at end of file