New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/youtube channel template #115
Merged
lexbarba
merged 1 commit into
b00tc4mp:develop
from
Carlos7979:feature/youtube-channel-template
Apr 22, 2019
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
Binary file added
BIN
+353 KB
staff/carlos-corredor/youtube-channel-template/images/KIDKUTSMEDIA-6477.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+15.6 KB
staff/carlos-corredor/youtube-channel-template/images/icon-ui-1-options-512.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+9.98 KB
staff/carlos-corredor/youtube-channel-template/images/icon-ui-1-options-512w.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Youtube Carlos C</title> | ||
| <link rel="stylesheet" href="style.css" type="text/css"> | ||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <div class="header left-h"> | ||
| <a href="https://www.youtube.com/" target="_blank"><img src="https://wh1k8zidop.inscname.net/big/1477488.jpg?v=1545841812" alt="Youtube enlace" width="70px" height="35px"></a> | ||
| <h5 class="h-header">Boris Brejcha</h5> | ||
| </div> | ||
| <div class="header right-h"> | ||
| <a href="#"><img src="http://www.clker.com/cliparts/F/2/r/b/e/n/white-magnifying-glass-hi.png" alt="Buscar" width="15px" height="15px"></a> | ||
| <button class="button-header"><img src="images/icon-ui-1-options-512w.png" alt="Opciones de Youtube" width="20" height="20"></button> | ||
| </div> | ||
|
|
||
| </header> | ||
| <section class="subh"> | ||
| <div class="isubh"> | ||
| <img src="https://yt3.ggpht.com/JPWrmLpvj620gBgC7AB7fwMDXTQ3sJHFLXbz4BZkL_alFm_nA1tKmUzsSpY0DsnyMNbH58kkMew=w2560-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no" width="100%" alt="Boris Brejcha"> | ||
| </div> | ||
| <div class="subh2"> | ||
| <p class="text-l">Boris Brejcha</p> | ||
| <img class="logo" src="images/KIDKUTSMEDIA-6477.jpg" width="55" height="55" alt="Boris Brejcha logo"> | ||
| </div> | ||
| <div class="subh2-suscribe"> | ||
| <button class="subh2-suscribe-button"> | ||
| <img src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png" width="25" height="19" alt="youtube-logo-png-photo-0"> | ||
| <p class="text-s"> SUSCRIBIRSE</p> | ||
| </button> | ||
| <p class="text-s-info"> 249.516 suscriptores</p> | ||
| </div> | ||
| <nav class="nav navsh"> | ||
| <a class="nounderline ainicio" href="#"> INICIO </a> | ||
| <a class="nounderline" href="#">VÍDEOS</a> | ||
| <a class="nounderline" href="#">LISTAS DE REPRODUCCIÓN</a> | ||
| </nav> | ||
| </section> | ||
| <main> | ||
| <article> | ||
| <img class="responsive-image" src="https://i.ytimg.com/vi/buCD-_1UPn4/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLCrCaHV1RBXQcaAtCIJBH2lOgFy4w" alt="Boris Brejcha @ Tomorrowland Belgium 2018"> | ||
| <figcaption class="principal-i">Boris Brejcha @ Tomorrowland Belgium 2018</figcaption> | ||
| </article> | ||
| <section class="main-sections"> | ||
| <p class="principal-i">Vídeos musicales</p> | ||
| <article class="videos-sections"> | ||
| <div class="v-and-description"> | ||
| <img class="responsive-image list-videos" src="https://i.ytimg.com/vi/uSEP6TWxX-g/sddefault.jpg?v=54fd68f5" alt="Purple Noise video"> | ||
| <p class="text-i"> <span class="title-i">Purple Noise</span> <br> Boris Brejcha <br> 4,7mil visualizaciones</p> | ||
| </div> | ||
| <div class="v-dot-menu"> | ||
| <img src="images/icon-ui-1-options-512.png" width="22" height="22" alt="dot menu"> | ||
| </div> | ||
| </article> | ||
| <br> | ||
| <article class="videos-sections"> | ||
| <div class="v-and-description"> | ||
| <img class="responsive-image list-videos" src="https://i.ytimg.com/vi/DS8Lbw-PrU0/sddefault.jpg?v=56bb3666" alt="Purple Noise video"> | ||
| <p class="text-i"> <span class="title-i">Boris Brejcha - Welcome To Real Life - 18.22 - Preview</span> <br> Boris Brejcha <br> 22mil visualizaciones</p> | ||
| </div> | ||
| <div class="v-dot-menu"> | ||
| <img src="images/icon-ui-1-options-512.png" width="22" height="22" alt="dot menu"> | ||
| </div> | ||
| </article> | ||
| </section> | ||
| <section class="main-sections"> | ||
| <p class="principal-i">Álbumes</p> | ||
| <article class="videos-sections"> | ||
| <div class="v-and-description"> | ||
| <img class="responsive-image list-videos" src="https://i.ytimg.com/vi/bDu8YGf2Ogs/hqdefault.jpg" alt="Purple Noise video"> | ||
| <p class="text-i"> <span class="title-i">DJ Mixes Single Tracks</span> <br> Boris Brejcha</p> | ||
| </div> | ||
| <div class="v-dot-menu"> | ||
| <img src="images/icon-ui-1-options-512.png" width="22" height="22" alt="dot menu"> | ||
| </div> | ||
| </article> | ||
| <br> | ||
| <article class="videos-sections"> | ||
| <div class="v-and-description"> | ||
| <img class="responsive-image list-videos" src="https://i.ytimg.com/vi/xf1yp8cgxwg/mqdefault.jpg" alt="Purple Noise video"> | ||
| <p class="text-i"> <span class="title-i">22</span> <br> Boris Brejcha</p> | ||
| </div> | ||
| <div class="v-dot-menu"> | ||
| <img src="images/icon-ui-1-options-512.png" width="22" height="22" alt="dot menu"> | ||
| </div> | ||
| </article> </section> | ||
| </main> | ||
| <footer></footer> | ||
| </body> | ||
| </html> | ||
253 changes: 253 additions & 0 deletions
253
staff/carlos-corredor/youtube-channel-template/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,253 @@ | ||
| /* html{ | ||
| height: 100%; | ||
| } */ | ||
|
|
||
| body { | ||
| margin: 0; | ||
| padding: initial; | ||
| height: 100vh; | ||
| background: white; | ||
| } | ||
|
|
||
| /* div { | ||
| border: 1px solid yellowgreen; | ||
| } */ | ||
|
|
||
| header { | ||
| height: 7%; | ||
| /* border: 1px solid black; */ | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| background-color: #D12020; | ||
| } | ||
|
|
||
| .left-h { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-content: flex-start; | ||
| align-items: center; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .right-h { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-content: flex-end; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .h-header { | ||
| color: white; | ||
| font: 1em sans-serif; | ||
| } | ||
|
|
||
| .button-header { | ||
| background: #D12020; | ||
| border: #D12020; | ||
| } | ||
|
|
||
| .subh { | ||
| min-height: 10%; | ||
| /* border: 1px solid black; */ | ||
| } | ||
|
|
||
| /* .isubh { | ||
| background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQAl4pZwgIEa_wfQS62qXAidzxfFB71gjWKiScotEj2rhZI3NE); | ||
| min-height: 100px; | ||
| } */ | ||
|
|
||
| .logo { | ||
| border-radius: 50%; | ||
| transform: translateY(-95px) translateX(10px) | ||
| } | ||
|
|
||
| .subh2 { | ||
| height: 50px; | ||
| } | ||
|
|
||
| .subh2-suscribe { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: initial; | ||
| padding-left: 30px; | ||
| height: 10px; | ||
| } | ||
|
|
||
| .subh2-suscribe-button { | ||
| background: white; | ||
| display: flex; | ||
| align-items: center; | ||
| border: none; | ||
| } | ||
|
|
||
| .text-l { | ||
| font: 1em sans-serif; | ||
| padding-top: 0.5em; | ||
| padding-left: 2em; | ||
| font-size: 1.1em | ||
| } | ||
| .text-s { | ||
| font: 1em sans-serif; | ||
| color: #D12020; | ||
| } | ||
|
|
||
| .text-s-info { | ||
| font: 1em sans-serif; | ||
| color: #86707D; | ||
| font-size: 0.9em; | ||
| font-stretch: condensed; | ||
| } | ||
|
|
||
| main { | ||
| min-height: 80%; | ||
| /* border: 1px solid red; */ | ||
| } | ||
|
|
||
| main, header { | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| .navsh { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-around; | ||
| padding: 20px; | ||
| font: 0.9em sans-serif; | ||
| font-stretch: condensed; | ||
| border-block-end: 4px solid lightgrey; | ||
| height: 10px; | ||
| } | ||
|
|
||
| a.nounderline:visited, a.nounderline:link, a.nounderline:active { | ||
| text-decoration: black; | ||
| color: black; | ||
| } | ||
|
|
||
| .ainicio { | ||
| border-bottom: 2px solid #D12020; | ||
| padding-bottom: 30px; | ||
| } | ||
|
|
||
| .principal-i { | ||
| font: 0.9em sans-serif; | ||
| font-weight: 400; | ||
| font-stretch: condensed; | ||
| } | ||
|
|
||
| .main-sections { | ||
| padding: 1em; | ||
| border-top: 1px solid lightgray | ||
| } | ||
|
|
||
| .videos-sections { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .v-and-description { | ||
| display: inline-flex; | ||
| } | ||
|
|
||
| .responsive-image { | ||
| height: auto; | ||
| width: 100%; | ||
| } | ||
|
|
||
| img.responsive-image.list-videos { | ||
| /* height: auto; */ | ||
| max-width: 150px; | ||
| width: 100%; | ||
|
|
||
| } | ||
|
|
||
| .text-i { | ||
| font: 0.75em sans-serif; | ||
| font-weight: 500; | ||
| color: #86707D; | ||
| padding-left: 1em; | ||
|
|
||
| } | ||
|
|
||
| .title-i { | ||
| font: 1.1em sans-serif; | ||
| font-weight: 400; | ||
| color: black | ||
|
|
||
| } | ||
|
|
||
| .v-dot-menu { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| padding-top: 1em; | ||
| } | ||
|
|
||
| /* a.nounderline.ainicio { | ||
| text-decoration: underline; | ||
| } */ | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| body { | ||
| margin: 0; | ||
| height: 100vh; | ||
| background-color: yellowgreen; | ||
| } | ||
|
|
||
| div { | ||
| border: 1px solid yellowgreen; | ||
| } | ||
|
|
||
| header { | ||
| min-height: 20%; | ||
| border: 1px solid black; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| background-color: white | ||
| } | ||
|
|
||
| .subh { | ||
| min-height: 20%; | ||
| border: 1px solid black; | ||
|
|
||
| } | ||
|
|
||
| .isubh { | ||
| background-image: url(https://yt3.ggpht.com/JPWrmLpvj620gBgC7AB7fwMDXTQ3sJHFLXbz4BZkL_alFm_nA1tKmUzsSpY0DsnyMNbH58kkMew=w2560-fcrop64=1,00005a57ffffa5a8-nd-c0xffffffff-rj-k-no); | ||
| min-height: 100px; | ||
| background-position-x: center; | ||
|
|
||
| } | ||
|
|
||
| main { | ||
| min-height: 80%; | ||
| border: 1px solid red; | ||
| } | ||
|
|
||
| main, header { | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| .navsh { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-around; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| a.nounderline:visited, a.nounderline:link, a.nounderline:active { | ||
| text-decoration: black; | ||
| color: black; | ||
| } | ||
|
|
||
| a.nounderline.ainicio { | ||
| text-decoration: underline; | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Carlos7979 you have to look at BEM and rename all classes. BEM works as it follows:
A header could be:
header(block),header__title(block+element),header__img(block+element),header__quote(block+element),header__quote-link(block+element+element),header__quote-link--used(block+element+element+modifier). Please rename them using BEM.