Tìm hiểu về Slices
Cắt PSD – HTML part 1
Cắt PSD – HTML part 2
Cắt PSD – HTML part 3
Cắt PSD – HTML part 3
index.html (update 14-1-2020 ) Template Hoàn Chỉnh
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Portfolio</title> <!--Tên website--> <link rel="stylesheet" href="css/style.css" type="text/css"> <!--import file css--> <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet"> <!--import font--> </head> <body> <div id="wrapper"> <div class="header"> <div class="top-header"> <div class="logo"> <img src="images/logo_03.png" alt="logo"> </div> <!-- Logo--> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#services">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Hire me!</a></li> </ul> </div> <!-- Menu--> </div> <!-- Top header--> <div class="banner"> <div class="banner-img"> <img src="images/Banner.png" alt="banner"> </div> <!-- hinh anh banner--> <div class="banner-content"> <div class="b-text"> <h2>Hello, I’m Deeje</h2> <h1>Expert in Graphic Design &Development</h1> <p>Currently available for select projects, collaborations and consulting.Currently available for select projects, collaborations and consulting.</p> <button>SEE MY WORK</button> </div> </div> <!-- Banner content--> </div> <!-- Banner--> </div> <!-- End header--> <div id="services"> <div class="sv-content"> <div class="sv-title"> <h2>Services</h2> <h1>Services</h1> </div> <div class="sv-colums"> <img src="images/icon1.png" alt="icon"> <h1>WEB DESIGN</h1> <div class="sv-border"> </div> <p>Well we're movin' on up to the east side. To a deluxe apartment in the sky.</p> </div> <div class="sv-colums"> <img src="images/icon2.png" alt="icon"> <h1>Mobile App</h1> <div class="sv-border"> </div> <p>Tracking immunizations has never been easier or more secure...</p> </div> <div class="sv-colums"> <img src="images/icon2.png" alt="icon"> <h1>Barnding</h1> <div class="sv-border"> </div> <p>Well we're movin' on up to the east side. To a deluxe apartment in the sky.</p> </div> </div> </div> <!-- End Services--> <div class="portfolio"> <div class="sv-title"> <h2>Portfolio</h2> <h1>Portfolio</h1> </div> <div class="pr-content"> <img src="images/portfolio-1.jpg" alt="pr"> <img src="images/portfolio-1.jpg" alt="pr"> <img src="images/portfolio-1.jpg" alt="pr"> <img src="images/portfolio-1.jpg" alt="pr"> <img src="images/portfolio-1.jpg" alt="pr"> <img src="images/portfolio-1.jpg" alt="pr"> </div> </div> <!-- End portfolio--> <div class="call-action"> <div class="content-call"> <div class="call-left"> <h1>Make It Awesome!</h1> <p>There's nothing we wont try. Never heard the word impossible. This time there's no stopping us. The year is 1987 and NASA launches the last of Americas deep space probes.</p> </div> <div class="call-right"> <button>Hire Me Now!</button> </div> </div> </div> <!-- End call action --> <div class="tes"> <div class="tes-content"> <h1>What clients Feedback about me</h1> <img src="images/testimonials.png" alt="#"> <p class="name">ALLEN BELL</p> <p class="job">UX Designer</p> <p class="feedback">Fleeing from the Cylon tyranny the last Battlestar – Galactica - leads a rag-tag fugitive fleet on a lonely quest - a shining planet known as Earth? Texas tea.Its mission - to explore strange new worlds to seek out new life and new civilizations to boldly go where no man has gone before. Doin' it our way.</p> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <!-- End Tes--> <div class="footer"> <div class="ft-content"> <div class="menu-ft"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About me</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> </ul> <div class="ft-search"> <input type="text" name="search" value="" placeholder="Search..."> </div> </div> <!-- End menu-ft--> <div class="clearfix"></div> <div class="social"> <ul> <li><a href="#"><img src="images/FB.png" alt="#"></a></li> <li><a href="#"><img src="images/FB.png" alt="#"></a></li> <li><a href="#"><img src="images/FB.png" alt="#"></a></li> <li><a href="#"><img src="images/FB.png" alt="#"></a></li> </ul> </div> <!-- End social--> </div> </div> <!-- End footer--> <div class="copyright"> <p>Copyright 2017. Portfolio By VictorThemes </p> </div> <!-- End footer--> </div> <!-- End wrapper--> </body> </html>
style.css
/* CSS Document */
*{
margin: 0;
padding: 0;
}
/*Reset CSS*/
body{
font-family: 'Poppins', sans-serif;
}
#wrapper{
width: 1920px;
height: 4705px;
background: red;
margin: 0 auto;
/* canh ra center*/
}
.header{
width: 1920px;
height: 990px;
background: #f4f2f0;
}
.top-header{
width: 1160px;
height: 160px;
margin: 0 auto;
}
.top-header .logo{
width: 43%;
height: 160px;
float: left;
}
.logo img{
margin-top:120px;
}
.top-header .menu{
width: 57%;
height: 160px;
float: right;
}
.menu ul{
margin-top:96px;
list-style: none;
}
.menu ul li{
display: inline-block;
width: 155px;
height: 60px;
border: 2px solid transparent;
margin-left: -2px; /* mặc định của display:inline-block là có margin-left:5px */
text-align: center;
line-height: 60px; /* số đo bằng height sẽ nằm center là 60px */
transition: 0.5s;
}
.menu ul li:hover{
border-color: #1769ff; /* màu sắc border khi rê chuột vào */
border-radius: 45px; /*bo góc khi rê chuột vào*/
}
.menu ul li:hover a{
color: #1769ff;
}
.menu ul li a{
color: #333333;
font-size: 20px;
text-decoration: none; /* Bỏ gạch chân */
display: block;
}
/*Top header*/
.banner{
width: 1920px;
height: 835px;
}
.banner .banner-img{
width: 55%;
height: 835px;
float: left;
}
.banner-img img{
height: 775px;
margin-top: 60px;
}
.banner .banner-content{
width: 45%;
height: 835px;
float: right;
}
.banner-content .b-text{
width: 600px;
height: 370px;
margin-top: 230px;
}
.banner-content .b-text h2{
font-size: 36px;
color: #333333;
font-weight: lighter;
}
.banner-content .b-text h1{
width: 540px;
font-size: 48px;
color: #333333;
font-weight: 100;
margin-bottom: 40px;
}
.banner-content .b-text p{
font-family: 'Raleway', sans-serif;
font-size: 16px;
color: #777777;
margin-bottom: 30px;
}
.banner-content .b-text button{
width: 220px;
height: 60px;
border: 2px solid #1769ff;
border-radius: 45px;
font-size: 16px;
transition: 0.5s;
}
.banner-content .b-text button:hover {
background: #1769ff;
color: white;
cursor: pointer;
box-shadow: 0px 3px 3px black;
}
/*Header*/
#services{
width: 1920px;
height: 595px;
background: #fafafa;
padding-top: 170px;
}
.sv-content{
width: 1155px;
height: 435px;
margin: 0 auto; /* canh center*/
}
.sv-title{
position: relative;
width: 280px;
height: 55px;
margin: 0 auto; /*cho ra center*/
text-align: center; /*text ra center*/
text-transform: uppercase; /* cho text style in hoa */
}
.sv-title h1{
font-size: 55px;
color:#eeeeee;
font-weight: bold; /* độ dày mỏng của nét chữ */
position: absolute;
z-index: 2;
top:-10px;
left: 20px;
}
.sv-title h2{
font-size: 32px;
color: #333333;
letter-spacing: 6px; /* khoảng cách từng chữ */
font-weight: 100; /* độ dày mỏng của nét chữ */
position: absolute;
z-index: 3;
left: 50px;
top:8px;
}
.sv-content .sv-colums{
width: 370px;
height: 320px;
float: left;
margin-top:65px;
margin-left: 12px;
text-align: center;
transition: 0.5s
}
.sv-content .sv-colums:hover{
background: #1769ff;
border-radius: 5px;
}
.sv-content .sv-colums:hover h1{
color: white;
}
.sv-content .sv-colums:hover p{
color: white;
}
.sv-content .sv-colums:hover .sv-border{
border-color: white;
}
.sv-colums h1{
margin-top: 30px;
margin-bottom: 20px;
font-size: 18px;
color: #222222;
text-transform: uppercase;
}
.sv-colums p{
margin-top: 25px;
font-size: 15px;
color: #777777;
width: 300px;
margin-right: auto;
margin-left: auto;
}
.sv-colums img{
margin-top:40px;
}
.sv-border{
width: 40px;
border: 2px solid #1769ff;
border-radius: 4px;
margin: 0 auto;
}
/*Services*/
.portfolio{
width: 1920px;
height: 1150px;
padding-top:135px;
background: #f4f4f4;
}
.pr-content{
width: 1445px;
height: 990px;
margin: 50px auto;
}
.pr-content img{
margin-left: 35px;
margin-top:30px;
}
/*Portfolio*/
.call-action{
width: 1920px;
height: 230px;
background: #fafafa;
padding-top:130px;
}
.call-action .content-call{
width: 1170px;
height: 105px;
margin:0 auto;
}
.call-action .content-call .call-left{
float: left;
width: 995px;
height: 105px;
}
.call-action .content-call .call-left h1{
font-weight: 100;
font-size: 34px;
margin-bottom: 15px;
margin-top:-12px;
}
.call-action .content-call .call-left p{
width: 740px;
font-size: 16px;
}
.call-action .content-call .call-right{
float: left;
width: 175px;
height: 105px;
}
.call-action .content-call .call-right button{
width: 175px;
height: 60px;
background: none;
border: 2px solid black;
border-radius: 45px;
color: black;
margin-top:25px;
transition: 0.5s;
}
.call-action .content-call .call-right button:hover {
color: #1769ff;
border-color: #1769ff;
cursor: pointer;
}
/*Call action*/
.tes{
width: 1920px;
height: 725px;
background: #f4f4f4;
padding-top:165px;
}
.tes-content{
width: 995px;
height: 550px;
text-align: center;
margin:0 auto;
}
.tes-content h1{
width: 505px;
font-weight: 100;
font-size: 50px;
margin: 0 auto 50px auto;
}
.tes-content .name{
font-weight: bold;
font-size: 17px;
}
.tes-content .job{
font-size: 17px;
color: #8b8b8b;
}
.tes-content .feedback{
margin-top:45px;
font-size: 17px;
}
.tes-content ul{
margin-top: 60px;
text-align: center;
}
.tes-content ul li{
margin-left: 20px;
width: 20px;
height: 20px;
display: inline-block;
border: 2px solid transparent;
border-radius: 50%;
color: #bcbcbc;
transition: 0.5s;
}
.tes-content ul li:hover{
cursor: pointer;
color: #1769ff;
border-color: #1769ff;
}
/*feedback*/
.footer{
width: 1920px;
height: 220px;
background: #FF0004;
padding-top: 100px;
}
.footer-menu{
width: 750px;
height: 55px;
background: pink;
margin: 0 auto;
}
.footer-social{
width: 345px;
height: 60px;
background: #0005FF;
margin-top: 65px;
margin-left: auto;
margin-right: auto;
}
/*footer*/
.footer{
width: 1920px;
height: 320px;
background: #ffffff;
}
.ft-content{
width: 740px;
height: 60px;
margin: 0 auto;
padding-top:90px;
}
.ft-content .menu-ft{
background: blue;
}
.ft-content .menu-ft ul{
list-style: none;
float: left;
margin-top: 10px;
}
.ft-content .menu-ft ul li{
display: inline-block;
margin-right: 55px;
}
.ft-content .menu-ft ul li a{
display: block;
font-size: 18px;
color: black;
text-decoration: none;
transition: 0.5s;
}
.ft-content .menu-ft ul li a:hover{
color: #1769ff;
}
.ft-content .menu-ft .ft-search{
float: right;
font-size: 20px;
border-radius: 45px;
background: white;
text-align: center;
}
.ft-content .menu-ft .ft-search input{
width: 215px;
height: 50px;
font-size: 20px;
border: 1px solid #f4f4f4;
background: white;
margin-top: 5px;
border-radius: 30px;
padding-left: 20px;
}
.ft-content .social{
margin-left: auto;
margin-right: auto;
width: 404px;
margin-top: 60px;
}
.ft-content .social img{
width: 50px;
}
.ft-content .social ul{
list-style: none;
}
.ft-content .social ul li{
float: left;
margin-right: 50px;
}
.copyright{
width: 1920px;
height: 125px;
background: white;
text-align: center;
border-top:1px solid #f4f4f4;
}
.copyright p{
margin-top:50px;
font-size: 16px;
color: #777777;
}
.clearfix{
clear: both
}