Responsive Website Design: Responsive Web Design

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Website Template</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="#">Service</a> </li>
      <li><a href="#">Blog</a> </li>
      <li><a href="#">Contacts</a> </li>
    </ul>
  </div>
  
  <div class="banner">
    
    <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png"> </div>
  
  <div class="block-container">
    
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg">
      <h2>Consulting</h2>
    </div>
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg">
      <h2>Services</h2>
    </div>
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg">
      <h2>Products</h2>
    </div>
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg">
      <h2>Portfolio</h2>
    </div>
    
    <div class="block"> <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png">
      <h2>Contracts</h2>
    </div>
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg">
      <h2>Inquery</h2>
    </div>
  </div>
  
  <div class="container">
    
    <div class="article-left-big">
      
      <h2> Welcome to Our Website</h2>
      <div class="article-img-right"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg"> </div>
      <p>Asp.net is an open source server-side Web application framework designed for Web development to produce dynamic Web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
        
        It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.</p>
      <hr>
      <div class="article-img-left">
        <h2>MVC</h2>
        <p>The ASP.NET MVC is an open source web application framework</p>
        <p>Based on ASP.NET, ASP.NET MVC allows software developers to build a web application as a composition of three roles: Model, View and Controller. The MVC model defines web applications with 3 logic layers:</p>
        <p>Model (business layer)</p>
        <p>View (display layer)</p>
        <p>Controller (input control)</p>
        <p>A model represents the state of a particular aspect of the application. A controller handles interactions and updates the model to reflect a change in state of the application, and then passes information to the view. A view accepts necessary information from the controller and renders a user interface to display that information.
          
          In April 2009, the ASP.NET MVC source code was released under the Microsoft Public License (MS-PL).
          
          ASP.NET MVC framework is a lightweight, highly testable presentation framework that is integrated with existing ASP.NET features. Some of these integrated features are master pages and membership-based authentication. The MVC framework is defined in the System.Web.Mvc assembly.
          
          The ASP.NET MVC Framework couples the models, views, and controllers using interface-based contracts, thereby allowing each component to be tested independently.</p>
      </div>
      <div class="article-img-right2">
        <h2>content management system (CMS)</h2>
        <p>A content management system (CMS)is a computer application that allows publishing, editing and modifying content, organizing, deleting as well as maintenance from a central interface</p>
        <p>Such systems of content management provide procedures to manage workflow in a collaborative environment.These procedures can be manual steps or an automated cascade. CMSs have been available since the late 1990s.</p>
        <p>CMSs are often used to run websites containing blogs, news, and shopping. Many corporate and marketing websites use CMSs. CMSs typically aim to avoid the need for hand coding, but may support it for specific elements or entire pages.</p>
        <p>The function and use of content management systems is to store and organize files, and provide version-controlled access to their data. CMS features vary widely. Simple systems showcase a handful of features, while other releases, notably enterprise systems, offer more complex and powerful functions. Most CMS include Web-based publishing, format management, revision control (version control), indexing, search, and retrieval. The CMS increments the version number when new updates are added to an already-existing file. Some content management systems also support the separation of content and presentation.</p>
      </div>
    </div>
    
    <div class="article-left-small">
      
      <h2>Microsoft SQL Server</h2>
      <p>Microsoft SQL Server is a relational database management system developed by Microsoft. As a database, it is a software product whose primary function is to store and retrieve data as requested by other software applications, be it those on the same computer or those running on another computer across a network (including the Internet). There are at least a dozen different editions of Microsoft SQL Server aimed at different audiences and for workloads ranging from small single-machine applications to large Internet-facing applications with many concurrent users. Its primary query languages are T-SQL and ANSI SQL.</p>
      <h2>SQL Server 2005</h2>
      <p>SQL Server 2005 (formerly codenamed "Yukon") released in October 2005. It included native support for managing XML data, in addition to relational data. For this purpose, it defined an xml data type that could be used either as a data type in database columns or as literals in queries. XML columns can be associated with XSD schemas; XML data being stored is verified against the schema. XML is converted to an internal binary data type before being stored in the database. Specialized indexing methods were made available for XML data. XML data is queried using XQuery; SQL Server 2005 added some extensions to the T-SQL language to allow embedding XQuery queries in T-SQL. In addition, it also defines a new extension to XQuery, called XML DML, that allows query-based modifications to XML data. SQL Server 2005 also allows a database server to be exposed over web services using Tabular Data Stream (TDS) packets encapsulated within SOAP (protocol) requests. When the data is accessed over web services, results are returned as XML.</p>
      <h2>SQL Server 2008</h2>
      <p>SQL Server 2008
        SQL Server 2008 (formerly codenamed "Katmai") was released on August 6, 2008 and aims to make data management self-tuning, self organizing, and self maintaining with the development of SQL Server Always On technologies, to provide near-zero downtime. SQL Server 2008 also includes support for structured </p>
    </div>
    
  </div>
  
</div>

</body>
</html>

Create style.css

@charset "utf-8";
body {
 background: #f7f7ef; /* Old browsers */
 background: -moz-linear-gradient(top, #f7f7ef -1%, #fcfcfc 0%, #fcfcfc 0%, #f7f7ef 0%, #efefef 0%, #fcfcfc 1%, #fcfcfc 1%, #fcfcfc 21%, #fcfcfc 22%, #2989d8 100%, #7db9e8 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(-1%, #f7f7ef), color-stop(0%, #fcfcfc), color-stop(0%, #fcfcfc), color-stop(0%, #f7f7ef), color-stop(0%, #efefef), color-stop(1%, #fcfcfc), color-stop(1%, #fcfcfc), color-stop(21%, #fcfcfc), color-stop(22%, #fcfcfc), color-stop(100%, #2989d8), color-stop(100%, #7db9e8)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #f7f7ef -1%, #fcfcfc 0%, #fcfcfc 0%, #f7f7ef 0%, #efefef 0%, #fcfcfc 1%, #fcfcfc 1%, #fcfcfc 21%, #fcfcfc 22%, #2989d8 100%, #7db9e8 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #f7f7ef -1%, #fcfcfc 0%, #fcfcfc 0%, #f7f7ef 0%, #efefef 0%, #fcfcfc 1%, #fcfcfc 1%, #fcfcfc 21%, #fcfcfc 22%, #2989d8 100%, #7db9e8 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #f7f7ef -1%, #fcfcfc 0%, #fcfcfc 0%, #f7f7ef 0%, #efefef 0%, #fcfcfc 1%, #fcfcfc 1%, #fcfcfc 21%, #fcfcfc 22%, #2989d8 100%, #7db9e8 100%); /* IE10+ */
 background: linear-gradient(to bottom, #f7f7ef -1%, #fcfcfc 0%, #fcfcfc 0%, #f7f7ef 0%, #efefef 0%, #fcfcfc 1%, #fcfcfc 1%, #fcfcfc 21%, #fcfcfc 22%, #2989d8 100%, #7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7ef', endColorstr='#7db9e8', GradientType=0 ); /* IE6-9 */
}
hr {
 border: 1px solid #26B8E7;
}
.main-wrapper {
 margin:auto;
 background: #b2e1ff; /* Old browsers */
 background: -moz-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b2e1ff), color-stop(100%, #66b6fc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%); /* IE10+ */
 background: linear-gradient(to bottom, #b2e1ff 0%, #66b6fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc', GradientType=0 ); /* IE6-9 */
 padding:15px;
}
.menu {
 border-top-left-radius: 145px;
 border-top-right-radius: 145px;
 margin: auto auto 0px;
 padding: 10px;
 background:#003333;
}
.menu ul {
 padding: 10px;
 margin:0px;
}
.menu ul li {
 display:inline;
 list-style-type:none;
}
.menu ul li a {
 text-decoration:none;
 padding: 0 108px 1px 80px;
 color:#FFFFFF;
}
.menu ul li a:hover {
 text-decoration:underline;
 color:#66cccc;
}
.banner {
 width:100%;
 height:350px;
 background: #feffff; /* Old browsers */
 background: -moz-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(16%, #feffff), color-stop(59%, #d2ebf9)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* IE10+ */
 background: linear-gradient(to bottom, #feffff 16%, #d2ebf9 59%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0 ); /* IE6-9 */
 margin:auto;
}
.banner img {
 width:100%;
 margin:auto;
}
.block-container {
 padding:10px;
 margin:auto;
 background:transparent;
 position: relative;
 overflow: auto;
}
.block {
 float:left;
 margin:10px;
 background: #87e0fd; /* Old browsers */
 background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* IE10+ */
 background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0 ); /* IE6-9 */
 box-shadow: 3px 4px 6px 0 #9d00ff;
 height:200px;
 width: 179px;
 border-top-left-radius: 84px;
 border-top-right-radius: 84px;
}
.block img {
 height: 50px;
 margin: auto;
 text-align: center;
 width: 50px;
 padding-left: 65px;
 padding-top: 50px;
}
.block h2 {
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 1px #7f02ca;
}
.container {
 padding:20px;
 margin:auto;
 background: #87e0fd; /* Old browsers */
 background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* IE10+ */
 background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0 ); /* IE6-9 */
 overflow:auto;
}
.article-left-big {
 float:left;
 width:68%;
 border-right: 1px solid #4e97c3;
 padding: 5px;
}
.article-left-big p {
 text-align:justify;
}
.article-left-big h2 {
 color: #4fa8c1;
 font-family: verdana;
 font-weight: bold;
 text-shadow: 1px 1px 2px #3d00aa;
}
.article-left-small {
 float:left;
 width:30%;
 /*background:#333333;*/
/*height:376px;*/
padding: 5px;
}
.article-left-small p {
 text-align:justify;
}
.article-left-small h2 {
 color: #4fa8c1;
 font-family: verdana;
 font-weight: bold;
 text-shadow: 1px 1px 2px #3d00aa;
}
.article-img-right {
 float:right;
 margin: 10px;
}
.article-img-right p {
 text-align:justify;
}
.article-img-left {
 float: left;
 margin: 10px;
 width: 47%;
 border-right: 1px solid #4fa8c1;
 padding: 11px;
}
.article-img-left p {
 text-align:justify;
}
.article-img-right2 {
 float:right;
 margin: 10px;
 width: 45%;
}
.article-img-right2 p {
 text-align:justify;
}

/*for responsive code starts here*/
@media screen and (min-device-width: 320px) and (max-device-width: 800px) {
 .menu ul li {
 display: block;
 list-style-type: none;
 text-align: center;
 height:auto!important;
}
.banner {
width:100%;
height:auto!important;
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%, #feffff), color-stop(59%, #d2ebf9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feffff 16%, #d2ebf9 59%); /* IE10+ */
background: linear-gradient(to bottom, #feffff 16%, #d2ebf9 59%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0 ); /* IE6-9 */
 margin:auto;
}
.banner img {
width:100%;
margin:auto;
}
.block {
float:none!important;
margin:10px;
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* IE10+ */
background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0 ); /* IE6-9 */
margin: auto auto 10px;
 height:200px;
width: 179px;
border-top-left-radius: 84px;
border-top-right-radius: 84px;
}
.article-left-big {
float:none;
width: 100%;
border-right:none!important;
/*background:#999999;*/
/*height:376px;*/
padding: 5px;
margin:auto;
}
.article-img-left {
float:none!important;
margin: auto;
width: 100%;
border:none!important;
padding:0px!important;
}
.article-left-small {
float:none!important;
width:100%;
margin:auto;
padding: 5px;
}
.article-img-right2 {
float:none;
margin: auto;
width: 100%;
}
.menu ul li a {
 color: #ffffff;
 padding: 0 115px 1px 94px;
 text-decoration: none;
}
.article-img-right {
float:right;
margin: 10px;
}
.article-img-right img {
 margin: auto;
 width: 100%;
}
}

Monday 27 April 2015

Responsive Web Design

Create index.html

Create style.css

No comments:

Post a Comment