Content in Tab 1.
Link: CoursesWeb.net
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example Tabs with CSS</title> <style type="text/css"> /* Tabs effect with CSS - https://coursesweb.net/css/ */ .tabs { position: relative; width: 80%; min-height: 350px; margin: 1.2em auto 1em auto; } .tabs .tab { display: inline-block; margin: 0 -1px; } .tabs .tab label { position: relative; margin: 0; background: #dadada; border: 1px solid #ccc; border-bottom: none; -moz-border-radius:.5em; -webkit-border-radius:.5em; -khtml-border-radius:.5em; border-radius:.5em; padding: .5em .6em; font-weight: 700; cursor: pointer; } .tabs .tab [type=radio] { display: none; } .tabs .tab [type=radio]:checked ~ label { background: #d8fbda; border-bottom: 1px solid white; text-decoration: underline; } .tabs .tab [type=radio]:checked ~ label ~ .content { display: block; } .tabs .tab .content { display:none; position: absolute; top: 1.7em; left: 0; right: 0; background: #fdfdee; border: 1px solid #ccc; padding: .3em .8em; } /* END Tabs effect */ </style> </head> <body> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked /> <label for="tab-1">Tab-1</label> <div class="content"> <p>Content in Tab 1.<br/> Link: <a href="https://coursesweb.net/" title="Web Programming and Development">CoursesWeb.net</a></p> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1" /> <label for="tab-2">Tab-2</label> <div class="content"> <p>Text and link in Tab 2.<br/> Free <a href="https://coursesweb.net/css/" title="CSS Course">CSS Course</a>.</p> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1" /> <label for="tab-3">Tab-3</label> <div class="content"> <p>Content in Tab 3.<br/> Play <a href="https://coursesweb.net/games/" title="Flash Games"><img src="https://coursesweb.net/addons/css/thumb5_image.jpg" alt="Flash Games" width="183" height="123" /></a></p> </div> </div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1" /> <label for="tab-4">Tab-4</label> <div class="content"> <div>Content in Tab 4.<br/><h4>Tabs effect with CSS</h4></div> </div> </div> <div class="tab"> <input type="radio" id="tab-5" name="tab-group-1" /> <label for="tab-5">Tab-5</label> <div class="content"> <p>Other piece of HTML, images, text, etc., in Tab 5.<br/>Other line...</p> </div> </div> </div> </body> </html>Demo:
Content in Tab 1.
Link: CoursesWeb.net
Text and link in Tab 2.
Free CSS Course.
Content in Tab 3.
Play
Other piece of HTML, images, text, etc., in Tab 5.
Other line...
<embed src="flash_game.swf" width="450" height="350" />
#id:first-line { font-weight: bold; color: blue; }
var url = window.location; alert(url);
$homepage = file_get_contents("http://coursesweb.net/"); echo $homepage;