I would like to reproduce the following item in HTML/CSS:
The icon is actually from font awesome.
Here is what I achieved so far:
https://jsfiddle.net/0Lewug6p/1/
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="search__filters__option">
<div class="filter__icon"><i class="fas fa-dog"></i></div>
Animaux autorisés
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Raleway", sans-serif;
}
.search__filters__option {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 15px;
border-bottom: 2px solid #f2f2f2;
border-top: 2px solid #f2f2f2;
border-right: 2px solid #f2f2f2;
text-align: center;
border-radius: 20px;
font-weight: bold;
margin-right: 10px;
}
.search__filters__option:hover {
background-color: #deebff;
color: #0065fc;
cursor: pointer;
}
.filter__icon {
margin-right: 10px;
height: 35px;
width: 35px;
border-radius: 50%;
color: #0065fc;
background-color: #deebff;
display: flex;
justify-content: center;
align-items: center;
}
I have two issues concerning my code:
1- It doesn't perfectly match what's in the image, (For example, the colored circle doesn't have the right size).
2- I don't know if my code is clean, as I'm still pretty new to CSS and wanna learn best practices.
Thanks in advance for your help and explanations!
Your code looks good. Instead of your border definitions, you can use box-shadow:inset like this:
.search__filters__option {
box-sizing: border-box;
-webkit-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
-moz-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
box-shadow: inset 0px 0px 0px 2px #f2f2f2;
}
Also described placing-border-inside-of-div-and-not-on-its-edge.
Demo: https://jsfiddle.net/pr6htj01/
For more opacity, use the rgb notation for the color which supports an opacity value as last parameter and/or a darker color:
-webkit-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
-moz-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
Demo: https://jsfiddle.net/z7b6ey19/
Related
I am trying to make something similar to the button showed in picture.
I tried the following:
.button {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:red;
font-family:Arial;
font-size:12px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
The above CSS3 code gave me the following:
I am not sure how to make the same button with a border that looks similar to the picture.
first of all the 4 parts of the box shadow are x offset y offset and blur and the spread I did some tweaks to your code and got this output.
.button {
box-shadow: inset 0px 0px 5px 2px #000;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color: #ededed;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
</head>
<body>
<div class="button">
quit
</div>
</body>
</html>
There's no CSS property called qlineargradient so it's been removed. The box-shadow property in the example below has 3 values which makes layers top to bottom.
button {
display: inline-block;
padding: 6px 24px;
border: 1px solid #dcdcdc;
border-radius: 6px;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: #fff;
cursor: pointer;
}
button:hover {
box-shadow:
rgba(50, 50, 93, 0.55) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
<button>QUIT</button>
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.
I am trying to center a div, but it is not working. As you can see in the code below, I have the margin set, but the div doesn't move to the center.
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
.one:hover {
border-color: #ED08FD;
}
.two:hover {
border-color: #0821FD;
}
.three:hover {
border-color: #FF41C0;
}
.name:hover {
border-color: #DAD8D9;
}
.name {
color: white;
padding-left: 15px;
}
.main-body {
text-align: center;
}
hr {
border: 1px solid #6E6E6E;
}
.circle-row {
width: 100px;ext-align: left;
padding-left: 4cm;
font-size: 35px;
}
.welcomeHeader, .background {
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have tried setting the width to 50%, which works, but since have the ul width set to 700px the div doesn't center properly.
If you want to center your ul element, try adding this:
body {width:100%;}
ul {margin:auto;}
please see: https://jsfiddle.net/ty8858hq/
on your styles.css try changing this:
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
to this:
ul {
list-style-type: none;
background-color: black;
margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
this should make your navbar to display at the center of your page, i hope this works well for you!
The property I'm using to center, or at least make it close to center should work. What I've done is added this css.
.one {
margin-left: 125px /*you can modify this*/;
}
You can also change the .one to .name, but .one looks better;
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one {
margin-left: 125px;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I am trying to implement bootstrap tokenfield with typeahead using JSON.
<input type="text" class="span" id="typeahead" data-provide="typeahead">
I have these two functions which work very well in isolation, but when I try to combine them it does not work.
Typeahead:
$("#typeahead").typeahead({
source: function(typeahead,query){
$.ajax({
url: 'getgoups.php',
type:'POST',
data:'query'+query,
dataType:'JSON',
async:false,
success:function(data){
typeahead.process(data);
}
});
}
})
TokenField
I get stuck when I have to combine the two.
$("#typeahead").tokenfield({
typeahead:[ source: ]
});
I finally got it, after all those times of trying:
<!DOCTYPE>
<html lang="en">
<head>
<title>Andani Masikhwa</title>
<link href="bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<!--<link href="tokenfield-typeahead.css" type="text/css" rel="stylesheet">-->
</head>
<style>
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;
}
</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-tokenfield.js" charset="UTF-8"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('#search').tokenfield({
typeahead:{
name : 'sear',
remote: {
url : 'connection.php?query=%QUERY'
},
success:function(data){
process(data);
}
}
});
});
</script>
<body>
<input type="text" class="form-control" id="search" value="andani" />
</body>
</html>
I am trying to make a simple splash page for an event, but each time I try to load the page on a mobile device it would take forever to load, then it would freeze.
At fist I thought it could be due to the background picture being extremely large. (memory wise) So I re saved the pic at a lower quality.
That cut down the load time a lot, but the mobile sites still freeze up.
I have a custom font, (Could that be the problem?)
Here is my HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>The Apocalypse Is HERE!</title>
<!-- Custom CSS for the 'Full' Template -->
<link href="css/newStyle.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$(function() {
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});</script>
</head>
<body>
<div id="mainWrapper">
<div id="topWrapper">
<div id="zombieWrap"><center>The Zombie Apocalypse Is Here!</center>
</div>
<center>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/tb0Op6cpY2s" frameborder="0" allowfullscreen></iframe>
</div>
<br>
<center>
<div id="bottomWrapper">
<div class="leftWrapper">Click Here For Tickets</div>
<div class = "rightWrapper">Click Here For the Richmond Underground Home Page</div>
</div>
</center>
</div>
</div>
</body>
Here is the CSS
/* GLOBAL STYLES
-------------------------------------------------- */
#font-face
{
font-family: 'zombieF';
src: url('zombieFont.ttf');
}
/*------------------------------------------------------------------------------------------NON MOBILE=================*/
body{
background-color:black;
background: url(wall.jpg);
background-size:50%,50%;
background-repeat: repeat;
}
#mainWrapper{
margin-top:2.5em;
margin-left: 10%;
margin-right: 10%;
}
#topWrapper{
width:100%;
}
#videoWrapper{
margin-top:1em;
}
#zombieWrap{
font-family: zombieF;
font-size: 50px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
#video{
max-width: 400px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
-moz-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
font-family: zombieF;
font-size: 25px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
.leftWrapper{
width:50%;
float:left;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
a:visited {
/* Applies to all visited links */
text-decoration: none;
color: white;
}
.leftWrapper:hover { -moz-box-shadow: 0 0 10px #white; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
.rightWrapper{
width:50%;
float:right;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
#media only screen and (max-width: 500px){
.rightWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
padding-top:15px;
}
.leftWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
}
#zombieWrap{
border-top:5px;
font-family: zombieF;
font-size: 30px;
color:red;
}
#mainWrapper{
height:100%;
margin-left: 10%;
margin-right: 10%;
}
#containingBlock {
width:50%;
}
video { width: 50% !important; height: auto !important; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Maybe I am missing something. Anyone Have any suggestions?