DanelCodes

Tutorial 02 | Prueba + Imagen

Mar 3rd, 2019
511
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.19 KB | None | 0 0
  1. /*HTML*/
  2.  
  3. <div id="banner">
  4. <n>The Story of Tonight</n>
  5. <m>Something you will never see again
  6. No matter what she tells you
  7. Let’s have another round tonight
  8. Raise a glass to the four of us</m>
  9. <o></o>
  10. </div>
  11.  
  12.  
  13. /*CSS*/
  14.  
  15. #banner {
  16. width: 900px;
  17. height: 400px;
  18. margin: 0 auto;
  19. overflow: hidden;
  20. background: url(https://via.placeholder.com/900x400);
  21. margin-top: 80px;
  22. border-left: 20px solid #C3DE48;
  23. }
  24. #banner n {
  25. font: 60px 'Anton', sans-serif;
  26. text-transform: uppercase;
  27. font-weight: bold;
  28. width: 270px;
  29. display: block;
  30. line-height: 100%;
  31. color: #C3DE48;
  32. border-left: 10px solid #C3DE48;
  33. padding-left: 40px;
  34. position: relative;
  35. top: 120px;
  36. left: 70px;
  37. }
  38. #banner m {
  39. font: 7px arial;
  40. text-transform: uppercase;
  41. letter-spacing: 1px;
  42. display: block;
  43. text-align: justify;
  44. margin-top: 5px;
  45. width: 266px;
  46. background: #fff;
  47. padding: 13px;
  48. position: relative;
  49. top: 120px;
  50. left: 70px;
  51. }
  52. #banner o {
  53. display: block;
  54. width: 0;
  55. height: 0;
  56. border-style: solid;
  57. border-width: 0 0 200px 700px;
  58. border-color: transparent transparent rgba(195, 222, 72, 0.5) transparent;
  59. position: relative;
  60. top: 65px;
  61. float: right;
  62. }
Advertisement
Add Comment
Please, Sign In to add comment