API tools faq
paste
Guest User

Untitled

a guest
Jan 22nd, 2019
100
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.60 KB | None | 0 0
raw download clone embed print report
  1. <body>
  2. <div class="back">
  3. <div class="border">
  4. <div class="text-container">
  5. <div class="header">Cuba</div>
  6. </div>
  7. </div>
  8. <div class="small-text-container">
  9. <div class="small-text">Explore the world of Casas & Cadillacs</div>
  10. </div>
  11. </div>
  12.  
  13. </body>
  14.  
  15.  
  16.  
  17. *{
  18.  
  19. box-sizing: border-box;
  20. }
  21. body{
  22. margin: 0;
  23. display: flex;
  24. justify-content: center;
  25.  
  26. }
  27. .back{
  28. display: flex;
  29. justify-content: center;
  30. background-image: url(cuba-logo1.png);
  31. height: 700px;
  32. width: 1440px;
  33. background-position: center;
  34. background-blend-mode: normal, color;
  35.  
  36.  
  37. }
  38. @media screen and (max-width: 1024px) {
  39. .back{
  40. height: 600px;
  41. width: 1024px;
  42. background-position: center;
  43. }
  44. }
  45. @media screen and (max-width: 425px) {
  46. .back{
  47. height: 291px;
  48. width: 425px;
  49. background-position: bottom center;
  50. }
  51. }
  52.  
  53.  
  54.  
  55.  
  56. .border{
  57. position: absolute;
  58. display: flex;
  59. justify-content: center;
  60. align-items: center;
  61. width: 1360px;
  62. height: 620px;
  63. border: 2px solid #ecb84c;
  64. margin-top: 40px;
  65. border-radius: 4px;
  66. }
  67. @media screen and (max-width: 1024px) {
  68. .border{
  69. width: 944px;
  70. height: 530px;
  71. margin-top:32px;
  72. margin-right: 10px;
  73. }
  74.  
  75. @media screen and (max-width: 425px) {
  76. .border{
  77. width: 375px;
  78. height: 255px;
  79. margin-top:15px;
  80. }
  81. }
  82.  
  83.  
  84. .text-container{
  85. width: 527px;
  86. height: 227px;
  87. text-align: center;
  88. margin: 0;
  89.  
  90.  
  91. }
  92. .header{
  93. text-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
  94. font-family: Georgia;
  95. font-size: 200px;
  96. font-weight: bold;
  97. font-style: normal;
  98. font-stretch: normal;
  99. line-height: normal;
  100. letter-spacing: normal;
  101. color: white;
  102. }
  103. @media screen and (max-width: 1024px){
  104. .header{
  105. font-size: 180px;
  106. }
  107. }
  108. @media screen and (max-width: 425px) {
  109. .header{
  110. font-size: 90px
  111. }
  112.  
  113. .small-text-container{
  114. margin-top: 644px;
  115. position: absolute;
  116. text-align: center;
  117.  
  118.  
  119. }
  120. @media screen and (max-width: 1024px){
  121. .small-text-container{
  122. margin-top: 545px;
  123. }
  124. }
  125. @media screen and (max-width: 425px) {
  126. .small-text-container{
  127. margin-top: 260px;
  128. }
  129. .small-text{
  130. color: #fff;
  131. font-size: 24px;
  132. text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
  133. font-family: Georgia;
  134. font-size: 24px;
  135. font-weight: normal;
  136. font-style: normal;
  137. font-stretch: normal;
  138. line-height: normal;
  139. letter-spacing: normal;
  140. }
  141. @media screen and (max-width: 425px) {
  142. .small-text{
  143. font-size: 14px;
  144. }
  145.  
  146. @media screen and (max-width: 1024px) {
  147. .border{
  148. width: 944px;
  149. height: 530px;
  150. margin-top:32px;
  151. margin-right: 10px;
  152. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!