MainFooter.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <footer>
  3. <div class="footer-left">
  4. <div class="left-title">Stay Connected</div>
  5. <div class="left-message">Follow us on social media or send us an email!</div>
  6. <div class="left-icons">
  7. <div class="icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
  8. <div class="icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
  9. <div class="icon"><i class="fa fa-twitch" aria-hidden="true"></i></div>
  10. </div>
  11. </div>
  12. <div class="footer-right">
  13. <div class="right-links">
  14. <div class="links-title">Links</div>
  15. <a class="link">GitHub</a>
  16. <a class="link">Feedback</a>
  17. <a class="link">FAQ</a>
  18. <a class="link">Terms</a>
  19. <a class="link">Privacy</a>
  20. </div>
  21. </div>
  22. <div class="footer-message">© Copyright Musare: 2015 - {{ new Date().getFullYear() }}</div>
  23. </footer>
  24. </template>
  25. <style lang="sass" scoped>
  26. footer {
  27. width: 100%;
  28. height: 200px;
  29. background-color: #e0e0e0;
  30. padding-top: 26px;
  31. .footer-left {
  32. float: left;
  33. width: 50%;
  34. height: 150px;
  35. padding-left: 64px;
  36. .left-title {
  37. font-size: 25px;
  38. color: #616161;
  39. margin-bottom: 16px;
  40. }
  41. .left-message {
  42. font-size: 15px;
  43. color: #757575;
  44. margin-bottom: 16px;
  45. }
  46. .left-icons {
  47. .icon {
  48. float: left;
  49. font-size: 32px;
  50. padding-right: 16px;
  51. color: #757575;
  52. &:hover {
  53. cursor: pointer;
  54. color: #222222;
  55. }
  56. }
  57. }
  58. }
  59. .footer-right {
  60. float: right;
  61. width: 50%;
  62. height: 150px;
  63. padding-left: 64px;
  64. .right-links {
  65. float: right;
  66. width: 200px;
  67. }
  68. .links-title {
  69. float: right;
  70. width: 200px;
  71. font-size: 25px;
  72. color: #616161;
  73. margin-bottom: 8px;
  74. }
  75. .link {
  76. float: right;
  77. width: 200px;
  78. clear: both;
  79. font-size: 15px;
  80. color: #757575;
  81. margin-bottom: 2px;
  82. &:hover {
  83. cursor: pointer;
  84. color: #222222;
  85. }
  86. }
  87. }
  88. .footer-message {
  89. float: left;
  90. width: 100%;
  91. height: 50px;
  92. line-height: 50px;
  93. padding-left: 128px;
  94. background-color: #d3d3d3;
  95. color: #757575;
  96. }
  97. }
  98. </style>