[MODELO] You Tube

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[MODELO] You Tube

Mensagem por Boss em Sab 4 Nov 2017 - 15:16

You Tube

Perfil (Canal)



Código:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style>#youtube {width: 500px; background-color: #f1f1f1;} #yt1 {width: 500px; position: relative; height: 150px; background-image: url(CAPA DO CANAL AQUI); background-size: cover; background-position: center;} #yt1 img {position: absolute; top: 0px; left: 15px; width: 100px; height: 100px;} .yt-t {position: absolute; bottom: 0px; right: 0px; width: 84px; height: 30px; background-image: url(http://i59.tinypic.com/mc6asn.png);} .yt-t img {width: 30px!important; height: 30px!important;} #yt2 {background-color: #ffffff; padding: 20px; border: 1px solid #eee; position: relative;} .yt-t2 {color: #222; font-weight: bold; font-family: helvetica; font-size: 20px; text-align: left;} .yt-sub {width: 135px; height: 36px; position: absolute; right: 0px; top: 0px; background-image: url(http://i62.tinypic.com/2co55ar.png);} #yt3 {border: 1px solid #eee; background-color: #fff;} #yt4 {padding: 15px; background-color: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee;} .ytvid {width: 230px; display: inline-block; height: 190px; vertical-align: top; position: relative; margin: 1px 1px 2px 0px;} .ytvid img {width: 230px; height: 130px;} .ytvv {padding: 2px; font-family: helvetica; color: #fff; background-color: rgba(0,0,0,0.8); text-align: center; position: absolute; top: 110px; right: 5px; z-index: 5; font-size: 10px;} .ytvv2 {padding: 7px 7px 5px 7px; font-family: helvetica; color: #fff; background-color: rgba(0,0,0,0.8); text-align: center; position: absolute; top: 10px; left: 10px; z-index: 5; text-transform: uppercase; font-size: 10px; opacity: 0.8; font-weight: bold;} .ytw {margin-top: 5px; font-family: helvetica; color: #167ac6; font-weight: bold; line-height: 120%; font-size: 12px; text-align: left;} .ytw sub {display: block; font-size: 10px; text-transform: lowercase; color: #777777; font-weight: normal; margin-top: 5px;} .ytvw {background-color: rgba(255,255,255,0.4); width: 230px; height: 130px; position: absolute; top: 0px; left: 0px;}</style><center><div id="youtube"><div id="yt1"><img src="ÍCONE DO CANAL" /><div class="yt-t"></div></div><div id="yt2"><div class="yt-t2">NOME DO CANAL<img src="http://i60.tinypic.com/27zdwdl.png" /><BR><BR><center><a href="http://shine.jcink.net/index.php?showuser=145"><img src="http://i58.tinypic.com/9uqlgw.png" style="margin-bottom: -20px;" /></a> <div class="yt-sub"></div></center></div></div><BR><div id="yt3"><a href="http://shine.jcink.net/index.php?showuser=145"><img src="http://i58.tinypic.com/e848ls.png" /></a></div><div id="yt4"><div class="ytvid"><img src="GIF DO VÍDEO" /> <div class="ytvv">22:05</div><div class="ytw">TÍTULO DO VÍDEO<sub>visualizações views • 1 tempo da postagem</sub></div></div> <div class="ytvid"><div class="ytvw"></div><div class="ytvv2"></div><img src="GIF DO VÍDEO" /> <div class="ytvv">22:54</div><div class="ytw">TÍTULO DO VÍDEO<sub>visualizações  views • 1 tempo de postagem</sub></div></div> <div class="ytvid"><img src="GIF DO VÍDEO" /> <div class="ytvv">20:30</div><div class="ytw">TÍTULO DO VÍDEO<sub>visualizações views • 1 tempo de postagem</sub></div></div> <div class="ytvid"><img src="GIF DO VÍDEO" /> <div class="ytvv">22:05</div><div class="ytw">TÍTULO DO VÍDEO<sub>visualizações views • 1 tempo da postagem</sub></div></div> </div></div></center>

Postagem, novo vídeo



Código:
<center><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><style type="text/css">.hobts { width: 500px; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); } .hobts1 { width: 500px; height: 45px; background-color: #fbfbfb; } .hobts1a { width: 45px; height: 45px; color: #565656; font-size: 30px; text-align: center; line-height: 45px; } .hobts1a i { text-align: center; line-height: 45px; }.hobts1b { width: 258px; height: 45px; padding: 0px 15px; background-color: #fcfcfc; color: #d1d1d1; font-family: source sans pro; font-size: 11px; font-weight: 400; font-style: normal; text-align: left; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 45px; border-left: 1px solid #f3f3f3; border-right: 1px solid #f3f3f3; cursor: text; } .hobts1b i { margin-right: 5px; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; } .hobts1b:hover i { color: #ec2828; } .hobts1c { width: 54px; height: 35px; padding: 5px 15px; color: #d1d1d1; font-size: 12px; line-height: 35px; cursor: pointer; } .hobts1c img { width: 35px; height: 35px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .hobts1c i { margin-left: 5px; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; } .hobts1c:hover i { color: #ec2828; } .hobts1d { width: 70px; height: 35px; padding: 5px; background-color: #ec2828; color: #fafafa; font-family: source sans pro; font-size: 11px; font-weight: 400; font-style: normal; text-align: center; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 35px; cursor: pointer; } .hotbs2 { width: 420px; padding: 0px 40px; background-color: #1C2022; overflow: hidden; } .hotbs2 iframe { display: block; width: 420px; height: 236px; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); } .hotbs3 { width: 470px; padding: 15px; background-color: #272C2E; } .hotbs3a { width: 45px; } .hotbs3a img { display: inline-block; width: 45px; height: 45px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin-right: 15px; } .hotbs3b { width: 100px; padding: 0px 15px; color: #68737B; font-family: source sans pro; font-size: 11px; font-weight: 700; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; word-spacing: 1px; line-height: 100%; } .hotbs3c { width: 60px; height: 34px; padding: 8px 0px; color: #3e4549; font-family: source sans pro; font-size: 10px; font-weight: 700; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; word-spacing: 1px; line-height: 100%; border-left: 1px solid #34393d; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; cursor: pointer; } .hotbs3c i { display: block; font-size: 17px; margin-bottom: 5px; } .hotbs3c:hover { color: #68737B; } .hotbs4 { width: 400px; padding: 25px 50px; background-color: #fbfbfb; color: #686868; font-family: source sans pro; font-size: 10px; font-weight: 400; font-style: normal; text-align: left; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; } .hotbs4 b { color: #686868; font-family: source sans pro; font-size: 17px; font-weight: 700; font-style: normal; text-align: inherit; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; margin-right: 15px; } .hotbs4 i { color: #B4C4CF; font-family: source sans pro; font-size: 10px; font-weight: 400; font-style: italic; text-align: inherit; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; } .hotbs4 a { color: #B4C4CF; font-family: source sans pro; font-size: 10px; font-weight: 400; font-style: normal; text-align: inherit; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; } </style><div class="hobts"><div class="hobts1"><table cellpadding="0" cellspacing="0"><td><a href="http://shine.jcink.net/index.php?showuser=3019"><div class="hobts1a"><i class="fa fa-youtube"></i></div></a></td><td><div class="hobts1b"><i class="fa fa-search"></i> Search</div></td><td><div class="hobts1c"><img src="ÍCONE DO CANAL"><i class="fa fa-chevron-down"></i></div></td><td><div class="hobts1d">Upload <i class="fa fa-upload"></i></div></td></table></div>


<div class="hotbs2"><iframe width="560" height="315" src="LINK DO VÍDEO AQUI" frameborder="0" allowfullscreen></iframe></div>


<div class="hotbs3"><table cellpadding="0" cellspacing="0"><td><div class="hotbs3a"><img src="ÍCONE DO CANAL"></div</td><td><div class="hotbs3b">NOME DO CANAL</div></td><td><div class="hotbs3c"><i class="fa fa-comments"></i>comments</div></td><td><div class="hotbs3c"><i class="fa fa-plus-circle"></i>add to</div></td><td><div class="hotbs3c"><i class="fa fa-share-square-o"></i>share</div></td><td><div class="hotbs3c"><i class="fa fa-thumbs-up"></i>like</div></td><td><div class="hotbs3c"><i class="fa fa-thumbs-down"></i>dislike</div></td></table></div><div class="hotbs4"><b>TÍTULO DO VÍDEO</b><br><i>Published on Month DD, YEAR</i><p>


Descrição aqui.


AA/MM/DD</div>


</div>


</center>




avatar
BossAdministradores

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum