LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


    
        
        
        PSD2HTML[1]
        
        
    

    
        
        
        

Web & Graphic Designer

Values

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.

Goals

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.

Hobbies

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.

Your Picture

About Me

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit, te usu virtute placerat. Purto brute disputando cu est.

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est

Web Design

Web Design

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam

Graphic Design

Graphic Design

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam

Marketing

Marketing

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam

SEO

SEO

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam

My Skills

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit, te usu virtute placerat. Purto brute disputando cu est.

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est

HTML/CSS

83%  

Graphic Design

88%  

PHP/MySQL

60%  

Wordpress

55%  

Resume

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam,te usu virtute placerat.Purto brute disputando cu est.

My Education

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.

Graphic Design Diploma

Reeves College / June 2008 / May 2010 4.0 GPA

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

CIT Diploma

Lithbridge College / June 2006 / May 2008 4.0 GPA

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.


Work Experience

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.

Lead Web Designer

ABC Company Egypt / June 2013 1 Year

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

Web Developer

My Company / June 2010 1 Year

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

Junior Designer

CDE Company / June 2008 1 Year

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.

Ahmed Hashem

Portfolio

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est. Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

Contact Me

Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est. Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat.

123 Street Name
Cairo
SkSk Area

Email: info@focal.com
Phone: 012546566466

CSS
/*Start main rules*/
body
{
    
}
.container
{
    width: 1170px;
    margin: auto;
}
.clearfix
{
    clear: both;
}
/*End main rules*/

/*Start Header*/
.header .slider
{
    background-color: white;
    background-image:url(https://s20.postimg.org/3lqjyp80t/webdesign.jpg); 
    -webkit-background-size: cover; /*Css3 feature */
    -moz-background-size: cover; /*Css3 feature */
    -o-background-size: cover; /*Css3 feature */
    background-size: cover; /*Css3 feature */
    height: 600px;
}
.header .slider .intro
{
    padding-top: 200px;
    text-align: center;
    color: black;
}
.header .slider .intro h2
{
    margin: 0 auto; /*to make it in the center of the slider*/
    font-size: 50px;
    width: 600px;
    border-top: 6px solid black;
    border-bottom: 6px solid black;
    padding: 5px;
}
.header .slider .intro button
{
    background: none;
    margin-top: 30px;
    font-size: 20px;
    border: 2px solid black;
    font-weight: bold;
    padding: 10px 30px;
}
.header .navbar
{
    background-color: #252F31;
    color: white;
    overflow: hidden;
}
.header .navbar h2
{
    float: left;
    text-transform: uppercase;
}
.header .navbar h2 span
{
    color: green;
}
.header .navbar ul
{
    list-style: none;
    padding-left: 0;
    overflow: hidden; /*to make a links inside */
    float: right;
    
}
.header .navbar ul li
{
    float: left; /*to orgnize the menus to left side*/
    padding: 10px; /*to give the menus a little space (10px) from inside to make it look like menus*/
}
.header .navbar ul li a
{
    color: white;
    text-decoration: none;
}
.header .navbar ul li.active a, .header .navbar ul li a:hover /*active and hover must be the same color*/
{
    color: #2ECC71;
}
/*End Header*/

/*Start Features*/
.features 
{
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}
.features .feature
{
    float: left;
    width: 33.33333%; /*to divide this section into three divs*/
    height: 150px;
    
}
.features .feature h2
{
    text-transform: uppercase;
    color: #555;
}
.features .feature p
{
    line-height: 1.6;
    color: #888;
    text-align: justify;
    padding-right: 20px;
}
/*End Features */

/*Start About Me*/
.aboutme
{
    overflow: hidden;
    background-color: #F2F2F2;
}
.aboutme .image /*outer div of the image*/
{
    float: left;
    width: 40%;
}
.aboutme .image img /*inner div of the image*/
{
    width: 100%
}
.aboutme .info
{
    float: left;
    width: 60%;
}
.aboutme .info h2
{
    margin-top: 20px;
    padding-left: 39px;
    color: #555;
    
}
.aboutme .info > p
{
    margin: 0 0 0 40px;
}
.aboutme .info > p:last-of-type /*this option "last-of-type" is used to Specify the last 

element of its parent*/ { margin-top: 20px; } .aboutme .info p { color: #888; line-height: 1.5; } .aboutme .info .specialities { overflow: hidden; margin: 15px 0 0 40px; } .aboutme .info .specialities .content { float: left; width: 50%; /* to make every 2 div within the same line*/ min-height: 100px; /*The min-height property is used to set the minimum height of an element. This prevents the value of the height property from becoming smaller than min-height*/ overflow: hidden; } .aboutme .info .specialities .content h3 { color: #555; margin-left: 10px; } .aboutme .info .specialities .content .icon { float: left; width: 12%; } .aboutme .info .specialities .content .icon img { max-width: 100%; margin: 10px 0 0 0 } .aboutme .info .specialities .content .text { overflow: hidden; float: left; width: 80%; } /*End About Me*/ /*Start My Skills*/ .myskills { overflow: hidden; padding-top: 30px; padding-bottom: 50px; background-color: white; } .myskills .skills, .myskills .progress { float: left; width: 50%; } .myskills .skills h2 { margin: 20px 0 20px 0; color: #555; } .myskills .skills p { margin: 0 0 10px 0; line-height: 1.5; color: #666; } .myskills .skills p:last-of-type { margin-top: 25px; } .myskills .skills button { background: none; margin: 20px 0 10px 0; font-size: 20px; color: green; border: 3px solid green; border-radius: 5px; font-weight: bold; padding: 10px 30px; } .myskills .progress .tech { margin-left: 50px; } .myskills .progress .tech h3 { color: #555; } .myskills .progress .tech div { background-color: #F2F2F2; height: 25px } .myskills .progress .tech div span { background-color: #2DCC70; height: 25px; display: block; line-height: 25px; text-align: right; color: white; font-weight: bold; } /*End My Skills*/ /*Start Resume*/ .resume { overflow: hidden; background-color: #F2F2F2; padding-top: 30px; padding-bottom: 30px; text-align: center; } .resume h2 { color: #555; margin: 20px 0 20px 0; } .resume p { color: #555; line-height: 1.6; padding: 0 40px; } .resume button { background: none; margin: 20px 0 20px 40px; font-size: 20px; color: green; border: 3px solid green; border-radius: 5px; font-weight: bold; padding: 10px 30px; } /*End Resume*/ /*Start My Education*/ .myeducation { overflow: hidden; padding-top: 30px; padding-bottom: 30px; background-color: white; } .myeducation .education { float: left; width: 50%; margin-right: 5%; } .myeducation .education h2 { margin: 20px 0 20px 0; color: #555; } .myeducation .education p { margin: 0 0 10px 0; line-height: 1.5; color: #666; } .myeducation .education p:last-of-type { margin-top: 25px; } .mainhr { margin-top: 50px; margin-bottom: 50px; background-color: #999; height: 1px; border: 0; } .myeducation .exp { width: 45%; float: left } .myeducation .exp h3 { margin-top: 80px; margin-bottom: 10px; } .myeducation .exp span { display: block; margin-bottom: 10px; } .myeducation .exp span:first-of-type { color: #999; } .myeducation .exp span:last-of-type { background-color: #2DCC70; color: white; display: inline-block; padding: 5px 10px } .myeducation .exp hr { margin: 20px 0; background-color: #999; height: 1px; border: 0; } .myeducation .exp p { line-height: 1.6; color: #555; } /*End My Education*/ /*Start testimonials*/ .testimonials { overflow: hidden; background-color: #F2F2F2; padding-top: 70px; padding-bottom: 70px; text-align: center; } .testimonials q { color: #888; font-size: 18px; font-weight: bold; font-style: italic; line-height: 1.9; font-family: sans-serif Arial; } .testimonials h3 { color: #888; font-size: 19px; font-weight: bold; text-transform: uppercase; margin-bottom: 30px; } .testimonials ul { /*list-style: none;*/ } .testimonials ul li { width: 15px; /*without the width and height the li won't br visible*/ height: 15px; text-align: center; border: 2px solid; /*without the "solid option" the li won't be visible */ border-radius: 10px; border-color: green; display: inline-block; cursor: pointer; } .testimonials ul li.active { background-color: green; } .testimonials ul li:hover { background-color: green; } /*End testimonials*/ /*Start portfolio*/ .portfolio { overflow: hidden; padding-top: 50px; padding-bottom: 70px; text-align: center; } .portfolio h2 { color: #777; margin: 40px 0 30px 0; } .portfolio p { line-height: 1.6; color: #777; margin-bottom: 60px; } .portfolio .mywork { overflow: hidden; } .portfolio .mywork > div { float: left; width: 33.33333%; margin-bottom: 10px; } .portfolio .mywork > div img { width: 91%; margin: 10px; padding: 3px; background-color: #FFF; border: 1px solid #ccc; box-shadow: 10px 10px 12px #ccc; /*css3 feature :) */ } /*End portfolio*/ /*Start Contact Me*/ .contactme { background-color: #252F31; overflow: hidden; padding-top: 50px; padding-bottom: 70px; } .contactme .contactinfo /*this is used to divide contact information and contat form into equal proportions*/ { width: 50%; margin-right: 5%; float: left; } .contactme h2 { color: white; margin-left: 40px; } .contactme p { color: #6A6E71; margin-left: 40px; line-height: 1.7; } .contactme p strong { color: white } .contactme .contactform /*this is used to divide contact information and contat form into equal proportions*/ { width: 45%; float: left; } .contactme .contactform label { display: block; color: white; margin: 10px 0; } .contactme .contactform input[type="text"] { background-color: #4b5557; color: white; padding: 10px; border: 0; width:80%; margin-bottom: 10px; } .contactme .contactform textarea { background-color: #4b5557; color: white; padding: 10px; border: 0; width:80%; height: 300px; margin-bottom: 10px; } .contactme .contactform input[type="submit"] { padding: 15px 25px; background-color: #191E22; color: white; border:0; text-transform:uppercase; font-size: 13px; margin-top: 15px; } /*End Contact Me*/ /*Start Footer*/ .footer { background-color: #191E22; color: white; overflow: hidden; padding-top: 30px; padding-bottom: 30px; text-align: center; overflow: hidden; } .footer ul { text-align: center; padding-left: 0; list-style: none; } .footer li { display: inline-block } .footer span { text-align: center; margin-left: 10px; } /*End Footer*/

Host Instantly Drag and Drop Website Builder

 

Wed, 11/29/2017 - 11:18

Related Codes

Pen ID
Pen ID
Pen ID