I'm new to using transitions and my transition is not responding. There must be something wrong with my code. I'm using cards on my site and I added a (mouseenter) to have the info on the card display when the mouse is hovered, it works but the transition is throwing an error there's probably something I'm not understanding, any help is appreciated!
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.inner-card{
display: none;
}
.inner-card.active{
display: flex;
flex-direction: column;
justify-content: end;
background:rgba(255,165,0,0.5)
transition: all 400ms ease-in-out;
}
<script>
$(document).ready(function () {
$('.card').on('mouseenter', function () {
$(this).find(".inner-card").toggleClass('active');
});
$('.card').on('mouseleave', function () {
$(this).find(".inner-card").toggleClass('active');
});
});
</script>
As mentioned in my comment:
display
flex-direction
justify-content
are none-animatable CSS properties, as such transition and animation will have no effect, other animatable properties in the defintion are ignored.
This can be circumvented by transitioning between opacity: 0 and 1.
In the snippet, class .inner-card is defined as you normally would, but using opacity: 0 to 'hide' its content.
Selector .card:hover .inner-card {..} is introduced to control the transition to opacity: 1 without the need for JS.
To be complete, class .inner-card needs a transition for a smooth transition back to original when the cursor leaves the card.
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
opacity: 0;
background-color: transparent;
transition: opacity 400ms ease-in-out, background-color 400ms ease-in-out;
}
.card:hover .inner-card {
cursor: pointer;
opacity: 1;
background-color:rgba(255,165,0,0.5);
transition: all 400ms ease-in-out;
}
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
If I understood correctly and you need the text to be presented during the review, then here it is.
.inner-card a{
color: inherit;
text-decoration: none;
text-decoration: underline;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
margin-left: 8px;
margin-top: 15px;
color: lightgreen;
background-color: lightgreen;
border: 2px solid black;
padding: 10px;
border-radius: 3px;
}
.inner-card:hover{
cursor: pointer;
color: black;
background: rgba(255,165,0,0.5);
}
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
This task can be done without js. Let me know if I misunderstood you.
I am trying to create an effect on a blog page in which the blog posts are displayed as cards, and whenever one scrolls vertically on the page, a card will fade into view and then fade out when the next card is displayed. Something similar to a carousel/image slider but where only one card is visible at the time. At the same time I want the background image to be fixed. A mix between parallax and carousel.
I have tried to set the cards' container to allow overflow-y so that the cards are scrollable, but I do not want the scrollbar to appear either. Honestly, I have looked everywhere for a similar example, but none are close to what I am trying to achieve.
I have found other examples where I can create a parallax effect, but the thing is I only have one background image. I am not sure if I need to use JavaScript as well to try to implement this design. The closest I have come to is ScrollOut, but I do not know how to make only one card visible at the time.
CodePen
<header>
<div class="logo">
</div>
<div class="title" id='title'>
<h1 data-scroll>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
</ul>
</nav>
</header>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<section class="section__posts">
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</section>
If I understand what you're going for, you could use position: sticky along with an IntersectionObserver to create fade-in/fade-out effects.
A basic implementation of a position: sticky layout could be something like this:
<div class="section__posts--card">
<!-- **** add inner wrapper **** -->
<div class="inner-el">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</div>
.section__posts {
width: 100vw;
height: 100vh;
position: relative;
}
.section__posts--card {
height: 200vh; // how far the user should scroll before content changes
}
.inner-el {
top: 200px; // how far from the top of the viewport the content should sit
height: auto;
position: sticky;
width: 75vw;
max-width: 50rem;
margin: auto;
}
This is a pretty good 'tutorial' on how to add IntersectionObserver with position: sticky: https://developers.google.com/web/updates/2017/09/sticky-headers
Thanks to organicon's insight about IntersectionObserver I was able to come up with a solution that created the effect exactly as I wanted.
I made the background fixed and turned off overflow for the body.
I wrapped the cards in a container, and turned on the overflow-y BUT I hid the scrollbar using: scrollbar-width: none; -ms-overflow-style:none;
Wrote a script using IntersectionObserver that will track when a card comes into view. When the card appears a CSS animation is applied that fades the card in.
const callback = (entries) => {
entries.forEach(
(entry) => {
if (entry.isIntersecting) {
console.log("the element is intersecting");
entry.target.style.animation = entry.target.dataset.fade;
entry.target.style.opacity = 1;
} else {
entry.target.style.animation = "none";
entry.target.style.opacity = 0;
}
}
);
}
let observer = new IntersectionObserver(callback);
const fadeItems = document.querySelectorAll('.animate');
fadeItems.forEach(item => {
console.log("adding " + fadeItems.length + " cards to the observer");
observer.observe(item)
});
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-grey: lightgrey;
--clr-accent: #16e0bd;
--clr-danger: tomato;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 900px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
}
body {
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
box-sizing: border-box;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
background-repeat: no-repeat;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* wrapper */
.wrapper {
height: 100%;
width: 100%;
}
/* header */
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
width: 100%;
}
nav {
width: 50%;
background-color: transparent;
border: 2px solid;
border-color: var(--clr-light);
border-radius: 2em;
display: flex;
z-index: 10;
}
/*Styling Links*/
.nav-links {
color: var(--clr-light);
display: flex;
list-style: none;
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a {
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before {
width: 80%;
}
.login-button {
color: var(--clr-light);
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: var(--clr-dark);
background-color: #000;
transition: all ease-in-out 350ms;
}
* site title */
.title h1 {
margin: 1em auto;
text-align: center;
color: transparent;
}
#supports(-webkit-text-stroke: 2px var(--clr-light)) {
.title h1 {
color: transparent;
-webkit-text-stroke: 2px var(--clr-light);
text-shadow: none;
}
}
/* section posts */
.posts {
width: 100vw;
height: 100vh;
position: relative;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
.posts::-webkit-scrollbar {
width: 0;
height: 0;
}
.post__card {
height: 50vh;
width: 40rem;
padding: 2rem;
margin: 15rem auto;
background: var(--clr-light);
border-radius: 8px;
opacity: 0;
}
.post__card:first-child {
margin-top: 1rem;
}
.post__card:last-child {
margin-bottom: 22rem;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blog-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.blog-title {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: -6px;
}
.blog-overview {
margin: 10px 0 20px;
line-height: 30px;
}
.section__posts--card--button {
margin: 0 10px;
}
.btn.dark {
background: var(--clr-dark);
color: var(--clr-light);
}
.btn.grey {
background: var(--clr-grey);
color: var(--clr-dark);
}
.btn.danger {
background: var(--clr-danger);
color: var(--clr-dark);
}
#media (max-width: 600x) {
.posts {
padding: 2.4rem;
}
.section__posts--card {
padding: 2.4rem;
}
}
<div class="wrapper">
<div class='stars'></div>
<div class="stars2"></div>
<div class='stars3'></div>
<header>
<div class="title" id='title'>
<h1>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li><a class="login-button" href="#">Login</a></li>
</ul>
</nav>
</header>
<div class="posts">
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
</div>
</div>
i have a navbar and a sticky header which you can check it out in snippet. Now if i click on my anchors, I get scrolled down to the right position, even the header doesn't overlap the text of the div except in one strange case.
the problem is when i'm in the #Home section, after clicking on any anchors ( no matter #AboutMe or #Skills), it sends me to the right position but the header overlaps the text a little bit which is not what i want.
so when i'm in #AboutMe section and click on #Skills anchor for example, nothing strange happens and everything is alright but the problem is when you are in the #Home section and you wanna get to another sections by clicking on their anchors, it sends you a little bit lower than where it should get you.
to find out what i mean exactly, you need to click on #AboutMe anchor twice when you are in #Home section ( same as #Skills anchor) then you will find out on first attempt, it's not doing the job properly and you need to click on that specific anchor, twice to get the result you're looking for.
NOTE: ignore other styles like texts positioning or images which are not really important here and the snippet i've provided is enough to show you what my issue is.
has anybody ever faced this strange issue?
JS fiddle link: https://jsfiddle.net/f715j3qh/120/
$(document).ready(function () {
var aboveHeight = $('header').height();
$(window).scroll(function () {
if ($(window).scrollTop() > aboveHeight) {
$('nav').addClass('fixed').css('top', '0').next().css('padding-top', '70px');
} else {
$('nav').removeClass('fixed').next().css('padding-top', '0');
}
});
});
.header {
text-align: center;
}
.header-top {
font-size: 3.5rem;
height: 210px;
background: #28223f;
}
.header-top-p {
padding: 40px 0 30px;
}
.header p{
color:#a8c6de;
letter-spacing:1px;
}
#header-nav {
background-color: yellow;
color: black;
justify-content: space-between;
height: 70px;
background-image: yellow;
width: 100%;
margin: 0 auto;
align-items: center;
z-index: 10000;
}
nav .mainMenu {
list-style: none;
display: flex;
}
#header-nav ul li {
position: relative;
margin: 0 auto;
}
#header-nav ul li.active {
opacity: 1;
text-shadow: -3px 3px 7px #4d4d00;
}
nav .mainMenu li a {
font-weight: bold;
color: black;
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
.anchor {
display: block;
height: 70px;
margin-top: -70px;
visibility: hidden;
}
.fixed {
position: fixed;
top: 0;
z-index: 1;
}
#Matin-Pic {
background: #28223f;
min-height: 63vh;
}
.Matin-Picture {
margin: 15px auto;
color: #b3b8cd;
width: 380px;
background: brown;
text-align: center;
border-radius: 5px;
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.cover-photo {
background: lightblue;
height: 130px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.non-profile {
height: 130px;
width: 100%;
}
.non-profile img {
height: 160px;
width: 175px;
margin: auto 150px;
display: flex;
}
.profile {
height: 140px;
width: 105px;
border-radius: 50%;
border: 1px solid #1f1a32;
padding: 7px;
background: #292343;
margin: -70px 0 0 203px;
}
.profile-name {
font-size: 25px;
font-weight: bold;
margin: 25px 0 0 -100px;
}
.about {
margin-top: 35px;
line-height: 25px;
font-size: 1.7rem;
}
#Matin-Pic button {
margin: 15px 10px 30px;
}
.msg-btn, .follow-btn {
border-radius: 3px;
cursor: pointer;
background: lightblue;
color: brown;
border: 1px solid lightblue;
padding: 10px 25px;
}
.follow-btn {
background: transparent;
color: lightblue;
}
#Matin-Pic i {
font-size: 20px;
padding-left: 20px;
margin-bottom: 20px;
cursor: pointer;
color: lightblue !important;
}
.section-1 {
background: #fff;
height: auto;
width: 100%;
}
.section-1 img {
margin-top: 160px;
border-radius: 10px;
width: 100%;
height: auto;
}
#AboutMe-image img:nth-child(1) {
box-shadow: -5px -5px 10px blue;
display: block;
}
#AboutMe-image img:nth-child(2) {
display: none;
box-shadow: -5px 5px 10px blue;
}
.section-1-image img {
display: none;
box-shadow: 5px 5px 10px blue;
}
.section-1 h3 {
font-style: oblique;
font-weight: bold;
font-size: 3rem;
margin: 60px auto;
color: blue;
}
.section-1 p {
color: black;
}
.section-1 p:nth-child(2) {
margin: 0 auto 15px;
font-size: 1.6rem;
}
.section-1 p:nth-child(3) {
font-size: 1.4rem;
line-height: 2.5;
}
#AboutMe {
margin-bottom: 110px;
min-height: 78vh;
}
#AboutMe-Text {
padding-right: 50px;
}
#Skills {
background: rgba(168, 198, 222, 0.2);
margin: 0 auto;
border-radius: 300px 15px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 52px auto 0;
font-size: 1.6rem;
color: black;
}
.section-2 ul li:first-child {
margin-top: 30px;
}
.section-2 ul li:last-child {
margin-bottom: 52px;
}
.section-2 img {
margin: 32px auto;
max-width: 220px;
height: 540px;
border-radius: 7px;
}
.main-titles {
text-align: center;
font-weight: bold;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Home">
<div class="container-fluid">
<div class="row">
<header class="header header-top">
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
</header>
<nav id="header-nav">
<ul class="mainMenu">
<li class="Home">Home</li>
<li class="AboutMe">About Me</li>
<li class="Skills">Skills</li>
</ul>
</nav>
</div>
</div>
</section>
<!--end Home section and header-->
<!-- ***** card profile ***** -->
<div id="M-Pic" class="container-fluid">
<div class="M-Picture">
<div class="cover-photo">
<div class="non-profile">
<img src="Content/images/logo.png">
</div>
<img src="Content/images/MPic.jpg"
class="profile">
</div>
<div class="profile-name">text</div>
<p class="about">some text here<br>some text</p>
<button class="msg-btn" onclick="#">send</button>
<button onclick="#" class="follow-btn">button1
</button>
<div>
<a href="#"><i
class="fab fa-linkedin"></i></a>
<a href="#"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<span class="anchor" id="AboutMe-anchor"></span>
<section id="AboutMe" style="padding-top:3rem;">
<div class="container">
<div class="row">
<div class="section-1">
<div id="AboutMe-image" class="col-md-5 col-sm-5 slide-in fade-in">
<img src="Content/images/bg2-com2.jpg" alt="an image" width="1280" height="850">
<img alt="an image" src="Content/images/bg2-com5.jpeg" width="1000" height="800">
</div>
<div id="AboutMe-Text" class="col-md-7 col-sm-7 slide-in fade-in">
<h3>some text here</h3>
<p>some text here</p>
<p>some text here<br> some text here
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
</p>
</div>
<div class="col-xs-12 section-1-image">
<!-- <img alt="an image" src="Content/images/bg2-com.jpg" width="598" height="399" class="fade-in slide-in"> -->
</div>
</div>
</div>
</div>
</section>
<!--end AboutMe-->
<!-- ***** skills ***** -->
<span class="anchor" id="Skills-anchor"></span>
<section id="Skills" style="padding-top:1rem;">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<h2 class="main-titles fade-in-main-titles slide-in-main-titles">skills</h2>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs">
<img src="Content/images/MySkills2.gif"
class="img-responsive center-block fade-in-skills slide-in-skills">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
</ul>
</div>
</div>
</div>
</div>
</section>
I want to build a slideshow using this code that dsonesuk provided at the W3Forum.I modified it in order to come close to what I want. Now the JS does two strange things to the position of the slideshow:
In smaller (ex. mobile) browser windows, #myslideFrame expands in
height (and it shouldn't).
In larger browser windows (wider than 1260px), the whole slideshow sticks to the left side of the wrapper instead of extending all the way to the right side (of the wrapper).
Since I don't exactely know why the JS is behaving like it is, this is the code of the whole page. (Especially the CSS is pretty long, sorry for that. But you can "cmd/Strg + F" for "slideshow" and it will highlight the beginning of the relevant part)
Thank you!
var slideIndex = 0;
var t;
var dots;
var maxheight = 0;
var timedelay = 3700;
window.onload = function() {
var x = document.getElementsByClassName("mySlides");
var parent_elem = document.getElementById('myslideFrame')
var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)
for (i = 0; i < x.length; i++) {
if (x[i].height > maxheight) {
maxheight = x[i].height;
}
}
document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";
showDivs(slideIndex);
carousel();
};
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-border-red", "");
}
x[slideIndex - 1].style.display = "inline-block";
dots[slideIndex - 1].className += " w3-border-red";
}
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
dots[i].className = dots[i].className.replace(" w3-border-red", "");
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "inline-block";
dots[slideIndex - 1].className += " w3-border-red";
t = setTimeout(carousel, timedelay);
}
function pauseCarousel() {
clearTimeout(t)
}
function startCarousel() {
t = setTimeout(carousel, timedelay);
}
* {
margin: 0;
padding: 0;
}
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: #rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/* Mein Code */
:root {
--lightGrey: #eeeeee;
--midGrey: #4d4d4d;
--darkGrey: #1e1e1e;
--Color1: #91d3f5;
--Color2: #e24e42;
}
body {
background-color: var(--lightGrey);
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.wrapper {
margin: 0 auto;
width: 90vw;
}
a {
outline: 0;
text-decoration: none;
color: var(--Color2);
}
.mainnav {
float: left;
width: 100%;
overflow: hidden;
position: relative;
z-index: 2;
}
.mainnav ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.mainnav ul li {
display: block;
float: right;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
.mainnav ul li a {
display: inline-block;
margin: 0 0 0 1px;
padding: 0 10px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.3em;
color: #333333;
text-decoration: none;
line-height: 40px;
}
#light {
color: var(--lightGrey);
font-weight: 300;
}
#logo p {
width: 100%;
text-align: center;
padding-top: 20px;
float: left;
text-decoration: none;
font-size: 20px;
font-family: 'Roboto', sans-serif;
color: #333333;
letter-spacing: 0.3em;
z-index: 2;
}
.intro {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 50px;
color: var(--darkGrey);
float: left;
text-align: center;
width: 60vw;
position: absolute;
bottom: 2vh;
}
#introTextHello {
padding-bottom: 20px;
letter-spacing: 0;
font-size: 145px;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#introText {
display: none;
}
header {
height: 100vh;
background-image: url(img/PortraitMobile2.jpg);
background-size: cover;
background-position: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Ab hier beginnt der Introtext (ohne introTextHello) der Mobile-Version */
.mobileIntroSection {
scroll-snap-align: start;
height: 100vh;
background-size: cover;
background-position: center;
background-color: var(--Color2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}
#introTextMobile h1 {
text-align: left;
padding-top: 20px;
line-height: 1.3;
letter-spacing: 0;
}
/* Ab hier beginnt der Projektteil */
.premiumFeaturedProjectSection {
display: none;
}
.featuredProjectsSection {
scroll-snap-align: start;
background-size: cover;
background-position: center;
}
/*Das ist die Flexbox für die Projekte*/
.projects {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
flex-wrap: wrap;
margin-bottom: 40px;
}
.featuredProjectPicture {
position: relative;
width: 75vw;
height: 25vh;
background-color: black;
overflow: hidden;
margin: 1.5vh;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}
.bgimage {
display: block;
width: 100%;
height: auto;
/*
mix-blend-mode: screen;
-webkit-filter: grayscale(10%) contrast(200%);
filter: grayscale(30%) contrast(90%);
*/
}
.projectTitleSubtitle {
width: 80%;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.projectTitleSubtitle hr {
border-style: none;
margin: 15px auto 30px auto;
width: 50%;
height: 3px;
background-color: var(--Color1);
}
.projectTitleSubtitle span {
font-family: 'Roboto', sans-serif;
font-size: 25px;
font-weight: 200;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.7;
background-color: var(--darkGrey);
}
.callToActionSection {
scroll-snap-align: end;
background-color: var(--Color1);
text-align: center;
scroll-snap-align: end;
padding: 50px 0 50px 0;
}
.callToActionSection h2 {
line-height: 1.3;
}
/* Ab hier beginnt der footer */
footer {
padding-top: 30px;
height: 250px;
background-color: var(--darkGrey);
scroll-snap-align: end;
}
#footerImpressum p {
float: left;
text-align: left;
margin-top: 23px;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 17px;
color: var(--midGrey);
letter-spacing: 0.03em;
line-height: 1.34;
}
/* footernav */
#footernav {
margin-top: 13px;
float: right;
}
#footernav ul {}
#footernav ul li {
text-align: right;
list-style: none;
}
#footernav ul li a {
display: inline-block;
margin: 0 0 0 1px;
font-family: 'Roboto', sans-serif;
letter-spacing: 0.3em;
color: var(--midGrey);
text-decoration: none;
line-height: 40px;
}
/* Einzelne Projektseiten */
#fluchtHeader {
background-image: url(img/flucht/fluchtHeader.jpg);
}
#smartLogisticsHeader {
background-image: url(img/smartLogistics/BGSmartLogisticsBig.png);
}
#blankHeader {
background-image: none;
}
#einblickAusblickHeader {
background-image: url(img/einblickAusblick/einblickAusblickHeader.jpg);
}
.projectPicture {
display: block;
float: left;
width: 95%;
}
.wrapperSingleProject {
padding: 50px 0 50px 5px;
width: 90vw;
/* wie .imgTextSized */
margin: auto;
}
.imgTextSized {
width: 90vw;
padding: 0;
margin: 25px 0;
}
.imgTotalWidthSized {
width: 100vw;
padding: 0;
margin: 0;
}
.projectIntro {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 800;
margin-bottom: 25px;
}
#visibleDesktop {
display: none;
}
#visibleMobile {
display: block;
}
/* 404-Seite */
.errorPage {
text-align: center;
}
.button {
background-color: var(--Color2);
border: none;
color: var(--lightGrey);
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: var(--darkGrey);
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
text-decoration: none;
text-align: center;
font-size: 50px;
font-family: 'Oswald', sans-serif;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
color: var(--lightGrey);
padding: 50px 0 10px 0;
}
h2 {
text-decoration: none;
text-align: center;
font-size: 25px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 0.1em;
line-height: 1;
color: var(--lightGrey);
}
h3 {
text-decoration: none;
text-align: center;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.3;
color: #ccc;
margin-top: 20px;
}
p {
text-decoration: none;
text-align: left;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.45;
color: var(--darkGrey);
}
.darkGreyText {
color: var(--darkGrey);
}
.Color2Text {
color: var(--Color2);
}
/* Slideshow */
.slideshow {
margin: 0 auto 0 auto;
display: inline-block;
}
.mySlides {
width: 100%;
vertical-align: middle;
}
#myslideFrame {
text-align: center;
position: relative;
}
/* Is this still necessary? */
#myslideFrame:before,
.flexbox>div:before {
content: "";
height: 100%;
vertical-align: middle;
width: 0;
}
.slideshowIndicators {
width: 100%;
text-align: center;
}
.slideshowIndexIndicator:hover {
background-color: var(--Color1);
}
.slideshowIndexIndicator {
cursor: pointer;
height: 4px;
line-height: 1000px;
width: 60px;
background-color: var(--midGrey);
display: inline-block;
text-align: center;
margin: 0 15px;
transition: background-color 0.4s ease;
}
.w3-border-red,
.w3-hover-border-red:hover {
background-color: var(--Color2)!important
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.8s;
animation-name: fade;
animation-duration: 1.8s;
animation-timing-function: cubic-bezier(.5, .3, .5, 1);
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* Slideshow End */
/* Responsive-Einstellungen für Desktop*/
#media only screen and (min-width: 768px) {
body {
scroll-snap-type: y proximity;
}
.wrapper {
width: 95vw;
}
/* nav underline-on-hover-animation */
.link {
position: relative;
}
.link:after {
content: '';
width: 0;
height: 3px;
display: block;
margin-top: -7px;
right: 0;
background-color: #fff;
transition: width .3s ease;
-webkit-transition: width .3s ease;
}
.link:hover:after {
width: 100%;
left: 0;
background-color: #fff;
}
/* nav underline-on-hover-animation ende */
#logo p {
text-align: left;
}
.intro {
line-height: 1.2;
float: right;
text-align: left;
padding-top: 40vh;
padding-left: 25vw;
position: relative;
}
#introText {
display: block;
letter-spacing: 0;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#introTextHello {
font-size: 50px;
}
.mobileIntroSection {
display: none;
}
header {
background-image: url(img/Portrait2.jpg);
}
/* Ab hier beginnt der Projektteil */
.featuredProjectsSection {
scroll-snap-align: end;
padding: 100px 0 100px 0;
}
/*Das ist die Flexbox für die Projekte*/
.projects {
flex-direction: row;
/*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
border: 4px solid var(--Color2);
width: 85vw;
/* Wenn dieser Wert verändert, auch .premiumFeaturedProjectSection ändern */
margin: 0 auto;
text-align: center;
padding: 25px 0;
}
/* */
.featuredProjectPicture {
float: left;
width: 20vw;
height: 20vw;
margin: 25px;
}
.projectTitleSubtitle {
top: 45%;
font-family: 'Roboto', sans-serif;
}
.projectTitleSubtitle hr {
margin: 20px auto 45px auto;
width: 30%;
}
.projectTitleSubtitle span {
font-size: 30px;
}
.overlay {
transition: .5s ease;
}
.featuredProjectPicture:hover .overlay {
opacity: 0.1;
}
.premiumFeaturedProjectSection {
width: calc(~"60vw + 150px");
display: inline-block;
}
.premiumProjectIntro {
width: 25vw;
float: left;
text-align: center;
margin: 25px 25px 25px 0;
padding: 25px 0 0 25px;
}
.premiumProjectIntro input {
display: inline-block;
margin-top: 25px;
}
#premiumFeaturedProjectPicture {
float: right;
width: 35vw;
height: 40vw;
margin: 25px 0 25px 50px;
}
/**/
.callToActionSection {
padding: 50px 0 90px 0;
}
.callToActionSection h2 {
margin: 25px 0;
}
/* Ab hier beginnt der footer */
footer {
height: 270px;
}
#footerImpressum p {
line-height: 1.25;
}
#logo {
margin-top: 7px;
width: 50%;
float: left;
text-align: left;
text-decoration: none;
font-size: 23px;
font-family: 'Roboto', sans-serif;
letter-spacing: 0.3em;
}
.mainnav {
float: right;
width: 350px;
}
.mainnav ul {
clear: right;
float: right;
left: 40%;
}
.mainnav ul li {
line-height: 85px;
}
.wrapperSingleProject {
padding: 80px 0 80px 0;
width: 750px;
/* wie .imgTextSized */
}
.imgTextSized {
width: 750px;
}
#visibleDesktop {
display: block;
}
#visibleMobile {
display: none;
}
h1 {
text-decoration: none;
text-align: center;
font-size: 50px;
font-family: 'Oswald', sans-serif;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
}
h2 {
text-decoration: none;
text-align: center;
font-size: 30px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 0.1em;
line-height: 1;
}
h3 {
text-decoration: none;
text-align: center;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.3;
}
p {
text-decoration: none;
text-align: left;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.45;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>John Smith Design</title>
</head>
<body>
<nav>
<div class="wrapper">
<div id="logo">
<p>JOHN SMITH</p>
</div>
<div class="mainnav">
<ul>
<li>
<a class="link" id="light" href="#">ABOU<span style="letter-spacing:0px;">T</span></a>
</li>
<li>
<a class="link" id="light" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a>
</li>
<li>
<a class="link" id="light" href="#">HOM<span style="letter-spacing:0px;">E</span></a>
</li>
</ul>
</div>
</div>
</nav>
<header id="fluchtHeader">
<div class="overlay"></div>
<div class="projectTitleSubtitle">
<h1>FACT</h1>
<br>
<hr>
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</h2>
<h3>with Johnny Jones.</h3>
</div>
</header>
<div class="wrapper">
<div class="wrapperSingleProject">
<p class="projectIntro">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="slideshow">
<div id="myslideFrame">
<img class="mySlides fade" src="https://i.stack.imgur.com/W0mZQ.jpg">
<img class="mySlides fade" src="https://i.stack.imgur.com/9djAf.jpg">
<img class="mySlides fade" src="https://i.stack.imgur.com/LhWX8.jpg">
<div class="slideshowIndicators">
<span onclick="currentDiv(1)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>
<span onclick="currentDiv(2)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>
<span onclick="currentDiv(3)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout=" startCarousel()"></span>
</div>
</div>
</div>
</div>
<div class="callToActionSection">
<div class="wrapper">
<h2>Want to see more? <br> Check out my other projects!</h2>
<br>
<input type="submit" class='button' value="Let's go" onclick="location.href='#'">
</div>
</div>
<footer>
<div class="wrapper">
<div id="footerImpressum">
<p>
Contact:<br>
<br> John Smith <br> Johnstreet 30<br> 11111 Johntown<br>
<br> john#smith.com
<br> +11 (1)111 111 11 11
</p>
</div>
<div id="footernav">
<ul>
<li><a class="link" href="#">HOM<span style="letter-spacing:0px;">E</span></a></li>
<li><a class="link" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a></li>
<li><a class="link" href="#">ABOU<span style="letter-spacing:0px;">T</span></a></li>
<li><a class="link" href="#">IMPRIN<span style="letter-spacing:0px;">T</span></a></li>
<li><a class="link" href="#">PRIVAC<span style="letter-spacing:0px;">Y</span></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Ok, so the fix is pretty simple. You don't want anything messing around with the height of this element. So just remove everything from the window.load that does this.
Which should leave you with something like this:
window.onload = function() {
showDivs(slideIndex);
carousel();
};
Next up is to fix the horizontal alignment of the carousel on desktop, this is by far the easiest thing to do. Your slideshow is an inline-block which means it can be centered by giving the parent the text-align: center style.
.wrapper {
margin: 0 auto;
width: 90vw;
text-align: center;
}
I'm creating a timeline and for this I need a dashed border for certain event times. But I can't combine the two styles together.
To put it simply, I need a solid border for most of the timeline events except a few, which have a common class, where I need a dotted border. I have the following code till now.
I need the border between the Break event till Event 4 to be dotted instead of solid. Any CSS/JS based solution would do.
.timeline {
border-left: 4px solid #a5a5a5;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background: rgba(255, 255, 255, 0.03);
color: rgba(0, 0, 0, 0.8);
font-family: "Source Sans Pro", sans-serif;
margin: 0 auto 50px auto;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
font-size: 1.03em;
padding: 30px;
list-style: none;
text-align: left;
font-weight: 100;
max-width: 30%;
}
.timeline .event:before,
.timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -170px;
color: rgba(0, 0, 0, 1);
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
.timeline .event:after {
box-shadow: 0 0 0 4px #a5a5a5;
left: -37.85px;
background: #313534;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 5px;
}
.timeline .event {
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
padding-bottom: 25px;
position: relative;
}
<ul class="timeline ">
<li class="event" data-date="09:30 - 10:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="10:00 - 10:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event break" data-date="10:30 - 11:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Break</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="11:00 - 11:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 4</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
You should change your approach
Try this:
.timeline {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background: rgba(255, 255, 255, 0.03);
color: rgba(0, 0, 0, 0.8);
font-family: "Source Sans Pro", sans-serif;
margin: 0 auto 50px auto;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
font-size: 1.03em;
padding: 30px;
list-style: none;
text-align: left;
font-weight: 100;
max-width: 30%;
}
.timeline .event:before,
.timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -160px;
color: rgba(0, 0, 0, 1);
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
.timeline .event:after {
box-shadow: 0 0 0 4px #a5a5a5;
left: -8px;
background: #313534;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 5px;
}
.timeline .event h3 {
margin-top: 0px;
}
.timeline .event {
border-left: 4px solid #a5a5a5;
border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
padding-bottom: 0px;
padding-left: 40px;
position: relative;
}
.timeline .break {
border-left: 4px dotted #a5a5a5;
}
<ul class="timeline ">
<li class="event" data-date="09:30 - 10:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="10:00 - 10:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event break" data-date="10:30 - 11:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Break</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="11:00 - 11:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 4</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>