Class-08-01-03-2017-Professional Web Design-PSD to HTML-02 ~ CodexColors

Class-08-01-04-2017-Professional Web Design-PSD to HTML-02

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>
  
  
  
  
 </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;
}
.menu ul li a {
 text-decoration: none;
 color: #555;
 font-size: 16px;
 text-transform: uppercase;
 font-weight: bold;
}
.menu ul li a.active {
 color: #29b899;
}

/*  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;
}

Class-08-01-03-2017-Professional Web Design-PSD to HTML-02

0 comments:

Post a Comment

FIND US ON FACEBOOK

Categories

Blog Archive

Popular Posts