html5 tutorial: attractive website templates

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive-website</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="main-wrapper">
  
  <div class="menu">
    
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </div>
  
  <div class="banner">
    
    <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider3.png" height="300" /> </div>
  
  <div class="main-container">
    
    <div class="middle-container">
      
      <div class="myleft-small">
        
        <h1>News and Events</h1>
        <ul>
          <li>NOV NEWS</li>
          <li><img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" height="100" width="213" /></li>
          <li>DEC NEWS</li>
          <li><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="213"  /></li>
        </ul>
        <span class="ReadMore">ReadMore</span> </div>
      
      <div class="myleft-big">
        
        <h1>Welcome Web design</h1>
        <h3>Web design encompasses many different skills and disciplines in the production and maintenance of websites</h3>
        <div class="left-side"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" /></div>
        <p>Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all.The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines.</p>
        <div class="left-side">
          <ul>
            <li>Web design encompasses many different skills and disciplines in the...</li>
            <li>Web design encompasses many different skills and disciplines in the...</li>
            <li>Web design encompasses many different skills and disciplines in the...</li>
          </ul>
        </div>
        <div class="clearflex"></div>
        <div class="left-side" style="width:47%">
          <h2>Feature Design</h2>
          <ul>
            <li>Web design encompasses many different skills and disciplines in the...</li>
            <li>Web design encompasses many different skills and disciplines in the...</li>
            <li>Web design encompasses many different skills and disciplines in the...</li>
          </ul>
          <div style="text-align: center; border: 8px solid rgb(204, 204, 204); border-top-right-radius: 15px; border-bottom-left-radius: 15px;"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" height="100" width="301" /></div>
        </div>
        <div class="left-side" style="width:50%">
          <h2>Resources</h2>
          <ul>
            <li>Web design encompasses many different skills and disciplines in the...</li>
            <li>Web design encompasses many different skills and disciplines in the...</li>
            <li>Web design encompasses many different skills and disciplines in the...</li>
          </ul>
          <div style="text-align: center; border: 8px solid rgb(204, 204, 204); border-top-right-radius: 15px; border-bottom-left-radius: 15px;"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="321"  /> </div>
        </div>
      </div>
      
    </div>
    
  </div>
  
  <div class="footer">
    
    <p>© Web Designe</p>
  </div>
  
</div>

</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#FFFFFF;
}
.main-wrapper {
 padding:10px;
 margin:auto;
 overflow:auto;
 background:#cc3333;
}
.menu {
 padding:10px;
 background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #f2335b 0%, #e55b2b 87%, #f07146 100%) repeat;
 margin:auto;
}
.menu ul {
 padding:0px;
 margin:0px;
}
.menu ul li {
 list-style-type:none;
 text-decoration:none;
 display:inline;
 padding: 22px 98px 39px 47px;
}
.menu ul li a {
 text-decoration:none;
 color: #cccc99;
}
.menu ul li a:hover {
 text-decoration:none;
 color:#33CC00;
}
.banner {
 padding:5px;
 background:#FFFFFF;
 margin:auto;
}
.banner img {
 width:100%;
 margin:auto;
}
.main-container {
 padding:10px;
 background: #cc0000; /* Old browsers */
 background: -moz-linear-gradient(top, #cc0000 0%, #590008 61%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cc0000), color-stop(61%, #590008)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #cc0000 0%, #590008 61%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #cc0000 0%, #590008 61%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #cc0000 0%, #590008 61%); /* IE10+ */
 background: linear-gradient(to bottom, #cc0000 0%, #590008 61%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#590008', GradientType=0 ); /* IE6-9 */
 margin:auto;
 overflow: auto;
}
.middle-container {
 margin:auto;
 width:100%;
 background:#996600;
}
.myleft-small {
 background:#cc3333;
 float: left;
 margin-left: 77px;
 padding: 10px;
 width: 24%;
}
.myleft-small h1 {
 color: #ffd5d5;
 text-align: center;
}
.myleft-small ul {
}
.myleft-small ul li {
 list-style-type:none;
}
.left-side {
 float:left;
 margin-right: 10px;
}
.left-side ul {
}
.left-side h2 {
 color: #c10000;
 text-shadow: 1px 1px 1px #fff;
 text-align: center;
}
.left-side ul li {
 color: #c9a265;
 list-style-type: square;
}
.left-side ul li a {
 color:#FF9900;
}
.myleft-big {
 background:#590008;
 float: left;
 padding: 20px;
 width: 56%;
}
.myleft-big h1 {
 color: #c99c67;
 font-family: Monotype Corsiva;
}
.myleft-big h3 {
 color: #c99c67;
 font-family: Monotype Corsiva;
}
.myleft-big p {
 color:#bac264;
 font-family: Gill Sans MT;
}
.clearflex {
 clear:both;
}
.ReadMore {
 float:right;
}
.footer {
 border-top:4px solid #663333;
 padding:10px;
 background:#330000;
}
.footer p {
 text-align:center;
 color:#FFFFFF;
}

Friday, 24 April 2015

attractive website templates

Create index.html

Create style.css

No comments:

Post a Comment