|
|
| Line 10: |
Line 10: |
| | = Modeling = | | = Modeling = |
| | <html> | | <html> |
| | + | <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> |
| | + | <li class="active"><a href="#red" data-toggle="tab">Red</a></li> |
| | + | <li><a href="#orange" data-toggle="tab">Orange</a></li> |
| | + | <li><a href="#yellow" data-toggle="tab">Yellow</a></li> |
| | + | <li><a href="#green" data-toggle="tab">Green</a></li> |
| | + | <li><a href="#blue" data-toggle="tab">Blue</a></li> |
| | + | </ul> |
| | + | <div id="my-tab-content" class="tab-content"> |
| | + | <div class="tab-pane active" id="red"> |
| | + | <h1>Red</h1> |
| | + | <p>red red red red red red</p> |
| | + | </div> |
| | + | <div class="tab-pane" id="orange"> |
| | + | <h1>Orange</h1> |
| | + | <p>orange orange orange orange orange</p> |
| | + | </div> |
| | + | <div class="tab-pane" id="yellow"> |
| | + | <h1>Yellow</h1> |
| | + | <p>yellow yellow yellow yellow yellow</p> |
| | + | </div> |
| | + | <div class="tab-pane" id="green"> |
| | + | <h1>Green</h1> |
| | + | <p>green green green green green</p> |
| | + | </div> |
| | + | <div class="tab-pane" id="blue"> |
| | + | <h1>Blue</h1> |
| | + | <p>blue blue blue blue blue</p> |
| | + | </div> |
| | + | </div> |
| | | | |
| - | <section style="background:#efefe9;">
| |
| - | <div class="container">
| |
| - | <div class="row">
| |
| - | <div class="board">
| |
| - | <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
| |
| - | <div class="board-inner">
| |
| - | <ul class="nav nav-tabs" id="myTab">
| |
| - | <div class="liner"></div>
| |
| - | <li class="active">
| |
| - | <a href="#home" data-toggle="tab" title="welcome">
| |
| - | <span class="round-tabs one">
| |
| - | <i class="glyphicon glyphicon-home"></i>
| |
| - | </span>
| |
| - | </a></li>
| |
| - |
| |
| - | <li><a href="#profile" data-toggle="tab" title="profile">
| |
| - | <span class="round-tabs two">
| |
| - | <i class="glyphicon glyphicon-user"></i>
| |
| - | </span>
| |
| - | </a>
| |
| - | </li>
| |
| - | <li><a href="#messages" data-toggle="tab" title="bootsnipp goodies">
| |
| - | <span class="round-tabs three">
| |
| - | <i class="glyphicon glyphicon-gift"></i>
| |
| - | </span> </a>
| |
| - | </li>
| |
| - |
| |
| - | <li><a href="#settings" data-toggle="tab" title="blah blah">
| |
| - | <span class="round-tabs four">
| |
| - | <i class="glyphicon glyphicon-comment"></i>
| |
| - | </span>
| |
| - | </a></li>
| |
| - |
| |
| - | <li><a href="#doner" data-toggle="tab" title="completed">
| |
| - | <span class="round-tabs five">
| |
| - | <i class="glyphicon glyphicon-ok"></i>
| |
| - | </span> </a>
| |
| - | </li>
| |
| - |
| |
| - | </ul></div>
| |
| - |
| |
| - | <div class="tab-content">
| |
| - | <div class="tab-pane fade in active" id="home">
| |
| - |
| |
| - | <h3 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></h3>
| |
| - | <p class="narrow text-center">
| |
| - | Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
| |
| - | </p>
| |
| - |
| |
| - | <p class="text-center">
| |
| - | <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
| |
| - | </p>
| |
| - | </div>
| |
| - | <div class="tab-pane fade" id="profile">
| |
| - | <h3 class="head text-center">Create a Bootsnipp<sup>™</sup> Profile</h3>
| |
| - | <p class="narrow text-center">
| |
| - | Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
| |
| - | </p>
| |
| - |
| |
| - | <p class="text-center">
| |
| - | <a href="" class="btn btn-success btn-outline-rounded green"> create your profile <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
| |
| - | </p>
| |
| - |
| |
| - | </div>
| |
| - | <div class="tab-pane fade" id="messages">
| |
| - | <h3 class="head text-center">Bootsnipp goodies</h3>
| |
| - | <p class="narrow text-center">
| |
| - | Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
| |
| - | </p>
| |
| - |
| |
| - | <p class="text-center">
| |
| - | <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
| |
| - | </p>
| |
| - | </div>
| |
| - | <div class="tab-pane fade" id="settings">
| |
| - | <h3 class="head text-center">Drop comments!</h3>
| |
| - | <p class="narrow text-center">
| |
| - | Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
| |
| - | </p>
| |
| - |
| |
| - | <p class="text-center">
| |
| - | <a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
| |
| - | </p>
| |
| - | </div>
| |
| - | <div class="tab-pane fade" id="doner">
| |
| - | <div class="text-center">
| |
| - | <i class="img-intro icon-checkmark-circle"></i>
| |
| - | </div>
| |
| - | <h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h3>
| |
| - | <p class="narrow text-center">
| |
| - | Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
| |
| - | </p>
| |
| - | </div>
| |
| - | <div class="clearfix"></div>
| |
| - | </div>
| |
| - |
| |
| - | </div>
| |
| - | </div>
| |
| - | </div>
| |
| - | </section>
| |
| - |
| |
| | | | |
| | | | |
| | </div> | | </div> |
| | </html> | | </html> |
"
