Hướng Dẫn Cắt PSD->HTML Cơ Bản

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>&#07;</li>
					<li>&#07;</li>
					<li>&#07;</li>
					<li>&#07;</li>
					<li>&#07;</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
}