Responsive Website Design: Responsive web design

Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Web design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
body{
background:#CCCCCC;
}
.itsmyfooter{
width:100%;
height:30px;
margin:auto;
background:#0099FF;
margin-bottom:10px;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
 width: 100%;
 margin: auto;
}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    
    max-width: 100%;
}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    
    max-width: 100%;
}
.carousel-inner{
height:300px;
}
.mythumbblock_container {
 margin:auto;
 background:#333333;
 padding:10px;
 /*overflow:auto;*/
 width:100%;
}
.myblockimgplace{
float:left;
margin:5px;
}

@media screen and (max-width: 600px) {
.myblockimgplace{
width:100%;
margin:auto;

}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    width: 100%;
}
}
</style>

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#333333;
            border: 1px solid #333333;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>

<script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
   
   .ui-widget-content {
    background: #eeeeee;
    border: 1px solid #dddddd;
    color: #333333;
}
   
   
   
   
      </style>

</head>
<body>
<div class="gallery-loader">
  <div class="loader"></div>
</div>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header"> <a class="navbar-brand" href="#">MY PAGE</a> </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
       
        <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Sign Up</button>
      </ul>
    </div>
  </div>
</nav>

<div class="container">


<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
        <h4 class="modal-title" id="myModalLabel">Registration Form</h4>
      </div>
      <div class="modal-body">
        <p><section class="panel">
                            <header class="panel-heading no-b">
                                
                            </header>
                            <div class="panel-body">
                                <form data-parsley-validate="" class="parsley-form" role="form" novalidate="">

<div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>First name</label>
                                                <div>
                                                    <input type="text" placeholder="First Name" data-parsley-trigger="change" data-parsley-required="true" name="firstname" class="form-control" data-parsley-id="1783"><ul class="parsley-errors-list" id="parsley-id-1783"></ul>
                                                </div>
                                            </div>

<div class="form-group">
                                                <label>Country</label>
                                                <div>
                                                    <input type="text" placeholder="Country" data-parsley-trigger="change" data-parsley-required="true" name="country" class="form-control parsley-success" data-parsley-id="7657"><ul class="parsley-errors-list" id="parsley-id-7657"></ul>
                                                </div>
                                            </div>

<div class="form-group">
                                                <label>State/Province</label>
                                                <div>
                                                    <input type="text" placeholder="State/Province" data-parsley-trigger="change" data-parsley-required="true" name="state" class="form-control parsley-success" data-parsley-id="2544"><ul class="parsley-errors-list" id="parsley-id-2544"></ul>
                                                </div>
                                            </div>

<div class="form-group">
                                                <label>City</label>
                                                <div>
                                                    <input type="text" placeholder="City" data-parsley-trigger="change" data-parsley-required="true" name="city" class="form-control" data-parsley-id="5737"><ul class="parsley-errors-list" id="parsley-id-5737"></ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Zipcode</label>
                                                <div>
                                                    <input type="text" placeholder="P6B6L4" data-parsley-trigger="change" data-parsley-required="true" data-parsley-type="alphanum" name="zipcode" class="form-control" data-parsley-id="3974"><ul class="parsley-errors-list" id="parsley-id-3974"></ul>
                                                </div>
                                            </div>

<div class="form-group">
                                                <label>Home phone</label>
                                                <div>
                                                    <input type="text" placeholder="18005551234" data-parsley-trigger="change" data-parsley-required="true" data-rangelength="[11,20]" data-parsley-type="digits" name="phone" class="form-control" data-parsley-id="3918"><ul class="parsley-errors-list" id="parsley-id-3918"></ul>
                                                </div>
                                            </div>

<div class="form-group">
                                                <label>Mobile phone</label>
                                                <div>
                                                    <input type="text" placeholder="18005551234" data-parsley-trigger="change" data-parsley-required="true" data-rangelength="[11,20]" data-parsley-type="digits" name="mobilephone" class="form-control" data-parsley-id="2873"><ul class="parsley-errors-list" id="parsley-id-2873"></ul>
                                                </div>
                                            </div>

<div class="form-group">
                                                <label>Email</label>
                                                <div>
                                                    <input type="text" placeholder="hello@nyasha.me" data-parsley-trigger="change" data-parsley-required="true" data-parsley-type="email" name="email" class="form-control" data-parsley-id="5664"><ul class="parsley-errors-list" id="parsley-id-5664"></ul>
                                                </div>
                                            </div>

<div class="form-group">
                                                <label>Website</label>
                                                <div>
                                                    <input type="text" placeholder="http://nyasha.me" data-parsley-trigger="change" data-parsley-required="true" data-parsley-type="url" name="website" class="form-control" data-parsley-id="6883"><ul class="parsley-errors-list" id="parsley-id-6883"></ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group text-center">
                                                <label></label>
                                                <div>
                                                    <button class="btn btn-primary btn-block btn-lg btn-parsley">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </section></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<br>
<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://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" alt="Chania" width="460" height="345">
      <div class="carousel-caption">
        <h3>Demo</h3>
        <p>Text Comes here</p>
      </div>
    </div>
    <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="Chania" width="460" height="345">
      <div class="carousel-caption">
        <h3>Demo</h3>
        <p>Text comes here</p>
      </div>
    </div>
    <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="Flower" width="460" height="345">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
    <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="Flower" width="460" height="345">
      <div class="carousel-caption">
        <h3>demo</h3>
        <p>Text comes here.</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 class="mythumbblock_container">

<div class="row feed" style="position: relative;">
    
    <div class="myblockimgplace">
      <section class="panel">
        <div class="thumb">
         <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" alt="Responsive image" class="img-responsive"> </div>
        <div class="panel-body">
          <div class="switcher-content">
            <p>this is message container</p>
         <a class="show small" href="#">See More</a>
             </div>
         </div>
        </section>
       </div>
    
    <div class="myblockimgplace">
      <section class="panel">
        <div class="thumb">
         <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" alt="Responsive image" class="img-responsive"> </div>
        <div class="panel-body">
          <div class="switcher-content">
            <p>this is message container</p>
         <a class="show small" href="#">See More</a>
             </div>
         </div>
        </section>
       </div>
    
    
    <div class="myblockimgplace">
      <section class="panel">
        <div class="thumb">
         <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" alt="Responsive image" class="img-responsive"> </div>
        <div class="panel-body">
          <div class="switcher-content">
            <p>this is message container</p>
         <a class="show small" href="#">See More</a>
             </div>
         </div>
        </section>
       </div>
    
</div>

<div id="tabs-9">
         <ul>
            <li><a href="#tabs-10">Product1</a></li>
            <li><a href="#tabs-11">Product2</a></li>
            <li><a href="#tabs-12">Product3</a></li>
            <li><a href="#tabs-13">Product4</a></li>
            <li><a href="#tabs-14">Product5</a></li>
            <li><a href="#tabs-15">Product6</a></li>
            <li><a href="#tabs-16">Product7</a></li>
         </ul>
         <div id="tabs-10">
            <p>Here are Product1 Description</p>
         </div>
         <div id="tabs-11">
            <p>Here are Product2 Description</p>
         </div>
         <div id="tabs-12">
            <p>Here are Product3 Description</p>
         </div>
         <div id="tabs-13">
            <p>Here are Product4 Description</p>
         </div>
         <div id="tabs-14">
            <p>Here are Product5 Description</p>
         </div>
         <div id="tabs-15">
            <p>Here are Product6 Description</p>
         </div>
         <div id="tabs-16">
            <p>Here are Product7 Description</p>
         </div>
      </div>

<h1 style="color:#00CCFF">Our Projects</h1>

<div class="row feed" style="position: relative;">
    
    <div class="myblockimgplace">
      <section class="panel">
        <div class="thumb">
         <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" alt="Responsive image" class="img-responsive"> </div>
        <div class="panel-body">
          <div class="switcher-content">
            <p>this is message container</p>
         <a class="show small" href="#">See More</a>
             </div>
         </div>
        </section>
       </div>
    
    <div class="myblockimgplace">
      <section class="panel">
        <div class="thumb">
         <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" alt="Responsive image" class="img-responsive"> </div>
        <div class="panel-body">
          <div class="switcher-content">
            <p>this is message container</p>
         <a class="show small" href="#">See More</a>
             </div>
         </div>
        </section>
       </div>
    
  
    
</div>

<div style="height:250px">
            <div id="accordion-4">
               <h3>Information1</h3>
               <div>
                  <p>Company Information1</p>
                   
               </div>
               <h3>Information2</h3>
               <div>
                   <p>Company Information2</p>
               </div>
               <h3>Information3</h3>
               <div>
               <p>Company Information3</p>
               <div>
                  
               </div>
            </div>

</div>
</div>

</div>

Thursday 16 April 2015

Responsive web design

Create index.html

No comments:

Post a Comment