Responsive Website Design: Responsive Jquery Website Templates

Note this is single page Responsive Template . here navigate menu will open in modal window

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="charset=utf-8" />
<title>Responsive Template</title>
<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style>
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
 height: 400px;
 margin: auto;
 width:400px;
 border-radius:50%;
}
</style>
</head>
<body>
<div id="snowflakeContainer">
  <p class="snowflake">.</p>
</div>

<div class="main-wrapper">
  
  <div class="container-blockme">
    <div class="myatcircle">
      
      <button type="button" class="reko" data-toggle="modal" data-target="#myModal">About</button>
    </div>
    
    
    
    <div class="modal rotateOut" id="myModal" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">About</h4>
          </div>
          <div class="modal-body">
            <p> Hi this is Ram</p>
            <p>I am Frontend Developer, UI/UX Designer, Web Designer and Developer</p>
            <p>I have good skills in PHP CMS Framework like Wordpress,Joomla,Prestashop and more..</p>
            <p>I have developed many website and web applications.</p>
            <p>I am also good in Photoshop,Illustrator and corel draw</p>
            <p>I have good knowledge in Html5,Css3,Php,Jquery,AngularJs</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  
  <div class="container-blockme1">
    <div class="myatcircle1">
      
      <button type="button" class="reko" data-toggle="modal" data-target="#myModal1">Edu</button>
    </div>
    
    
    
    <div class="modal fade" id="myModal1" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Educations</h4>
          </div>
          <div class="modal-body">
            <p>10th - XYZ Public School Bangalore</p>
            <p>10+2 - XYZ College Bangalore</p>
            <p>B.E - XYZ university Bangalore</p>
            <p>Cretification in Web Design and Graphics Design</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="myatcircle2">
      
      <button type="button" class="reko" data-toggle="modal" data-target="#myModal2">Experience</button>
    </div>
    
    
    
    <div class="modal fade" id="myModal2" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Experience</h4>
          </div>
          <div class="modal-body">
            <p>Total year of Exp 2+</p>
            <p>I have total year of work experience in same profile as UI/UX Designer and Developer</p>
            <p>Company Name :- XYZ</p>
            <p>Year 2013-2015</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    
    
    <div class="myatcircle3">
      
      <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="img/1.jpg" alt="mydesign">
            <div class="carousel-caption">
              <h3>Argo Company</h3>
              <p>This is Xyz company website.</p>
            </div>
          </div>
          <div class="item"> <img src="img/2.jpg" alt="mydesign">
            <div class="carousel-caption">
              <h3>Welthwe Company</h3>
              <p>This Welthwe Company Website.</p>
            </div>
          </div>
          <div class="item"> <img src="img/3.jpg" alt="mydesign">
            <div class="carousel-caption">
              <h3>Rauthal company</h3>
              <p>This Rauthal company website.</p>
            </div>
          </div>
          <div class="item"> <img src="img/3.png" alt="mydesign">
            <div class="carousel-caption">
              <h3>Sobam infotech</h3>
              <p>This Sobam infotech company Website.</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>
    
    
    <div class="myatcircle4">
      
      <button type="button" class="reko" data-toggle="modal" data-target="#myModal6">Exp4545</button>
    </div>
    
    
    
    <div class="modal fade" id="myModal6" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Experience</h4>
          </div>
          <div class="modal-body">
            <p>Total year of Exp 2+</p>
            <p>I have total year of work experience in same profile as UI/UX Designer and Developer</p>
            <p>Company Name :- XYZ</p>
            <p>Year 2013-2015</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="myatcircle5">
      
      <button type="button" class="reko" data-toggle="modal" data-target="#myModal4">Projects</button>
    </div>
    
    
    
    <div class="modal fade" id="myModal4" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Projects</h4>
          </div>
          <div class="modal-body">
            <p><a href="#">Automobile.com</a></p>
            <p><a href="#">Query.com</a></p>
            <p><a href="#">chaistall.com</a></p>
            <p><a href="#">restuat.com</a></p>
            <p><a href="#">thoughtwe.com</a></p>
            <p><a href="#">myliferef.com</a></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-blockme3">
  <div class="myatcircle6">
    
    <button type="button" class="reko" data-toggle="modal" data-target="#myModal3">Contact Us</button>
  </div>
  
  
  
  <div class="modal fade" id="myModal3" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Contact Us</h4>
        </div>
        <div class="modal-body">
          <p>
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label class="control-label col-sm-2" for="email">Email:</label>
              <div class="col-sm-10">
                <input type="email" class="form-control" id="email" placeholder="Enter email">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2" for="email">Name:</label>
              <div class="col-sm-10">
                <input type="Name" class="form-control" id="Name" placeholder="Enter Name">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2" for="email">Phone No:</label>
              <div class="col-sm-10">
                <input type="Phone" class="form-control" id="Phone No" placeholder="Enter Phone No">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Submit</button>
              </div>
            </div>
          </form>
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

</div>


<script src="animation.js"></script>
<script src="animation-min.js"></script>
</body>
</html>

Create style.css

@charset "utf-8";
body {
 background-color: #1D1D1D!important;
 padding: 30px;
 margin: 0px;
}
#snowflakeContainer {
 position: absolute;
 left: 0px;
 top: 0px;
}
.snowflake {
 padding-left: 15px;
 font-family: Cambria, Georgia, serif;
 font-size: 14px;
 line-height: 24px;
 position: fixed;
 color: #FFFFFF;
 user-select: none;
 z-index: 1000;
}
.snowflake:hover {
 cursor: default;
}
/*---------------------------------------------Model container css starts here--------------------------*/
.modal-content {
 background-clip: padding-box;
 background-color: #333!important;
 border: 1px solid rgba(0, 0, 0, 0.2);
 border-radius: 6px;
 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
 outline: 0 none;
 position: relative;
}
.modal-header {
 border-bottom: 1px solid #e5e5e5;
 min-height: 16.43px;
 padding: 15px;
 color: #ddd;
}
.form-horizontal .control-label {
 margin-bottom: 0;
 padding-top: 7px;
 text-align: right;
 color: ddd;
}
.modal-body {
 padding: 15px;
 position: relative;
 color: ddd;
}
.main-wrapper {
 /*background:#ccc;*/
margin:auto;
 padding:20px;
}
.container-blockme {
 /*background: #ddd;*/
    /*margin-bottom: -18px;*/
    padding: 20px;
}
.container-blockme1 {
 margin: auto auto 10px;
 padding:20px;
 /*background:#ccc;*/
overflow: auto;
}
.container-blockme2 {
 margin-top: -121px;
 overflow: auto;
 padding: 20px;
 background:#000000;
}
.container-blockme3 {
 /*background: #666666;*/
    /*margin-top: -49px;*/
    padding: 20px;
}
.container-blockme4 {
 margin: auto auto 10px;
 padding:20px;
 background:#666666;
}
.container-blockme5 {
 margin: auto auto 10px;
 padding:20px;
 background:#666666;
}
.container-blockme6 {
 margin: auto auto 10px;
 padding:20px;
 background:#666666;
}
.myatcircle {
 background: #333333;
 border-radius: 50%;
 height: 120px;
 margin: auto;
 width: 120px;
 box-shadow: 1px 2px 12px 13px #cff;
}
.myatcircle:hover {
 box-shadow: 1px 1px 1px 1px #000;
 background: #0066FF;
}
.myatcircle1 {
 background: #333;
 border-radius: 50%;
 height: 120px;
 box-shadow: 1px 2px 12px 13px #cff;
 width: 120px;
 float: left;
}
.myatcircle1:hover {
 box-shadow: 1px 1px 1px 1px #000;
 background: #0066FF;
}
.myatcircle2 {
 background: #333;
 border-radius: 50%;
 height: 120px;
 box-shadow: 1px 2px 12px 13px #cff;
 width: 120px;
 float: right;
}
.myatcircle2:hover {
 box-shadow: 1px 1px 1px 1px #000;
 background: #0066FF;
}
.myatcircle3 {
 background: #333;
 border-radius: 50%;
 height: 400px;
 margin: auto;
 width: 400px;
 box-shadow: 1px 2px 12px 13px #fff;
}
.myatcircle3:hover {
 box-shadow: 1px 1px 1px 1px #000;
 background: #fff;
}
.myatcircle4 {
 background: #333;
 border-radius: 50%;
 height: 120px;
 /*margin: 10px 10px 10px 357px;*/
    width: 120px;
 float:left;
 box-shadow: 1px 2px 12px 13px #cff;
}
.myatcircle4:hover {
 box-shadow: 1px 1px 1px 1px #000;
 background: #0066FF;
}
.myatcircle5 {
 background: #333;
 border-radius: 50%;
 height: 120px;
 /*margin: 10px 356px 10px 10px;*/
    width: 120px;
 float:right;
 box-shadow: 1px 2px 12px 13px #cff;
}
.myatcircle5:hover {
 box-shadow: 1px 1px 1px 1px #000;
 background: #0066FF;
}
.myatcircle6 {
 background: #333;
 border-radius: 50%;
 height: 120px;
 margin: auto;
 width: 120px;
 box-shadow: 2px 1px 7px 17px #b2e1ff;
}
.myatcircle6:hover {
 box-shadow: 1px 1px 1px 1px #000;
 background: #0066FF;
}
/*------------------------------------this code for button-----------------------------------------*/
.reko {
 background: transparent!important;
 border: medium none !important;
 border-radius: 50%;
 color: #fff;
 height: 119px;
 margin: auto;
 padding: 10px;
 text-align: center;
 width: 124px;
}
.carousel-control.left {
 background-image:none!important;
 background-repeat: repeat-x;
}
.carousel-control.right {
 background-image:none!important;
 background-repeat: repeat-x;
 left: auto;
 right: 0;
}

/*responsive layout code here*/

@media screen and (min-device-width: 320px) and (max-device-width: 800px) {
 .myatcircle1 {
 background: #333;
 border-radius: 50%;
 float: none;
 margin: auto;
 margin-top: 34px;
 margin-bottom: 59px;
}
.container-blockme1 {
 margin: auto auto 10px;
 overflow: auto;
 padding: 0px;
}
 .myatcircle4 {
 border-radius: 50%;
 float: none;
 margin: auto;
 margin-top: 57px;
}
 .myatcircle2 {
border-radius: 50%;
 float: none;
 margin: auto;
 margin-top: 20px;
 margin-bottom: 65px;
}
.myatcircle5 {
 border-radius: 50%;
 float: none;
 margin: auto;
 margin-top: 57px;
 margin-bottom: 26px;
}
 .myatcircle3 {
 border-radius: 50%;
 height: 200px;
 margin: auto;
 width: 200px;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
 height: 200px!important;
 margin: auto;
 width:200px!important;
 border-radius:50%;
}
.main-wrapper {
 margin: auto;
 padding: 0px;
}
}

Create animation.js

var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

var transforms = ["transform", 
                  "msTransform", 
                  "webkitTransform", 
                  "mozTransform", 
                  "oTransform"];
                   
var transformProperty = getSupportedPropertyName(transforms);

// Array to store our Snowflake objects
var snowflakes = [];

// Global variables to store our browser's window size
var browserWidth;
var browserHeight;

// Specify the number of snowflakes you want visible
var numberOfSnowflakes = 50;

// Flag to reset the position of the snowflakes
var resetPosition = false;

//
// It all starts here...
//
function setup() {
 window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
 window.addEventListener("resize", setResetFlag, false);
}
setup();

//
// Vendor prefix management
//
function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}

//
// Constructor for our Snowflake object
//
function Snowflake(element, speed, xPos, yPos) {

// set initial snowflake properties
    this.element = element;
    this.speed = speed;
    this.xPos = xPos;
    this.yPos = yPos;
 
 // declare variables used for snowflake's motion
    this.counter = 0;
    this.sign = Math.random() < 0.5 ? 1 : -1;
 
 // setting an initial opacity and size for our snowflake
    this.element.style.opacity = .1 + Math.random();
    this.element.style.fontSize = 12 + Math.random() * 50 + "px";
}

//
// The function responsible for actually moving our snowflake
//
Snowflake.prototype.update = function () {

// using some trigonometry to determine our x and y position
 this.counter += this.speed / 5000;
 this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
 this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
 
 // setting our snowflake's position
 setTranslate3DTransform(this.element, Math.round(this.xPos), Math.round(this.yPos));
    
    // if snowflake goes below the browser window, move it back to the top
 if (this.yPos > browserHeight) {
  this.yPos = -50;
 }
}

//
// A performant way to set your snowflake's position
//
function setTranslate3DTransform(element, xPosition, yPosition) {
 var val = "translate3d(" + xPosition + "px, " + yPosition + "px" + ", 0)";
    element.style[transformProperty] = val;
}

//
// The function responsible for creating the snowflake
//
function generateSnowflakes() {
 
 // get our snowflake element from the DOM and store it
 var originalSnowflake = document.querySelector(".snowflake");
 
 // access our snowflake element's parent container
 var snowflakeContainer = originalSnowflake.parentNode;
    
    // get our browser's size
 browserWidth = document.documentElement.clientWidth;
 browserHeight = document.documentElement.clientHeight;
         
    // create each individual snowflake
 for (var i = 0; i < numberOfSnowflakes; i++) {
 
  // clone our original snowflake and add it to snowflakeContainer
  var snowflakeClone = originalSnowflake.cloneNode(true);
  snowflakeContainer.appendChild(snowflakeClone);
 
  // set our snowflake's initial position and related properties
     var initialXPos = getPosition(50, browserWidth);
     var initialYPos = getPosition(50, browserHeight);
     var speed = 5+Math.random()*40;
     
     // create our Snowflake object
  var snowflakeObject = new Snowflake(snowflakeClone, 
           speed, 
           initialXPos, 
           initialYPos);
  snowflakes.push(snowflakeObject);
 }
    
    // remove the original snowflake because we no longer need it visible
 snowflakeContainer.removeChild(originalSnowflake);
 
 // call the moveSnowflakes function every 30 milliseconds
    moveSnowflakes();
}

//
// Responsible for moving each snowflake by calling its update function
//
function moveSnowflakes() {
 for (var i = 0; i < snowflakes.length; i++) {
     var snowflake = snowflakes[i];
     snowflake.update();
 }
    
 // Reset the position of all the snowflakes to a new value
 if (resetPosition) {
  browserWidth = document.documentElement.clientWidth;
  browserHeight = document.documentElement.clientHeight; 
  
  for (var i = 0; i < snowflakes.length; i++) {
   var snowflake = snowflakes[i];
   
   snowflake.xPos = getPosition(50, browserWidth);
   snowflake.yPos = getPosition(50, browserHeight);
  }
  
  resetPosition = false;
 }
    
    requestAnimationFrame(moveSnowflakes);
}

//
// This function returns a number between (maximum - offset) and (maximum + offset)
//
function getPosition(offset, size) {
 return Math.round(-1*offset + Math.random() * (size+2*offset));
}

//
// Trigger a reset of all the snowflakes' positions
//
function setResetFlag(e) {
 resetPosition = true;
}

Create animation-min.js

Thursday 9 July 2015

Responsive Jquery Website Templates

Note this is single page Responsive Template . here navigate menu will open in modal window

Create index.html

Create style.css

Create animation.js

Create animation-min.js

No comments:

Post a Comment