98 lines
7.5 KiB
HTML
98 lines
7.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Channel Page</title>
|
||
|
|
<!-- Latest compiled and minified CSS -->
|
||
|
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
||
|
|
|
||
|
|
<!-- Optional theme -->
|
||
|
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
|
||
|
|
|
||
|
|
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Latest compiled and minified JavaScript -->
|
||
|
|
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="channel.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container" style="background-color:none;">
|
||
|
|
<div class="channelContianer">
|
||
|
|
<div class="coverContainer">
|
||
|
|
<div class="channelCover">
|
||
|
|
<img src="http://clipbucket.dev/temp/colorful6.jpg" alt="channel cover photo">
|
||
|
|
</div>
|
||
|
|
<div class="userPhotoContainer">
|
||
|
|
<div class="row">
|
||
|
|
<div class="userPhoto">
|
||
|
|
<a href="#"><img src="http://clipbucket.dev/temp/wp-user-avatar-300x300.png" alt="userPhoto"></a>
|
||
|
|
</div>
|
||
|
|
<div class="userInfo">
|
||
|
|
<a href="#">Jhon Doe</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-2">
|
||
|
|
<div class="channelUserMenu">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#">Subscribe</a></li>
|
||
|
|
<li><a href="#">Send Message</a></li>
|
||
|
|
<li><a href="#">Add as Friend</a></li>
|
||
|
|
<li><a href="#">Block user</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="featuredContainer">
|
||
|
|
<a href="#"><img src="http://clipbucket.dev/temp/colorful4.jpg" alt="featured item"></a>
|
||
|
|
<h3>Featured</h3>
|
||
|
|
</div>
|
||
|
|
<div class="channelTabs">
|
||
|
|
<ul class="clearfix">
|
||
|
|
<li class="active"><a href="#activity" data-toggle="tab">Activity</a></li>
|
||
|
|
<li><a href="#info" data-toggle="tab">Info</a></li>
|
||
|
|
<li><a href="#videos" data-toggle="tab">Videos</a></li>
|
||
|
|
<li><a href="#groups" data-toggle="tab">Groups</a></li>
|
||
|
|
<li><a href="#photos" data-toggle="tab">Photos</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="tab-content">
|
||
|
|
<div class="tab-pane active" id="activity">
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, reiciendis, repellat. Nam, ut, iste placeat vel architecto impedit voluptatum in sequi reiciendis eaque perspiciatis error est odit suscipit mollitia fugit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, delectus, autem quibusdam unde deserunt sint enim cupiditate asperiores natus architecto ea quae illum fugiat. Nesciunt nulla iusto expedita provident unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, recusandae, quae, error sit atque magnam quisquam dicta dignissimos perspiciatis rem impedit sunt aliquam est enim quas consectetur laboriosam. Laudantium, officiis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, minus quo praesentium. A, dolores, voluptatem dolorem praesentium explicabo fuga dicta recusandae iure voluptates dolor in et nesciunt magnam voluptate maiores!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, libero, voluptatum odio eveniet dolor explicabo quasi quidem animi deleniti voluptas incidunt unde nam iusto temporibus repellat omnis eos laudantium ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, saepe, fugit, aut, reprehenderit sint officiis aspernatur nam totam ea omnis veniam repellendus dignissimos molestiae. Neque, eveniet voluptatem maiores explicabo id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, itaque ex voluptatibus quam facere enim porro iste soluta accusantium repellat nesciunt amet commodi quod necessitatibus reiciendis sapiente aliquam voluptates. Doloremque?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, aut consequuntur architecto autem est adipisci voluptatibus placeat ea pariatur soluta nihil aliquid harum consectetur odit repudiandae quia ullam quasi vitae.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="info">
|
||
|
|
<p>
|
||
|
|
some text orem lroem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, porro, quos, eum tenetur aperiam numquam aspernatur exercitationem minima doloremque nam deserunt cum excepturi aliquid minus facere explicabo qui veritatis assumenda! and htmllorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quaerat, blanditiis non facere ab deleniti ducimus dignissimos maiores libero explicabo dolorum nam culpa id quos saepe qui esse vel suscipit!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, beatae, optio odio error inventore cum ut enim a maxime sapiente! Placeat, dignissimos, perferendis perspiciatis nostrum ducimus quibusdam earum beatae saepe!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, ipsum, maxime, quos ducimus assumenda praesentium odio suscipit eum nisi rem quibusdam iusto quae mollitia aliquam alias perspiciatis atque labore eius.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, deserunt, debitis eveniet totam laboriosam doloremque ea laudantium dicta velit aspernatur cum animi consequatur accusantium itaque quis voluptatem nam ipsam placeat!
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="videos">
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, molestiae, tempore deserunt quas dolorem eum dolore hic a velit repellat aliquid maxime esse? Animi, dolores obcaecati saepe odit eaque deleniti!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, aliquam, ea, aspernatur, doloremque ullam saepe suscipit autem vel provident itaque vero inventore ipsam fuga. Ipsam minus dolorem cumque unde dolore. sit amet, consectetur adipisicing elit. Nisi, veniam, cupiditate, eligendi, dolorem quo perferendis enim cum corporis fugit exercitationem expedita officia tempore blanditiis voluptatibus nam ducimus quia. Itaque, qui.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, itaque, velit ex commodi nisi tempora maiores dicta esse voluptatibus labore animi optio id architecto! Iste unde cupiditate nemo iusto optio.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="groups">
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, dolorem, repellendus cupiditate ab incidunt vero provident praesentium eos officia ut nemo tempore molestias quisquam quasi cum a ipsa itaque veritatis.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="tab-pane" id="photos">
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, dolorem, repellendus cupiditate ab incidunt vero provident praesentium eos officia ut nemo tempore molestias quisquam quasi cum a ipsa itaque veritatis.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2">
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, repellendus, omnis reiciendis sunt rem exercitationem nobis placeat itaque quas corporis. Reprehenderit, at eveniet necessitatibus ab dolores asperiores voluptas vero delectus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, veritatis voluptate distinctio suscipit! At, eius quam id dolores iure culpa assumenda nemo consectetur quos pariatur inventore expedita sequi natus omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nemo, officiis totam odio sint repellendus sequi quaerat nam voluptates minima sapiente
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|