CSS3 Responsive Web Design -GS WEB TECHNOLOGIES

CSS3 Responsive Web Design

Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles and tabs)

Responsive structure

Below image shows the responsive structure of web pages.
responsive


Flexible Grid demo

<html>
   <head>
   </head>
   
      <style>
         body {
            font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
         }
         h1 {
            color: #9799a7;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   <body>
   
      <h1>100% Wide Container</h1>
      
      <div class="container">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>75% Wide Container</h1>
      
      <div class="container container-75">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>50% Wide Container</h1>
      
      <div class="container container-50">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
   </body>
</html>
 
It will produce the following result −
 

 

GS WEB TECHNOLOGIES CHANDIGARH


Comments

Post a Comment

Popular posts from this blog

Mobile Website Design Services - GS Web Technologies

Image
Mobile Website Design Services Mobile Responsive Web Design Services Mobile Responsive Website Design Services and Development Company in Chandigarh ,  GS Web Technologies provides Mobile Responsive Web Design & Development Services , which in sync with latest trends and goes well with your mobile contrivances. We have an extensive experience in the mobile platform. We design our websites utilizing the cutting edge solutions and mobile responsive web design approach, providing all required resources. Our dynamic team is built of designers who can indite code and design visuals to establish a productive customer communication environment, developers who can build next generation solutions and interfaces as well as web strategists that avails in expediting lead generation. We design websites in such a way that engender an impressive brand as well as provides an environment where you can engage the utilizer. We have always looks forward custome...
Keep reading

WordPress Development Services in Chandigarh | India

Image
WordPress Development Services in Chandigarh | India GS Web Tech WordPress development Services in Chandigarh | India.   GS Web Tech   is one of the most prestigious   Word Press service   providers in Chandigarh that have been considered it as the most vital part of its development. WordPress Development Services In Chandigarh Word Press refers to the web software that is utilized for the creation of the attractive websites. Millions of people are using this software for creating magical effects over the web.  The software handles large number of marketing tools like SEO for various search engines. The “ GS Web Tech ” is one of the most prestigious WordPress development service providers that have been considered it as the most vital part of its development. We feel pride in saying that we are among the top most experts that believes in providing the first class results relating to the issues of WordPress. We always keep an eye on mai...
Keep reading

Infographic: 2021 forecast on internet users in India - GS Web Technologies

Image
 Infographic: 2021 forecast on internet users in India The number of internet users in India has been growing manifolds. Now, according to Cisco's latest VNI report for the years 2016-21, the number is expected to further jump to 829 million. This means more than double growth in the number of netizens in India. The report further talks about the devices that people use to access the internet, broadband speed, viewing habits and more.  Here are key highlights:
Keep reading