I am trying to remove the neon glow of the tags in my navigation slide. The problem is that those tag also applies to the tags for other elements on my html page that I actually want to keep neon. Is there a way I can still style those elements while unstyling the tags in my navigation slide? I'm 99% sure its the class - #navigation ul li a { that I am trying to make it look normal, but it's not working at all. I have tried text-decoration: none, I've tried renaming it as well. So far nothing is working. Any advise would be great. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<title>Responsive Portfolio Landing Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header -->
<section class="banner" id="sec">
<header>
<div id="toggle" onclick="toggle()"></div>
</header>
<div class="content">
<h2>Hello World,<br />I'm <span>Chaz Carothers </span></h2>
<p>
A front-end developer who focuses on writing clean code while
producing beautiful and user-friendly applications.
</p>
<br />
<button>
<a
href="https://chaz-carothers.netlify.app"
class="button"
style="margin-top: 0"
>Tree.Link</a
>
</button>
</div>
<ul class="sci">
<li>
<a href="https://github.com/Baobab-Prince"
><img src="img/git.png"
/></a>
</li>
<li>
<a href="https://twitter.com/BaobabPrince"
><img src="img/twitter.png"
/></a>
</li>
<li>
<a href="https://www.linkedin.com/in/chaz-carothers-169117194/"
><img src="img/linkedin.png"
/></a>
</li>
</ul>
</section>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<script type="text/javascript">
function toggle() {
var sec = document.getElementById('sec');
var nav = document.getElementById('navigation');
sec.classList.toggle('active');
nav.classList.toggle('active');
}
</script>
</body>
</html>
-------------------------------CSS-------------------------------
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px 100px;
z-index: 1000;
transition: 0.6s;
}
header .logo {
margin: 0px;
padding: 0px;
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
}
header #toggle {
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
header #toggle:before {
content: '';
position: absolute;
top: 7px;
width: 100%;
height: 2px;
background: #fff;
}
header #toggle:after {
content: '';
position: absolute;
bottom: 7px;
width: 100%;
height: 2px;
background: #fff;
}
.banner.active #toggle:before {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.banner.active #toggle:after {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.banner {
position: relative;
width: 100%;
padding: 100px;
min-height: 100vh;
background: url(inline_image_preview.jpeg);
background-size: cover;
display: flex;
align-items: center;
transition: 0.5s;
z-index: 2;
}
.banner.active {
transform: translate(-400px);
}
.banner .content {
max-width: 600px;
}
.banner .content h2 {
color: #fff;
font-size: 2.5em;
}
.banner .content h2 span {
color: #87ceeb;
font-size: 1.2em;
}
.banner .content p {
font-size: 1.2em;
color: white;
font-weight: 300;
}
.banner .content a {
position: relative;
display: inline-block;
margin-top: 20px;
background: #fff;
color: #000;
padding: 10px 30px;
text-decoration: none;
font-size: 1.2em;
font-weight: 500;
}
button {
--glow-color: rgb(217, 176, 255);
--glow-spread-color: rgba(191, 123, 255, 0.781);
--enhanced-glow-color: rgb(231, 206, 255);
--btn-color: rgb(100, 61, 136);
outline: none;
border: 0.25em solid var(--glow-color);
padding: 0.5em 0.5em;
color: var(--glow-color);
font-size: 15px;
font-weight: bold;
background-color: var(--btn-color);
border-radius: 1em;
outline: none;
box-shadow: 0 0 1em 0.25em var(--glow-color), 0 0 4em 1em var(--glow-spread-color), inset 0 0 0.75em 0.25em var(--glow-color);
text-shadow: 0 0 0.5em var(--glow-color);
position: relative;
transition: all 0.3s;
}
button::after {
pointer-events: none;
content: '';
position: absolute;
top: 120%;
left: 0;
height: 100%;
width: 100%;
background-color: var(--glow-spread-color);
filter: blur(2em);
opacity: 0.7;
transform: perspective(1.5em) rotateX(35deg) scale(1, 0.6);
}
button:hover {
color: var(--btn-color);
background-color: var(--glow-color);
box-shadow: 0 0 1em 0.25em var(--glow-color), 0 0 4em 2em var(--glow-spread-color), inset 0 0 0.75em 0.25em var(--glow-color);
}
button:active {
box-shadow: 0 0 0.6em 0.25em var(--glow-color), 0 0 2.5em 2em var(--glow-spread-color), inset 0 0 0.5em 0.25em var(--glow-color);
}
.sci {
position: absolute;
display: flex;
flex-direction: column;
right: 100px;
}
.sci li {
list-style: none;
}
.sci li a {
position: relative;
display: grid;
place-items: center;
width: 50px;
height: 50px;
text-decoration: none;
border: 1px solid #fff;
margin: 10px 0 0;
}
.sci li a:hover {
background: #0f2537;
}
.sci li a img {
filter: invert(1);
max-width: 20px;
mix-blend-mode: difference;
}
#navigation {
position: fixed;
top: 0;
right: -200px;
width: 400px;
height: 100vh;
background: #643d88;
z-index: 1;
display: grid;
place-items: center;
transition: 0.5s;
}
#navigation.active {
right: 0;
}
#navigation ul {
display: flex;
flex-direction: column;
}
#navigation ul li {
list-style: none;
}
#navigation ul li a {
color: #ebebeb;
text-decoration: none;
display: inline-block;
font-size: 2em;
font-weight: 600;
text-transform: uppercase;
}
a {
--glow-color: rgb(217, 176, 255);
--glow-spread-color: rgba(191, 123, 255, 0.781);
--enhanced-glow-color: rgb(231, 206, 255);
--btn-color: rgb(100, 61, 136);
outline: none;
color: var(--glow-color);
background-color: var(--btn-color);
outline: none;
box-shadow: 0 0 1em 0.25em var(--glow-color), 0 0 4em 1em var(--glow-spread-color), inset 0 0 0.75em 0.25em var(--glow-color);
text-shadow: 0 0 0.5em var(--glow-color);
position: relative;
transition: all 0.3s;
}
a:hover {
color: var(--btn-color);
background-color: var(--glow-color);
}
a.logo {
style: none;
text-decoration: none;
color: inherit;
}
#media (max-width: 767px) {
header {
padding: 20px 50px;
}
.banner {
padding: 100px 50px 150px;
}
.banner .content h2 {
font-size: 1.8em;
}
.banner .content p,
.banner .content a {
font-size: 1em;
}
.banner.active {
transform: translate(-250px);
}
#navigation {
width: 300px;
}
#navigation ul li a {
font-size: 1.5em;
margin: 5px 0;
}
.sci {
position: absolute;
bottom: 50px;
right: initial;
flex-direction: row;
}
.sci li a {
margin: initial;
margin-right: 10px;
}
}
You neon style are applied to all <a>. That's why all your nav link have this style.
Change your neon style applied to your a{} tag to the right selector. It will resolve the issue.
a{ //change your selector here.
--glow-color: rgb(217, 176, 255);
--glow-spread-color: rgba(191, 123, 255, 0.781);
--enhanced-glow-color: rgb(231, 206, 255);
--btn-color: rgb(100, 61, 136);
outline: none;
color: var(--glow-color);
background-color: var(--btn-color);
outline: none;
box-shadow: 0 0 1em 0.25em var(--glow-color),
0 0 4em 1em var(--glow-spread-color),
inset 0 0 0.75em 0.25em var(--glow-color);
text-shadow: 0 0 0.5em var(--glow-color);
position: relative;
transition: all 0.3s;
}
Related
This question already has answers here:
Break long word with CSS
(6 answers)
Closed last year.
In the example code - I have given box 3 and box 4 widths of 200px I don't actually care for using these widths, but I have given them colours so you can see my problem better visually.
The problem is my text is not being contained by the parent <div> with a set (hardcoded) pixel width in box 3 especially it runs waaay out to the right in 1 line instead of wrapping inside the <div>. For box 4, I can understand it's trying to stretch to the end, but if it were any longer it would again just run outside of the grid anyways. So theres something I'm missing to help wrap content. How do I solve this problem?
* {
margin:0;
padding:0;
}
html {
box-sizing: border-box;
font-size: 30px;
font-family: 'Bitter', serif;
}
body{
background: rgb(7, 7, 7);
color: #fff;
}
.imgContainer{
width: 100%;
height: fit-content;
background-color: black;
pointer-events: none;
user-select: none;
}
.mySlides {
opacity: 0.5;
overflow: hidden;
background-position: center;
width: 100%;
height: 650px;
max-height: 75vh;
pointer-events: none;
user-select: none;
}
.bodyC {
padding-top: 75px;
max-width: 360px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyC2 {
padding-left: 180px;
padding-top: 250px;
max-width: 450px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyContainer {
display: flex;
width: 100%;
padding-right: 80px;
padding-bottom: 80px;
justify-content: center;
min-height: 50vh;
}
h3 {
font-size: 36px;
margin-bottom:10px;
font-weight: 700;
}
h4 {
text-transform: uppercase;
font-weight: 700;
font-size: 27px;
margin-bottom:10px;
}
.logobutton {
padding-right: 45px;
user-select: none;
}
.homenugget{
height:70px;
width:50px;
position:fixed;
top: 5px;
left: 32px;
opacity:0;
user-select: none;
}
.smallu {
height: 50px;
width:50px;
user-select: none;
}
.container {
margin: 0 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav {
position:relative;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: #212121;
padding: 16px 32px;
border-bottom: 3px solid rgb(37, 164, 173);
}
h1 {
color: #ffffff ;
font-size: 28px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background-color: #eeeeee;
border-radius: 6px;
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger:hover span:nth-child(2) {
transform: translateX(10px);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(15px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
background-color:rgb(37, 164, 173);
}
.hamburger.is-active:hover span {
background-color: rgb(75, 243, 255);
filter: blur(0.5px);
box-shadow: 1px -1px rgb(75, 243, 255);
}
.menu {
display:none;
flex: 1 1 0%;
justify-content: center;
margin: 0 -16;
letter-spacing: 2px;
}
.menu a{
color: ivory;
margin: 0 16;
font-weight: 700;
text-decoration: none;
transition: 0.4s;
padding: 5px 16px;
border-radius: 50px;
}
.menu a.is-active, .menu a:hover{
background-color: rgba(88, 223, 233, 0.295);
color: rgb(75, 243, 255);
}
.dropdown {
position: relative;
}
.dropdownMenu {
position: absolute;
width: 300px;
z-index: 100;
right: -60px;
top: calc(100% + 32px);
border-top: 1px solid rgb(75, 243, 255);
border-bottom: 3px solid rgb(75, 243, 255);
border-left: 3px solid rgb(55, 225, 240);
background-color: #212121;
border-radius: 0 0 15px 15px;
opacity: 0;
}
.link{
display: block;
text-align: left;
margin: 10px;
font-size: 30px;
color: ivory;
text-decoration: none;
opacity: 1;
}
.dropdownMenu a:hover {
background-color: rgba(88, 223, 233, 0.295);
border-radius: 5px;
color: rgb(75, 243, 255);
text-decoration: none;
opacity: 1;
}
.wth{
padding-bottom: 1000px;
}
.footer {
position: relative;
width: 100%;
bottom: 0 ;
text-align: left;
background-color: #212121;
padding:50px 0 50px 0;
}
.footer-container {
margin-left: 1em;
}
.footer h5 {
color: #fff;
}
.footer h5 {
margin-bottom: 20px;
}
.footer p {
color: rgba(255, 255, 255, 0.25);
font-size:16px;
line-height:22px;
}
.hearted {
color:red;
font-size: 12px;
}
.opacityStyle{
opacity: 1;
}
.subscribe {
width: 100%;
background-color: rgb(92, 89, 89);
background-image: url('../images/backgrounds/parallax-bg.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.subscribe >.sub-container {
padding-top: 80px;
padding-bottom: 80px;
}
.subscribe-title h2 {
font-weight: 600;
font-size: 23px;
color: #fff;
letter-spacing:3px;
margin:0 3%;
line-height:70px;
text-transform:uppercase;
}
.subscribe-form {
margin-top: 6px;
}
.subscribe-form input[type=text] {
width: 65%;
height: 60px;
display: block;
padding: 0 20px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
line-height: 60px;
letter-spacing:1px;
font-size:15px;
font-weight:300;
float: left;
}
.subscribe-form input:focus {
outline: 0;
}
.subscribe-form input[type=submit] {
width: 35%;
height: 62px;
display: flex;
position: absolute;
right: 5px;
justify-content: center;
background-color: rgb(35, 142, 151);
border: 1px solid rgb(35, 142, 151);
color: #fff;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
font-weight: 700;
font-size: 33px;
transition: all 0.125s ease-in-out 0s;
-moz-transition: all 0.125s ease-in-out 0s;
-webkit-transition: all 0.125s ease-in-out 0s;
-o-transition: all 0.125s ease-in-out 0s;
-ms-transition: all 0.125s ease-in-out 0s;
}
.subscribe-form input[type=submit]:hover {
background-color: rgb(23, 90, 95);
border: 1px solid rgb(23, 90, 95);
color:rgb(75, 243, 255);
}
.error_message {
color:#fc6e51;
padding-bottom:15px;
font-size:13px;
line-height:30px;
}
#success_page {
color:#9ce726;
padding-bottom:10px;
font-size:12px;
}
#success_page h3 {
font-size:17px;
font-weight:400px;
color:#4ab217;
}
#success_page p {
font-size:12px;
font-weight:400px;
color:#b3b3b3;
}
.box1 {
grid-column: 1/4;
text-align: center;
background: chartreuse;
}
.box2 {
grid-column: 1 / 2;
grid-row: 2/2;
width:300px;
height: 300px;
background:blueviolet
}
.box3 {
width: 200px;
grid-column: 2/3 ;
grid-row:2/3;
background: blue;
}
.box4 {
width: 200px;
grid-column: 1/4;
grid-row:4/4;
background: #fc6e51;
}
.wrapper{
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(1, 1fr);
gap:10px;
max-height: 55vh;
background: #212121;
}
.megawrap{
display: grid;
grid-auto-flow: column;
height: 350px;
width: 200px;
gap: 20px;
}
#media (min-width: 1080px){
.bodyC2{
max-width: 360px;
padding-left: 150px;
}
.bodyC2{
flex-direction: column;
padding-top: 200px;
padding:50px;
padding-left: 200px;
margin-left: 100px;
}
.bodyC {
padding:50px;
margin-left: 25px;
}
}
#media (max-width: 1175px){
.bodyC2{
max-width: 360px;
padding-left: 75px;
}
.bodyC2{
flex-direction: column;
padding-top: 200px;
padding:50px;
padding-left: 0px;
margin-left: 50px;
}
.bodyC {
padding:50px;
margin-left: 25px;
}
}
#media (max-width: 1400px){
.bodyC2{
max-width: 360px;
padding-left: 75px;
}
.bodyC2{
flex-direction: column;
padding-top: 200px;
padding:50px;
padding-left: 0px;
margin-left: 100px;
}
.bodyC {
padding:50px;
margin-left: 25px;
}
}
#media (min-width: 975px) {
.hamburger{
display: none;
}
.dropdown {
display: none;
}
.menu{
display:flex;
}
.bodyContainer{
flex-direction: row;
}
.bodyC2{
flex-direction: column;
padding-top: 100px;
}
}
#media (max-width: 975px){
.bodyContainer{
flex-direction: column;
}
.bodyC2{
flex-direction: column;
padding-top: 50px;
font-size: .8em;
margin-left: 150px;
}
.bodyC {
font-size: .8em;
margin-left: 50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&family=Roboto+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<h1>Ideas Imprint</h1>
<div class="menu">
Events
About
Login
Dashboard
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
Events
About
Login
Dashboard
</div>
</div>
</div>
< /nav>
<div class="megawrap">
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class= "box4">
box4box4box4box4box4box4box4box4box4box4box4
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class= "box4">
box4box4box4box4box4box4box4box
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class= "box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class= "box4">
box4box4box4box4box4box4box4box4box
</div>
</div>
</div>
<div class="wth"></div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
<p> Made with <span class="hearted"> ❤</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<!-- Footer section -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Make use of word-wrap property. Add word-wrap: break-word; on your .box3 and .box4 classes. More on it here.
* {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 30px;
font-family: 'Bitter', serif;
}
body {
background: rgb(7, 7, 7);
color: #fff;
}
.imgContainer {
width: 100%;
height: fit-content;
background-color: black;
pointer-events: none;
user-select: none;
}
.mySlides {
opacity: 0.5;
overflow: hidden;
background-position: center;
width: 100%;
height: 650px;
max-height: 75vh;
pointer-events: none;
user-select: none;
}
.bodyC {
padding-top: 75px;
max-width: 360px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyC2 {
padding-left: 180px;
padding-top: 250px;
max-width: 450px;
font-weight: 200;
font-size: 0.8rem;
}
.bodyContainer {
display: flex;
width: 100%;
padding-right: 80px;
padding-bottom: 80px;
justify-content: center;
min-height: 50vh;
}
h3 {
font-size: 36px;
margin-bottom: 10px;
font-weight: 700;
}
h4 {
text-transform: uppercase;
font-weight: 700;
font-size: 27px;
margin-bottom: 10px;
}
.logobutton {
padding-right: 45px;
user-select: none;
}
.homenugget {
height: 70px;
width: 50px;
position: fixed;
top: 5px;
left: 32px;
opacity: 0;
user-select: none;
}
.smallu {
height: 50px;
width: 50px;
user-select: none;
}
.container {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
nav {
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 99;
background-color: #212121;
padding: 16px 32px;
border-bottom: 3px solid rgb(37, 164, 173);
}
h1 {
color: #ffffff;
font-size: 28px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.hamburger {
display: block;
position: relative;
z-index: 1;
user-select: none;
appearance: none;
border: none;
outline: none;
background: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background-color: #eeeeee;
border-radius: 6px;
z-index: 1;
transform-origin: 0 0;
transition: 0.4s;
}
.hamburger:hover span:nth-child(2) {
transform: translateX(10px);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
transform: translateX(15px);
}
.hamburger.is-active span:nth-child(3) {
transform: translate(-3px, 3px) rotate(-45deg);
background-color: rgb(37, 164, 173);
}
.hamburger.is-active:hover span {
background-color: rgb(75, 243, 255);
filter: blur(0.5px);
box-shadow: 1px -1px rgb(75, 243, 255);
}
.menu {
display: none;
flex: 1 1 0%;
justify-content: center;
margin: 0 -16;
letter-spacing: 2px;
}
.menu a {
color: ivory;
margin: 0 16;
font-weight: 700;
text-decoration: none;
transition: 0.4s;
padding: 5px 16px;
border-radius: 50px;
}
.menu a.is-active,
.menu a:hover {
background-color: rgba(88, 223, 233, 0.295);
color: rgb(75, 243, 255);
}
.dropdown {
position: relative;
}
.dropdownMenu {
position: absolute;
width: 300px;
z-index: 100;
right: -60px;
top: calc(100% + 32px);
border-top: 1px solid rgb(75, 243, 255);
border-bottom: 3px solid rgb(75, 243, 255);
border-left: 3px solid rgb(55, 225, 240);
background-color: #212121;
border-radius: 0 0 15px 15px;
opacity: 0;
}
.link {
display: block;
text-align: left;
margin: 10px;
font-size: 30px;
color: ivory;
text-decoration: none;
opacity: 1;
}
.dropdownMenu a:hover {
background-color: rgba(88, 223, 233, 0.295);
border-radius: 5px;
color: rgb(75, 243, 255);
text-decoration: none;
opacity: 1;
}
.wth {
padding-bottom: 1000px;
}
.footer {
position: relative;
width: 100%;
bottom: 0;
text-align: left;
background-color: #212121;
padding: 50px 0 50px 0;
}
.footer-container {
margin-left: 1em;
}
.footer h5 {
color: #fff;
}
.footer h5 {
margin-bottom: 20px;
}
.footer p {
color: rgba(255, 255, 255, 0.25);
font-size: 16px;
line-height: 22px;
}
.hearted {
color: red;
font-size: 12px;
}
.opacityStyle {
opacity: 1;
}
.subscribe {
width: 100%;
background-color: rgb(92, 89, 89);
background-image: url('../images/backgrounds/parallax-bg.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.subscribe>.sub-container {
padding-top: 80px;
padding-bottom: 80px;
}
.subscribe-title h2 {
font-weight: 600;
font-size: 23px;
color: #fff;
letter-spacing: 3px;
margin: 0 3%;
line-height: 70px;
text-transform: uppercase;
}
.subscribe-form {
margin-top: 6px;
}
.subscribe-form input[type=text] {
width: 65%;
height: 60px;
display: block;
padding: 0 20px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
line-height: 60px;
letter-spacing: 1px;
font-size: 15px;
font-weight: 300;
float: left;
}
.subscribe-form input:focus {
outline: 0;
}
.subscribe-form input[type=submit] {
width: 35%;
height: 62px;
display: flex;
position: absolute;
right: 5px;
justify-content: center;
background-color: rgb(35, 142, 151);
border: 1px solid rgb(35, 142, 151);
color: #fff;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
font-weight: 700;
font-size: 33px;
transition: all 0.125s ease-in-out 0s;
-moz-transition: all 0.125s ease-in-out 0s;
-webkit-transition: all 0.125s ease-in-out 0s;
-o-transition: all 0.125s ease-in-out 0s;
-ms-transition: all 0.125s ease-in-out 0s;
}
.subscribe-form input[type=submit]:hover {
background-color: rgb(23, 90, 95);
border: 1px solid rgb(23, 90, 95);
color: rgb(75, 243, 255);
}
.error_message {
color: #fc6e51;
padding-bottom: 15px;
font-size: 13px;
line-height: 30px;
}
#success_page {
color: #9ce726;
padding-bottom: 10px;
font-size: 12px;
}
#success_page h3 {
font-size: 17px;
font-weight: 400px;
color: #4ab217;
}
#success_page p {
font-size: 12px;
font-weight: 400px;
color: #b3b3b3;
}
/* ------------------------------------------------------------------------------
THE IMPORTANT PART
-------------------------------------------------------------------------------*/
.box1 {
grid-column: 1/4;
text-align: center;
background: chartreuse;
}
.box2 {
grid-column: 1 / 2;
grid-row: 2/2;
width: 300px;
height: 300px;
background: blueviolet
}
.box3 {
width: 200px;
grid-column: 2/3;
grid-row: 2/3;
background: blue;
word-wrap: break-word;
}
.box4 {
width: 200px;
grid-column: 1/4;
grid-row: 4/4;
background: #fc6e51;
word-wrap: break-word;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(1, 1fr);
gap: 10px;
max-height: 55vh;
background: #212121;
}
.megawrap {
display: grid;
grid-auto-flow: column;
height: 350px;
width: 200px;
gap: 20px;
}
/* ------------------------------------------------------------------------------
THE IMPORTANT PART END
-------------------------------------------------------------------------------*/
#media (min-width: 1080px) {
.bodyC2 {
max-width: 360px;
padding-left: 150px;
}
.bodyC2 {
flex-direction: column;
padding-top: 200px;
padding: 50px;
padding-left: 200px;
margin-left: 100px;
}
.bodyC {
padding: 50px;
margin-left: 25px;
}
}
#media (max-width: 1175px) {
.bodyC2 {
max-width: 360px;
padding-left: 75px;
}
.bodyC2 {
flex-direction: column;
padding-top: 200px;
padding: 50px;
padding-left: 0px;
margin-left: 50px;
}
.bodyC {
padding: 50px;
margin-left: 25px;
}
}
#media (max-width: 1400px) {
.bodyC2 {
max-width: 360px;
padding-left: 75px;
}
.bodyC2 {
flex-direction: column;
padding-top: 200px;
padding: 50px;
padding-left: 0px;
margin-left: 100px;
}
.bodyC {
padding: 50px;
margin-left: 25px;
}
}
#media (min-width: 975px) {
.hamburger {
display: none;
}
.dropdown {
display: none;
}
.menu {
display: flex;
}
.bodyContainer {
flex-direction: row;
}
.bodyC2 {
flex-direction: column;
padding-top: 100px;
}
}
/* Once completely tiny shrink text to columns */
#media (max-width: 975px) {
.bodyContainer {
flex-direction: column;
}
.bodyC2 {
flex-direction: column;
padding-top: 50px;
font-size: .8em;
margin-left: 150px;
}
.bodyC {
font-size: .8em;
margin-left: 50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>III</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&family=Roboto+Mono:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rock+3D&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div class="container">
<div class="logobutton">
<img class="smallu" src="images/ulogo-white.jpg">
<a class="homenugget" href="home.html"></a>
</div>
<h1>Ideas Imprint</h1>
<div class="menu">
Events
About
Login
Dashboard
</div>
<div class="dropdown">
<button class="hamburger">
<span> </span>
<span></span>
<span></span>
</button>
<div class="dropdownMenu">
Events
About
Login
Dashboard
</div>
</div>
</div>
< /nav>
<div class="megawrap">
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class="box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class="box4">
box4box4box4box4box4box4box4box4box4box4box4
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class="box3">
box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class="box4">
box4box4box4box4box4box4box4box
</div>
</div>
<div class="wrapper">
<div class="box1">Hello I'm a Head</div>
<img class="box2" src="images/7.jpg" alt="">
<div class="box3">
box3box3box3box3box3box3box3box3box3box3box3box3
</div>
<div class="box4">
box4box4box4box4box4box4box4box4box
</div>
</div>
</div>
<div class="wth"></div>
<!-- Footer section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-row">
<div class="Footer-text-left">
<p>Copyright © 2022 Ideas Imprint Inc. All Rights Reserved.</p>
<p> Made with <span class="hearted"> ❤</span></p>
</div>
</div>
</div>
<!-- footer top -->
</footer>
<!-- Footer section -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Run the snippet below and the menu design has a hover effect color change. However, my problem is that in conjunction with the gradient effect to hide the extra long text on this menu design, I cannot get the hover to appear above the gradient.
Reading up on using and testing with z-index appears it's not possible with pseudo elements like I'm using.
Any ideas?
<li class="topic_nav_row">
<div class="topic_nav_title">
#Google
</div>
<div class="topic_nav_arrow">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
a,
li {
color: white;
text-decoration: none;
font-family: 'Abel';
}
a:active {
color: white;
text-decoration: none;
}
/* NAV > LIST > ROW */
li.topic_nav_row {
width: 100%;
height: 27px;
line-height: 20pt;
list-style-type: none;
display: block;
cursor: pointer;
clear: both;
position: relative;
}
li.topic_nav_row:hover {
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
/* LIST > ROW > TITLE */
.topic_nav_title {
font-family: Verdana;
width: 80%;
height: 27px;
padding-left: 10%;
position: relative;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
color: white;
}
.topic_nav_title a {
height: 20px;
}
.topic_nav_title::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}
.topic_nav_title:hover {
background-color: #514e4e;
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
.topic_nav_container {
width: 180px;
height: 100px;
float: left;
overflow: hidden;
position: fixed;
z-index: 10;
margin: 0;
padding: 0;
background-color: #3c3939;
}
<div class="topic_nav_container">
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item One That Is Long
</div>
</li>
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item Two That Is Too
</div>
</li>
</div>
you can get hover the gradient disabling it...... like the example
a,
li {
color: white;
text-decoration: none;
font-family: 'Abel';
}
a:active {
color: white;
text-decoration: none;
}
/* NAV > LIST > ROW */
li.topic_nav_row {
width: 100%;
height: 27px;
line-height: 20pt;
list-style-type: none;
display: block;
cursor: pointer;
clear: both;
position: relative;
}
li.topic_nav_row:hover {
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
/* LIST > ROW > TITLE */
.topic_nav_title {
font-family: Verdana;
width: 80%;
height: 27px;
padding-left: 10%;
position: relative;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
color: white;
}
.topic_nav_title a {
height: 20px;
}
.topic_nav_title::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 75%, rgb(60, 57, 57) 95%, rgb(60, 57, 57) 100%);
}
.topic_nav_title:hover {
background-color: #514e4e;
-webkit-box-shadow: inset 4px 0 0 0 white;
box-shadow: inset 4px 0 0 0 white;
}
.topic_nav_title:hover:before{
background:none;
}
.topic_nav_container {
width: 180px;
height: 100px;
float: left;
overflow: hidden;
position: fixed;
z-index: 10;
margin: 0;
padding: 0;
background-color: #3c3939;
}
<div class="topic_nav_container">
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item One That Is Long
</div>
</li>
<li class="topic_nav_row">
<div class="topic_nav_title">
Menu Item Two That Is Too
</div>
</li>
</div>
This has been really frustrating. I'm trying to add a dropdown tooltip at the bottom of my profile avatar. Unfortunately that does not seem to work properly. The tooltip seems to be partly hidden. How can i keep the specific design of the tooltip and make it display directly at the bottom of the icon with the arrow pointing in the middle of the icon?
body {
background-color: #36a4b0;
}
#shell-header {
display: flex;
height: 46px;
overflow: hidden;
z-index: 3;
opacity: 1;
white-space: nowrap;
}
.logo-wrapper {
padding-left: 56px;
}
#media (max-width: 480px) {
.logo-wrapper {
padding-left: 1rem;
}
}
.title-wrapper {
left: 0;
right: 0;
text-align: right;
flex-grow: 1;
}
.avatar-wrapper {
padding-right: 56px;
position: relative;
}
#media (max-width: 480px) {
.avatar-wrapper {
padding-right: 1rem;
}
}
.logo {
height: 30px;
line-height: 40px;
max-width: 96px;
margin-top: 0.35rem;
}
.log-shellHeaderTitle {
font-size: 20px;
line-height: 36px;
color: #fff;
text-overflow: ellipsis;
text-align: center;
display: block;
white-space: nowrap;
overflow: hidden;
font-weight: inherit;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.log-langButton {
padding-right: 40px;
}
#media only screen and (max-width: 480px) {
.log-langButton {
padding-right: 10px;
}
}
#log-LangButtSwitch {
background: transparent;
cursor: pointer;
display: block;
position: relative;
float: left;
width: 40px;
padding: 2px;
margin-top: 0.25rem;
border: 2px solid #fff;
border-radius: 28px;
}
.log-switchHandle {
display: block;
background: #fff;
height: 20px;
width: 20px;
z-index: 9999;
border-radius: 20px;
}
.log-switchLabels {
position: absolute;
top: 5px;
z-index: -1;
width: 100%;
font-family: Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.log-switchLabels:before {
content: "EN";
position: absolute;
left: 21px;
font-size: 12px;
}
.log-switchLabels:after {
content: "DE";
position: absolute;
right: 26px;
font-size: 12px;
}
.fa-user-o:before {
font-size: 1.375rem;
color: #fff;
}
.avatar {
text-align: center;
margin-top: 0.35rem;
width: 25px;
}
.log-popover {
visibility: visible;
z-index: 460;
display: block;
overflow: visible;
top: 121px;
left: 375.063px;
bottom: 10px;
transition: opacity 0.2s linear;
color: #333333;
min-width: 100px;
box-sizing: border-box;
outline: none;
max-width: 100%;
max-height: 84px;
min-height: 2rem;
overflow: hidden;
background: #ffffff;
border: none;
box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.log-popover a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.log-popover a:hover {
background-color: #f0f0f0;
}
.log-popover a:active,
.log-popover a:focus {
background: #e8eff6;
outline: 1px dotted #000000;
outline-offset: -2px;
}
.log-popover:after,
.log-popover:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.log-popover:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.log-popover:before {
border-color: rgba(51, 51, 51, 0);
border-bottom-color: #333333;
border-width: 11px;
margin-left: -11px;
}
.log-toolContainer {
position: absolute;
height: 100%;
width: 100%;
}
<div class="log-container">
<div id="shell-header">
<div class="logo-wrapper">
<img src="https://s-media-cache-ak0.pinimg.com/236x/f7/0a/f6/f70af6169bbe3f8346e64a25d54bafea.jpg" class="logo">
</div>
<div class="title-wrapper">
<div class="log-shellHeaderTitle">Dashboard</div>
</div>
<div class="log-langButton">
<div id="log-LangButtSwitch">
<span class="log-switchHandle"></span>
<span class="log-switchLabels"></span>
</div>
</div>
<div class="avatar-wrapper">
<img class="avatar" src="https://www.talentenportaalhellendoorn.nl/thumbnails/man.png">
<div class="log-toolContainer">
<div class="log-popover">
Profile
Log out
</div>
</div>
</div>
</div>
</div>
remove overflow: hidden; from #shell-header so the menu isn't cut off, then use positioning to put the container for the menu in the bottom/left of the parent, and use translateX() to offset it 50% of it's own width + 50% of the avatar width to center it under the icon.
body {
background-color: #36a4b0;
}
#shell-header {
display: flex;
height: 46px;
z-index: 3;
opacity: 1;
white-space: nowrap;
}
.logo-wrapper {
padding-left: 56px;
}
#media (max-width: 480px) {
.logo-wrapper {
padding-left: 1rem;
}
}
.title-wrapper {
left: 0;
right: 0;
text-align: right;
flex-grow: 1;
}
.avatar-wrapper {
padding-right: 56px;
position: relative;
}
#media (max-width: 480px) {
.avatar-wrapper {
padding-right: 1rem;
}
}
.logo {
height: 30px;
line-height: 40px;
max-width: 96px;
margin-top: 0.35rem;
}
.log-shellHeaderTitle {
font-size: 20px;
line-height: 36px;
color: #fff;
text-overflow: ellipsis;
text-align: center;
display: block;
white-space: nowrap;
overflow: hidden;
font-weight: inherit;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.log-langButton {
padding-right: 40px;
}
#media only screen and (max-width: 480px) {
.log-langButton {
padding-right: 10px;
}
}
#log-LangButtSwitch {
background: transparent;
cursor: pointer;
display: block;
position: relative;
float: left;
width: 40px;
padding: 2px;
margin-top: 0.25rem;
border: 2px solid #fff;
border-radius: 28px;
}
.log-switchHandle {
display: block;
background: #fff;
height: 20px;
width: 20px;
z-index: 9999;
border-radius: 20px;
}
.log-switchLabels {
position: absolute;
top: 5px;
z-index: -1;
width: 100%;
font-family: Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.log-switchLabels:before {
content: "EN";
position: absolute;
left: 21px;
font-size: 12px;
}
.log-switchLabels:after {
content: "DE";
position: absolute;
right: 26px;
font-size: 12px;
}
.fa-user-o:before {
font-size: 1.375rem;
color: #fff;
}
.avatar {
text-align: center;
margin-top: 0.35rem;
width: 25px;
}
.log-popover {
visibility: visible;
z-index: 460;
display: block;
overflow: visible;
top: 121px;
left: 375.063px;
bottom: 10px;
transition: opacity 0.2s linear;
color: #333333;
min-width: 100px;
box-sizing: border-box;
outline: none;
max-width: 100%;
max-height: 84px;
min-height: 2rem;
overflow: hidden;
background: #ffffff;
border: none;
box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.log-popover a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.log-popover a:hover {
background-color: #f0f0f0;
}
.log-popover a:active,
.log-popover a:focus {
background: #e8eff6;
outline: 1px dotted #000000;
outline-offset: -2px;
}
.log-popover:after,
.log-popover:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.log-popover:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.log-popover:before {
border-color: rgba(51, 51, 51, 0);
border-bottom-color: #333333;
border-width: 11px;
margin-left: -11px;
}
.log-toolContainer {
position: absolute;
height: 100%;
width: 100%;
top: 100%;
left: 0;
transform: translateX(calc(-50% + 12.5px));
}
<div class="log-container">
<div id="shell-header">
<div class="logo-wrapper">
<img src="https://s-media-cache-ak0.pinimg.com/236x/f7/0a/f6/f70af6169bbe3f8346e64a25d54bafea.jpg" class="logo">
</div>
<div class="title-wrapper">
<div class="log-shellHeaderTitle">Dashboard</div>
</div>
<div class="log-langButton">
<div id="log-LangButtSwitch">
<span class="log-switchHandle"></span>
<span class="log-switchLabels"></span>
</div>
</div>
<div class="avatar-wrapper">
<img class="avatar" src="https://www.talentenportaalhellendoorn.nl/thumbnails/man.png">
<div class="log-toolContainer">
<div class="log-popover">
Profile
Log out
</div>
</div>
</div>
</div>
</div>
Remove overflow hidden from #shell-header...
body {
background-color: #36a4b0;
}
#shell-header {
display: flex;
height: 46px;
overflow: visible;
z-index: 3;
opacity: 1;
white-space: nowrap;
}
.logo-wrapper {
padding-left: 56px;
}
#media (max-width: 480px) {
.logo-wrapper {
padding-left: 1rem;
}
}
.title-wrapper {
left: 0;
right: 0;
text-align: right;
flex-grow: 1;
}
.avatar-wrapper {
padding-right: 56px;
position: relative;
}
#media (max-width: 480px) {
.avatar-wrapper {
padding-right: 1rem;
}
}
.logo {
height: 30px;
line-height: 40px;
max-width: 96px;
margin-top: 0.35rem;
}
.log-shellHeaderTitle {
font-size: 20px;
line-height: 36px;
color: #fff;
text-overflow: ellipsis;
text-align: center;
display: block;
white-space: nowrap;
overflow: hidden;
font-weight: inherit;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.log-langButton {
padding-right: 40px;
}
#media only screen and (max-width: 480px) {
.log-langButton {
padding-right: 10px;
}
}
#log-LangButtSwitch {
background: transparent;
cursor: pointer;
display: block;
position: relative;
float: left;
width: 40px;
padding: 2px;
margin-top: 0.25rem;
border: 2px solid #fff;
border-radius: 28px;
}
.log-switchHandle {
display: block;
background: #fff;
height: 20px;
width: 20px;
z-index: 9999;
border-radius: 20px;
}
.log-switchLabels {
position: absolute;
top: 5px;
z-index: -1;
width: 100%;
font-family: Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.log-switchLabels:before {
content: "EN";
position: absolute;
left: 21px;
font-size: 12px;
}
.log-switchLabels:after {
content: "DE";
position: absolute;
right: 26px;
font-size: 12px;
}
.fa-user-o:before {
font-size: 1.375rem;
color: #fff;
}
.avatar {
text-align: center;
margin-top: 0.35rem;
width: 25px;
}
.log-popover {
visibility: visible;
z-index: 460;
display: block;
overflow: visible;
top: 121px;
left: 375.063px;
bottom: 10px;
transition: opacity 0.2s linear;
color: #333333;
min-width: 100px;
box-sizing: border-box;
outline: none;
max-width: 100%;
max-height: 84px;
min-height: 2rem;
overflow: hidden;
background: #ffffff;
border: none;
box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.log-popover a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.log-popover a:hover {
background-color: #f0f0f0;
}
.log-popover a:active,
.log-popover a:focus {
background: #e8eff6;
outline: 1px dotted #000000;
outline-offset: -2px;
}
.log-popover:after,
.log-popover:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.log-popover:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 10px;
margin-left: -10px;
}
.log-popover:before {
border-color: rgba(51, 51, 51, 0);
border-bottom-color: #333333;
border-width: 11px;
margin-left: -11px;
}
.log-toolContainer {
position: absolute;
height: 100%;
width: 100%;
}
<div class="log-container">
<div id="shell-header">
<div class="logo-wrapper">
<img src="https://s-media-cache-ak0.pinimg.com/236x/f7/0a/f6/f70af6169bbe3f8346e64a25d54bafea.jpg" class="logo">
</div>
<div class="title-wrapper">
<div class="log-shellHeaderTitle">Dashboard</div>
</div>
<div class="log-langButton">
<div id="log-LangButtSwitch">
<span class="log-switchHandle"></span>
<span class="log-switchLabels"></span>
</div>
</div>
<div class="avatar-wrapper">
<img class="avatar" src="https://www.talentenportaalhellendoorn.nl/thumbnails/man.png">
<div class="log-toolContainer">
<div class="log-popover">
Profile
Log out
</div>
</div>
</div>
</div>
</div>
I'm having issues getting this button to stay in the button holder which floats above my site content. How would I add a drop down menu and this keep it in the same button holder.
.btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family:'Source Sans Pro', sans-serif;
opacity: .8; }
.button:hover {
background-color: #732878; /* Green */
color: white;
}
<div class="btn-holder">
<div class="button"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png"></a></div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
Here's a quick example that should help get you started in the right direction! A few improvements could be made (such as delaying the display:none so that you can actually click links in the menu), but you should be able to figure that out. If not just let me know in the comments and I'll improve it.
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
width: 100px;
transform: translate(-50%, -50%);
background-color: #333;
border: none;
color: white;
padding: 8px;
text-align: left;
text-decoration: none;
font-size: 16px;
position: absolute;
right: 0%;
bottom: 25px;
box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.menu a {
text-decoration: none;
color: #eee;
transition: color .3s;
}
.menu a:hover {
color: #2196f3;
}
.menu > ul {
list-style: none;
margin: 2px;
padding: 0 0 0 15px;
}
.menu > ul > li:first-child {
margin-left: -15px;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
width: 100%;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png">
</div>
<div class="menu">
<p>Home</p>
<ul>
<li>Blog</li>
<li>Post 1</li>
<li>Post 2</li>
</ul>
<p>Products</p>
<p>About</p>
</div>
</div>
Here's a codepen of it that you can use to try your own changes on: http://codepen.io/XanderLuciano/pen/YGPoqE
I used the CSS + selector to select the div class="menu" that occurs right after the div class="button" and changed it's display from none to block when .button:hover is active. The code looks like this:
#btn-holder > .button:hover + .menu {
display: block;
}
Let me know if you have any questions! :)
#btn-holder {
background: rgba(255, 255, 255, 0.5);
position: static;
z-index: 10;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
#btn-holder > .button {
transform: translate(-50%, -50%);
background-color: #a137a7;
border: none;
color: white;
padding: 8px 13px;
text-align: center;
text-decoration: none;
font-size: 16px;
position: absolute;
cursor: pointer;
right: -1%;
bottom: -1%;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
border-radius: 3px;
}
#btn-holder > .button:hover {
background-color: #732878;
color: white;
}
#btn-holder > .menu {
opacity: 0;
transition: opacity .5s;
width: 100px;
transform: translate(-50%, -50%);
background-color: #333;
border: none;
color: white;
padding: 8px;
text-align: left;
text-decoration: none;
font-size: 16px;
position: absolute;
right: 0%;
bottom: 25px;
box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.menu a {
text-decoration: none;
color: #eee;
transition: color .3s;
}
.menu a:hover {
color: #2196f3;
}
.menu > ul {
list-style: none;
margin: 2px;
padding: 0 0 0 15px;
}
.menu > ul > li:first-child {
margin-left: -15px;
}
.menu p {
opacity: 1;
margin: 0;
}
.menu p:after {
content:"";
display: block;
height: 1px;
vertical-align: bottom;
width: 100%;
border-top: 1px solid #eee;
opacity: .4;
}
#btn-holder > .button:hover + .menu {
opacity: 1;
transistion-delay: 1s;
}
#btn-holder .menu:hover {
opacity: 1;
}
<div id="btn-holder">
<div class="button">
<img class="img-responsive2" src="https://static.tumblr.com/e2rgcy1/e6Yod1iwo/pop-out-icon.png">
</div>
<div class="menu">
<p>Home</p>
<ul>
<li>Blog</li>
<li>Post 1</li>
<li>Post 2</li>
</ul>
<p>Products</p>
<p>About</p>
</div>
</div>
I am working on a project where I am making two divs that are full width the main one comes first and the second div comes after the main div.
Main Div CSS:
*{
margin:0px;
padding:0px;
}
div.main{
top: -100px;
/*background: url(img/bg.jpg) no-repeat center center fixed #000000;*/
/*background: url(http://www.deliciousfood4u.com/wp-content/uploads/2012/05/food_steak_desktop_1302x1020_wallpaper-420339.jpg) no-repeat center center fixed #324a6f;*/
background-size: cover;
background-repeat: no-repeat;
margin-left: -1px;
position: absolute;
}
html, body, .main, #wrappertwo { height: 100%; min-height: 100%; }
.main { margin: 0 auto; oveflow: hidden; width: 100%; background-color: gray;}
I would like my end website to work similar to this website here: http://www.whitmansnyc.com/
You can see all the code here: http://jsfiddle.net/QFRB8/
Here you go, I'm sure you will have much better use than me. Just edit the box in there and delete it to have a full width with main and second div.
http://jsfiddle.net/tS9fX/
html:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blah</title>
<link type="text/css" rel="stylesheet" media="all" href=
"style.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css_002.css" />
</head>
<body class="user_suscriptions index">
<div id="wrapper">
<h1 class="logo">Title</h1>
<h2>another title</h2>
<div class="field form_suscription">
<form novalidate="novalidate" method="post" id="new_user_suscription" data-remote=
"true" class="simple_form new_user_suscription" action="/user_suscriptions"
accept-charset="UTF-8" name="new_user_suscription">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8" /> <input type="hidden"
value="1Oz4NpXl188INQoGZkqy4LaItW/6sxtsNNruWFBJQEM=" name=
"authenticity_token" />
</div>
<div class="error_message"></div>
<div class="input email required user_suscription_email">
<input type="email" size="50" placeholder="Your email address ;)" name=
"user_suscription[email]" id="user_suscription_email" class=
"string email required left" autofocus="autofocus" />
</div><input type="submit" value="Subscribe!" name="commit" class=
"btn green-btn" />
</form>
<div class="clear"></div><small>blahb</small>
</div>
<div class="clear"></div>
<div class="content">
<div class="left">
<h2 class="logo">test subject</h2>
</div>
<div class="right">
<h2>Blah title.</h2>
<p>Blah</p>
</div>
<div class="clear"></div>
</div>
<div class="content">
<div class="block">
<h3>blag</h3>
<p>blag</p>
</div>
<div class="block">
<h3>blag</h3>
<p>blag</p>
</div>
<div class="block">
<h3>blag</h3>
<p>blag</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS:
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
button,
input {
line-height: normal;
}
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font: 14px "Lato", sans-serif;
background: url(http://i.imgur.com/oRLPdXl.jpg) no-repeat center center fixed;
background-size: cover;
color: #FFF; }
#bgMax {
min-height: 100%;
min-width: 1400px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0; }
a {
text-decoration: none;
color: white; }
p {
font-size: 16px;
line-height: 30px; }
li {
list-style: none; }
.clear {
clear: both;
visibility: hidden; }
.bgFade {
background-color: white; }
input[type="text"], input[type="email"] {
border: none;
padding: 14px;
font-size: 16px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px; }
input[type="text"]:focus, input[type="email"]:focus {
border-color: red;
outline: none; }
.green-btn {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/comofunciona-bg.png") repeat scroll 0 0 transparent;
color: white;
padding: 16px;
font-weight: bold;
display: inline-block;
width: initial;
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
transition: 0.2s all ease-out;
-webkit-transition: 0.2s all ease-out;
-moz-transition: 0.2s all ease-out;
-o-transition: 0.2s all ease-out; }
.green-btn:hover {
background: #34da97; }
.green-btn:active {
background: #08b16d; }
::-webkit-scrollbar {
width: 15px;
margin-left: 10px;
background: white;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-thumb {
border: solid 0 transparent;
border-right-width: 3px;
border-left-width: 4px;
-webkit-border-radius: 9px 6px;
-webkit-box-shadow: inset 0 0 0 1px #a1a1a1, inset 0 0 0 6px #a1a1a1; }
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 0 1px gray, inset 0 0 0 6px gray; }
::-webkit-scrollbar-track-piece {
background: transparent none;
border: solid 4px transparent;
border-right-width: 8px;
margin: 4px; }
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(30px); }
100% {
opacity: 1;
-webkit-transform: translateY(0); } }
#-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(30px); }
100% {
opacity: 1;
-moz-transform: translateY(0); } }
#-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(30px); }
100% {
opacity: 1;
-o-transform: translateY(0); } }
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px); }
100% {
opacity: 1;
transform: translateY(0); } }
#-webkit-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.logo {
font-family: "Pacifico", cursive;
color: white;
font-weight: normal;
margin: 0; }
.content {
width: 1000px;
margin: 0 auto;
padding: 100px 0px; }
.left {
float: left; }
.right {
float: right; }
header .content {
padding: 0; }
header .language {
float: right;
margin-top: 15px; }
header .language .social {
float: left;
margin-right: 10px; }
header .language .social .fb, header .language .social .tw {
float: left;
margin: 0 5px; }
header .language .select {
float: left;
background: white;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
padding: 1px 9px; }
header .language .select a {
font-weight: bold;
font-size: 12px;
color: #999999; }
.info {
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1;
width: 910px;
margin: 0 auto;
padding: 120px 0px 190px 0px;
text-align: center; }
.info small {
color: white;
display: block;
font-size: 15px;
margin: 5px;
text-shadow: 0px 1px 1px #353535;
-webkit-text-shadow: 0px 1px 1px #353535;
-o-text-shadow: 0px 1px 1px #353535;
-moz-text-shadow: 0px 1px 1px #353535; }
.info .logo {
font-size: 70px; }
.info h2 {
color: white;
font-size: 30px;
font-weight: 300;
text-align: center;
margin: 40px 0px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-o-text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
-moz-text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); }
.info .field {
margin: 50px 0px 10px 0px;
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1;
width: 570px;
margin: 0 auto; }
.info .field input {
width: 400px;
margin: 10px 0px; }
.info .field .btn {
margin: 10px 0px; }
.info .field .green-btn {
width: initial; }
.info .social {
margin: 0px 0px 60px 0px; }
.about {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/comofunciona-bg.png") repeat scroll 0 0 transparent; }
.about .logo {
color: white;
font-size: 50px; }
.about p {
font-weight: bold; }
.about h2 {
font-size: 22px; }
.about .left {
float: left;
width: 50%;
margin-top: 50px;
text-align: center; }
.about .right {
width: 50%;
float: right;
color: white;
font-weight: 300; }
.demo .content {
padding: 130px 0px 150px 0px;
text-align: center; }
.demo h2 {
font-size: 30px; }
.demo .social {
margin-top: 20px;
display: inline-block; }
.demo .social .fb, .demo .social .gp, .demo .social .tw {
float: left;
margin: 0 5px; }
.features {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/porque-bg.png") repeat scroll 0 0 transparent;
overflow: hidden; }
.features .content {
padding: 100px 0px;
margin: 0 auto; }
.features .block {
float: left;
width: 30%;
margin: 15px;
text-align: center;
position: relative; }
.features .block h3 {
font-size: 22px; }
.features .block p {
padding: 0px 20px; }
.features .feature1, .features .feature2, .features .feature3, .features .feature4, .features .feature5, .features .feature6 {
width: 152px;
height: 153px;
margin: auto; }
.features .feature1 {
background: url("http://printgram.noflagra.com/wp-content/uploads/2012/08/2-tralha1.png") no-repeat scroll center center transparent;
}
.features .feature2 {
background: url("http://printgram.noflagra.com/wp-content/uploads/2012/08/1-instagram1.png") no-repeat scroll center center transparent;
}
.features .feature3 {
background: url("http://printgram.noflagra.com/wp-content/uploads/2012/08/3-foto1.png") no-repeat scroll center center transparent;
}
footer {
background: url("http://printgram.noflagra.com/wp-content/themes/Printgram/css/images/footer-bg.png") repeat scroll 0 0 transparent;
border-top: 10px solid #464646;
color: white;
height: 100%;
}
footer .content {
width: 600px;
padding: 40px 0px;
text-align: center; }
footer .content .logo {
font-size: 25px;
font-weight: 300; }
footer .content p, footer .content a {
font-weight: 700; }
footer .content ul {
text-align: center;
padding: 0px;
display: block;
margin-bottom: 50px; }
footer .content ul li {
display: inline-block; }
footer .content ul a {
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
background: #0cad6c;
padding: 3px 7px;
margin: 3px; }
#media only screen and (max-width: 480px) {
header .content {
padding: 0;
margin-top: 0;
margin-bottom: 0; }
#bgMax {
left: 50%;
margin-left: -200px; }
#wrapper {
width: inherit; }
.content, .info {
margin: 20% auto;
width: 85%;
overflow: hidden; }
.info {
margin: 12% auto;
padding-top: 50px;
padding-bottom: 50px; }
.info .logo {
font-size: 55px; }
.info h2 {
font-size: 20px; }
.info small {
font-size: 11px; }
.info .field {
width: 100%; }
.info .field input, .info .field .green-btn {
padding: 12px;
font-size: 12px;
margin-top: 0px;
margin-bottom: 5px; }
.info .field input {
width: 90%%; }
.about {
font-size: 12px;
text-align: center; }
.about .left, .about .right {
width: auto; }
.about .left {
float: inherit;
margin: 0; }
.about .left h2 {
font-size: 40px; }
.about .right h2 {
font-size: 18px; }
.about .right p {
font-size: 14px;
line-height: 28px; }
.demo .content {
padding: 50px 0px; }
.demo .social {
width: 100px; }
.features {
font-size: 12px; }
.features .content {
width: 80%;
padding: 50px 0px; }
.features .block {
width: auto;
float: inherit;
margin: 55px 0px; }
.features .block h3 {
font-size: 18px; }
.features .block p {
line-height: 28px;
font-size: 14px; }
footer .content {
margin: 20% auto;
width: 85%;
overflow: hidden;
margin: 5% auto; } }
#media only screen and (min-width: 481px) and (max-width: 1024px) {
header .content {
padding: 0;
margin-top: 0;
margin-bottom: 0; }
#wrapper {
width: inherit; }
.content, .info {
margin: 15% auto;
width: 70%;
overflow: hidden; }
.info {
margin: 8% auto;
padding-top: 50px;
padding-bottom: 50px; }
.info .field {
width: 420px; }
.info .field input {
width: 50%; }
.about {
text-align: center; }
.about .left, .about .right {
width: auto; }
.about .left {
float: inherit;
margin: 0; }
.demo .content {
padding: 50px 0px; }
.features .content {
width: 80%;
padding: 50px 0px; }
.features .block {
width: auto;
float: inherit;
margin: 55px 0px; }
footer .content {
margin: 15% auto;
width: 70%;
overflow: hidden;
margin: 5% auto; } }
.error {
color: white;
text-shadow: 0px 1px 1px #353535;
-webkit-text-shadow: 0px 1px 1px #353535;
-o-text-shadow: 0px 1px 1px #353535;
-moz-text-shadow: 0px 1px 1px #353535;
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1;
font-weight: bold; }
.exist, .succesfull {
color: #5f5f5f;
font-size: 16px;
font-weight: normal;
width: 270px;
padding: 12px 10px;
margin: 0 auto;
border-radius: 5px;
background: white;
animation: fadeInUp 1s 1;
-moz-animation: fadeInUp 1s 1;
-webkit-animation: fadeInUp 1s 1;
-o-animation: fadeInUp 1s 1; }
.temp {
display: none;
color: #cccccc; }