The Codepen linked below is where I currently am stuck.
function startHover(e) {
btn.classList.add("btnPlaying")
}
function removeHover(e) {
btn.classList.remove("btnPlaying");
}
const btn = document.querySelector('.btn')
btn.addEventListener("mouseenter", startHover);
btn.addEventListener('transitionend', removeHover);
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
transition: all 1.07s ease;
}
.btnPlaying {
transform: scale(1.1);
}
<button class="btn">Play!</button>
https://codepen.io/TerrellsCode/pen/zYEyORB
The button grows and shrinks like intended but only does it one time. Look for any pointers on how to make this grow/shrink animation loop infinitely as long as user is hovering over button. Thank You
No need for JavaScript. With CSS Keyframes you can create and run animations. Toggle the animation-play-state with the :hover selector to start and pause the animation.
#keyframes grow-shrink {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
animation-name: grow-shrink;
animation-duration: 1.07s;
animation-timing-function: ease;
animation-fill-mode: backwards;
animation-direction: alternate;
animation-play-state: paused;
animation-iteration-count: infinite;
}
.btn:hover {
animation-play-state: running;
}
<button class="btn">Play!</button>
You dont need javascript to create such animation, use css keyframes and infinite animation.
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255,204,3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53,106,188);
}
.btn:hover {
animation: btnPlaying 1s infinite;
}
#keyframes btnPlaying {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
Related
Hi I have a button element that slide to the picture and I want the picture to be blurred when the button appeared however the button also blurring upon hovering I want only the image to be have that effect please help me! How can I do that? Excuse my english please. I am also a beginner. Thank you in advance.
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>
You have to put blur 0px on other classes:
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
filter: blur(0px);
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
filter: blur(0px);
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>
Thank you everyone. Here's how I fixed my code I let my button out inside the div of the image and manually add or style them on css.
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 4;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 1500px;
top: 400px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
transition: 0.3s ease;
}
.Aljon:hover ~ #myBtn {
left: 1010px;
transition: 0.3s ease;
}
#myBtn:hover {
left: 1010px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container:hover .Aljon {
filter: blur(2px);
}
<div class="container">
<div class="Aljon">
</div>
<button id="myBtn" class="button">HIRE ME</button>
</div>
I made an app that renders a basic sign-in form and sends a fetch request with the username and password, and after clicking the sign-in button another component gets rendered, that opens the google sign-in page in another tab returning a code that needs to be pasted in the component.
Everything works great on the desktop; on a mobile, on the other hand, the second component doesn't get rendered.
I think it might be a problem with the CSS, but I'm not sure.
import React, { Component } from "react";
export default class Spaggiari extends Component {
state = {
username: null,
password: ""
};
handleClick = () => {
fetch(
`http://localhost:7000/api/gviva/${this.state.username}&${this.state.password}`
)
.then(response => response.json())
.then(resData => {
//console.log(resData);
if (resData !== "Wrong credentials") {
//console.log("sending object returned as prop to googlecode")
this.props.handler(resData);
console.log("Logged in");
console.log(resData);
} else {
console.log(resData);
}
});
};
updateValue = e => {
console.log(this.state.username);
if (e.target.name === "username") {
this.setState({ username: e.target.value });
} else if (e.target.name === "password") {
this.setState({ password: e.target.value });
}
};
render() {
return (
<div>
<div>
<div className="wrapper fadeInDown">
<div id="formContent">
{/* Tabs Titles */}
{/* Icon */}
<div className="fadeIn first">
<img
src="https://media.spaggiari.eu/rosso/sdf/img/loghi_progetti/logo_cvv.png"
id="icon"
alt="User Icon"
/>
</div>
{/* Login Form */}
<form>
<input
type="text"
id="login"
className="fadeIn second"
name="username"
placeholder="Username"
onKeyUp={this.updateValue}
autoComplete="off"
aria-describedby="emailHelp"
/>
<input
type="password"
id="password"
className="fadeIn third"
placeholder="Password"
name="password"
onKeyUp={this.updateValue}
autoComplete="off"
/>
<input
type="button"
onClick={this.handleClick}
className="fadeIn fourth"
value="Log In"
></input>
</form>
{/* Remind Passowrd */}
<div id="formFooter">
<small id="emailHelp" className="form-text text-muted">
If you have already used this app, your events will be updated
and you will not need to sign-in in to your Google account
</small>
</div>
</div>
</div>
</div>
</div>
);
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
/* BASIC */
html {
background-color: #56baed;
}
body {
font-family: "Poppins", sans-serif;
height: 100vh;
}
a {
color: #92badd;
display:inline-block;
text-decoration: none;
font-weight: 400;
}
h2 {
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
display:inline-block;
margin: 40px 8px 10px 8px;
color: #cccccc;
}
/* STRUCTURE */
.wrapper {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
}
#formContent {
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
background: #333;
padding: 30px;
width: 90%;
max-width: 450px;
position: relative;
padding: 0px;
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
text-align: center;
}
#formFooter {
background-color: #f6f6f6;
border-top: 1px solid #dce8f1;
padding: 25px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
/* TABS */
h2.inactive {
color: #cccccc;
}
h2.active {
color: #0d0d0d;
border-bottom: 2px solid #5fbae9;
}
/* FORM TYPOGRAPHY*/
input[type=button], input[type=submit], input[type=reset] {
background-color: #56baed;
border: none;
color: white;
padding: 15px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-size: 13px;
-webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
margin: 5px 20px 40px 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background-color: #39ace7;
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
input[type=text], input[type=password]{
background-color: #f6f6f6;
border: none;
color: #0d0d0d;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px;
width: 85%;
border: 2px solid #f6f6f6;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus {
background-color: #fff;
border-bottom: 2px solid #5fbae9;
}
input[type=text]:placeholder {
color: #cccccc;
}
/* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
/* Simple CSS3 Fade-in Animation */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fadeIn.first {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.fadeIn.second {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.fadeIn.third {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.fadeIn.fourth {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
display: block;
left: 0;
bottom: -10px;
width: 0;
height: 2px;
background-color: #56baed;
content: "";
transition: width 0.2s;
}
.underlineHover:hover {
color: #0d0d0d;
}
.underlineHover:hover:after{
width: 100%;
}
/* OTHERS */
*:focus {
outline: none;
}
#icon {
width:60%;
}
strong text:
you are right, your CSS is not currently working, override CSS and wrapper of the button.
I want to make a similar page as this one: https://lp.anzi.kr/?page=listeners.
When you hover over a button, it moves up and some text will show with a background.
I try to make this with the following code: https://jsfiddle.net/rcv8b0kh/3/
$button = document.querySelector('button');
$textcontent = document.querySelector('.textcontent');
if ($button.hover) {
$textcontent.classList.add('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
visibility: hidden;
}
.active {
visibility: 1;
transform: translateY(-3.5rem);
transition: all .3s ease 0s background-color: black;
color: white
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
I also see people using ::before and ::after for these kind of animations but I don't really know how to implement them here.
Here's a solution with pure CSS and :after pseudo element:
div {
position: relative;
width: 10em;
}
p {
text-align: center;
transform: translateY(4rem);
}
p:after {
content: "";
display: block;
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
transform: translateY(-5rem);
}
div:hover p:after {
transform: translateY(-12rem);
}
<div>
<p>some text</p>
</div>
You seem to be getting confused between javascript and jquery. However, I don't think ($button.hover) would be a valid condition in either.
button = document.querySelector('button');
textcontent = document.querySelector('.textcontent');
button.addEventListener('mouseover', handlerIn)
button.addEventListener('mouseout', handlerOut)
function handlerIn() {
textcontent.classList.add('active')
}
function handlerOut() {
textcontent.classList.remove('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
transition: opacity 0.2s linear;
}
.active {
opacity: 1;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
you don't need js to do that its a simple css method
<div>
<button class="hoverbtn" id="hoverbtn">
</button>
<div id="textcontent" class = "textcontent">
<span>some text</span>
</div>
</div>
and here is css to hide and show text
If the second item is directly inside the container:
#hoverbtn:hover > #textcontent { opacity : 1 }
If the second item is next to (after containers closing tag) the container:
#hoverbtn:hover + #textcontent { opacity : 1 }
If the second item is somewhere inside the container:
#hoverbtn:hover #textcontent { opacity : 1 }
If the second item is a sibling of the container:
#hoverbtn:hover ~ #textcontent { opacity : 1 }
so here is your css :
.hoverbtn {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
.hoverbtn:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all 0.3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
}
.hoverbtn:hover+.textcontent {
opacity: 1;
}
reference : https://stackoverflow.com/a/4502693/6550949
You really shouldn't need Javascript to do this.
I'm not really sure what you're looking for, but I'd use a width / opacity transition on the .textContent (when button is hovered) and it achieves very similar results to the page you have linked.
button {
background-color: red;
border-radius: 50%;
border: none;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
}
button:hover {
box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent p{
width:0px;
opacity:0;
transition: opacity .3s ease 0s;
}
button:hover + .textcontent p{
width:200px;
opacity:1;
transition: all .3s ease 0s;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
I have created a website for video games. While testing, I noticed there was some inconsistencies between browsers when I hovered over a button. Firefox Quantum seems to be able to color both the FontAwesome GitHub icon, and the text at the same time, while Chrome cant. Both browsers are being run on the latest versions. My question is, what is causing this, and what can I do to prevent this?
* {
font-family: sans-serif;
transition: all 0.7s !important;
}
.button {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 40px;
border: solid 2px;
text-align: center;
font-size: 18px;
border-color: antiquewhite;
padding: 8px;
width: auto;
cursor: pointer;
margin: 5px;
outline: none;
box-shadow: 0 0 10px 0 #D3D3D3;
color: white;
}
.button:hover {
box-shadow: 0 0 16px 0 #051428;
background-color: #faebd7;
color: #051428;
}
.bg-gradient {
background: linear-gradient(225deg, #4467ae, #449fae, #44ae8e, #9eae44, #ae7844, #ae4444, #ae4497, #7544ae);
background-size: 1600% 1600%;
-webkit-animation: gradient 40s ease infinite;
-moz-animation: gradient 40s ease infinite;
-o-animation: gradient 40s ease infinite;
animation: gradient 40s ease infinite;
}
.fg-white {
color: #ffffff;
}
.center-text {
text-align: center;
}
.fade-in {
animation: fade 1.2s
}
#-webkit-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#-moz-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#-o-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body class="bg-gradient fg-white center-text">
<div class="fade-in">
<h1>Website</h1>
<p>
Hover over the button and you will see the issue.
</p>
<button class="button" onclick="redirectToSite('https://github.com/Frontear/gameSite')"><i class="fa fa-github" aria-hidden="true"></i> GitHub</button>
</div>
</body>
Ok, it seems that when you did set the transition to all elements in the beginning of your css you caused this behavior. I've just change the beginning of your css to:
CSS:
* {
font-family: sans-serif;
}
.button {
border-radius: 40px;
border: solid 2px;
text-align: center;
font-size: 18px;
border-color: antiquewhite;
padding: 8px;
width: auto;
cursor: pointer;
margin: 5px;
outline: none;
box-shadow: 0 0 10px 0 #D3D3D3;
color: white;
transition: all 0.7s;
}
Apparently, the event was propagating to the icon with a 0.7s delay, because the transition was applied to both the button and the icon.
The updated fiddle:
https://jsfiddle.net/pffrmLpm/6/
please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D
/** to prevent inputing numbers in textbox enter your mobile number */
function validate(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}/** to prevent inputing numbers in textbox enter your mobile number END */
/** For Checkbox */
jQuery(document).ready(function()
{
jQuery("#accept").click(function(){
if(jQuery("#button").is(":enabled"))
{
jQuery("#button").prop("disabled",true);
}
else
{
jQuery("#button").prop("disabled",false);
}
});});/** For Checkbox End*/
.plogo{
z-index:5;
position:absolute;
font-family: Georgia, serif;
line-height: 1em;
color: #ffffff;
font-weight:bold;
font-style:italic;
font-size: 72px;
text-shadow:0px 0px 0 rgb(56,56,56),1px 1px 0 rgb(56,56,56),2px 2px 0 rgb(56,56,56),3px 3px 0 rgb(56,56,56),4px 4px 0 rgb(56,56,56),5px 5px 0 rgb(56,56,56),6px 6px 0 rgb(56,56,56), 7px 7px 0 rgb(56,56,56),8px 8px 7px rgba(0,0,0,0.3),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
}
a {text-decoration: none;}
nav {
width: 100%;
height: 80px;
background: rgb(2,189,138);
position:absolute;
z-index:4;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
font-weight:bold;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
color: #eee;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
.wrapper {
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100% auto;
margin-top: -250px;
overflow: visible;
}
.container {
max-width: 600px;
margin: 20px;
padding: 80px 0;
height: 100% auto;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
font-weight: 200;
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
.cacc{
z-index: 2;
position:relative;
height:10px;
width:280px;
}
input[type='text']{
font-size:18px;
font-family:modern, tahoma;
}
/*---------- For username --------------------------------*/
input[type='text'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
/*---------- For username End--------------------------------*/
input[type='password'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;}
input[type='email'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 3px;
padding: 10px 15px;
display: block;
font-size: 18px;
color: #fff;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
background-color: white;
color: #53e3a6;
}
.dlist{font-size: 18px; font-family:modern; color:grey; border-radius:5px; z-index:2; position:relative; }
.cbox{ position:relative; z-index:2;}
.logbutton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: #fff;
border: 0;
padding: 10px 15px;
color: #53e3a6;
border-radius: 3px;
width: 250px;
cursor: pointer;
font-size: 18px;
position: relative;
z-index: 2;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.logbutton:hover {
background-color: #f5f7f9;
}
</head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<body style="background-color:#e8e8e8; margin:0px; padding:0px;">
<font class="plogo">  P . A . R . S</font>
<nav>
<ul>                                      
                                      
                         
<li>Home</li>    
<li>Log In</li>    
<li>Create Account</li>
<li class="drop">
Advertisement
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Job Hiring</li>
<li>Tourist Spot</li>
<li>Restaurant & Bar</li>
<li>Foods</li>
<li>Party Events</li>
</ul>
</div>
</div>
</li>
<li>About Us</li>
</ul>
</nav>
<div class="wrapper">
<div class="container">
<center><h1 style="font-weight:bold;color:#fff;">CREATE ACCOUNT</h1>
<?php
?>
<form action=""><font style="color:#fff; font-weight:bold; font-size:18px;">
Choose your Username
<input type="text" class="cacc" placeholder="Create Username" />
Choose your Password
<input type="text" class="cacc" placeholder="Create Password" />
Your Email
<input type="email" class="cacc" placeholder="Enter your email" />
Your First Name
<input type="text" class="cacc" placeholder="First name" />
Your Last Name
<input type="text" class="cacc" placeholder="Last name" />
Your Mobie Number
<input type="text" onkeypress="validate(event)" class="cacc" placeholder="11 Digits Mobile Number" maxlength="11" />
Your Birthday<br />
<select class="dlist">
<option>Month</option>
<option>123</option>
</select>
<select class="dlist">
<option>Day</option>
</select>
<select class="dlist">
<option>Year</option>
</select><br />
Your Gender<br />
<select class="dlist">
<option>Gender</option>
<option>Male</option>
<option>Female</option>
</select><br />
<input type="checkbox" class="cbox" id="accept" required />
<br />
<input type="submit" value="Create Account" class="logbutton" disabled="disabled" id="button" />
</font></form>
</center></div>
</body>
please help me to this code, how do i prevent the div resizing when i resizing the webpage.
any advice for this code sir/mam?
thanks in advance for the help.
sorry for my bad english :D
Add min-width CSS property to the element you want to not be resized to lower than prefered width:
.YOUR_DIV_CLASS {
min-width: 500px; // Or any other width you prefer.
}
Or use width property and define width in px to make the div have static width.
changing each or some of those elements (depending on your needs)
... {
...
width: 100%;
...
}
into something like:
... {
...
width: 980px; (or whatever numeber you need)
...
}