Copy link to clipboard
Copied
Hi, been out of the game for a while and now getting back into it all! I have a customer who likes the interactivity of the scroll banner on the home page without going to another page. The example page they like is link is http://www.boltonbros.co.uk and you click the arrows to move the banner along. It has real text, images and links / buttons on each banner cycle. Is there a template in Dreamweaver I can use or some coding I can add? Thanks guys, I feel a right newby but so much has changed since I last played!
This is pretty near to the original example. Needs a bit of work but its 90% there. If you can write a bit of coding you can usually find something out there and adapt it to your own requirements, or pretty close.
<html>
<head>
<title>Slider</title>
<style>
body {
font-family: helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.slider-container {
background-color: #f1f1f1;
padding: 50px 0 100px 0;
border-bottom: 1px solid #ccc;
...
Copy link to clipboard
Copied
I think its referred to as a Carousel banner - I want to mix images / links and live text... any pointers would be appreciated - thanks!
Copy link to clipboard
Copied
There are a lot of these out there that are free. Many are made with jQuery and are easy to install. You need to look at the demos to determine which one has the right feature set.
Google jQuery image slider, jQuery image carousel.
It is possible to create this effect using no javascript/jQuery, but the problem is moving the slides forward automatically. If you don't need the slides to do that, then a purely CSS3 solution is possible.
(Actually, CSS3 can handle automatic scrolling, but it's harder to set up)
Copy link to clipboard
Copied
Thats a sophisticated carousel. It not only slides the images and text across but it also highlights the panel beneath it in a different colors plus it slides back an forth according to which image you are on plus it has swipe capabilities on mobile devices.
If you just need a simple craousel with images and text and a couple of arrows for going back and forth then you could adapt:
There's plenty of options which cnabe included:
I think the url that you referenced is a bespoke solution, its nice.
Copy link to clipboard
Copied
Its always a bummer when your client asks you for something you can't actually do. This ones good.
Copy link to clipboard
Copied
The question is can the OP work from the examples?
Someone coming back to web development, will have a lot of catching up to do, as a lot has changed over the last few years. So no offence intended to the OP with the above comment.
Copy link to clipboard
Copied
pziecina wrote
The question is can the OP work from the examples?
No, not if they want it to replicate the example.
pziecina wrote
Someone coming back to web development, will have a lot of catching up to do, as a lot has changed over the last few years. So no offence intended to the OP with the above comment.
Id go further - forget the example and lower your expectations, unless you want to pay someone it aint happening.
Copy link to clipboard
Copied
You can do something similar with Bootstrap's Carousel component in DW CC.
Below, I made 3 slight modifications to the HTML code.

CODE:
<!doctype html>
<html langu="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.3.7</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.center-block { float: none }
</style>
</head>
<body class="container">
<div class="row">
<div class="col-sm-10 center-block text-center">
<h1>Bootstrap Carousel</h1>
<h2><em>Modified</em></h2>
</div>
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-offset-1 col-sm-6"> <img class="img-responsive" src="http://lorempixel.com/600/400/nature/4" alt="..."> </div>
<div class="col-sm-4">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur harum a labore eius corporis in accusamus praesentium delectus cum ipsa quisquam, quas incidunt rerum aliquam culpa totam odio numquam.</p>
<ul>
<li>Some Item</li>
<li>Some Item</li>
<li>Some Item</li>
<li>Some Item</li>
</ul>
<button class="btn btn-default">Button 1</button>
<button class="btn btn-success">Button 2</button>
</div>
</div>
<div class="item">
<div class="col-sm-offset-1 col-sm-6"> <img class="img-responsive" src="http://lorempixel.com/600/400/nature/3" alt="..."> </div>
<div class="col-sm-4">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur harum a labore eius corporis in accusamus praesentium delectus cum ipsa quisquam, quas incidunt rerum aliquam culpa totam odio numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
</div>
</div>
<div class="item">
<div class="col-sm-offset-1 col-sm-6"> <img class="img-responsive" src="http://lorempixel.com/600/400/nature/2" alt="..."> </div>
<div class="col-sm-4">
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur harum a labore eius corporis in accusamus praesentium delectus cum ipsa quisquam, quas incidunt rerum aliquam culpa totam odio numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<button class="btn btn-lg btn-info">Button 1</button>
<button class="btn btn-lg btn-primary">Button 2</button>
</div>
<!--/item--></div>
<!--/inner--></div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
<!--/carousel--></div>
<!--/row--></div>
<!--latest jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Copy link to clipboard
Copied
Ask 3 web designers how to do something & you'll get 9 different answers
.
Re: Bootstrap example
You can add some CSS to your custom stylesheet to make it fade rather than slide.
See live demo below:
Nancy
Copy link to clipboard
Copied
I agree with Rob, this could be done using a css animation content slider with a little javascript -
Change the reveal on hover to be part of the normal flow -
<!doctype html>
<html lang="en">
<head>
<title>Examples: Content Switcher</title>
<meta charset="utf-8">
<meta name="description" content="An example of a content switcher with next and previous navigation links" />
<script>
var init = function() {
var slider = document.getElementById('slider');
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var four = document.getElementById('four');
var next = document.getElementById("next");
var prev = document.getElementById("prev");
next.addEventListener( 'click', function(){
var margin = window.getComputedStyle(slider).getPropertyValue("margin-left");
switch (margin) {
case "0px":
slider.style.marginLeft = "-600px";
one.style.opacity = "0";
one.style.webkitTransform = "scale(0)";
one.style.transform = "scale(0)";
two.style.opacity = "1";
two.style.webkitTransform = "scale(1)";
two.style.transform = "scale(1)";
break;
case "-600px":
slider.style.marginLeft = "-1200px";
two.style.opacity = "0";
two.style.webkitTransform = "scale(0)";
two.style.transform = "scale(0)";
three.style.opacity = "1";
three.style.webkitTransform = "scale(1)";
three.style.transform = "scale(1)";
break;
case "-1200px":
slider.style.marginLeft = "-1800px";
three.style.opacity = "0";
three.style.webkitTransform = "scale(0)";
three.style.transform = "scale(0)";
four.style.opacity = "1";
four.style.webkitTransform = "scale(1)";
four.style.transform = "scale(1)";
break;
case "-1800px":
slider.style.marginLeft = "0px";
four.style.opacity = "0";
four.style.webkitTransform = "scale(0)";
four.style.transform = "scale(0)";
one.style.opacity = "1";
one.style.webkitTransform = "scale(1)";
one.style.transform = "scale(1)";
break;
}
}, false);
prev.addEventListener( 'click', function(){
var margin = window.getComputedStyle(slider).getPropertyValue("margin-left");
switch (margin) {
case "0px":
slider.style.marginLeft = "-1800px";
one.style.opacity = "0";
one.style.webkitTransform = "scale(0)";
one.style.transform = "scale(0)";
four.style.opacity = "1";
four.style.webkitTransform = "scale(1)";
four.style.transform = "scale(1)";
break;
case "-600px":
slider.style.marginLeft = "0px";
two.style.opacity = "0";
two.style.webkitTransform = "scale(0)";
two.style.transform = "scale(0)";
one.style.opacity = "1";
one.style.webkitTransform = "scale(1)";
one.style.transform = "scale(1)";
break;
case "-1200px":
slider.style.marginLeft = "-600px";
three.style.opacity = "0";
three.style.webkitTransform = "scale(0)";
three.style.transform = "scale(0)";
two.style.opacity = "1";
two.style.webkitTransform = "scale(1)";
two.style.transform = "scale(1)";
break;
case "-1800px":
slider.style.marginLeft = "-1200px";
four.style.opacity = "0";
four.style.webkitTransform = "scale(0)";
four.style.transform = "scale(0)";
three.style.opacity = "1";
three.style.webkitTransform = "scale(1)";
three.style.transform = "scale(1)";
break;
}
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);
</script>
<style>
/* ------------------------------------ */
/* --- GENERAL
/* ------------------------------------ */
* {
box-sizing: border-box;
}
body {
font-family: "helvetica", "sans-serif";
font-size: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 2em auto;
overflow: hidden;
}
/* ------------------------------------ */
/* --- SLIDER/SWITCHER
/* ------------------------------------ */
.slider {
width: 2400px;
position: relative;
z-index: 1;
margin-left: 0px;
-webkit-transition: margin-left 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
transition: margin-left 0.5s ease-in-out, transform 0.5s ease-in-out;
}
/* ------------------------------------ */
/* --- CONTENT
/* ------------------------------------ */
.content {
width: 600px;
height: 400px;
float: left;
text-align: center;
padding: 2em 0;
border-radius: 1%;
}
.one {
background: #c66;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.two {
background: #6c6;
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.three {
background: #66c;
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
.four {
background: #cc6;
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
/* ------------------------------------ */
/* --- ADDITIONAL CONTENT
/* ------------------------------------ */
.additional {
padding: 1em 25%;
position: absolute;
bottom: -6em;
background: rgba(0,0,0,0.3);
color: #eee;
font-weight: 100;
-webkit-transition: bottom 0.5s ease-in;
transition: bottom 0.5s ease-in;
}
.content:hover .additional {
bottom: -1em;
}
/* ------------------------------------ */
/* --- NAVIGATION
/* ------------------------------------ */
.nav {
font-size: 5em;
width: 800px;
position: absolute;
margin: 1.5em 0 0 -100px;
}
.nav a {
text-decoration: none;
color: #444;
font-weight: bold;
}
.prev {float: left;}
.next {float: right;}
</style>
</head>
<body>
<div class="container">
<div class="slider" id="slider">
<div class="content one" id="one">
<h1>This is page 1</h1>
<p class="additional">This is some additional information about page 1 that can be revealed on hover.</p>
</div>
<div class="content two" id="two">
<h1>This is page 2</h1>
<p class="additional">This is some additional information about page 2 that can be revealed on hover.</p>
</div>
<div class="content three" id="three">
<h1>This is page 3</h1>
<p class="additional">This is some additional information about page 3 that can be revealed on hover.</p>
</div>
<div class="content four" id="four">
<h1>This is page 4</h1>
<p class="additional">This is some additional information about page 4 that can be revealed on hover.</p>
</div>
</div>
<div class="nav">
<a class="prev" id="prev" href="#">〈</a>
<a class="next" id="next" href="#">〉</a>
</div>
</div>
</body>
</html>
Copy link to clipboard
Copied
Guys, looks like I've got plenty of solutions to consider and I want to say 'thanks' to all and glad I posted the question on here and got great feedback. Will give the most obvious / easiest a go and get cracking on catching up on my web skillz for sure! Will keep you posted.
Thank you!
Copy link to clipboard
Copied
Hi furydesigns,
For the benefit of other folks visiting this post in the future, can you mark the answer that you finally used as Correct?
All of these are good solutions to be sure.
Thanks,
Preran
Copy link to clipboard
Copied
Sure, no problem!
Thanks!
Copy link to clipboard
Copied
This is pretty near to the original example. Needs a bit of work but its 90% there. If you can write a bit of coding you can usually find something out there and adapt it to your own requirements, or pretty close.
<html>
<head>
<title>Slider</title>
<style>
body {
font-family: helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.slider-container {
background-color: #f1f1f1;
padding: 50px 0 100px 0;
border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 900px) {
.slider-container {
padding: 50px 0 0 0;
}
}
.slider-container h1 {
text-align: center;
padding: 0 0 30px 0;
font-weight: 400;
}
.information-boxes {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.prev i, .next i {
font-size: 60px;
color: #666;
}
@media screen and (max-width: 900px) {
.prev i, .next i {
background-color: #000;
color: #fff;
padding: 0 10px;
}
}
.slider {
width: 95%;
margin: 0 auto;
overflow: hidden;
min-height: 400px;
position: relative;
padding: 0 75px;
}
@media screen and (max-width: 900px) {
.slider {
width: 100%;
padding: 0;
min-height: 300px;
}
}
@media screen and (max-width: 480px) {
.slider {
min-height: 200px;
}
}
.slider ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
width: 400%;
height: 100%;
}
.slider li {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
position: absolute;
}
.slider .image {
float: left;
width: 50%;
}
@media screen and (max-width: 900px) {
.slider .image {
float: none;
width: 100%;
}
}
.slider-wrapper{
position: relative;
}
.slider button {
position: absolute;
display: block;
box-sizing: border-box;
border: none;
outline: none;
top: 0;
bottom: 0;
color: #000;
margin: 0;
padding: 0;
text-align:center;
z-index: 2;
}
.slider button.prev {
left: 0;
background-color: transparent;
}
.slider button.next {
right: 0;
background-color: transparent;
}
.slider .content {
float: left;
width: 40%;
padding: 30px;
}
@media screen and (max-width: 900px) {
.slider .content {
float: none;
width: 100%;
padding: 20px;
}
}
.info {
width: 25%;
padding: 20px;
background-color: #f1f1f1;
}
@media screen and (max-width: 900px) {
.info {
width: 100%;
}
}
.red {
background-color: red;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
$(function() {
var ul = $(".slider ul");
var slide_count = ul.children().length;
var slide_width_pc = 100.0 / slide_count;
var slide_index = 0;
ul.find("li").each(function(indx) {
var left_percent = (slide_width_pc * indx) + "%";
$(this).css({"left":left_percent});
$(this).css({width:(100 / slide_count) + "%"
});
});
// Listen for click of prev button
$(".slider .prev").click(function() {
console.log("prev button clicked");
slide(slide_index - 1);
if(slide_index == 1) {
$(".red").css({"background-color":"red", "color":"white"});
$(".green , .blue , .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 2) {
$(".blue").css({"background-color":"blue", "color":"white"});
$(".red , .green, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 3) {
$(".green").css({"background-color":"green", "color":"white"});
$(".red , .blue, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
});
// Listen for click of next button
$(".slider .next").click(function() {
console.log("next button clicked");
slide(slide_index + 1);
if(slide_index == 0) {
$(".blue").css({"background-color":"blue", "color":"white"});
$(".red , .green, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 1) {
$(".green").css({"background-color":"green", "color":"white"});
$(".red , .blue, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});
}
if(slide_index == 2) {
$(".orange").css({"background-color":"orange", "color":"white"});
$(".red , .blue, .green").css({"background-color": "#f1f1f1" , "color" : "black"});
}
});
function slide(new_slide_index) {
if(new_slide_index < 0 || new_slide_index >= slide_count) return;
var margin_left_pc = (new_slide_index * (-100)) + "%";
ul.animate({"margin-left": margin_left_pc}, 400, function() {
slide_index = new_slide_index
});
}
});
</script>
</head>
<body>
<div class="slider-container">
<h1>Slider</h1>
<div class="slider_wrapper">
<div class="slider">
<ul>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/blue_morpho_butterfly_189907.jpg"/></div>
<div class="content"><h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure libero praesentium quisquam sed tempora.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/monarch_butterfly_193610.jpg"/></div>
<div class="content"><h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/background_with_flower_and_butterfly_201511...."/></div>
<div class="content"><h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, architecto dicta illum nisi quisquam voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
<li>
<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg"/></div>
<div class="content"><h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, architecto dicta illum nisi quisquam voluptas?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>
</div>
</li>
</ul>
<button class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
<button class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
</div>
<!-- end slider-wrapper -->
</div>
<!-- end slider -->
</div>
<!-- end slider-container -->
<div class="information-boxes">
<div class="info red">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
<div class="info blue">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
<div class="info green">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
<div class="info orange">
<h2>Slide 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>
</div>
</div>
</body>
</html>
Copy link to clipboard
Copied
Hi
I've just realized how the effect was done -
Tabbed panels, but instead of simply making the content appear, it slides the content in, and the content below the 'slideshow' are the tabs themselves -
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tabbed Content Using checkbox</title>
<style type="text/css">
body {
font-family: Cambria, Arial;
background: #333;
}
.tabs {
width: 100%;
max-width: 600px;
margin: 100px auto;
}
input {
opacity: 0;
}
label {
cursor: pointer;
color: #eee;
border-radius: 5px 5px 0 0;
padding: 1.5% 3%;
float: left;
margin-right: 2px;
font: italic 1em cambria;
}
label:hover {
background-color: #666;
}
input:checked + label {
background: #fff;
color: #333;
}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
opacity: 1;
-webkit-transition: .3s;
}
.panels {
float: left;
clear: both;
position: relative;
width: 100%;
background: #fff;
border-radius: 0 10px 10px 10px;
min-height: 315px;
}
.panel {
width: 100%;
opacity: 0;
position: absolute;
background: #fff;
border-radius: 0 10px 10px 10px;
padding: 4%;
box-sizing: border-box;
}
.panel h2 {
margin: 0;
font-family: Arial;
}
</style>
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
<div class="panel">
<h2>This is Panel Four</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>
<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>
</div>
</div>
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
</article>
</body>
</html>
Find more inspiration, events, and resources on the new Adobe Community
Explore Now