Showing posts with label Responsive. Show all posts
Metrocity V1.0

Metrocity is the template designed to be a perfect website for you or your brand.The template comes with a perfect metro styled menu, the web itself is completely responsive i.e it looks perfect on your desktop PC as well as your Phone and various other devices, in order to provide a good web experience the template has been coded to mould itself in accordance with the device used. It has been tailored to provide the visitor with a best web experience. Metrocity has been designed in such a way that it can be easily customized in order to fit your needs and requirements.


  • Free
  • $0
  • Unresponsive Design
  • No Support
  • Un-removable Credits
  • Download Free
  • Premium
  • $25
  • Responsive Design
  • Lifetime Support
  • Easily Removable Credits
  • Buy Premium
Menu with block animation and responsiveness


Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blocks Menu By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
 
<body>
    <div id="container">
    <div id="button" onclick="openMenu()"><h3>Menu</h3><div id="menu1"></div><div id="menu2"></div><div id="menu3"></div></div>
    <div id="block1"></div>
    <div id="block2"></div>
    <div id="block3"></div>
    <div id="block4"></div>
    <div id="block5"></div>
    <div id="block6"></div>
    <div id="block7"></div>
    <div id="block8"></div>
    <div id="block9"></div>
    <div id="block10"></div>
    <div id="block11"></div>
    <div id="block12"></div>
    <div id="menu">
        <a href="#"><h1>Home</h1></a>
        <a href="#"><h1>About</h1></a>
        <a href="#" id="AlphaMoreThenEight"><h1>Portfolio</h1></a>
        <a href="#" id="AlphaMoreThenEight"><h1>Contact Us</h1></a>  
    </div>
    <div id="buttonOverMenu" onclick="closeMenu()"><h3>Menu</h3>
        <div id="menu4"></div>
        <div id="menu5"></div>
        <div id="menu6"></div>
    </div>
     
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube</a></div>
</div>  
 
</body>
    <style>
     
        #container{
            position: absolute;
            top:0%;
            left:0%;
            height: 100%;
            width: 100%;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Looking_Up_at_Empire_State_Building.JPG);
            background-size: 100% 100%;
        }
        #button{
            position: absolute;
            top:4%;
            left:4%;
            height:40px;
            width:130px;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
            font-size: 18px;
            font-family: arial,sans-serif;
            text-align: right;
            line-height: 0;
            cursor: pointer;
            cursor: hand;
        }
        #buttonOverMenu{
            position: absolute;
            top:4%;
            left:4%;
            height:40px;
            width:130px;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
            font-size: 18px;
            font-family: arial,sans-serif;
            text-align: right;
            color: white;
            line-height: 0;
            cursor: pointer;
            cursor: hand;
         
        }
     
        #menu1{
            position: absolute;
            top:0%;
            left:0%;
            height:10%;
            width:30%;
            background-color: black;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
     
        #menu2{
            position: absolute;
            top:45%;
            left:0%;
            height:10%;
            width:30%;
            background-color: black;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
        }
     
        #menu3{
            position: absolute;
            bottom:0%;
            left:0%;
            height:10%;
            width:30%;
            background-color: black;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
        }
     
        #button:hover #menu1{
            height:80%;
            top:10%;
            left:12%;
            width:3%;
         
        }
     
        #button:hover #menu2{
            height:80%;
            top:10%;
            left:12%;
            width:3%;
         
        }
        #button:hover #menu3{
            height:80%;
            top:10%;
            left:12%;
            width:3%;
         
        }
     
        #menu4{
            position: absolute;
            top:10%;
            left:12%;
            height:80%;
            width:3%;
            background-color: white;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
     
        #copyright{
            position:absolute;
            bottom:2px;
            height:20px;
            left:0px;
            width:100%;
            text-align:center;
        }

        #copyright a{
            text-decoration:none;
            color:white;
            opacity: 0.7;
            background-image: none;
            font-size: 19px;

        }
     
        #menu5{
            position: absolute;
            top:10%;
            left:12%;
            height:80%;
            width:3%;
            background-color: white;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
        #menu6{
            position: absolute;
            top:10%;
            left:12%;
            height:80%;
            width:3%;
            background-color: white;
            -webkit-transition: all 0.3s ease;
            -moz-transition : all 0.3s ease 0s;
        }
     
        #buttonOverMenu:hover #menu4{
            top:0%;
            left:0%;
            height:10%;
            width:30%;
        }
     
        #buttonOverMenu:hover #menu5{
            top:45%;
            left:0%;
            height:10%;
            width:30%;
        }
     
        #buttonOverMenu:hover #menu6{
            top:90%;
            left:0%;
            height:10%;
            width:30%;
        }
     

         
         
     
        #block1{
            position: absolute;
            top:0%;
            left:0%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.3s ease;
      -moz-transition : all 0.3s ease 0s;
        }
     
        #block2{
            position: absolute;
            top:0%;
            left:25%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.6s ease;
      -moz-transition : all 0.6s ease 0s;
        }
     
        #block3{
            position: absolute;
            top:0%;
            left:50%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.9s ease;
      -moz-transition : all 0.9s ease 0s;
        }

        #block4{
            position: absolute;
            top:0%;
            left:75%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.2s ease;
      -moz-transition : all 1.2s ease 0s;
        }
     
        #block5{
            position: absolute;
            top:33%;
            left:0%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.6s ease;
      -moz-transition : all 0.6s ease 0s;
        }
     
        #block6{
            position: absolute;
            top:33%;
            left:25%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.9s ease;
      -moz-transition : all 0.9s ease 0s;
        }
     
        #block7{
            position: absolute;
            top:33%;
            left:50%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.2s ease;
      -moz-transition : all 1.2s ease 0s;
        }

        #block8{
            position: absolute;
            top:33%;
            left:75%;
            height:33%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.5s ease;
      -moz-transition : all 1.5s ease 0s;
        }
     
        #block9{
            position: absolute;
            top:66%;
            left:0%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.9s ease;
      -moz-transition : all 0.9s ease 0s;
        }
     
        #block10{
            position: absolute;
            top:66%;
            left:25%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.2s ease;
      -moz-transition : all 1.2s ease 0s;
        }
     
        #block11{
            position: absolute;
            top:66%;
            left:50%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.5s ease;
      -moz-transition : all 1.5s ease 0s;
        }

        #block12{
            position: absolute;
            top:66%;
            left:75%;
            height:34%;
            width:25%;
            background-color: black;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 1.8s ease;
      -moz-transition : all 1.8s ease 0s;
        }
     
        #menu{
            position: absolute;
            top:15%;
            height:55%;
            left:10%;
            width:80%;
            font-family: arial,sans-serif;
            font-size: 25px;
            text-align: center;
            color:white;
            opacity: 0;
            visibility: hidden;
            text-transform: uppercase;
         
        }
     
        a{
            color: white;
            text-decoration: none;
        }
     
        a:hover{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSN2izdNQITeEPWYPh6sO0Ive96excSud9N4COMaSckM8ppS1CR4LyRLci_s-jDTFkaJ4R4D5GwAUukmiZFPFxDdFgYqOUQ4Tj3DnpotLT-c7yWjMYHaWtPoYUAnxkDS4hr1g9Me9ECt0/s1600/brush+stroke.png);
            background-size: 32% 140%;
            background-position: center;
            background-repeat: no-repeat;
            display: block;
        }
     
        #AlphaMoreThenEight:hover{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSN2izdNQITeEPWYPh6sO0Ive96excSud9N4COMaSckM8ppS1CR4LyRLci_s-jDTFkaJ4R4D5GwAUukmiZFPFxDdFgYqOUQ4Tj3DnpotLT-c7yWjMYHaWtPoYUAnxkDS4hr1g9Me9ECt0/s1600/brush+stroke.png);
            background-size: 46% 180%;
            background-position: center;
            background-repeat: no-repeat;
            display: block;
        }
     
     
         
    @media only screen and (max-width:858px)
        {
            #menu{
                font-size: 20px;
            }
        }
     
    @media only screen and (max-width:762px)
        {
            #menu{
                font-size: 17px;
            }
        }
    @media only screen and (max-width:599px)
        {
            #menu{
                font-size: 13px;
            }
        }
     
    @media only screen and (max-width:463px)
        {
            #menu{
                width:95%;
                left:2.5%;
            }
        }
     
    @media only screen and (max-width:402px)
        {
            a:hover{
                background-size: 40% 140%;
            }
            #AlphaMoreThenEight:hover{
                background-size: 55% 180%;
            }
        }
 
 
    </style>
 
    <script>
    function openMenu(){
       var b1=document.getElementById("block1");
       var b2=document.getElementById("block2");
       var b3=document.getElementById("block3");
       var b4=document.getElementById("block4");
       var b5=document.getElementById("block5");
       var b6=document.getElementById("block6");
       var b7=document.getElementById("block7");
       var b8=document.getElementById("block8");
       var b9=document.getElementById("block9");
       var b10=document.getElementById("block10");
       var b11=document.getElementById("block11");
       var b12=document.getElementById("block12");
       var menu=document.getElementById("menu");
       var button=document.getElementById("buttonOverMenu");
     
            menu.style.visibility="visible";
            menu.style.opacity="1";
     
        b1.style.visibility="visible";
        b1.style.opacity="1";
        b2.style.visibility="visible";
        b2.style.opacity="1";
        b3.style.visibility="visible";
        b3.style.opacity="1";
        b4.style.visibility="visible";
        b4.style.opacity="1";
        b5.style.visibility="visible";
        b5.style.opacity="1";
        b6.style.visibility="visible";
        b6.style.opacity="1";
        b7.style.visibility="visible";
        b7.style.opacity="1";
        b8.style.visibility="visible";
        b8.style.opacity="1";
        b9.style.visibility="visible";
        b9.style.opacity="1";
        b10.style.visibility="visible";
        b10.style.opacity="1";
        b11.style.visibility="visible";
        b11.style.opacity="1";
        b12.style.visibility="visible";
        b12.style.opacity="1";
        button.style.visibility="visible";
        button.style.opacity="1";
     
    }
     
    function closeMenu(){
       var b1=document.getElementById("block1");
       var b2=document.getElementById("block2");
       var b3=document.getElementById("block3");
       var b4=document.getElementById("block4");
       var b5=document.getElementById("block5");
       var b6=document.getElementById("block6");
       var b7=document.getElementById("block7");
       var b8=document.getElementById("block8");
       var b9=document.getElementById("block9");
       var b10=document.getElementById("block10");
       var b11=document.getElementById("block11");
       var b12=document.getElementById("block12");
       var menu=document.getElementById("menu");
       var buttontop=document.getElementById("buttonOverMenu");
        var button=document.getElementById("button");
     

            menu.style.visibility="hidden";
            menu.style.opacity="0";

        b1.style.visibility="hidden";
        b1.style.opacity="0";
        b2.style.visibility="hidden";
        b2.style.opacity="0";
        b3.style.visibility="hidden";
        b3.style.opacity="0";
        b4.style.visibility="hidden";
        b4.style.opacity="0";
        b5.style.visibility="hidden";
        b5.style.opacity="0";
        b6.style.visibility="hidden";
        b6.style.opacity="0";
        b7.style.visibility="hidden";
        b7.style.opacity="0";
        b8.style.visibility="hidden";
        b8.style.opacity="0";
        b9.style.visibility="hidden";
        b9.style.opacity="0";
        b10.style.visibility="hidden";
        b10.style.opacity="0";
        b11.style.visibility="hidden";
        b11.style.opacity="0";
        b12.style.visibility="hidden";
        b12.style.opacity="0";
        buttontop.style.visibility="hidden";
        buttontop.style.opacity="0";
        button.style.visibility="visible";
        button.style.opacity="1";
     
     
    }
 
    </script>
</html>


If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
 Login Form V9.0 based on Bootstrap

Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V9.0 By roundCube</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>
</head>
    
<body>
    <div id="form">
               
        </br>
    <form class="form" role="form">
  <div class="form-group">
    <input type="email" class="form-control  input-lg" id="email" placeholder="Email">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" id="pwd" placeholder="******">
  </div>
        
          <button type="submit" class="btn btn-default btn-lg btn-block submit">LOGIN</button>
                
        </div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube</a></div>
     

</body>
    <style>
        

    #form{
        position: absolute;
        top:27%;
        left:35%;
        width:30%;
        height:310px;
    }
        
        

        input#email{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sIy64h08C3L_2nCnyUrMe-N5YbWOvlceyFMIBpvfYA4XAW05BLI9RvHmP6GgrHxFAvM15Gi4DFnK2BPmoy-U8K0yO_hSE6pm6zXMUxI95TWM9wuCI9gO5bBAtrUD0rd874PdDOLoC4s/s1600/user.jpg);
            background-size: 42px 102%;
            background-repeat: no-repeat;
            border-radius: 0px;
            text-indent: 45px;
            border-style: none;
            
        }
        
        #copyright{
            position:absolute;
            top:2px;
            height:20px;
            left:0px;
            width:100%;
            text-align:center;
        }

        #copyright a{
            text-decoration:none;
            color:#333;

        }
        
        input#pwd{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjevFDxfl_tuWUBo5wkVg_ALfCYGAG0ZnfLugc9-N4cTb9eon09vAPdjUp176em9Hk_mppl7zWMnNDD-2j8yIM_LBLzwwo-3JcvPjbSOCMK497O9VIE5ASuyaFYzKRrJLJ5U-7l4uJzlFA/s1600/password.jpg);
            background-size: 43px 100%;
            background-repeat: no-repeat;
            border-radius: 0px;
            text-indent: 45px;
            border-style: none;
            
        }
        
        .submit{
            text-align: left;
            border-radius: 0px;
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0xlMcu9ys_D5ACWEwQSRuEEDc1dB4acKIxXGjOP8qXpDdbAi6ST0eG-BYKyWQBPCr6hRAzOzaVe8QvTGoy1T7nt-WEOl2WgJYhLvcFBz3-nwXBDvb9TaVkJK6qNnzfflRl4bmFKO1rI/s1600/login.jpg);
            background-size: 43px 100%;
            text-indent: 45px;
            background-repeat: no-repeat;
            border-style: none;
        }
        
        @media only screen and (max-width:1040px)
        {
            #form{
                left:30%;
                width:40%;
            }
        }
        
        @media only screen and (max-width:795px)
        {
            #form{
                left:25%;
                width:50%;
            }
        }
        
        @media only screen and (max-width:634px)
        {
            #form{
                left:20%;
                width:60%;
            }
        }
            
        @media only screen and (max-width:528px)
        {
            #form{
                left:10%;
                width:80%;
            }
        }
        
        @media only screen and (max-width:393px)
        {
            #form{
                left:5%;
                width:90%;
            }
        }
        
    
    
    </style>
</html>




If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Responsive & Animated Independence Day Widget

Related Articles:

  

  



Here's the code snippet:

<body><a href="http://roundcubee.blogspot.com"><div class="grass" style="position:fixed;bottom:0px;left:0px;width:100%;height:12%;background-repeat:no-repeat;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63B8gy3AEN_sQpqVECvjXMJwFKoHF8QRb41KiNwnJNtzJJIasr6suFya2_AUGgLhNcZn_kF8Mx-whQTrEBq5Kri69Ld34BM6RHouAzMBzukKnziPudQDEqRHXLvndd5EbUzH5pbXiGlE/s1600/grass_PNG4937.png);background-size:100% 100%;z-index:10000000000">

<div id="flag"></div>
<div id="text"><h1 style="color:white;">Happy Independence Day</h1></div>
</div></a>

</body>


<style>
   
    body{
        background-color: #c7c7c7;
    }
#flag{
    position: absolute;
    bottom:0%;
    height:0%;
    left:10%;
    width:10%;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8q93NtzX2z64ESLG2vuHHisszoOnN7qsJ-3x6_K_MZWKmK2jD2oXyKMqGquXejesRMh9sbid1Stn5QEaykyMHOQMZfVhDQipzvZE1O09WWOXcN89oSjkaWeRBfVDC9jp63nZKMtc0N1Y/s1600/flag.png);
    background-size: 100% 100%;
}

#text{
position:absolute;
bottom:80%;
height:100%;
right:1%;
width:70%;
text-align:center;
font-size:0px;
}


</style>

<style>
.grass:hover #flag{
 height:170%;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}

.grass:hover #text{
 font-size:22px;
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
text-shadow:1px 1px 33px green;
bottom:50%;
}

@media only screen and (max-width:784px)
{
.grass:hover #text{
 font-size:20px;
}
}

@media only screen and (max-width:730px)
{
.grass:hover #text{
 font-size:18px;
}

#flag{
left:2%;
width:15%;
}
}


@media only screen and (max-width:644px)
{
.grass:hover #text{
 font-size:15px;
}

#flag{
left:2%;
width:18%;
}
}

@media only screen and (max-width:543px)
{
.grass:hover #text{
 font-size:11px;
}

#flag{
left:2%;
width:20%;
}
}

@media only screen and (max-width:402px)
{
#text{
display:none;
}
   
#flag{
left:30%;
width:40%;
}


.grass:hover #flag{
height:200%;
}
}

</style>

For your website add this code just before </body> tag.
For your blog go to Layout of your template, then add a widget in the footer portion after that select the HTML/JAVASCRIPT option and paste this code there and you are done.


If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Responsive form V8.0


Related Articles:

  

  


Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V8.0 By roundCube</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>
</head>
   
<body>
    <div id="dots"></div>
    <div id="dots"></div>
    <div id="dots"></div>
    <div id="dots"></div>
<div id="form">
    <h1><b>User Login</b></h1>
    </br></br>
    <img src="http://p.w3layouts.com/demos/user_login/images/avtar.png" height="140" width="140" style="left:25%">
    <div id="login">
    <div id="loginFields">
        </br>
    <form class="form-inline" role="form">
  <div class="form-group">
    <input type="email" class="form-control  input-lg" id="email" placeholder="USERNAME">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" id="pwd" placeholder="******">
  </div>
        </div>
    <div id="submission">
          <button type="submit" class="btn btn-default btn-lg login">GO</button>
    </div>
    </div>
</form>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></br> Idea By: w3layouts.com</p></div>
</body>
    <style>
        body{
            background-image: url(https://photoshopgimptutorials.files.wordpress.com/2012/08/step-7.jpg);
        }
       
        #form{
            position: absolute;
            top:3%;
            height:500px;
            left:27%;
            width:44%;
            color:white;
            text-align: center;
        }
       
        #dots {
            position: absolute;

            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            background-image: url('http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png');
}
       
        #login{
            position: absolute;
            bottom:5px;
            left: 5%;
            width:100%;
            height:17%;
            border-radius: 7px;
        }
       
        .input-lg{
            border-color: #939393;
        }
       
        #loginFields{
            position: absolute;
            top:0px;
            left:0px;
            width:90%;
            height:100%;
            background-color: white;
            border-radius: 7px;
        }
       
        #submission{
            position: absolute;
            top:25%;
            height:50%;
            width:10%;
            right:0%;
        }
       
        .login{
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            background-color: orange;
            border-color: orange;
            color: white;
        }
       
        .login:Hover{
            background-color: #0080ff;
            border-color: #0080ff;
            color:White;
        }
       
        #copyright{
            position: absolute;
            bottom:2px;
            height:10%;
            left:0px;
            width:100%;
            text-align: center;
            color:white;

        }
       
    #copyright a{
        color:white;
        text-decoration: none;
    }
        #copyright a:hover{
            color:orange;
        }
       
        @media only screen and (max-width:1306px)
        {
            #form{
                width:50%;
                left:25%;
            }
        }
       
        @media only screen and (max-width:1152px)
        {
            #form{
                width:60%;
                left:20%;
            }
        }
       
        @media only screen and (max-width:974px)
        {
            #form{
                width:65%;
                left:17.5%;
            }
        }
       
        @media only screen and (max-width:901px)
        {
            #form{
                width:70%;
                left:15%;
            }
        }
       
       
        @media only screen and (max-width:837px)
        {
            #form{
                width:75%;
                left:12.5%;
            }
        }
       
        @media only screen and (max-width:783px)
        {
            #form{
                width:80%;
                left:10%;
            }
        }
       
        @media only screen and (max-width:765px)
        {
            #login{
                height:29%;
            }
           
            #submission{
                top:38%;
            }
           
            #form{
                left:25%;
                width:50%;
            }
           
            #loginFields{
                padding-right:15px;
                padding-left: 15px;
        }
           
        }
       
        @media only screen and (max-width:618px)
        {
            #form{
                width:60%;
                left:20%;
            }
        }
           
        @media only screen and (max-width:557px)
        {
            #form{
                width:70%;
                left:15%;
            }
        }
       
        @media only screen and (max-width:496px)
        {
            #form{
                width:80%;
                left:10%;
            }
        }
       
        @media only screen and (max-width:460px)
        {
            #form{
                left:3%;
            }
        }
       
    </style>
   
</html>

If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Modal v1.0 with animations

Related Articles:

  




Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Modal V1.0 By roundCube</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>
</head>
   
<body onload="animate()">
    <div id="button" onclick="openModal()"><h2 style="text-align:center;">Click Me</h2></div>
    <div id="modal">
    <div id="close" onclick="closeModal()">
        <div id="line1"></div>
        <div id="line2"></div>
    </div>
        </br>
        <h1 style="text-align:center;">Responsive Modal By roundCube</h1>
        <p style="text-align:center;"> <a href="http://roundCubee.blogspot.com">roundCubee.blogspot.com</a></p>
    </div>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>
</body>
   
<style>
#button{
    position: absolute;
    top:40%;
    left:43%;
    height:10%;
    width:14%;
    background-color:orange;
    -webkit-transition:all 0.25s ease-in;
    -moz-transition:all 0.25s ease-in 0s;
    border-radius: 5px;
    color: white;
    border-bottom-width: 9px;
    border-bottom-style: ridge;
    border-bottom-color: orangered;
    cursor: pointer;
cursor: hand;
}

#button:hover{
    background-color: #ffba3d;
    border-bottom-color: #ff5819;
}
   
#modal{
    position: absolute;
    top:50%;
    left:50%;
    height:0px;
    width:0px;
    background-color: white;
    border-style:solid;
    border-color:black;
    border-radius: 7px;
    border-width:0px;
    opacity: 0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease 0s;
}
   
#close{
    position: absolute;
    top:10px;
    right:10px;
    height:50px;
    width:50px;
    border-radius: 50%;
    border-style: solid;
    border-color: black;
    border-width: 3px;
    cursor: pointer;
cursor: hand;
}
   
#line1{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari */
    transform: rotate(30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
#line2{
    position: absolute;
    top:10%;
    height: 80%;
    left: 45%;
    width:10%;
    background-color: black;
    -ms-transform: rotate(-39deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg);
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease 0s;
}
   
    #copyright{
        position: absolute;
        bottom:0px;
        height:6%;
        left:0px;
        width:100%;
        text-align: center;
     }
   
    #copyright a{
        color:black;
    }
   
#close:hover #line1{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari */
    transform: rotate(45deg);
    opacity: 0.7;
}
   
#close:hover #line2{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate-(45deg); /* Safari */
    transform: rotate(-45deg);
    opacity: 0.7;
}
   
</style>

<script>
function openModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="10%";
    modal.style.height="80%";
    modal.style.left="10%";
    modal.style.width="80%";
    modal.style.borderWidth="2px";
    modal.style.opacity="1";
}
   
function closeModal(){
    var modal = document.getElementById("modal");

   
    modal.style.top="50%";
    modal.style.height="0%";
    modal.style.left="50%";
    modal.style.width="0%";
    modal.style.borderWidth="0px";
    modal.style.opacity="0";
}
   
function animate(){
    var button = document.getElementById("button");
   
    if(button.style.top!="43%"){
        button.style.top="43%";
    }
    else{
        button.style.top="40%";
    }
   
    setTimeout("animate()",320);
}
</script>
   
</html>
   

If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Responsive Form V7.0 based on Bootstrap



Related Articles

  



Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V7.0 By roundCube</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>
</head>
   
<body>
    <div id="form">
        <div id="loginCover"></div>  
        <div id="login">
<form role="form">
  <div class="form-group">
    <input type="email" class="form-control input-lg" id="email" placeholder="Email address">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" id="pwd" placeholder="******">
  </div>
    </br>
  <button type="submit" class="btn btn-default btn-block btn-lg button">Sign In</button>
</form>
            </br>
    <a href="#"><p style="text-align:center;color:white;">Forgot Password?</p></a>
        </div>
   
    <a href="https://www.facebook.com/roundCubeInc?fref=ts"><div id="logo"></div></a>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>
    </div>  
</body>
   
<style>
  #form{
      position: absolute;
      top:15%;
      left:37%;
      height:480px;
      width:26%;
      background-image: url("http://www.myiphone5wallpaper.com/Gallery/10_Architecture/My-iPhone-5-Wallpaper-HD-Architecture(16).jpg");
      background-size: 100% 100%;
      border-radius: 5px;
  }
  #loginCover{
      position: absolute;
      top:0px;
      left:0px;
      height:100%;
      width:100%;
      background-color: black;
      opacity: 0.6;
      border-radius: 5px;
  }
  #login{
      position: absolute;
      top:34%;
      left:10%;
      width:80%;
      height:50%;
  }
  input#email,input#pwd{
    background-color: rgb(30,30,29);
    border-radius: 0px;
    border-style:none;
    color:white;
    font-size: 14px;
  }

    .button{
        background-color: rgb(234,203,32);
        border-color: rgb(234,203,32);
        color:white;
        border-radius:25px;
        border-width: 4px;
        -webkit-transition:all 0.25s ease;
        -moz-transition:all 0.25s ease 0s;
    }
   
    .button:hover{
        background-color: transparent;
        border-color: rgb(234,203,32);
        border-width: 4px;
        border-style: dotted;
        color:rgb(234,203,32);
    }
   
    #logo{
        position: absolute;
        top:5%;
        height:130px;
        left:32%;
        width: 130px;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbHa4yCqBX9-eFF6HZOY4hFKCnvBrpInfJ5Nnc1VCAnNRUhbjpZxuf9PqD4vsHBxCIeCm4rD1SHlurEdNrzr8MWa_n6z-0JelbGuhgofpLU9DKNuNPFvsN1TNl6ZFXiisFqPNycaUcQM/s1600/Final.png);
        background-size: 100% 100%;
    }
   
    #copyright{
        position: absolute;
        bottom:0px;
        height:6%;
        left:0px;
        width:100%;
        text-align: center;
     }
   
    #copyright a{
        color:white;
    }
   
    #login a{
        color:white;
        text-decoration: none;
    }


input#email::-webkit-input-placeholder,input#pwd::-webkit-input-placeholder { /* WebKit browsers */
    color:   white;
}
input#email:-moz-placeholder,input#pwd:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    white;
   opacity:  1;
}
input#email::-moz-placeholder,input#pwd::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    white;
   opacity:  1;
}
input#email:-ms-input-placeholder,input#pwd:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    white;
}
   
   
        @media only screen and (max-width:1158px)
        {
            #form{
                width:30%;
                left:35%;
            }
        }
   
        @media only screen and (max-width:1031px)
        {
            #form{
                width:35%;
                left:32.5%;
            }
        }
   
        @media only screen and (max-width:867px)
        {
            #form{
                width:40%;
                left:30%;
            }
        }
   
        @media only screen and (max-width:760px)
        {
            #form{
                width:45%;
                left:27.5%;
            }
        }
   
        @media only screen and (max-width:663px)
        {
            #form{
                width:50%;
                left:25%;
            }
        }
   
        @media only screen and (max-width:575px)
        {
            #form{
                width:60%;
                left:20%;
            }
        }
   
        @media only screen and (max-width:490px)
        {
            #form{
                width:70%;
                left:15%;
            }
        }
   
        @media only screen and (max-width:420px)
        {
            #form{
                width:80%;
                left:10%;
            }
        }
   
        @media only screen and (max-width:360px)
        {
            #form{
                width:90%;
                left:5%;
            }
        }
   
</style>
   
</html>


If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Subscribe to: Posts (Atom)