Visit: http://www.hongkiat.com/blog/css-content-accordion/ Follow the tutorial a
ID: 3539204 • Letter: V
Question
Visit: http://www.hongkiat.com/blog/css-content-accordion/
Follow the tutorial above but use your own color scheme. Create the horizontal block as shown below:
In addition to changing the color scheme, you must also change the the text in the box. You will first give headings to each of the boxes and then include a small paragraph describing the technology. (this can include the history, example code, etc.)
The categories of the boxes (headings) should be:
1) HTML 5
2) CSS 3
3) JavaScript
4) PHP
5) Ruby on Rails
Explanation / Answer
/**
* CSS 3 File
* Save as style.css in the same location as index.html
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
.accordion { width:830px; overflow:hidden; margin:10px auto; color:#3C5400; background:#304200; padding:10px; }
.accordion section:target { background:#EEF2E4; padding:10px;}
.accordion section:target:hover { background:#EEF2E4; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{ color:#EDFCC2; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#EDFCC2; text-decoration:none; }
.accordion section{ float:left; overflow:hidden; color:#0B1A00; cursor:pointer; background: #0B1A00; margin:3px; }
.accordion section:hover {background:#253301;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#EDFCC2;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
.horizontal section{ width:5%; height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
-ms-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
.horizontal section:after{top:140px;left:15px;}
.horizontal section h2 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width:240px; position:relative; left:-100px; top:85px;
}
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
/* END OF CSS FILE */
<!-- save the following as index.html in same location as above css file---->
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>CSS3 Accordion</h1>
<div class="accordion horizontal">
<section id="HTML5">
<h2><a href="#HTML5">HTML 5</a></h2>
<p>HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997)and, as of December 2012, is a W3C Candidate Recommendation.Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.</p>
</section>
<section id="css3">
<h2><a href="#css3">CSS 3</a></h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.</p>
<p>Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999.</p>
</section>
<section id="js">
<h2><a href="#js">JavaScript</a></h2>
<p>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.</p>
<p>JavaScript is a prototype-based scripting language that is dynamic, is type safe, and has first-class functions. Its syntax was influenced by the language C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages.It is a multi-paradigm language, supporting object-oriented,imperative, and functional programming styles.</p>
</section>
<section id="php">
<h2><a href="#php">PHP</a></h2>
<p>PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is now installed on more than 244 million websites and 2.1 million web servers. Originally created by Rasmus Lerdorf in 1995, the reference implementation of PHP is now produced by The PHP Group.While PHP originally stood for Personal Home Page, it now stands for PHP: Hypertext Preprocessor, a recursive acronym.</p>
<p>
PHP code is interpreted by a web server with a PHP processor module which generates the resulting web page: PHP commands can be embedded directly into an HTML source document rather than calling an external file to process data. It has also evolved to include a command-line interface capability and can be used in standalone graphical applications.</p>
</section>
<section id="ror">
<h2><a href="#ror">Ruby on Rails</a></h2>
<p>Ruby on Rails, often simply Rails, is an open source web application framework which runs on the Ruby programming language. It is a full-stack framework: it allows creating pages and applications that gather information from the web server, talk to or query the database, and render templates out of the box. As a result, Rails features a routing system that is independent of the web server.</p>
<p>Ruby on Rails emphasizes the use of well-known software engineering patterns and principles, such as active record pattern, convention over configuration (CoC), don't repeat yourself (DRY), and model%u2013view%u2013controller (MVC).</p>
</section>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.