Advertisement
DizaBlah

360 Footer3

Mar 25th, 2023
890
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.65 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. /*   .h2 {
  177.     margin-bottom: 15px;
  178.     padding-bottom: 1px;
  179.   } */
  180.  
  181.   .footer-about {
  182.     display: flex;
  183.     flex-direction: column;
  184.     align-items: center;
  185.   }
  186.   .footer-about .logo-footer {
  187.     margin-bottom: 5rem;
  188.     margin-right: 2rem;
  189.   }
  190.   /* adjust the padding in between the header and the copy beneath it */
  191.  
  192.   /* Adjust alignment of useful links */
  193.   .useful-link {
  194.     text-align: left;
  195. /*     margin-left: 1em; */
  196.     margin-bottom:3rem;
  197.   }
  198.   /* Adjust alignment of social links */
  199.   .social-links {
  200.     flex-direction: column;
  201.     align-items: left;
  202.     margin-bottom:3rem;
  203.   }
  204.   /* Adjust alignment of address links */
  205.   .address-links {
  206.     text-align: left;
  207.   }
  208.   /* Add margin to address link items */
  209.   .address-links li {
  210.     margin-bottom: 1rem;
  211.   }
  212.   .footer-about .logo-footer img {
  213.     display: block;
  214.     height: 1rem;
  215.     max-width: 100%;
  216.   }
  217.   .address-links li i:nth-child(1) {
  218.     padding-top: 9px;
  219.   }
  220.   .address-links .address1 {
  221.     font-weight: 500;
  222.     font-size: 15px;
  223.     display: flex;
  224.   }
  225.   .address-links {
  226.     line-height: 32px;
  227.     color: #777777;
  228.   }
  229.   .use-links {
  230.     line-height: 32px;
  231.   }
  232.   .use-links li i {
  233.     font-size: 14px;
  234.     padding-right: 8px;
  235.     color: #898989;
  236.   }
  237.   .use-links li a {
  238.     color: #303030;
  239.     font-size: 15px;
  240.     font-weight: 500;
  241.     color: #777777;
  242.   }
  243.   .use-links li a:hover {
  244.     color: #000;
  245.   }
  246.   .address-links li a {
  247.     color: #303030;
  248.     font-size: 15px;
  249.     font-weight: 500;
  250.     color: #777777;
  251.   }
  252.   .address-links li i {
  253.     font-size: 16px;
  254.     padding-right: 8px;
  255.     color: #f7403a;
  256.   }
  257.  
  258.   /* Adjust alignment of footer about section */
  259.   .footer-about {
  260.     display: flex;
  261.     flex-direction: column;
  262.     align-items: center;
  263.   }
  264.   .footer-about .logo-footer {
  265.     margin-bottom: 1rem;
  266.   }
  267.   / Adjust alignment of useful links / .useful-link {
  268.     text-align: center;
  269.   }
  270.   / Adjust alignment of social links / .social-links {
  271.     flex-direction: column;
  272.     align-items: left;
  273.   }
  274.   / Adjust alignment of address links / .address-links {
  275.     text-align: left;
  276.   }
  277.   / Add margin to address link items */ .address-links li {
  278.     margin-bottom: 1rem;
  279.   }
  280.  
  281.   .copy-right-sec {
  282.     padding: 1.8rem;
  283.     background: #f7403a;
  284.     color: #fff;
  285.     text-align: left;
  286.   }
  287.  
  288.   .copy-right-sec a {
  289.     color: #fcd462;
  290.     font-weight: 500;
  291.   }
  292. }
  293.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement