Advertisement
pacho_the_python

treta

Feb 19th, 2023
826
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.33 KB | None | 0 0
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,900;1,700&display=swap');
  2.  
  3. body {
  4.     font-family: 'Poppins', sans-serif;
  5.     display: flex;
  6.     flex-direction: column;
  7.     align-items: center;
  8. }
  9.  
  10. header {
  11.     width: 70%;
  12.     height: 450px;
  13.     background-image: url(./images/landing-photo.jpg);
  14.     background-position: center;
  15.     background-repeat: no-repeat;
  16.     background-size: cover;
  17. }
  18.  
  19. .travel {
  20.     font-size: 18px;
  21.     font-weight: 600;
  22. }
  23.  
  24. nav {
  25.     margin-top: 16px;
  26.     padding: 6px 0;
  27.     margin-left: 200px;
  28.     margin-right: 200px;
  29.     display: flex;
  30.     flex-direction: row;
  31.     justify-content: space-between;
  32. }
  33.  
  34. .navigation_links {
  35.     display: flex;
  36.     flex-direction: row;
  37.     gap: 10px;
  38. }
  39.  
  40. .navigation_links a {
  41.     text-decoration: none;
  42.     color: black;
  43. }
  44.  
  45. .navigation_links .explore {
  46.     background-color: #360410;
  47.     color: white;
  48.     padding: 4px 10px;
  49.     border-radius: 20px;
  50. }
  51.  
  52. .nav_info {
  53.     margin: 100px 0 0 200px;
  54. }
  55.  
  56. .nav_info h1 {
  57.     font-weight: 600;
  58. }
  59.  
  60. .nav_info h4 {
  61.     font-size: 20px;
  62.     font-weight: 600;
  63.     padding-bottom: 20px;
  64. }
  65.  
  66. .nav_info_p {
  67.     padding-bottom: 20px;
  68. }
  69.  
  70. .nav_info_a {
  71.     background-color: #360410;
  72.     color: white;
  73.     padding: 4px 12px;
  74.     border-radius: 20px;
  75.     text-decoration: none;
  76. }
  77.  
  78.  
  79. /* Cards Section*/
  80.  
  81.  
  82. main {
  83.     width: 70%;
  84. }
  85.  
  86. .cards {
  87.     display: flex;
  88.     flex-direction: column;
  89.     align-items: center;
  90. }
  91.  
  92.  
  93. .cards_h2 {
  94.     text-align: center;
  95.     padding-top: 30px;
  96. }
  97.  
  98. .cards_p {
  99.     text-align: center;
  100. }
  101.  
  102. .card {
  103.     margin-top: 50px;
  104.     width: 230px;
  105.     height: 450px;
  106.     border-radius: 8px;
  107.     overflow: hidden;
  108. }
  109.  
  110. .cards_flex {
  111.     width: 70%;
  112.     display: flex;
  113.     flex-direction: row;
  114.     flex-wrap: wrap;
  115.     justify-content: space-around;
  116.     align-items: center;
  117.     gap: 20px;
  118. }
  119.  
  120. .card_picture {
  121.     width: 100%;
  122.     height: 200px;
  123.     background-image: url(./images/London.jpg);
  124.     background-position: center;
  125.     background-repeat: no-repeat;
  126.     background-size: cover;
  127. }
  128.  
  129. .card_content {
  130.     text-align: center;
  131.     margin-top: 20px;
  132. }
  133.  
  134. .card_content p {
  135.     font-size: 14px;
  136.     padding-top: 10px;
  137.     padding-bottom: 50px;
  138. }
  139.  
  140. .card_content a {
  141.     padding: 10px 20px;
  142.     text-decoration:  none;
  143.     color: black;
  144.     border: 1px solid black;
  145.     border-radius: 22px;
  146.     font-weight: 500;
  147. }
  148.  
  149. .rome {
  150.     background-image: url(./images/Rome.jpg);
  151. }
  152.  
  153. .cluj {
  154.     background-image: url(./images/Cluj-Napoca.jpg);
  155. }
  156.  
  157. .paris {
  158.     background-image: url(./images/Paris.jpg);
  159. }
  160.  
  161. .amsterdam {
  162.     background-image: url(./images/Amsterdam.jpg);
  163. }
  164.  
  165. .barcelona {
  166.     background-image: url(./images/Barcelona.jpg);
  167. }
  168.  
  169. /* Footer */
  170.  
  171. footer {
  172.     width: 70%;
  173.     height: 250px;
  174.     background-color: black;
  175.     display: flex;
  176.     flex-direction: row;
  177.     justify-content: space-around;
  178.     align-items: center;
  179.     color: white;
  180. }
  181.  
  182. .footer_div_ul {
  183.     display: flex;
  184.     flex-direction: row;
  185.     justify-content: space-between;
  186.     align-items: center;
  187.     gap: 50px;
  188. }
  189.  
  190. footer a {
  191.     text-decoration: none;
  192.     color: white;
  193. }
  194.  
  195. footer i {
  196.     padding-right: 15px;
  197. }
  198.  
  199. footer li {
  200.     margin-bottom: 16px;
  201. }
  202.  
  203. footer li a {
  204.     font-size: 12px;
  205. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement