Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron">
                    <div class="text-center">
                        <h1>Richard Branson</h1>
                        <h2><em>Student Tryer to High Flyer</em></h2>
                    </div>

                    <div class="row">
                        <center><img class="img img-responsive centre-block" src="https://adobe99u.files.wordpress.com/2015/02/richard-branson-in-hamburg.jpg" border="1" width="90%" alt="Richard Branson"></img></a></center>
                        <p id="frame" class="container text-center"> Richard Branson Aiming For The Sky </p>
                    </div>


                    <div class="content">
                        <div class="row">
                            <div class="container text-center">
                                <h4 id="heading4">Here is a timeline of Richard Bransons life</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="well">

                            <div class="container center-block">

                                <input name="boxes" id="toggle-box1" type="checkbox">
                                <label for="toggle-box1">1950 - 1979</label>
                                <div id="box1" class="box">

                                    <section>
                                        <br>
                                        <ul>
                                            <li><b>1950:</b> Born 18th July to parents Edward and Eve Branson in Blackheath, London.</li>
                                            <li><b>1966:</b> Drops out of school. Teacher predicts <em>"You will either end up in prison, or a millonaire". </em>How right he was.</li>
                                            <li><b>1968:</b> First edition of 'Student Magazine' is released.</li>
                                            <li><b>1970:</b> Starts selling records by mail-order.</li>
                                            <li><b>1971:</b> Opens first record shop on Oxford Street, London.</li>
                                            <li><b>1972:</b> Purchases 'The Manor Studio' the second residential recoridng studio in the UK. A getaway for recording artists to rest and produce in their own time, allowing their creative juices to flow free from time contraints.</li>
                                            <li><b>1973:</b> Launches 'Virgin Records' to produce their own music. Same year, signing their first major act Mike Oldfield and releasing his renowned album 'Tubular Bells'.</li>
                                            <li><b>1977:</b> Signs 'The Sex Pistols' and assists with thier release of "Nevermind the Bollocks, Here's the Sex Pistols".</li>
                                            <li><b>1978:</b> In an attempt to impress his future wife, Joan Templeton, buys Necker Island in the British Virgin Islands for £180,000. Today, Necker Island is part of the Virgin Limited Edition Portfolio.</li>
                                            <li><b>1979:</b> The first Virgin Megastore opened on Oxford Street in London, England. It would remain the brand's flagship store until it closes in 2007.</li>
                                            <li><b>1979:</b>The Virgin Books branch was established as a way to publish music titles that would compliment the Virgin Records label. The first title from Virgin Books was the "Sid Vicious Family Album".</li>
                                            <li><b>1979:</b> Virgin Films is launched to invest and distribute films that would also compliment the record label. The first film distributed through Virgin Films was the Sex Pistol's mockumentary, "The Great Rock n' Roll Swindle".</li>
                                        </ul>
                                    </section>
                                </div>
                            </div>
                        </div>
                        <input name="boxes" id="toggle-box2" type="checkbox">
                        <label for="toggle-box2">1980 - 1999</label>
                        <div id="box2" class="box">

                            <section>
                                <br>
                                <ul>

                                    <li><b>1980:</b> Virgin Records goes International.</li>
                                    <li><b>1983:</b> Virgin Games was launched to create and distribute video games for the gaming systems: Amiga, ZX Spectrum, Amstrad, CPC and C64.</li>
                                    <li><b>1984:</b> Virgin Atlantic's inaurgural flight was a Boeing 747-200 called the "Maiden Voyager".</li>
                                    <li><b>1985:</b> Virgin Holidays was founded as a type of travel agnecy that plans trips from start to finish.</li>
                                    <li><b>1987:</b> Virgin Records comes to the United States, closely followed by openings in Japan as well.</li>
                                    <li><b>1987:</b> The launch of Virgin Airship and Virgin Balloon Company served as inspiration for Branson's world record breaking trips across the ocean.</li>
                                    <li><b>1987:</b> Virgin helped launch the brand Mates condoms with the intention of spreading AIDS and HIV awareness. The line was marketed mostly towards young adults.</li>
                                    <li><b>1988:</b> The first version of Vigin Hotels opens (now known as Virgin Limited Edition) as an exclusive hotel chain with properties in Edinburgh, North Yorkshire and Hampshire.</li>
                                    <li><b>1989:</b> Married his second wife, Joan Templeman.</li>
                                    <li><b>1991:</b> Virgin Publishing is established and eventually becomes Virgin Books and publishes all six of Richard Branson's books.</li>
                                    <li><b>1991:</b> Janet Jackson is signed to Virgin Records for $25 million, making her the highest paid recording artist of that time. She was only with the label for one album, her fifth one named 'Janet".</li>
                                    <li><b>1992:</b> In a desperate attempt to save his Virgin Airlines business, Branson is forced to sell Virgin Records to Thorn EMI. He has gone on to admit it was one of the hardest, and most upsetting, decisions he ever had to make.</li>
                                    <li><b>1993:</b> On April 30, 1993 Virgin Radio hit the airwaves with Virgin 1215AM as the UK's first national and commerical rock music station. Branson's voice was the first one heard as the station went live at 12:15pm. The first record played was "Born to be Wild" by INXS.</li>
                                    <li><b>1993:</b>  Branson is awarded an honorary degree of Doctor of Technology from Loughborough University.</li>
                                    <li><b>1994:</b> Virgin Publishing is established and eventually becomes Virgin Books and publishes all six of Richard Branson's books.Both Virgin Vodka and Virgin Cola were launched around the same time, and apparently are great to drink together!</li>
                                    <li><b>1995:</b> Virgin Direct Personal Financing Services opens and their first product sold is a new style of 'Index Tracking' personal equity plans. This company would later become today's Virgin Money.</li>
                                    <li><b>1996:</b> Branson begins V2 as a new version of the previously sold Virgin Records. Some artists signed include: Powder Finger and Tom Jones.</li>
                                    <li><b>1996:</b> Virgin.net was launched as an internet service provider.</li>
                                    <li><b>1996:</b> An all-day music festival, the first V Festival is sponsored by Virgin, and held in two differnet locations in the UK on the same weekend.</li>
                                    <li><b>1997:</b> The ever-growing Virgin Trains promises to start running 40 new high-speed tilting trains to reduce travel times significantly.</li>
                                    <li><b>1997:</b> Virgin Books publishes the first edition of Richard Branson's autobiography, "Losing My Virginity". Link to purchase below.</li>
                                    <li><b>1999:</b> Virgin Mobile was Virgin's first telecommunications venture and eventually spread to the US in 2002.</li>
                                    <li><b>1999:</b> Branson became a founding sponsor of the International Centre for Missing & Exploited Children ("ICMEC"), the goal of which is to help find missing children, and to stop the exploitation of children, as his mother Eve became a founding member of ICMEC's Board of Directors.</li>
                                    <li><b>1999:</b> Richard Branson is knighted by Prince Charles of Wales for his contribution to entrepreneurship. His formal title is now: Sir Richard Branson.</li>
                                </ul>
                            </section>
                        </div>

                        <input name="boxes" id="toggle-box3" type="checkbox">
                        <label for="toggle-box3">2000 - 2010</label>
                        <div id="box3" class="box">

                            <section>
                                <br>
                                <ul>

                                    <li><b>2000:</b> Virgin Energy sells gas and electricity to residential households across the UK.</li>
                                    <li><b>2000:</b> Virgin Car group begins selling online.</li>
                                    <li><b>2000:</b> Virginmoney.com begins as a financial services supermarket.</li>
                                    <li><b>2000:</b> Virgin Blue begins as an independent Australian airline. It eventually became the fastest-growing company in Virgin's history.</li>
                                    <li><b>2000:</b> Virgin Wines is founded and begins to grow.</li>
                                    <li><b>2001:</b> Virgin Trains unveils it's game-changing 140mph tilting Pendolino train in the UK.</li>
                                    <li><b>2001:</b> Virgin Direct and Virginmoney.com combine to create today's Virgin Money.</li>
                                    <li><b>2001:</b> Virgin Experience starts as a day-adventure company offering anything from Porsche driving to scuba driving. Later, it was renamed as Virgin Experience Days.</li>
                                    <li><b>2002:</b> Virgin Books publishes Branson's second book, "Screw It Let's Do It".</li>
                                    <li><b>2004:</b> Virgin Galactic is announced as the world's first commercial space company.</li>
                                    <li><b>2004:</b> Virgin Unite begins as Virgin's non-profit foundation to help smaller charities gain recognition and funding.</li>
                                    <li><b>2006:</b> Virgin Fuel launches to invest growth capital in the renewable energy and resource efficiency sectors. Later it would be renamed to the Virgin Green Fund.</li>
                                    <li><b>2006:</b> V Festival comes to the United States under the name Virgin Mobile's Virgin Festival.</li>
                                    <li><b>2007:</b> Virgin Media becomes a "quadplay" company by offering TV, broadband, phone and mobile services all from the same company.</li>
                                    <li><b>2007:</b> Virgin America launches it's first flight from New York to San Francisco.</li>
                                    <li><b>2007:</b> Virgin Money becomes the preferred bidder for acquisition of the struggling bank, Nothern Rock.</li>
                                    <li><b>2007:</b> VAl Gore and Richard Branson launch the Virgin Earth Challenge which, "Seeks to find a commercially viable design which results in the new removal of anthropogenic, atmospheric greenhouse gases in an attempt to contribute materially to the stability of the Earth's climate system."</li>
                                    <li><b>2008:</b> Virgin Atlantic becomes the first airline company to fly a Boeing 747 using only biofuel.</li>
                                    <li><b>2008:</b> Virgin Books publishes Branson's third book, "Business Stripped Bare".</li>
                                    <li><b>2009:</b> Virgin America becomes the first airline company to offer free Wi-Fi access on every flight.</li>
                                    <li><b>2009:</b> Virgin Money becomes the preferred bidder for acquisition of the struggling bank, Nothern Rock.Virgin Holidays helped to open the V-Room in Gatwick Airport which is a lounge dedicated to travelers going on vacation, no matter what class they are flying.</li>
                                    <li><b>2009:</b> Virgin Health Bank commissions, desgins and builds the first cord blood stem cell processing and storage facility in Qatar.</li>
                                    <li><b>2009:</b>United State's Virgin Festival is renamed as the Virgin Mobile FreeFest and is free of charge to anyone who donates to the ReGeneration charity that supports homeless youth.</li>
                                    <li><b>2009:</b> Virgin Galactic unveils it's first commerically manned spaceship called the Virgin SpaceShip Enterprise.</li>
                                    <li><b>2010:</b> Virgin Racing launched as a Formula One team previously known as Manor Grand Prix.</li>
                                    <li><b>2010:</b> Virgin Produced is a film and TV development company that packages and produces film. The company made it's debut with the movie "Limitless".</li>
                                    <li><b>2010:</b> Virgin Books publishes Branson's fouth book, "Reach for the Skies".</li>
                                </ul>
                            </section>

                        </div>

                        <input name="boxes" id="toggle-box4" type="checkbox">
                        <label for="toggle-box4">2010 - 2017</label>
                        <div id="box4" class="box">

                            <section>
                                <br>
                                <ul>
                                    <li><b>2011:</b> Virgin Oceanic was launched as a deep sea exploration company using submarines.</li>
                                    <li><b>2011:</b> 14th November 2011, Branson is awared the ISTA Prize by the International Space Transport Association in The Hague for his pioneering achievements in the development of suborbital transport systems with "Virgin Galactic".</li>
                                    <li><b>2011:</b> Richard Bransons 5th book "Screw Business as Usual is released.</li>
                                    <li><b>2012:</b> Virgin Money buys Northern Rock</li>
                                    <li><b>2012:</b> Virgin Galactic announces the development of orbital space launch system <a href="https://en.wikipedia.org/wiki/LauncherOne">LauncherOne</a></li>
                                    <li><b>2012:</b> Virgin Care commenced a five-year contract for provision of a range of health services which had previously been under the aegis of NHS Surrey, the local primary care trust. By March 2015 Virgin Care was in charge of over 230 services nationwide.</li>
                                    <li><b>2012:</b> On 11 February 2012, Branson was honoured with the National Academy of Recording Arts and Sciences' President's Merit Award for his contributions to the music industry.</li>
                                    <li><b>2013:</b> Like a Virgin: Secrets They Won't Teach You at Business School, Branson's 6th book is released.</li>
                                    <li><b>2014:</b> On 15 May 2014, Branson received the 2014 Business for Peace Award, awarded annually by the Business for Peace Foundation in Oslo, Norway.</li>
                                    <li><b>2014:</b> Recognized as the most admired business person over the last five decades by The Sunday Times.</li>
                                    <li><b>2014:</b> Named No. 1 LGBT ally by the OUTstanding Organisation.</li>
                                    <li><b>2014:</b> Bransons 7th book is relased titled The Virgin Way: How to Listen, Learn, Laugh and Lead.</li>
                                </ul>
                            </section>

                        </div>

                        <div class="container">



                        </div>

                        <div class="container text-center">
                            <p>Afterthought and Future</p>
                            <p>
                                The way to look at Richards future are splitting it into two categories, where next for the Virgin brand, and what does the future hold for Richard. <br>
                                Virgin is now focusing on being a growth capital investor for small businesses and start ups. Virgin is now focusing on being a growth capital investor for small businesses and start ups.Richard is focused on being an ever inspiring presence in the business world and media, enjoying his days on Necker Island on the BVI. 
                            </p>

                            <a href="https://en.wikipedia.org/wiki/Richard_Branson" class="myButton">Read More About Richard Branson</a>
                            <a href="https://www.amazon.co.uk/Losing-Virginity-Sir-Richard-Branson/dp/0753519550" class="myButton">Buy "Losing my Virginity"</a>
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <p class="container text-center">Written & Coded By Joel Pickin</p>
                </div>
            </div>
              
            
!

CSS

              
                body {
    font-family: Trebuchet MS, Helvetica;
    margin: 60px;
}
.page-wrap {
    width: 800px;
    margin: 0 auto;
}

img {
  width: 100%;
  border: white solid 10px;
}

#frame {
  border: white solid 5px;
  background-color: white;
}

.heading4 {
  text-align: center;
}

.jumbotron {
  	-moz-box-shadow:inset 0px 1px 0px 0px #000000;
	-webkit-box-shadow:inset 0px 1px 0px 0px #000000;
	box-shadow:inset 0px 1px 0px 0px #000000;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:3px solid #c22d34;

}
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #000000;
	-webkit-box-shadow:inset 0px 1px 0px 0px #000000;
	box-shadow:inset 0px 1px 0px 0px #000000;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:2px solid #c22d34;
	display:inline-block;
	cursor:pointer;
	color:#9c3535;
	font-family:Trebuchet MS;
	font-size:16px;
	font-weight:bold;
	padding:3px 50px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}
.myButton:active {
	position:relative;
	top:1px;
}
input {
  display: none;
  visibility: hidden;
}
label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}
label:hover {
  color: #000;
}
label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
  height: 1.2rem;
  overflow: hidden;
  transition: height 0.5s;
  color: #000;
}

section {
  padding: 0 20px;
}

#toggle:checked ~ #expand {
  height: auto;
}
#toggle:checked ~ label::before {
  content: "-";
}
.box{
	min-height:200px;
	display:none;
}


#toggle-box1:checked ~ #box1,#toggle-box2:checked ~ #box2,#toggle-box3:checked ~ #box3, #toggle-box4:checked ~ #box4{
  display:block;
}

              
            
!

JS

              
                document.getElementsByTagName("h1")[0].style.fontSize = "80px";

$(function(){
  $('.sub').accordion();
});
              
            
!
999px

Console