I'm trying to accomplish the following layout:
I want a centered Brain with four square links. The "Polaroids" one the left and the right should appear if you are hovering over the right part of the navigation button. So if you hover over the first like in the picture, the first polaroid left up corner should appear.
I tried the following div structure:
.html,
body {
height: 100%;
}
.title {
font-family: lato;
}
.main-content {
width: 100%;
float: left;
background-color: #fefdf9;
height: 100%;
}
.container {
height: 100%;
width: 100%;
margin: 0px auto;
}
.page {
width: 100%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-left {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.top-middle {
background-color: #fefdf9;
width: 30%;
float: left;
padding: 0px 0px 0px 0px;
}
.top-right {
background-color: #fefdf9;
width: 35%;
float: left;
padding: 0px 0px 0px 0px;
min-height: 1px;
}
.content {
width: 100%;
float: left;
height: auto;
padding-top: 8px;
}
.footer {
background-color: #383838;
text-align: center;
float: left;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
margin: auto;
}
.FooterText {
FONT-SIZE: 26px;
FONT-FAMILY: "Lato Bold";
color: rgb(255, 79, 78);
}
.header {
width: 40%;
float: left;
max-height: 60px;
}
.header-top {
width: 100%;
float: left;
line-height: 0;
font-family: "Lato Thin";
}
.header-bot {
width: 100%;
height: 4%;
display: inline;
font-family: "Lato Black";
font-size: 30px;
margin-top: -5px;
}
.Left {
width: 37%;
min-height: 1px;
float: left;
white-space: nowrap;
}
.left > div {
height: 50px;
width: 100px;
background: #555;
display: inline-block;
margin: 10px;
}
.Middle {
width: 26%;
float: left;
margin: auto;
height: 580px;
}
.Right {
width: 37%;
min-height: 1px;
float: left;
}
#h1 {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
max-height: 100%;
image-rendering: crisp-edges;
}
#Willkommenstext {
font-size: 18px;
text-align: justify;
}
.News {
position: relative;
width: 40%;
padding-left: 20%
}
.News img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.News p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kontakt {
position: relative;
width: 40%;
padding-left: 25%;
margin-top: -15%;
}
.Kontakt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kontakt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Kalender {
position: relative;
width: 40%;
padding-left: 10%
}
.Kalender img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Kalender p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.Anfahrt {
position: relative;
width: 40%;
padding-left: 5%;
margin-top: -15%;
}
.Anfahrt img {
border: 10px solid #fff;
height: 100%;
overflow: hidden;
max-height: 100%;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.Anfahrt p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
left: 60px;
font: 400 18px/1'Lato', cursive;
color: #888;
}
.left1 {
width: 10%;
background-color: white;
min-height: 1px;
}
.left2 {
width: 10%;
background-color: white;
min-height: 1px;
}
body {
background: #F1F1F1;
padding: 0;
margin: 0;
font-size: small;
}
ul.square-menu {
font-size: 0;
list-style-type: none;
list-style: none;
padding: 0;
font-family: "Kavoon", Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
width: 400px;
margin: 40px auto;
}
ul.square-menu li {
float: left;
margin: 0px;
}
ul.square-menu li a {
display: block;
text-decoration: none;
padding: 80px 60px;
color: white;
font-weight: normal;
font-size: 150%;
width: 60px;
height: 20px;
text-align: center;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
ul.square-menu li a.slink-x {
background-image: url(../images/NavLeftUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-y {
background-image: url(../images/NavRightUp.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-z {
background-image: url(../images/NavLeftDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a.slink-a {
background-image: url(../images/NavRightDown.gif);
background-repeat: no;
background-size: 100%;
}
ul.square-menu li a:hover {
font-size: 26px;
a -moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
-moz-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.12);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main-content">
<div class="container">
<div class="page">
<div class="top-left">
</div>
<div class="top-middle">
<div class="header">
<div class="header-top" style="display=" inline="">
<h1>Test Header</h1>
</div>
<div class="header-bot">
<h2>Test Underline</h2>
</div>
</div>
</div>
<div class="top-right">
</div>
</div>
<div class="content">
<div class="Left">
<div class="News">
<p>News</p>
<img src="./images/news.jpg">
</div>
<div class="Kontakt">
<p>News 2</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="Middle">
<ul class="square-menu">
<li>
Home
</li>
<li>
About
</li>
<li>
News
</li>
<li>
Contact
</li>
<br style="clear:both;" />
</ul>
<table id="Willkommenstext" width="420" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula. Proin arcu velit, euismod a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae fringilla neque, a elementum ligula.
Proin arcu velit, euismod a.</td>
</tr>
</tbody>
</table>
</div>
<div class="Right">
<div class="Kalender">
<p>Kalender</p>
<img src="./images/news.jpg">
</div>
<div class="Anfahrt">
<p>Anfahrt</p>
<img src="./images/news.jpg">
</div>
</div>
<div class="footer">
<table width="50%" align="center">
<tbody>
<tr>
<td>BildLogo</td>
<td>Impressum</td>
<td>About</td>
<td>Kontakt</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The result is this:
I am a ABSOLUTE Beginner and managed to get to this point, so i wont stop^^ As far as I understood I can not change the boxes visibility with css and hover because my divs are not nested.
I stumbled upon javascript and jquery for this, but this looks like kinda too complicated to get it working without learning the language.
Is there a way to change the div structure so i can hide the Polaroids with css?
I would be very thankful for a solution to this, I am kinda stuck since a few days. If there is no other way than java/jquery i would take that also :D
Thank you very much my friends! :)
Related
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I've been sitting on this for two weeks and feel really stumped. I'm pretty much an extreme noob who is teaching myself coding so I can create an interactive game with Twine (Sugarcube). Everything in this code is perfect and I've customized it since to my liking BUT I have one glaring issue. Whenever you click on an email, it expands to the same one message body. It doesn't change, no matter which message preview you click.
My request is for anyone that can help me or point me in the direction on how to tweak the "EmailFull" div class (if that's what needs to be tweaked) so that it changes every time you click a different message. I will be forever grateful because I feel like no matter if I create a new div class, rearrange the order, or create a new JS function, it doesn't pan out right.
Here's the full code on CodePen: https://codepen.io/Lance-Jernigan/pen/yJbXOK
HTML:
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
CSS:
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
JS:
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})
You are not setting the content of .EmailFull properly. I slightly modified your javascript code to include this
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
// Inspired by https://dribbble.com/shots/2810563-Messages-UI-UX-Animation
$(function() {
$(".Email").on("click", function() {
$(this).addClass("active")
$(".Email").not(".active").addClass("deactive")
$(".hamburger").addClass("active");
$(".EmailFull").addClass("active");
$(".EmailFull").html($('<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGE");
})
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active")
$(".Email.deactive").removeClass("deactive")
$(".hamburger").removeClass("active");
$(".EmailFull").removeClass("active");
$(".headerLabel h1").text("INBOX");
})
})
body {
background: #732bde;
padding-top: 50px;
font-family: Helvetica;
}
body * {
box-sizing: border-box;
}
.wrapper {
width: 320px;
height: 568px;
background: #fff;
margin: auto;
position: relative;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 8);
}
.statusBar {
height: 20px;
width: 100%;
background: #21294a;
position: absolute;
top: 0px;
display: flex;
justify-content: space-between;
z-index: 10;
}
.signal {
margin: 5px 5px;
padding: 0px;
display: flex;
width: 50px;
}
.signal > span {
display: inline-block;
border-radius: 5px;
width: 5px;
height: 5px;
border: solid 1px #fff;
margin: 0px 1px;
}
.signal > span.active {
background: #fff;
z-index: 3;
}
.clock p {
color: #fff;
font-weight: 100;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.battery {
margin: 3px 5px;
width: 50px;
}
.battery span {
display: block;
height: 7px;
width: 17px;
border-radius: 1px;
background: #fff;
position: relative;
float: right;
}
.battery span:after {
content: " ";
display: inline-block;
width: 3px;
height: 4px;
background: #fff;
border-radius: 4px;
position: absolute;
right: -2px;
top: 1px;
}
.header {
padding: 5px 15px 15px 15px;
width: 100%;
background: #21294a;
position: absolute;
top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 10;
border-bottom: solid 1px #424a63;
}
.header:after {
content: " ";
display: block;
height: 4px;
width: 85%;
background: linear-gradient(to right, #5a6ab8 0%,#4bafcd 100%);
position: absolute;
bottom: -4px;
left: 0px;
right: 0px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);
}
.hamburgerWrapper {
margin: 0px;
padding: 0px;
width: 50px;
}
.hamburger {
width: 13px;
}
.hamburger.active {
cursor: pointer;
}
.hamburger span {
display: block;
margin: 2px auto;
height: 2px;
width: 100%;
background: #467797;
border-radius: 9px;
opacity: 1;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-4px, -2px);
width: 75%;
}
.hamburger.active span:nth-child(3) {
transform: rotate(45deg) translate(-3px, 2px);
width: 75%;
}
.headerLabel h1 {
color: #fff;
font-size: 15px;
font-weight: 100;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.headerMenu {
width: 50px;
text-align: right;
}
.headerMenu h2 {
color: #467797;
font-size: 12px;
font-weight: 600;
line-height: 1em;
padding: 0px;
margin: 0px;
}
.EmailsWrapper {
height: 100%;
margin: auto;
position: relative;
background: linear-gradient(to bottom, #313a5a 0%,#424a6b 100%);
}
.EmailFull {
position: absolute;
top: 115px;
background: #f2f2f2;
height: 100%;
padding: 0px 25px;
color: rgba(0, 0, 0, .6);
max-height: 0px;
overflow: hidden;
transition: all .3s;
}
.EmailFull.active {
max-height: 453px;
overflow: scroll;
}
.EmailFull p {
line-height: 1.6em;
}
.EmailSearch {
width: 90%;
margin: auto;
padding: 65px 0px 20px 0px;
}
.EmailSearch input {
width: 100%;
font-size: 12px;
font-weight: 100;
color: rgba(255, 255, 255, .5);
outline: none;
background: transparent;
border: none;
padding: 15px 0px;
border-bottom: solid 1px rgba(255, 255, 255, .1);
}
.EmailSearch input::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5);
font-weight: 100;
}
.Email {
box-sizing: border-box;
border-radius: 3px;
background: rgba(255, 255, 255, .1);
padding: 5px;
width: 100%;
max-width: 90%;
max-height: 100px;
overflow: hidden;
margin: 3px auto;
transition: all .3s;
display: flex;
flex-wrap: wrap;
cursor: pointer;
position: relative;
opacity: 1;
}
.Email.light {
background: rgba(255, 255, 255, .4);
}
.Email.active {
margin-top: -76px;
padding: 10px 0px;
background: #21294a;
color: #fff;
z-index: 15;
max-width: 100%;
cursor: initial;
border-radius: 0px;
}
.Email.deactive {
max-height: 0px;
padding: 0px;
margin: 0px auto;
opacity: 0;
}
.Email .ImgWrapper {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Email .img {
width: 40px;
height: 40px;
background: #fff;
border-radius: 100%;
position: relative;
}
.Email .img.notif:before {
content: " ";
display: block;
width: 12px;
height: 12px;
background: #5bc3e4;
border-radius: 100%;
border: 2px solid #868b9d;
position: absolute;
top: -2px;
left: -2px;
opacity: 1;
transition: all .3s;
}
.Email.active .img.notif:before {
opacity: 0;
}
.EmailTitle {
width: 80%;
position: relative;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.EmailTitle .EmailTime {
position: absolute;
top: 0px;
right: 0px;
font-size: 12px;
font-weight: 100;
margin: 0px;
padding: 5px;
}
.EmailTitle h1 {
margin: 0px;
padding: 0px;
font-size: 15px;
line-height: 1em;
font-weight: 500;
width: 100%;
}
.EmailTitle h2 {
margin: 0px;
padding: 3px 0px;
font-size: 12px;
line-height: 1em;
font-weight: 300;
}
.EmailTitle p.EmailPreview {
margin: 5px 0px;
max-height: 25px;
padding: 0px;
font-size: 12px;
font-weight: 100;
opacity: .8;
overflow: hidden;
transition: all .3s;
}
.Email.active .EmailTitle p.EmailPreview {
max-height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="statusBar">
<div class="signal">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
<span></span>
</div>
<div class="clock">
<p>10:15 AM</p>
</div>
<div class="battery">
<span></span>
</div>
</div>
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="headerLabel">
<h1>INBOX</h1>
</div>
<div class="headerMenu">
<h2>EDIT</h2>
</div>
</div>
<div class="EmailsWrapper">
<div class="EmailFull">
<p>My name is Mark Cohan, and I'm the founder and CEO of Appalo. Appalo is one of the best mobile developer companies in Singapore.</p>
<p>We have an app out right now. You can check it out in the appstore. However, I'm looking to take this app to the next level.</p>
<p>I really would be excited to work together. Please do let me know</p>
</div>
<div class="EmailSearch">
<input type="text" placeholder="Search Messages" />
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">11:12 AM</p>
<h1>Sergey Zolkin</h1>
<h2>New Project Inquiry</h2>
<p class="EmailPreview">Hi Matt! Are you available for...</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<div class="img">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">8:13 AM</p>
<h1>Slack</h1>
<h2>Notiications from the team..</h2>
<p class="EmailPreview">Hi Matt, You have a new message...</p>
</div>
</div>
<div class="Email light">
<div class="ImgWrapper">
<div class="img notif">
</div>
</div>
<div class="EmailTitle">
<p class="EmailTime">7:24 AM</p>
<h1>Clark from Invision</h1>
<h2>Weekly digest: How to design...</h2>
<p class="EmailPreview">Plus why product thinking is the...</p>
</div>
</div>
</div>
</div>
Since we do not know, where your content data (email body text) is comming from and in which element(s) it will be stored, you can basically change the html of your EmailFull class every time an email is clicked.
$(".EmailFull").html('<p>Some other mail text here.<p>');
Thank you for reading this question
Actually, I am trying to create a login form for student and teachers
Where there is a Switch/toggle button between Teacher and Student text
I want to change the colour (let say to grey from green) of the text when the switch toggle to respective(teacher/student)
For Example, if I pressed the switch and the toggle ball sift to right means the Student text will be grey and the same for the opposite side
Here is my code
index.html
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<div class="form-container">
<div class="role-selector">
Teacher
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
Student
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>
If you are able to revise your HTML, then this CSS-only solution is also possible:
/* CSS Additions */
/* Checkbox does not need to be displayed */
input {
display: none;
}
/* Color labels green by default */
.role-selector input+span {
color: green;
}
.role-selector input+*+*+span {
color: grey;
}
/* Color labels when input is checked */
.role-selector input:checked+span {
color: grey;
}
.role-selector input:checked+*+*+span {
color: green;
}
/* --- */
.form-container {
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);
box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.41);
}
.input-design {
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text] {
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password] {
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design {
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border: 1px solid white;
}
.button-design:hover {
border: 1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/*
Remove:
.switch input {
opacity: 0;
width: 0;
height: 0;
}
*/
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+span+.switch .slider {
background-color: #2196F3;
}
input:focus+span+.switch .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+span+.switch .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<div class="form-container">
<div class="role-selector">
<!-- Move input outside of .switch label -->
<input type="checkbox" checked id="role-checkbox">
<span>Teacher</span>
<!-- Add for attribute that matches id of check input -->
<label class="switch" for="role-checkbox">
<span class="slider round"></span>
</label>
<span>Student</span>
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>
You should toggle the class of parent's div when input is changed, and then set the color with that class name.
document.getElementById('switch').addEventListener('click', function(event) {
event.target.parentElement.parentElement.classList.toggle('student');
});
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.role-selector {
color: green;
}
.role-selector.student {
color: grey;
}
<body>
<div class="form-container">
<div class="role-selector">
Teacher
<label class="switch">
<input id="switch" type="checkbox">
<span class="slider round"></span>
</label>
Student
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>
You can actually put the word Teacher and Student inside the span element and give it an Id. And assign an ID to input switch to bind with a js function in onclick event.
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="form-container">
<div class="role-selector">
<span class="" id="teacher">Teacher</span>
<label class="switch">
<input type="checkbox" id="toggle" onclick="checkYesNo()">
<span class="slider round"></span>
</label>
<span class="" id="student">Student</span>
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>
<script>
function checkYesNo() {
if (document.getElementById('toggle').checked) {
document.getElementById('student').style.color = 'grey';
document.getElementById('teacher').style.color = 'green';
}else {
document.getElementById('teacher').style.color = 'grey';
document.getElementById('student').style.color = 'green';
}
}
</script>
Making use of before and after elements instead of text. Updated css at the bottom of css code. No jquery needed.
.form-container{
text-align: center;
border-radius: 5px;
background-color: #f6f6f6;
padding: 30px 10px 30px 10px;
margin: 0% 5% 0% 5%;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
color: green;
-webkit-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
-moz-box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
box-shadow: 5px 5px 5px -1px rgba(0,0,0,0.41);
}
.input-design{
margin: 0% 15% 0% 15%;
margin-top: 50px;
}
.input-design input[type=text]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
margin-bottom: 20px;
}
.input-design input[type=password]{
height: 50px;
width: 100%;
padding: 0px 0px 0px 10px;
font-size: 20px;
}
.button-design{
padding: 15px 0px 0px 0px;
height: 50px;
font-weight: 600;
font-size: 20px;
margin: 5% 15% 5% 15%;
background-color: green;
color: white;
border:1px solid white;
}
.button-design:hover{
border:1px solid green;
background-color: white;
color: green;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Input must be visible for before and after elements. Relative used for absolute position of children */
.switch input {
position: relative;
}
/* Set text on before and after elements */
input::before,
input::after {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 30px;
}
input::before {
position: absolute;
left: 50px;
bottom: 0;
content: 'student';
}
input::after {
position: absolute;
right: 50px;
bottom: 0;
content: 'teacher';
}
/* Change colors based on checked status */
input:checked::before {
color: green;
}
input:checked::after {
color: grey;
}
input:not(:checked)::before {
color: grey;
}
input:not(:checked)::after {
color: green;
}
<body>
<div class="form-container">
<div class="role-selector">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="input-design">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
</div>
<div class="button-design">
Login
</div>
</div>
</body>
i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !
Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active
Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/
I'm using jCarousel and there's a weird bug on my page and I can't figure it out! Essentially, I'm trying to overlay a <div> on top of my carousel.
When I place the <div> on top, this weird gap pops up on top of the carousel! I don't know where it's coming from. Is it in the JavaScript?
The black box, I can format later. Just need to know why the white space is appearing.
JsFiddle from the bug
HTML
<div class="carousel-wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
</ul>
</div>
‹
›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#login-carousel-wrapper {
width: 850px;
height: 500px;
margin: 0px auto;
}
#login-carousel-area {
background-color: #000;
z-index: 999;
width: 200px;
height: 200px;
position: relative;
top: 200px;
left: 100px;
}
#body-wrapper {
width: 970px;
height: 100%;
margin: 0px auto;
text-align: top;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
Live Demo
If you are talking about the 20px white line in the top, that comes from .jcarousel-wrapper's margin: 20px auto;.
Just change 20px to 0px or add a new line overwriting margin-top if you want to keep the bottom margin:
.jcarousel-wrapper {
margin: 20px auto;
margin-top: 0px;
}