Difference between revisions of "Team:KU Leuven/Research/Results"
Line 1: | Line 1: | ||
<html> | <html> | ||
<body> | <body> | ||
+ | <style> | ||
+ | * { | ||
+ | -moz-box-sizing: border-box; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .accordion dl { border: 1px solid #ddd; } | ||
+ | |||
+ | .accordion dl:after { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | height: 1em; | ||
+ | width: 100%; | ||
+ | background-color: #c0392b; | ||
+ | } | ||
+ | |||
+ | .accordion dt > a { | ||
+ | text-align: center; | ||
+ | font-weight: 700; | ||
+ | padding: 2em; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | color: #fff; | ||
+ | -webkit-transition: background-color 0.5s ease-in-out; | ||
+ | -moz-transition: background-color 0.5s ease-in-out; | ||
+ | transition: background-color 0.5s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .accordion dd { | ||
+ | background-color: #eee; | ||
+ | font-size: 1em; | ||
+ | line-height: 1.5em; | ||
+ | } | ||
+ | |||
+ | .accordion dd > p { | ||
+ | padding: 1em 2em 1em 2em; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .accordion { | ||
+ | position: relative; | ||
+ | background-color: #eee; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | max-width: 960px; | ||
+ | margin: 0 auto; | ||
+ | padding: 2em 0 2em 0; | ||
+ | } | ||
+ | |||
+ | .accordionTitle { | ||
+ | background-color: #e74c3c; | ||
+ | border-bottom: 1px solid #c0392b; | ||
+ | } | ||
+ | |||
+ | .accordionTitle:before { | ||
+ | content: "+"; | ||
+ | font-size: 1.5em; | ||
+ | line-height: 0.5em; | ||
+ | float: left; | ||
+ | -moz-transition: -moz-transform 0.3s ease-in-out; | ||
+ | -o-transition: -o-transform 0.3s ease-in-out; | ||
+ | -webkit-transition: -webkit-transform 0.3s ease-in-out; | ||
+ | transition: transform 0.3s ease-in-out; | ||
+ | } | ||
+ | |||
+ | .accordionTitle:hover { background-color: #c0392b; } | ||
+ | |||
+ | .accordionTitleActive { background-color: #c0392b; } | ||
+ | |||
+ | .accordionTitleActive:before { | ||
+ | -webkit-transform: rotate(-225deg); | ||
+ | -moz-transform: rotate(-225deg); | ||
+ | transform: rotate(-225deg); | ||
+ | } | ||
+ | |||
+ | .accordionItem { | ||
+ | height: auto; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | </style> | ||
+ | |||
<div class="accordion"> | <div class="accordion"> | ||
<dl> | <dl> |
Revision as of 08:41, 8 September 2015
- First Accordion heading
-
First Accordion Content
- Second Accordion heading
-
Second Accordion Content
- Third Accordion heading
-
Third Accordion Content