_masthead.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // Styling for the masthead section
  2. /*====================================================
  3. MASTHEAD
  4. ======================================================*/
  5. section.masthead {
  6. position: relative;
  7. width: 100%;
  8. height: 100%;
  9. padding-top: 150px;
  10. padding-bottom: 100px;
  11. color: white;
  12. background: #087cf9;
  13. background: -webkit-linear-gradient(to left, #087cf9, $primary-col);
  14. background: linear-gradient(to left, #087cf9, $primary-col);
  15. .header-content {
  16. max-width: 500px;
  17. text-align: center;
  18. }
  19. .device-mockup.iphone6_plus.portrait.white>.device,
  20. .device-mockup.iphone6_plus.white>.device {
  21. margin:90px 0 0 0;
  22. width: 270px;
  23. height: 550px;
  24. }
  25. .header-content h1 {
  26. font-size: 30px;
  27. }
  28. .device-container {
  29. max-width: 270px;
  30. margin-right: auto;
  31. margin-left: auto;
  32. }
  33. .device-container .screen img {
  34. border-radius: 3px;
  35. }
  36. }
  37. .bg-banner-img img{
  38. position: absolute;
  39. width: 100%;
  40. margin-top: -50%;
  41. }
  42. @media (min-width: 992px) {
  43. section.masthead {
  44. height: 100vh;
  45. padding-top: 0;
  46. padding-bottom: 0;
  47. .header-content {
  48. margin-bottom: 0;
  49. text-align: left;
  50. }
  51. .header-content h1 {
  52. font-size: 40px;
  53. font-weight: 700;
  54. margin: auto;
  55. }
  56. .device-container {
  57. max-width: 325px;
  58. }
  59. }
  60. }
  61. @media (max-width:991px) {
  62. section.masthead {
  63. .device-mockup.iphone6_plus.portrait.white>.device,
  64. .device-mockup.iphone6_plus.white>.device {
  65. margin:50px 0 0 0;
  66. width: 270px;
  67. height: 550px;
  68. }
  69. }
  70. }