I have been trying to make a game where the user has to press a button that redirects to the game page.
I am new to HTML/CSS and I want the button to go underneath a header, but the button goes to the side of the header instead.
I've tried using the <br> tag after the header, tried using position:fixed and specifying top and bottom heights (this worked, but for different screen sizes, the button shifted out of place), and I have tried changing display:block but nothing worked.
Here is my code:
h {
color: rgb(0, 0, 0);
text-shadow: 1px 2px 5px black;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 30pt;
}
div {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.button {
float: left;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
background-color: #97d9f3;
border-color: rgb(0, 131, 192);
border-style: solid;
color: black;
padding: 15px 32px;
display: block;
font-size: 16px;
}
.button:hover {
background-color: rgb(90, 190, 236);
}
body {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
background-color: #84ceeb;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</div2>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h>
Un Jeu de Veux Tu Danser
</h>
<button class="button" onclick="window.location.href='game.html'">Commencer</button>
<script src="script.js"></script>
</body>
</html>
Have a great day,
thanks for all your help!
When you use flex-direction: column; on a flex-based parent element, the children each become rendered along the y-axis.
h {
color: rgb(0, 0, 0);
text-shadow: 1px 2px 5px black;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-size: 30pt;
}
div {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.button {
float: left;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
background-color: #97d9f3;
border-color: rgb(0, 131, 192);
border-style: solid;
color: black;
padding: 15px 32px;
display: block;
font-size: 16px;
}
.button:hover {
background-color: rgb(90, 190, 236);
}
body {
text-align: center;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
background-color: #84ceeb;
margin: 0;
padding: 0;
flex-direction: column; /* added */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</div2>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h>
Un Jeu de Veux Tu Danser
</h>
<button class="button" onclick="window.location.href='game.html'">Commencer</button>
<script src="script.js"></script>
</body>
</html>
Related
Ive tried different properties but my CCS just doesn't stay in place. I have tried absolute and fixed but no luck. I want them to stay in the positions where they are i.e. the greeting on the left and the picture on the right of the sign out buttons. I want them in the same place if i resize or view on a different screen etc.
This is my index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.grid {
position: relative;
}
.grid:before {
background-color: #f0f0f0;
box-shadow: 0px 0px 0px 1px #dddddd inset;
content: "";
height: calc(100% - 2rem);
left: 1rem;
top: 1rem;
position: absolute;
width: calc(100% - 2rem);
}
.ui.divided.grid:before,
.celled.grid:before {
display: none;
}
.ui.aligned .column:after {
display: none !important;
}
.grid .column:not(.row):not(.grid):after {
background-color: rgba(86, 61, 124, 0.15);
box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
content: "";
display: block;
min-height: 50px;
}
#media only screen and (max-width: 768px) {
.stackable.grid:before {
width: 100%;
left: 0em;
}
}
This is my app.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.signout-with-google-btn,
.login-with-google-btn {
position: relative;
transition: background-color 0.3s, box-shadow 0.3s;
padding: 12px 16px 12px 42px;
border: none;
border-radius: 999px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
color: #757575;
font-size: 14px;
font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
background-color: white;
background-repeat: no-repeat;
background-position: 12px 11px;
}
.login-with-google-btn:hover {
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.login-with-google-btn:active {
background-color: #b8b8b8;
}
.login-with-google-btn:focus {
outline: none;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25),
0 0 0 3px #c8dafc;
}
.signout-with-google-btn {
top: 0.5px;
left: 69%;
position: absolute;
margin: 20px 10px 10px 10px;
}
.login-with-google-btn {
top: 1.6%;
left: 70%;
position: absolute;
}
.profile-pic {
width: 60px;
height: 60px;
border-radius: 60px;
top: 0.2%;
left: 75%;
position: absolute;
margin: 10px 10px 10px 20px;
}
.greeting {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
top: 4%;
position: absolute;
}
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
We ideally need to see the html of your header, but here's an example:
The header is set to display: flex and flex-direction: row keeps it from wrapping.
The button-container inside the header is the same.
The magic is justify-content: space-between - this pushes each child under <header> out to the left and right, and because we have flex-direction on the button-container, they don't wrap.
Try the snippet below and resize to see it in action.
header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
header .button-container {
display: flex;
flex-direction: row;
}
<header>
<div class="greeting">Hello, name</div>
<div class="button-container">
<div class="button">Button 1</div>
<div class="button">Button 1</div>
</div>
</header>
Try adding margins to one of or both elements to separate them from each other. If you want them in the exact same place try using percentages for the placements. right: 98%; for both of them would probably work.
The current output of my pgm(the red nd green circle were edited by me for ur understanding)
The plus symbol inside red circle should be in the place of green circle.
Could you please help me with this..!!
Thanks in Advance,
MY CODE:
.plussymbol{
font-size: 40px;
color: #a4508b;
background-color:transparent;
border-radius: 20px;
border: none;
display: inline-block;
cursor: pointer;
position: absolute;
/*top: 37%;
right: 28%;
*/
padding-top: 15px;
vertical-align: middle;
}
.userip{
width:90%;
height: 65px;
border-radius: 30px;
font-size: 27px;
font-weight: lighter;
font-family: 'Hanalei Fill', cursive;
background-color: #ece7e7;
color: #000;
border: none;
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
padding-right: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
</head>
<body>
<form>
<input type="text" class="userip" placeholder="Add Today's Task?" autocomplete="on">
<button type="button" class="plussymbol">
<i class="fas fa-plus-square"></i>
</button>
</form>
</body>
</html>
Simply you can do like this.
.plussymbol{
font-size: 40px;
color: #a4508b;
background-color:transparent;
border-radius: 20px;
border: none;
display: inline-block;
cursor: pointer;
margin-left: -60px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
check code
I have share one picture of my website login page below and I want zoom text animation on hover for "Sign In" button which is ...
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
check Image:
From what you described, I believe this is what you want. I've added font-weight:bold; and font-size: 1.4em; to the .inputbtn input:hover{} CSS instruction.
This might not be the exact amount text zooming that you wanted but you can easily configure it as you wish.
Run and test:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20);
font-weight:bold;
font-size: 1.4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
You could try something along the lines of ':placeholder:hover' in order to target the selector which lets you hover over the element and will affect the text within the placeholder. After that you could try to put the 'transition' property within the curly braces - {} - and set the 'font-size' property for the text size you desire. On theory it should adjust the font size to the value you've set whenever you hover your cursor over the placeholder.
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
.text {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>About me</h1>
</body>
</html>
----------------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Major</h1>
</body>
</html>
--------------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="gallery">
<h1>Gallery</h1>
</body>
</html>
-------------------------------------------------
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="contact">
<h1>contact</h1>
</body>
</html>
I am creating a website for school... but I haven't been able to link the different HTML pages to the css (for changing the background color etc...)I have 4 HTML pages, I don't know if I have to add divs or something like that, could you please help me to link those html with the main css ? .. I'm going to post the css page, and the three html pages. thank you so much, I would be so glad if you can help me with that.
You need to link your CSS style sheets to each page, in your case you will need to upload your CSS files to your server and reference them.
Convention dictates that they are added in the <head>, i.e:
<head>
<link href="PATH_TO_CSS_FILE.css" rel="stylesheet">
</head>
<body>
... page HTML ...
</body>
The snippet you have provided works as it should, the only CSS style that you have in your demonstration HTML (which I imagine is a condensed example) is the body tag.
If the CSS styles are not being applied to your working HTML pages then it is likely that you have not correctly linked the CSS stylesheet. You can check the console within your browser to see if there are any errors (i.e. if the stylesheet is not being loaded).
If you wanted your headings (h1) to use the effects you've dictated in .text, then you need to add the class to the element, i.e.:
<h1 class="text">About Me</h1>
I have shown a working snippet below.
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
.text {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="text">About me</h1>
</body>
</html>
Classes must be applied to each element in order for the styles to take effect. If you want all headings to have the glow effect, etc that you have coded then you may want to think about changing .text to h1 in your stylesheet, so that you do not need to apply the class each time you create a header. For example:
body{
background-color: black;
margin-top: 45px;
}
.backdrop {
background: url(../images/header.JPG) center;
background-size: contain;
margin: auto;
margin-top: 185px;
width: 85vw;
}
h1 {
text-shadow: 0 0 9px white;
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode:multiply;
font: bolder 10vw 'arial';
text-align: center;
margin:0;
animation: glow 3s infinite;
}
#keyframes glow {
0% {
text-shadow: 0 0 10px white;
}
15% {
text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
-2px -2px 10px rgba(255, 255, 255, 1);
}
30% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
-2px -2px 4px rgba(255, 255, 255, .7);
}
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 10px;
padding-top: 30px;
margin-left: 155px;
}
li a:hover {
color: #740001;
}
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>About me</h1>
</body>
</html>
your css is working but you have set the body background color to black and your text is also black
try replacing your first css rule with
body{
background-color: white;
margin-top: 45px;
}
I am trying to create a simple application using phone gap ,but it seems css is not rendering as expected in the phone gap in IOS for buttons
In browser the button displays as expected ,but in phonegap the style displayed differently.
<!DOCTYPE html>
<html>
<head>
<title>Counter V 1.0</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/counter.css">
</head>
<body>
<h1><a id="clicks">0</a></h1>
<div class="half">
<input type="submit" value="+" class="increase-button" onClick="increase()">
<input type="submit" value="-" class="decrease-button" onClick="decrease()">
</div>
<div class="half">
<p><input type="submit" value="Reset" class="reset-button" onClick="reset()"></p>
</div>
</body>
</html>
![enter image description here][1]Counter.css
.increase-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 40px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #27ae60;
border: 0;
}
.decrease-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #e74c3c;
border: 0;
}
.reset-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #3498db;
border: 0;
}
I have tried to replicate what you have mentioned here. I was able to get the perfect result. For the same i have attached the image as under. Is this what you are expecting ?
You can download the project at here
EDIT :
Here is the solution
update your css to this
.increase-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 40px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #27ae60;
border: 0;
width: 50%;
height: 60px;
color: white;
text-align: center;
-webkit-appearance: none;
border-radius: 0px !important;
}
.decrease-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #e74c3c;
border: 0;
-webkit-appearance: none;
border-radius: 0px !important;
}
.reset-button{
position: relative;
vertical-align: top;
width: 50%;
height: 60px;
padding: 0;
font-size: 22px;
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #3498db;
border: 0;
-webkit-appearance: none;
border-radius: 0px !important;
}
Reason was uiwebview was adding additional -webkit-appearance:pushbutton and border-radius:20px which i have override in last two lines of css.
Hope this helps