Responsive Website Design: Responsive Newsletter design

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter design</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="main-wrapper">
  <div class="header">
    <div class="left">
      <p>Simple <span style="color:#0099CC">Newsletter</span></p>
    </div>
    
    <div class="right">
      <p>f |<span style="color:#00FFFF"> tw</span> |<span style="color:#0066CC"> li</span> </p>
    </div>
    
  </div>
  
  <div class="banner"> <img src="http://www.curdweb.com/navin/click.com/images/slider/slider4.png"> </div>
  
  <div class="banner-content">
    <p>Newsletters are published by clubs, churches, societies, associations, and businesses—especially companies—to provide information of interest to members, customers, or employees. A newsletter may be considered "grey literature". Newsletters delivered electronically via email (e-Newsletters) have gained rapid acceptance for the same reasons email in general has gained popularity over printed correspondence.</p>
    <p>Some newsletters are created as money-making ventures and sold directly to subscribers. Sending newsletters to customers and prospects is a common marketing strategy, which can have benefits and drawbacks. Public organizations emit newsletters in order to improve or maintain their reputation in the society. General attributes of newsletters include news and upcoming events of the related organization, as well as contact information.</p>
  </div>
  
  <div class="block-container">
    <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery1.png"> </div>
    
    <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery2.png"> </div>
    
    <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery3.png"> </div>
    
    <div class="article">
      <h3>OFFERS</h3>
      <p>Enjoy travel OTTY only in $200</p>
      <p class="button">Read More</p>
    </div>
    
    <div class="article">
      <h3>OFFERS</h3>
      <p>Enjoy travel OTTY only in $200</p>
      <p class="button">Read More</p>
    </div>
    
    <div class="article">
      <h3>OFFERS</h3>
      <p>Enjoy travel OTTY only in $200</p>
      <p class="button">Read More</p>
    </div>
    
  </div>
  
</div>

<div class="footer">
  <div class="left"> <span style="color:#FFFFFF">Simple Newsletter<br>
    India<br>
    Bangalore</span></div>
  <div class="right"> <span style="color:#FFFFFF">Unsubscribe | Manage your subscriptions<br>
    Copyright 2015.<br>
    All Right Reserved.</span></div>
</div>

</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#0F6DA1;
}
.main-wrapper {
 padding:20px;
 margin:auto;
 background:#0F6DA1;
 box-shadow: 5px 12px 14px 5px #333;
}
.header {
 margin: 0 auto auto;
 padding: 33px;
 background:#FFFFFF;
}
.left {
 float:left;
}
.left p {
 color: #0099ff;
 font-size: 30px;
 font-weight: bold;
 margin-top: -18px;
}
.right {
 float:right;
}
.right p {
 color: #0099ff;
 font-size: 30px;
 font-weight: bold;
 margin-top: -18px;
 font-family: tahoma;
}
.banner {
 padding:10px;
 margin:auto;
 background:#FFFFFF;
 height:310px;
 box-shadow: 5px 12px 14px 5px #333;
}
.banner img {
 margin:auto;
 width:100%;
 height:100%;
}
.banner-content {
 margin:auto;
 padding:10px;
 background:#FFFFFF;
}
.banner-content p {
 color: #333;
 font-size: 20px;
 line-height: 27px;
 text-align: justify;
}
.block-container {
 padding:10px;
 margin:auto;
 background:#FFFFFF;
 overflow:auto;
}
.block {
 float: left;
 height: 200px;
 margin: 10px;
 padding: 10px;
 width: 355px;
 background:#ddd;
}
.article {
 float: left;
 margin: 10px;
 padding: 10px;
 width: 355px;
 background:#FFFFFF;
}
.block img {
 margin:auto;
 width:100%;
 height:100%;
}
.block p {
 text-align:justify;
 color:#ccc;
}
.footer {
 padding:10px;
 /*background:#FFFFFF;*/
margin:auto;
 overflow:auto;
}
.footer p {
 text-align:center;
 color:#fff;
}
.button {
 border-style: solid;
 border-width: 0;
 cursor: pointer;
 font-family: inherit;
 font-weight: bold;
 line-height: normal;
 margin: 0 0 1.25em;
 position: relative;
 text-decoration: none;
 text-align: center;
 display: inline-block;
 padding-top: 0.75em;
 padding-right: 1.5em;
 padding-bottom: 0.8125em;
 padding-left: 1.5em;
 font-size: 1em;
 background-color: #2daebf;
 border-color: #238896;
 color: white;
 display: inline-block;
 transition: background-color 300ms ease-out;
 border-radius: 2px;
 box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
 -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .header {
 overflow:auto;
}
.block {
 width: 84%;
}
.article {
 width: 84%;
}
}

Monday, 25 May 2015

Responsive Newsletter design

Create index.html

Create style.css

No comments:

Post a Comment