Advertisement
DizaBlah

360 Footer2

Mar 25th, 2023 (edited)
868
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.52 KB | Source Code | 0 0
  1. /* footer section start */
  2. .my-footer * {
  3.   -webkit-box-sizing: border-box;
  4.   -moz-box-sizing: border-box;
  5.   -o-box-sizing: border-box;
  6.   -ms-box-sizing: border-box;
  7.   box-sizing: border-box;
  8. }
  9.  
  10. .my-footer-body body {
  11.   font-size: 1em;
  12.   background: #fff;
  13.   max-width: 1920px;
  14.   margin: 0 auto;
  15.   overflow-x: hidden;
  16.   font-family: poppins;
  17. }
  18. #footer {
  19.   background: #f7f7f7;
  20.   padding: 3rem;
  21.   padding-top: 5rem;
  22.   padding-bottom: 5em;
  23. }
  24. #footer h2 {
  25.   font-size: 1.5em;
  26. }
  27. #footer2 {
  28.   background: #f7f7f7;
  29.   padding: 3rem;
  30.   margin-top: 0px;
  31.   /* padding-top: 5rem; */
  32.   padding-top: 7rem;
  33. /*   padding-bottom: 80px; */
  34.   background-image: url(../images/cards/v748-toon-111.png);
  35. }
  36. .footer-about {
  37.   display: flex;
  38.   flex-direction: column;
  39.   align-items: center;
  40.   font-size: 1em;
  41.   font-family: poppins;
  42.   font-weight: 400;
  43.   margin-bottom: 1rem;
  44. /*   margin-right: 4rem; */
  45.   padding-right: 2rem;
  46. }
  47. .footer-about .logo-footer {
  48.   font-size: 1em;
  49.   font-family: poppins;
  50.   font-weight: 500;
  51.   margin-bottom: 1rem;
  52. }
  53. .logo-footer {
  54.   /* max-width: 300px; */
  55. }
  56. .social-links {
  57.   /* display: flex;
  58.   flex-direction: column;
  59.   align-items: center;
  60.   justify-content: center; */
  61. }
  62. .social-links h2 {
  63.   padding-bottom: 15px;
  64.   font-size: 20px;
  65. }
  66. .social-links img {
  67.   padding-bottom: 1.5rem;
  68. }
  69. .social-icons {
  70.   display: flex;
  71.   flex-direction: column;
  72.   gap: 1rem;
  73.   color: #777777;
  74.   font-size: 1em;
  75.   font-family: poppins;
  76.   font-weight: 500;
  77. }
  78. .social-icons a {
  79.   /* font-size: 18px; */
  80.   /* background: #ffffff; */
  81.   /* box-shadow: rgb(0 0 0 / 8%) 0px 4px 12px;
  82.   padding: 0.4rem 1rem 0.4rem 1rem;
  83.   border-radius: 3px;
  84.   color: #82074a; */
  85.   /* margin-right: 18px; */
  86.   color: #777777;
  87. }
  88. .social-icons a:hover {
  89.   color: #000;
  90. }
  91. .social-icons a i {
  92.   box-shadow: rgb(0 0 0 / 15%) 0px 4px 12px;
  93.   padding: 0.4rem 1rem 0.4rem 1rem;
  94.   border-radius: 3px;
  95.   color: #f7403a;
  96.   font-size: 16px;
  97.   margin-right: 12px;
  98. }
  99. li {
  100.   list-style: none;
  101. }
  102. .useful-link h2 {
  103.   padding-bottom: 0.4rem;
  104.   font-weight: 600;
  105. }
  106. .useful-link img {
  107.   padding-bottom: 15px;
  108. }
  109. .use-links {
  110.   line-height: 2rem;
  111.   font-size: 1em;
  112.   font-family: poppins;
  113.   font-weight: 600;
  114. }
  115. .use-links li i {
  116.   font-size: 1em;
  117.   padding-right: 1rem;
  118.   color: #898989;
  119. }
  120. .use-links li a {
  121.   color: #303030;
  122.   font-size: 15px;
  123.   font-weight: 500;
  124.   color: #777777;
  125. }
  126. .use-links li a:hover {
  127.   color: #000;
  128. }
  129. .address h2 {
  130.   padding-bottom: 15px;
  131.   font-size: 20px;
  132.   font-weight: 600;
  133. }
  134. .address img {
  135.   padding-bottom: 15px;
  136. }
  137. .address-links li a {
  138.   font-size: 15px;
  139.   font-weight: 500;
  140.   color: #777777;
  141. }
  142. .address-links li i {
  143.   font-size: 16px;
  144.   padding-right: 8px;
  145.   color: #f7403a;
  146. }
  147. .address-links li i:nth-child(1) {
  148.   padding-top: 9px;
  149. }
  150. .address-links .address1 {
  151.   font-weight: 500;
  152.   font-size: 15px;
  153.   display: flex;
  154. }
  155. .address-links {
  156.   line-height: 32px;
  157.   color: #777777;
  158. }
  159. .copy-right-sec {
  160.   padding: 1.8rem;
  161.   background: #f7403a;
  162.   color: #fff;
  163.   text-align: center;
  164. }
  165. .copy-right-sec a {
  166.   color: #fcd462;
  167.   font-weight: 500;
  168. }
  169. a {
  170.   text-decoration: none;
  171. }
  172.  
  173. /* media queries*/
  174. @media only screen and (max-width: 768px) {
  175.   /* Adjust alignment of footer about section */
  176.   .footer-about {
  177.     display: flex;
  178.     flex-direction: column;
  179.     align-items: center;
  180.   }
  181.   .footer-about .logo-footer {
  182.     margin-bottom: 1rem;
  183.     margin-right: 2rem;
  184.   }
  185.   /* adjust the padding in between the header and the copy beneath it */
  186.  
  187.   /* Adjust alignment of useful links */
  188.   .useful-link {
  189.     text-align: left;
  190.     margin-left: 1em;
  191.   }
  192.   /* Adjust alignment of social links */
  193.   .social-links {
  194.     flex-direction: column;
  195.     align-items: left;
  196.   }
  197.   /* Adjust alignment of address links */
  198.   .address-links {
  199.     text-align: left;
  200.   }
  201.   /* Add margin to address link items */
  202.   .address-links li {
  203.     margin-bottom: 1rem;
  204.   }
  205.   .footer-about .logo-footer img {
  206.     display: block;
  207.     height: auto;
  208.     max-width: 100%;
  209.   }
  210.   .address-links li i:nth-child(1) {
  211.     padding-top: 9px;
  212.   }
  213.   .address-links .address1 {
  214.     font-weight: 500;
  215.     font-size: 15px;
  216.     display: flex;
  217.   }
  218.   .address-links {
  219.     line-height: 32px;
  220.     color: #777777;
  221.   }
  222.   .use-links {
  223.     line-height: 32px;
  224.   }
  225.   .use-links li i {
  226.     font-size: 14px;
  227.     padding-right: 8px;
  228.     color: #898989;
  229.   }
  230.   .use-links li a {
  231.     color: #303030;
  232.     font-size: 15px;
  233.     font-weight: 500;
  234.     color: #777777;
  235.   }
  236.   .use-links li a:hover {
  237.     color: #000;
  238.   }
  239.   .address-links li a {
  240.     color: #303030;
  241.     font-size: 15px;
  242.     font-weight: 500;
  243.     color: #777777;
  244.   }
  245.   .address-links li i {
  246.     font-size: 16px;
  247.     padding-right: 8px;
  248.     color: #f7403a;
  249.   }
  250.  
  251.   /* Adjust alignment of footer about section */
  252.   .footer-about {
  253.     display: flex;
  254.     flex-direction: column;
  255.     align-items: center;
  256.   }
  257.   .footer-about .logo-footer {
  258.     margin-bottom: 1rem;
  259.   }
  260.   / Adjust alignment of useful links / .useful-link {
  261.     text-align: center;
  262.   }
  263.   / Adjust alignment of social links / .social-links {
  264.     flex-direction: column;
  265.     align-items: left;
  266.   }
  267.   / Adjust alignment of address links / .address-links {
  268.     text-align: left;
  269.   }
  270.   / Add margin to address link items */ .address-links li {
  271.     margin-bottom: 1rem;
  272.   }
  273.  
  274.   .copy-right-sec {
  275.     padding: 1.8rem;
  276.     background: #f7403a;
  277.     color: #fff;
  278.     text-align: left;
  279.   }
  280.  
  281.   .copy-right-sec a {
  282.     color: #fcd462;
  283.     font-weight: 500;
  284.   }
  285. }
  286.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement