Responsive Website Design: Responsive Website Template Design

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.navbar-default {
 background-image: linear-gradient(to bottom, #4699ef 0px, #4699ef 100%);
 background-repeat: repeat-x;
 border-radius: 0px;
 border-color:none;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar-default .navbar-nav > li > a {
 color: #fff;
}
.navbar {
 border:none;
 margin-bottom: 20px;
 min-height: 50px;
 position: relative;
}
.equal, .equal > div[class*='col-'] {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 1 auto;
}
.carousel-inner > .item > img,  .carousel-inner > .item > a > img {
 width: 100%;
 margin: auto;
 height:254px;
}
</style>
</head>
<body>
<div class="main-wrapper">
  <div class="header">
    <div class="logo">
      <p style="color:#66CC00;font-family:Algerian;font-size: 26px;text-shadow: 1px 1px 1px #fff;">CRM</p>
    </div>
    
  </div>
  
  <div class="menu">
    <div class="bs-example">
      <nav id="myNavbar" class="navbar navbar-default" role="navigation">
        
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a class="navbar-brand" href="#">© CRM</a> </div>
          
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Profile</a></li>
              <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Inbox</a></li>
                  <li><a href="#">Drafts</a></li>
                  <li><a href="#">Sent Items</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Trash</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Settings</a></li>
                </ul>
              </li>
            </ul>
          </div>
          
        </div>
      </nav>
    </div>
  </div>
  
  <div class="banner"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div>
  
  <div class="main-container">
    <div class="left-side">
      <div class="left-sideimag">
        
        <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>
            <li data-target="#myCarousel" data-slide-to="3"></li>
          </ol>
          
          <div class="carousel-inner" role="listbox">
            <div class="item active"> <img src="http://curdweb.com/navin/click.com/images/gallery1.png"> </div>
            <div class="item"> <img src="http://curdweb.com/navin/click.com/images/gallery2.png"> </div>
            <div class="item"> <img src="http://curdweb.com/navin/click.com/images/gallery3.png"> </div>
            <div class="item"> <img src="http://curdweb.com/navin/click.com/images/gallery4.png"> </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>
      <h2>Customer relationship management</h2>
      <p>Relationship management is a customer-oriented feature with service response based on customer input, one-to-one solutions to customers’ requirements, direct online communications with customer and customer service centers that help customers solve their issues.
        Sales force automation. This function can implement sales promotion analysis, automate tracking of a client’s account history for repeated sales or future sales, and also сoordinate sales, marketing, call centers, and retail outlets in order to realize the salesforce automation.
        Use of technology. This feature is about following the technology trends and skills of value delivering using technology to make “up-to-the-second” customer data available. It applies data warehouse technology in order to aggregate transaction information, to merge the information with CRM products, and to provide KPI (key performance indicators).
        Opportunity management. This feature helps the company to manage unpredictable growth and demand and implement a good forecasting model to integrate sales history with sales projections.
        CRM in developing and maintaining client relationships.
        Increasingly CRM is expanding outside of the core sales and marketing areas and systems are available that incorporate support and finance data also into the CRM view that a user gets, enabling a wider holistic view of a customer from one screen for a user.
        Customer relationship management systems track and measure marketing campaigns over multiple networks. These systems can track customer analysis by customer clicks and sales.</p>
    </div>
    
    <div class="left-side">
      <div class="left-sideimag"> <img src="http://curdweb.com/navin/click.com/images/gallery2.png"></div>
      <h2>Impact of social networking</h2>
      <p>A huge number of people use the Internet every day, various target different browsers website (social, cultural, political and other benefits), because there is a lot of information available that is easy to access quickly as needed. The majority of users through a variety of social networking sites, such as Facebook, LinkedIn and many other sites scrolling. Since these sites to provide users with a variety of services, including interactive with friends or business community to exchange information and interests. Research Balaram presented evidence, a significant increase in the use of social networking sites, especially among young people. This causes companies to use effective means of attention these sites to sell their products, services and brands. Thus increasing demand for its products.
        Social Networks: It is an online service or online sites allow the establishment of an online community or group of people to interact and share common interests and activists. Such as Facebook, Twitter or chat rooms.
        Availability of Internet services in this era is a revolution in the world of communications, where it allows users to send and retrieve information quickly with the central availability. In addition, by using a network of Internet data / network required to retrieve or send between folds in a simple manner can navigate. In addition, through the use of social networking sites, users can communicate and get information about other users, and even information about the company. This information describes individuals or companies. Promote the exchange and sharing of benefits.Promote the exchange and sharing of benefits. </p>
    </div>
    
  </div>
  
  <div class="footer">
    <div class="footerleft">© All Right Reserve</div>
    <div class="footerright">
      <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>

</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#E7E7E7;
}
.main-wrapper {
 padding:20px;
 background:#ECECEC;
}
.header {
 padding:20px;
 background-image: linear-gradient(to bottom, #4699ef 0px, #4699ef 100%);
 background-repeat: repeat-x;
 margin:auto;
}
.logo {
 float:left;
 margin: -10px;
}
.logo p {
 color:#000000;
}
.menu {
 background-image: linear-gradient(to bottom, #4699ef 0px, #4699ef 100%);
 margin: -19px auto auto;
 padding: 1px;
}
.banner {
 padding:10px;
 background:#4699EF;
 margin:auto;
 height:300px;
 margin-bottom:1px;
}
.banner img {
 width:100%;
 height:100%;
 margin:auto;
}
.main-container {
 padding:10px;
 margin:auto;
 background: #7abcff; /* Old browsers */
 background: -moz-linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* IE10+ */
 background: linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 overflow:auto;
}
.left-side {
 margin: 6px;
 padding: 10px;
 width: 49%;
 float:left;
 background: #87e0fd; /* Old browsers */
 background: -moz-linear-gradient(45deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(45deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(45deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(45deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* IE10+ */
 background: linear-gradient(45deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.left-sideimag {
 width:100%;
 height:274px;
 margin:auto;
 padding:10px;
 border:2px solid #fff;
 border-radius: 10px;
}
.left-sideimag img {
 margin:auto;
 width:100%;
 height:100%;
}
.left-side h2 {
 font-family:Algerian;
 text-align:center;
 text-decoration:underline;
 text-shadow: 1px 1px 1px #ccc;
 color:#003333;
}
.left-side p {
 color:#000000;
 text-align:justify;
 text-shadow: 1px 1px 1px #ccc;
}
.footer {
 margin:auto;
 background:#4699EF;
 padding: 42px;
 overflow: auto;
}
.footerleft {
 float:left;
}
.footerright {
 float:right;
}
.footerright ul {
 padding:0px;
 margin:0px;
}
.footerright ul li {
 display:inline;
 list-style-type:none;
}
.footerright ul li a {
 text-decoration:none;
}
/*--------------------------------------main-menu styles here--------------------------------------------*/
.navbar-default {
 background-color: #0099FF;
 border-color: #33FFFF;
}
.navbar-default {
 background-image:none;
 background-repeat: repeat-x;
 border-radius: 4px;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 5px rgba(0, 0, 0, 0.075);
 color: #fff;
}
.navbar-default .navbar-nav > li > a {
 color: #fff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
 background-color: #333;
 color: #fff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a {
 background-image:none;
 background-repeat: repeat-x;
 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.075) inset;
}
.dropdown-menu {
 background-clip: padding-box;
 background-color: #333;
 border: 1px solid rgba(0, 0, 0, 0.15);
 border-radius: 4px;
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
 display: none;
 float: left;
 font-size: 14px;
 left: 0;
 list-style: outside none none;
 margin: 2px 0 0;
 min-width: 160px;
 padding: 5px 0;
 position: absolute;
 text-align: left;
 top: 100%;
 z-index: 1000;
}
.dropdown-menu > li > a {
 clear: both;
 color: #fff;
 display: block;
 font-weight: 400;
 line-height: 1.42857;
 padding: 3px 20px;
 white-space: nowrap;
}
.navbar-default .navbar-brand {
 color: #fff;
}
.bs-example {
 margin: 20px;
}

/*----------------------------------------------Resposive style code here---------------------------------------------*/

@media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .left-side {
 width: 99%;
}
}

Thursday 21 May 2015

Responsive Website Template Design

Create index.html

Create style.css

No comments:

Post a Comment