Responsive Website Design: Responsive Newsletter Template

Create Index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Design</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,  .carousel-inner > .item > a > img {
 width: 100%;
 margin: auto;
 height:300PX;
}
</style>
</head>
<body>
<div class="header">
  <div class="header-logo"> <img src="img/newlogo.png"> </div>
  
  <div class="header-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </div>
  
</div>

<div class="main-slider">
  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    
    <div class="carousel-inner" role="listbox">
      <div class="item active"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKUIFMv_6j2UDrkkBAiYxpg_3uswbUb3Ubrtl2LXLBxUu2UWZt9b697zfa5PhjUDhOk8Cmh_VLCtJIgIv6Thhtdax_WCbxb5-cj0jG7REQz9L5ElHjamhsG_UQpJlEr1wyjupTmtsP6g/s1600/background1.png" alt="PSD DESIGN">
        <div class="carousel-caption">
          <h3>New Design</h3>
          <p>New Design Collections</p>
        </div>
      </div>
      <div class="item"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKUIFMv_6j2UDrkkBAiYxpg_3uswbUb3Ubrtl2LXLBxUu2UWZt9b697zfa5PhjUDhOk8Cmh_VLCtJIgIv6Thhtdax_WCbxb5-cj0jG7REQz9L5ElHjamhsG_UQpJlEr1wyjupTmtsP6g/s1600/background1.png" alt="PSD DESIGN">
        <div class="carousel-caption">
          <h3>New Design</h3>
          <p>New Design Collections</p>
        </div>
      </div>
      <div class="item"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKUIFMv_6j2UDrkkBAiYxpg_3uswbUb3Ubrtl2LXLBxUu2UWZt9b697zfa5PhjUDhOk8Cmh_VLCtJIgIv6Thhtdax_WCbxb5-cj0jG7REQz9L5ElHjamhsG_UQpJlEr1wyjupTmtsP6g/s1600/background1.png" alt="PSD DESIGN">
        <div class="carousel-caption">
          <h3>New Design</h3>
          <p>New Design Collections</p>
        </div>
      </div>
    </div>
    
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  
</div>

<div class="top-container">
  <div class="top-container-block">
    <div class="top-container-block-heading">
      <div class="top-container-block-heading-icon"> <img src="img/lightbulb.png" alt="icon"> </div>
      
      <div class="top-container-block-heading-item">
        <p>Industry</p>
      </div>
      
    </div>
    
    <div class="top-container-block-desc">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    
    <div class="top-container-block-heading-readmore">
      <p>Read More</p>
    </div>
    
  </div>
  
  
  <div class="top-container-block">
    <div class="top-container-block-heading">
      <div class="top-container-block-heading-icon"> <img src="img/locate.png" alt="icon"> </div>
      
      <div class="top-container-block-heading-item">
        <p>Printing</p>
      </div>
      
    </div>
    
    <div class="top-container-block-desc">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    
    <div class="top-container-block-heading-readmore">
      <p>Read More</p>
    </div>
    
  </div>
  
  
  <div class="top-container-block">
    <div class="top-container-block-heading">
      <div class="top-container-block-heading-icon"> <img src="img/settings.png" alt="icon"> </div>
      
      <div class="top-container-block-heading-item">
        <p>Standard</p>
      </div>
      
    </div>
    
    <div class="top-container-block-desc">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    
    <div class="top-container-block-heading-readmore">
      <p>Read More</p>
    </div>
    
  </div>
  
</div>

<div class="portfolio-me">
  <div class="portfolio-me-img"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKUIFMv_6j2UDrkkBAiYxpg_3uswbUb3Ubrtl2LXLBxUu2UWZt9b697zfa5PhjUDhOk8Cmh_VLCtJIgIv6Thhtdax_WCbxb5-cj0jG7REQz9L5ElHjamhsG_UQpJlEr1wyjupTmtsP6g/s1600/background1.png" alt="banner">
    <div class="portfolio-me-text">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    
  </div>
  
</div>

</body>
</html>

Style.css

@charset "utf-8";
body {
 background:#333;
}
.header {
 background: #000;
 margin: auto;
 overflow: auto;
 padding: 10px;
}
.header-logo {
 float: left;
 height: 100px;
 padding: 10px;
 width: 100px;
}
.header-logo img {
 width:100%;
 height:100%;
 margin:auto;
}
.header-menu {
 /*background: #ddd;*/
    float: right;
 margin: 10px;
 padding: 10px;
}
.header-menu ul {
 padding:0px;
 margin:0px;
}
.header-menu ul li {
 float: left;
 list-style-type: none;
 margin: 12px;
}
.header-menu ul li a {
 background: #333;
 color: #ffffff;
 padding: 10px;
 text-decoration: none;
 box-shadow: 0 0 0 1px #8A8A8A;
}
.header-menu ul li a:hover {
 color:#FFFFFF;
 background: #0099FF;
 text-decoration:none;
 box-shadow: 0 0 0 1px #fff;
}
.main-slider {
 margin:auto;
}
.top-container {
 margin:auto;
 overflow:auto;
 padding:20px;
 background:#eee;
}
.top-container-block {
 background: #8a8a8a;
 border-radius: 10px;
 box-shadow: 10px 2px 1px;
 float: left;
 margin: 8px;
 padding: 10px;
 width: 32%;
}
.top-container-block-heading {
 padding:10px;
 margin:auto;
 overflow: auto;
}
.top-container-block-heading-icon {
 float:left;
 height:50px;
 width:50px;
 margin:10px;
}
.top-container-block-heading-icon img {
 margin:auto;
 width:100%;
 height:100%;
}
.top-container-block-heading-item {
 float:left;
}
.top-container-block-heading-item p {
 color: #eee;
 font-size: 47px;
 text-align: center;
}
.top-container-block-desc {
 margin:auto;
}
.top-container-block-desc p {
 text-align:center;
 color:#eee;
}
.top-container-block-heading-readmore {
 float:right;
 padding:10px;
 text-align:center;
 background:#000;
 color:#fff;
 cursor:pointer;
 border-radius: 10px;
}
.top-container-block-heading-readmore:hover {
 background:#0099FF;
}
.top-container-block-heading-readmore p {
 text-align:center;
 margin: 0;
}
.portfolio-me {
 margin:auto;
 padding:20px;
 background:#333;
}
.portfolio-me-text {
 background: #eee;
 margin: -82px auto;
 padding: 10px;
}
.portfolio-me-text p {
 color: #fff;
 font-size: 26px;
 text-align: center;
}
.portfolio-me-img {
 height:122px;
 width:100%;
 margin:auto;
}
.portfolio-me-img img {
 margin:auto;
 width:100%;
 height:100%;
}

/*--------------------------------------Responsive code here-----------------------------------*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .top-container-block {
 background: #8a8a8a;
 float: none;
 margin: 8px auto;
 overflow: auto;
 padding: 10px;
 width: 100%;
}
.header-logo {
 float: none;
 height: 100px;
 margin: auto;
 padding: 10px;
 width: 100px;
}
.header-menu {
 background: #ddd;
 float: none;
 overflow: auto;
 padding: 10px;
}
.header-menu ul li {
 background: #333 none repeat scroll 0 0;
 border-radius: 10px;
 display: inline-block;
 list-style-type: none;
 margin: 3px auto;
 padding: 10px;
 text-align: center;
 width: 100%;
}
.header-menu ul li a {
 color: #ffffff;
 text-decoration: none;
 width: 100%;
}
.header-menu ul li a:hover {
 background: #0099FF;
 display: inline-block;
 list-style-type: none;
 text-align: center;
 width: 100%;
}
.main-slider {
 background: #333;
 margin: auto;
 overflow: auto;
 padding: 10px;
}
.portfolio-me-img {
height:169px;
width:100%;
margin:auto;
}
.portfolio-me-text {
 background: #eee;
 margin: -147px auto;
 padding: 10px;
}
}

Tuesday, 28 July 2015

Responsive Newsletter Template

Create Index.html

Style.css

No comments:

Post a Comment