You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.8 KiB
119 lines
3.8 KiB
<header>
|
|
<nav>
|
|
<nav-left>
|
|
<a><Icon name="menu" /> <Icon name="youtube" /> <logo>Youtube</logo></a>
|
|
</nav-left>
|
|
<input id="search" placeholder="Search" name="search">
|
|
<ul>
|
|
<li><Icon name="camera" color="#000" /></li>
|
|
<li><Icon name="more-vertical" color="#000" /></li>
|
|
<li><Icon name="grid" color="#000" /></li>
|
|
<li><button><Icon name="user" /> Sign In</button></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<left>
|
|
<figure>
|
|
<a href="/demos/google" use:link>
|
|
<img src="https://via.placeholder.com/800x450?text=Video">
|
|
</a>
|
|
<figcaption>
|
|
<a>#tag</a> <a>#anothertag</a>
|
|
<p>Title And Stuff</p>
|
|
<video-actions>
|
|
<likes>Stats Stats</likes>
|
|
<video-buttons>
|
|
<Icon name="thumbs-up" color="#999" /> 1.1K
|
|
<Icon name="thumbs-down" color="#999" /> 22
|
|
<Icon name="corner-up-right" color="#999" /> SHARE
|
|
<Icon name="menu" color="#999" /> SAVE
|
|
<Icon name="vertical-more" />
|
|
</video-buttons>
|
|
</video-actions>
|
|
</figcaption>
|
|
</figure>
|
|
<hr>
|
|
<promotion>
|
|
<nav>
|
|
<card>
|
|
<img src="https://via.placeholder.com/64x64?text=ME">
|
|
<info>
|
|
<h4>Zed A. Shaw</h4>
|
|
<subs>1 subscriber</subs>
|
|
</card>
|
|
<button id="subscribe">SUBSCRIBE</button>
|
|
</nav>
|
|
|
|
<content>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
|
|
ab illo inventore veritatis et quasi architecto beatae vitae dicta
|
|
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
|
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
|
|
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
|
|
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
|
|
quia non numquam eius modi tempora incidunt ut labore et dolore magnam
|
|
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
|
|
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
|
|
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
|
|
ea voluptate velit esse quam nihil molestiae consequatur, vel illum
|
|
qui dolorem eum fugiat quo voluptas nulla pariatur </content>
|
|
|
|
</promotion>
|
|
<hr>
|
|
|
|
<comments>
|
|
<nav>
|
|
<span>125 Comments</span> <sort><Icon name="bar-chart" color="var(--sub-color)" /> SORT BY</sort>
|
|
</nav>
|
|
|
|
{#each cards as card}
|
|
<card>
|
|
<img src="https://via.placeholder.com/64x64?text=Person">
|
|
<info>
|
|
<h4>Guys</h4>
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
|
|
accusantium doloremque laudantium, totam rem aperiam, eaque</p>
|
|
<nav>
|
|
<Icon name="thumbs-up" color="var(--sub-color)" /> 233
|
|
<Icon name="thumbs-down" color="var(--sub-color)" /> 1
|
|
</nav>
|
|
<reply><Icon name="chevron-down" /> View replies</reply>
|
|
</info>
|
|
</card>
|
|
{/each}
|
|
</comments>
|
|
</left>
|
|
|
|
<right>
|
|
{#each cards as card}
|
|
<card class="small">
|
|
<img src="https://via.placeholder.com/120x80?text=Thumb">
|
|
<info>
|
|
<h4>Video Thumb Title</h4>
|
|
<author>Zed</author>
|
|
<views>1.1M views</views>
|
|
<date>2 years ago</date>
|
|
</info>
|
|
</card>
|
|
{/each}
|
|
|
|
<figure>
|
|
<a href="/demos/google" use:link>
|
|
<img src="https://via.placeholder.com/300x150?text=Advert">
|
|
</a>
|
|
</figure>
|
|
|
|
{#each cards as card}
|
|
<card>
|
|
<img src="https://via.placeholder.com/120x80?text=Thumb">
|
|
<info>
|
|
<h4>Video Thumb Title</h4>
|
|
<author>Zed</author>
|
|
<views>1.1M views</views>
|
|
<date>2 years ago</date>
|
|
</info>
|
|
</card>
|
|
{/each}
|
|
</right>
|
|
</main>
|
|
|