diff --git a/email.png b/email.png new file mode 100644 index 0000000..7a2e12d Binary files /dev/null and b/email.png differ diff --git a/index.html b/index.html index f4587c8..066bf70 100644 --- a/index.html +++ b/index.html @@ -11,11 +11,16 @@ Jad Sarout | CV - + + + + -
+
@@ -31,31 +36,34 @@

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 + CSS ★★
- Javascript + Javascript ★
- HTML + HTML ⋆⋆⋆
- CSS + CSS ⋆⋆
- Javascript + Javascript ⋆
@@ -79,7 +87,11 @@

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

@@ -100,7 +112,11 @@

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

@@ -124,7 +140,11 @@

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

@@ -145,7 +165,11 @@

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

@@ -164,6 +188,7 @@

Contact

Email
jad@codi.tech +
@@ -185,12 +210,19 @@

Contact

Facebook
- Jad Sarout + Jad Sarout
+ \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9431bb9 --- /dev/null +++ b/style.css @@ -0,0 +1,93 @@ +body { + background-color: rgb(255, 255, 255) + } +header { + background-color: gray + + + + } +header h1 { + color: red; + font-family: Arial, Helvetica, sans-serif; + font-size: 40px + + + } +header h2 { + color: red; + font-size: 30px; + word-spacing: 10px; + + } +header figure { + position: absolute; + top: 30px; + right: 700px; + } +header div + { + padding:30px + } + +section { + width: 49%; + float: left; + } +h3 { + text-decoration: underline; +} + +h3:before{ + content: "⚫"; + color: red; +} + +#wrapper{ + widows: px; + + background:orange; +} +.skill { + background-color: rgb(163, 160, 160); + padding: 10px; + margin:10px; + } + /*.skill span {background-color: red; + padding: 8px; } */ +h4 {color: rgb(231, 62, 62);} +.experience-date span {color: rgb(187, 183, 183)} +.experience-details span {color: rgb(187, 183, 183)} +#contact { + display: block; + position: absolute; + right: 0px; + top: -38px; + } +.contact-type { + width: 135px; + float: left; + background-color: red; + color: white; +} +.contact-value { + background-color: rgb(0, 0, 0); + width: 500px; + color: red; + } + +[data-skill="5"] span {width: 50%; background-color: rgb(204, 42, 42); display: block; padding: 1px} +[data-skill="3"] span {width: 30%; background-color: rgb(204, 42, 42); display: block;} +[data-skill="7"] span {width: 70%; background-color: rgb(204, 42, 42); display: block;} +[data-skill="9"] span {width: 90%; background-color: rgb(204, 42, 42); display: block;} +[data-skill="1"] span {width: 10%; background-color: rgb(204, 42, 42); display: block;} + + + +.skill ection{ + back5round-color: rgb(121, 116, 116); +} + + + +/* media queries */ \ No newline at end of file diff --git a/style2.css b/style2.css new file mode 100644 index 0000000..8cd1314 --- /dev/null +++ b/style2.css @@ -0,0 +1,218 @@ +body,html{ + margin:5px; + padding:0; +} + +#wrapper{ + width:800px; + margin:auto; + background:white; +} + +section{ + position:relative; +} + +h3{ + position:absolute; + top:0; + left:20px; + margin:0; +} + +section>p, section>div, section>ul{ + position:relative; + top:0; + margin-left:200px; + padding-left:20px; + border-left: 2px solid rgb(104, 103, 103); +} + +#about h3 , h2{ + display: none; +} +#about>p{ + padding:5px; + margin:0px; + border-left:none; + color: gray; + border-bottom: solid 100px white; + +} +img { + float: right; + margin: -80px -27px 0 0; + transform: rotate(-8deg); +} +h1 { + border-bottom: solid 2px rgb(114, 107, 107) ; +} +h4 { + color: #41808c; +} +.skill { + border: 1px solid black; + float: left; + background-color: rgb(2, 134, 128); + width:30%; + padding: 2px; + margin-bottom: 4px; + color: white; +} +.skills-primary { + font-size: x-large; +} +.skills-secondary{ + font-size: small; +} +#competencies { + padding-bottom: 100px; +} + +.contacts::after{ + display: table; + width:100%; + clear:both; + content: ' '; +} + +.contact-value a{ + background:rgb(255, 255, 255); + display:block; + float:left; + width: 50px; + height:50px; + border-radius: 50%; + margin-right:10px; + background-image: url('images/email.png'); + background-size:cover; + color:transparent; + margin-top: 100px; + padding: 5px; +} + +#contact h3{ + display: none; +} + + +.contact-skype .contact-value{ + display:none; +} + +.contact-type{ + display:none; +} + +body > ul{ + display:none; +} + +ul { + display: flex; + position: absolute; + bottom: -111%; + left: 50%; + transform: translate(-50%,-50%); + +} +ul li { + list-style: none; +} +ul li a { + width: 80px; + height: 80px; + background-color: #076e72; + text-align: center; + line-height: 80px; + font-size: 35px; + margin: 0 10px; + display: block; + border-radius: 50%; + position: relative; + overflow: hidden; + border: 3px solid #fff; + z-index: 1; +} +ul li a .fa { + position: relative; + transition: .5s; +} +ul li a .fa { + position: relative; + transition: .5s; +} +ul li a .fa { + position: relative; + transition: .5s; + z-index: 3; +} +ul li a:hover .fa { + color: #fff; + transform: rotateY(360deg); +} +ul li a:before { + content: ''; + position: absolute; + top: 100%; + left: 0; + width: 100%; + height: 100%; + background-color: #f00; + transition: .5s; + z-index: 2; +} +ul li a:hover:before{ + top:0; + +} +ul li:nth-child(1) a:before { + background-color: #0d1b38; +} +ul li:nth-child(2) a:before { + background-color: #55acee; +} +ul li:nth-child(3) a:before { + background-color: #eea755; +} +ul li:nth-child(4) a:before { + background-color: #ff3300; + background-image: url("images/email.png"); +} +.contact-phone .contact-value a{ + background:rgb(169, 182, 185); + display:block; + float:left; + width: 50px; + height:50px; + border-radius: 50%; + margin-right:10px; + background-image: url('images/phone.png'); + background-size:cover; + color:transparent; +} +.contact-github .contact-value a{ + background:rgb(4, 104, 134); + display:block; + float:left; + width: 50px; + height:50px; + border-radius: 50%; + margin-right:10px; + background-image: url('images/github.png'); + background-size:cover; + color:transparent; +} +.contact-facebook .contact-value a{ + background:rgb(4, 104, 134); + display:block; + float:left; + width: 50px; + height:50px; + border-radius: 50%; + margin-right:10px; + background-image: url('images/facebook.png'); + background-size:cover; + color:transparent; +} +