Class-10-08-04-2017-Professional Web Design-PSD to HTML-04

HTML Code

<html>
 <head>
  <title>First PSD to HTML</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="assets/css/style.css"/>
 </head>
 
 <body>
  <header class="header-section">
   <div class="container">
    <div class="logo">
     <img src="assets/images/logo.png"/>
    </div>
<div class="menu">
     <ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Recent Course</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</header>
  
  
  <section class="banner-section">
   <div class="container">
    <div class="banner-text">
     <h2>
Welcome to</h2>
<h1>
Webcode Institute</h1>
<p>
Check out our Recent Courses and take a professional course build your career. Click to see full course awesome theme details.</p>
<a href="#" class="custom-btn">Buy This Now</a>
    </div>
</div>
</section>
  
  
  
  <section class="about-section section-padding">
   <div class="container">
    <div class="section-title">
     <h2>
About Our Webcode</h2>
<p>
Rorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="section-wrapper">
     <div class="about-image">
      <div class="about-image-inner">
       <img src="assets/images/about.jpg"/>
      </div>
</div>
<div class="about-content">
      <div class="about-content-inner">
       <i>Perdiet doming id quod mazim placerat facer possim assum. Claritas est etiam processus dynamicus, qui sequitur.</i>
       
       <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh the a thre euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim and is minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl anda aliquip commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan eiusto odio dignissim qui blandit praesent luptatum zzril awesome theme delenit augue.
       Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.</p>
<a href="#" class="custom-btn">Meet Our Team</a>
      </div>
</div>
</div>
</div>
</section>
  
  
  
  <section class="recent-course-section section-padding">
   <div class="container">
    <div class="section-title">
     <h2>
Our Recent courses</h2>
<p>
Rorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="section-wrapper">
     <div class="course-item">
      <div class="course-item-inner">
       <div class="course-image">
        <img src="assets/images/course1.jpg" alt="image"/>
       </div>
<div class="course-content">
        <h3>
Professional Web Design</h3>
<p>
WebCode Institute is reacognized and well known  are not essential to make the web design causing  the web designer.</p>
</div>
</div>
</div>
<div class="course-item">
      <div class="course-item-inner">
       <div class="course-image">
        <img src="assets/images/course2.jpg" alt="image"/>
       </div>
<div class="course-content">
        <h3>
Professional Web Design</h3>
<p>
WebCode Institute is reacognized and well known  are not essential to make the web design causing  the web designer.</p>
</div>
</div>
</div>
<div class="course-item">
      <div class="course-item-inner">
       <div class="course-image">
        <img src="assets/images/course3.jpg" alt="image"/>
       </div>
<div class="course-content">
        <h3>
Professional Web Design</h3>
<p>
WebCode Institute is reacognized and well known  are not essential to make the web design causing  the web designer.</p>
</div>
</div>
</div>
</div>
</div>
</section>
  
  
  
  
  
  <footer class="footer">
   <div class="footer-top section-padding">
    <div class="container">
     <div class="footer-widget first-widget">
      <div class="widget-inner">
       <h3>
About Webcode Institute</h3>
<p>
Rorem ipsum dolor sit amet, consectetur adipiscing eliteiusmod tempor incidid labore et dolore magna aleiqua. Ut enim ad minim nostrud exercitation ullamco laeboriseiusmod tempor incidid labore et dolore magna aleiqua nisi ut aliquip ex ea commodo consequat. </p>
<p>
Duis aute irure dolor in reprehenderit in voluptate avelit esse cillum dolore eu fugiat nulla pariatur.orem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div class="footer-widget second-widget">
      <h3>
Recent Blog Post</h3>
<div class="blog-post">
       <div class="blog-post-item">
        <div class="blog-image">
         <img src="assets/images/blog1.jpg" alt="blog image"/>
        </div>
<div class="blog-content">
         <h6>
<a href="#">Rorem ipsum dolor sit an amet, consectetur adipiscing</a></h6>
<span class="date">26 Feb, 2017</span>
        </div>
</div>
</div>
<div class="blog-post-item">
        <div class="blog-image">
         <img src="assets/images/blog2.jpg" alt="blog image"/>
        </div>
<div class="blog-content">
         <h6>
<a href="#">Rorem ipsum dolor sit an amet, consectetur adipiscing</a></h6>
<span class="date">26 Feb, 2017</span>
        </div>
</div>
<div class="blog-post-item">
        <div class="blog-image">
         <img src="assets/images/blog3.jpg" alt="blog image"/>
        </div>
<div class="blog-content">
         <h6>
<a href="#">Rorem ipsum dolor sit an amet, consectetur adipiscing</a></h6>
<span class="date">26 Feb, 2017</span>
        </div>
</div>
</div>
<div class="footer-widget third-widget">
      <h3>
Instagram</h3>
<div class="instagram">
       <div class="instagram-item">
        <a href="#"><img src="assets/images/course2.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram2.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram3.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram4.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram5.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram6.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram7.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram8.jpg" alt="instagram"/></a>
       </div>
<div class="instagram-item">
        <a href="#"><img src="assets/images/instagram9.jpg" alt="instagram"/></a>
       </div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
    <p>
© 2016 Webcode PSD Template By <a href="">Codexcoder.com</a></p>
</div>
</footer>
  
  
  
  
 </body>
</html>

CSS Code

body {
 margin: 0;
 padding: 0;
 font-family: 'Raleway', sans-serif;
}

.header-section {
 overflow: hidden;
    padding: 25px 0;
}

.container {
 width: 1170px;
 margin: auto;
}

.logo {
 float: left;
}

.menu {
 float: right;
}

.menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

.menu ul li {
 float: left;
 padding: 25px 30px;
 border-right: 1px solid red;
}

.menu ul li:nth-child(even) {
 border-right: none;
}

.menu ul li a {
 text-decoration: none;
 color: #555;
 font-size: 16px;
 text-transform: uppercase;
 font-weight: bold;
 transition: .3s ease;
}
.menu ul li a.active {
 color: #29b899;
}

.menu ul li:hover a {
 color: #1ab999;
}

/*  banner section  */
.banner-section {
 background-image: url(../../assets/images/banner-bg.jpg);
 padding-top: 170px;
 padding-bottom: 170px;
 background-position: center;
}
.banner-text {
 width: 590px;
}

.banner-text h2 {
 font-size: 36px;
 font-weight: 600;
 text-transform: uppercase;
 color: #fff;
 margin-top: 0;
 margin-bottom: 5px;
}

.banner-text h1 {
 font-size: 48px;
 font-weight: 700;
 text-transform: uppercase;
 color: #fff;
 margin-top: 0;
 margin-bottom: 5px;
}

.banner-text p {
 font-size: 16px;
 color: #fff;
 margin-top: 0;
 margin-bottom: 20px;
 line-height: 25px;
}

.custom-btn {
 display: inline-block;
 background: #1ab999;
 padding: 20px 33px;
 font-size: 14px;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-weight: 900;
 border-radius: 5px;
}

.section-title {
 padding-bottom: 40px;
 max-width: 630px;
 margin: auto;
 text-align: center;
 overflow: hidden;
}
.section-title h2 {
 font-size: 30px;
 font-weight: 700;
 color: #1ab999;
 margin-top: 0;
 margin-bottom: 10px;
}
.section-title p {
 font-size: 16px;
 color: #363636;
 font-weight: 500;
 margin: 0;
 line-height: 26px;
}

.section-padding {
 padding-top: 100px;
 padding-bottom: 100px;
}

.section-wrapper {
 overflow: hidden;
}

.about-image {
 width: 50%;
 float: left;
}

.about-content {
 width: 50%;
 float: left;
}

.about-image-inner {
 padding-right: 15px;
}

.about-image-inner img {
 width: 100%;
}

.about-content-inner {
 padding-left: 15px;
}

.about-content i {
 font-size: 18px;
 font-weight: 500;
 color: #1ab999;
}

.about-content p {
 font-size: 14px;
 color: #555555;
 line-height: 26px;
}

.recent-course-section {
 background: #fafafa;
}
.course-item {
 width: 33.3%;
 float: left;
}

.course-item img {
 width: 100%;
 transition: all 1s ease;
}

.course-item-inner {
 padding-left: 15px;
 padding-right: 15px;
}

.course-item .course-content {
 padding: 25px 10px;
}

.course-item .course-content h3 {
 margin: 0;
 margin-bottom: 10px;
 font-size: 24px;
 font-weight: 700;
 text-transform: uppercase;
 color: #1ab999;
 line-height: 30px;
}

.course-item .course-content p {
 margin: 0;
 font-size: 16px;
 color: #555555;
 line-height: 24px;
}
.course-image {
 overflow: hidden;
}
.course-item:hover img {
 transform: scale(1.1);
}

.footer {}

.footer-top {
 background: #1ab999;
 overflow: hidden;
}
.footer-widget {
 width: 33.3%;
 float: left;
}
.widget-inner {
 padding-right: 20px;
}

.footer-widget h3 {
 font-size: 24px;
 line-height: 26px;
 color: #fff;
 font-weight: 700;
 margin-top: 0;
 margin-bottom: 20px;
}

.first-widget p {
 font-size: 15px;
 line-height: 26px;
 color: #fff;
 margin-top: 0;
 margin-bottom: 20px;
}

.blog-post {}

.blog-post-item {
 overflow: hidden;
 margin-bottom: 30px;
}

.blog-image{
 float: left;
 margin-right: 20px;
}

.blog-content {
 display: table;
}

.blog-content h6 {
 margin: 0;
}
.blog-content h6 a {
 font-size: 16px;
 color: #fff;
 line-height: 24px;
 font-weight: 500;
 text-decoration: none;
 margin-bottom: 7px;
 display: block;
}

.blog-content .date {
 font-size: 14px;
 color: #bffcf0;
}

.instagram {}
.instagram-item {
 width: 33.3%;
 float: left;
}

.instagram-item a {
 display: block;
 padding: 2px;
}
.instagram-item img {
 width: 100%;
}

.footer-bottom {
 text-align: center;
 padding: 41px 0;
}
.footer-bottom p {
 margin: 0;
 font-weight: 500;
}
.footer-bottom a  {
 text-decoration: none;
 color: #1ab999;
}

Class-10-08-04-2017-Professional Web Design-PSD to HTML-04

Class-10-08-04-2017-Professional Web Design-PSD to HTML-04

0 comments:

Post a Comment

FIND US ON FACEBOOK

Categories

Blog Archive

Popular Posts