CSS   27
css screen
Guest on 11th March 2023 12:15:42 AM


  1.  body {
  2.         background-color: #222344;
  3.         margin: 0;
  4.         padding: 0;
  5.         width: 100%;
  6.       }
  7.       #container {
  8.         max-width: 1072px;
  9.         width: 80%;
  10.         align: center;
  11.         margin-left: auto;
  12.         margin-right: auto;
  13.       }
  14.       h1 {
  15.         margin: 0px;
  16.         padding: 0px;
  17.         padding-top: 1em;
  18.         color: #cdad7d;
  19.         font-family: 'Libre Baskerville', serif;
  20.         font-size: 36pt;
  21.         font-weight: 100;
  22.         text-align: center;
  23.       }
  24.       h2 {
  25.         margin: 0px;
  26.         padding: 0px;
  27.         padding-top: 16px;
  28.         color: #cdad7d;
  29.         font-family: 'Libre Baskerville', serif;
  30.         font-size: 18pt;
  31.         font-weight: 100;
  32.         text-align: center;
  33.       }
  34.       h3 {
  35.         font-family: 'Inter', sans-serif;
  36.         color: white;
  37.         font-size: 24px;
  38.         font-weight: normal;
  39.         margin-top: 62px;
  40.         margin-bottom: 16px;
  41.       }
  42.  
  43.       div.head {
  44.         margin: 0px;
  45.         border: 2px solid #cdad7d;
  46.         margin-top: 20px;
  47.         padding-top: 24px;
  48.         padding-bottom: 30px;
  49.         padding-left: 96px;
  50.         padding-right: 96px;
  51.         color: white;
  52.         font-family: 'Inter', sans-serif;
  53.       }
  54.      
  55.       .head p {
  56.         margin: 0;
  57.         padding: 0;
  58.         font-size: 16px;
  59.         line-height: 24px;
  60.       }
  61.       .head ul {
  62.         margin: 28px;
  63.         padding: 0;
  64.         line-height: 24px;
  65.       }
  66.       a.headbtn {
  67.         display: block;
  68.         margin-left: auto;
  69.         margin-right: auto;
  70.         margin-top: 37px;
  71.         padding: 10px;
  72.         align: center;
  73.         text-decoration: none;
  74.         text-align: center;
  75.         font-size: 18px;
  76.         font-weight: 800;
  77.         background-color: #cdad7d;
  78.         color: #34314a;
  79.         width: 53%;
  80.         border: 0;
  81.       }
  82.     a.linksp {
  83.         width: 100%;
  84.         font-family: 'Inter', sans-serif;
  85.         padding: 0;
  86.         margin: 0;
  87.         color: #ffffff;
  88.         text-decoration: underline;
  89.       }
  90.       #icons {
  91.         display: wrap;
  92.         flex-wrap: wrap;
  93.         width: 100%;
  94.         height: 260px;
  95.         margin-top: 50px;
  96.       }
  97.       #icons div {
  98.         width: 33%;
  99.         min-height: 200px;
  100.         float: left;
  101.         text-align: center;
  102.       }
  103.  
  104.       #icons img {
  105.         padding-bottom: 4px;
  106.       }      
  107.       #icons p {
  108.         font-size: 15pt;
  109.         font-family: 'Inter', sans-serif;
  110.         text-align: center;
  111.         width: 100%;
  112.         color: white;
  113.       }
  114.      
  115.       .qhead{
  116.         margin-top: 15px;
  117.         padding: 10px;
  118.         padding-left: 20px;
  119.         background: #f4f1ec;
  120.         cursor: pointer;
  121.       }
  122.       .qhead p{
  123.         width: 100%;
  124.         font-family: 'Inter', sans-serif;
  125.         padding: 0;
  126.         margin: 0;
  127.         color: #222344;
  128.         font-weight: bold;
  129.       }
  130.       .answer {
  131.         border: 2px solid #cdad7d;
  132.         margin-top: 20px;
  133.         margin-bottom: 20px;
  134.         padding-left: 19px;
  135.         padding-right: 20px;
  136.         padding-bottom: 15px;
  137.         background: #222344;
  138.       }
  139.       .answer p{
  140.         width: 100%;
  141.         font-family: 'Inter', sans-serif;
  142.         padding: 0;
  143.         padding-top: 9px;
  144.         margin: 0;
  145.         font-size: 18px;
  146.         line-height: 23px;
  147.         color: #f4f1ec;
  148.       }
  149.      
  150.       .footer {
  151.         width: 100%;
  152.         padding: 20px;
  153.         font-family: 'Inter', sans-serif;
  154.         font-size: 16px;
  155.         color: white;
  156.         text-align: right;
  157.       }
  158.       .footer a {
  159.         text-decoration: none;
  160.         color: white;
  161.         margin-left: 10px;
  162.         margin-right: 10px;
  163.       }
  164.      
  165.       @media screen and (max-width: 800px) {
  166.         h1 {
  167.           padding-top: 50px;
  168.           padding-bottom: 30px;
  169.           font-size: 30px;
  170.         }
  171.         h2 {
  172.           font-size: 24px;
  173.         }
  174.         #icons div {
  175.           width: 100%;
  176.         }
  177.         #container {
  178.           width: 95%;
  179.           padding: 0;
  180.         }
  181.         div.head {
  182.           padding-top: 24px;
  183.           padding-bottom: 30px;
  184.           padding-left: 10px;
  185.           padding-right: 10px;
  186.         }
  187.         a.headbtn {
  188.           font-size: 18px;
  189.           width: 90%;
  190.         }
  191.         .footer {
  192.           padding: 0px;
  193.           margin: 10px;
  194.           text-align: center;
  195.         }
  196.       }  
  197.  
  198.       .smalltxt {
  199.        font-size: 5px;
  200.        text-align: center;
  201.       }
  202.  
  203. /****arrows****/
  204. .arrows {
  205.   width: 60px;
  206.   height: 72px;
  207.   position: absolute;
  208.   left: 50%;
  209.   margin-left: -30px;
  210.   bottom: 20px;
  211. }
  212.  
  213. .arrows path {
  214.   stroke: #ffffff;
  215.   fill: transparent;
  216.   stroke-width: 1px;  
  217.   animation: arrow 2s infinite;
  218.   -webkit-animation: arrow 2s infinite;
  219. }
  220.  
  221. @keyframes arrow
  222. {
  223. 0% {opacity:0}
  224. 40% {opacity:1}
  225. 80% {opacity:0}
  226. 100% {opacity:0}
  227. }
  228.  
  229. @-webkit-keyframes arrow /*Safari and Chrome*/
  230. {
  231. 0% {opacity:0}
  232. 40% {opacity:1}
  233. 80% {opacity:0}
  234. 100% {opacity:0}
  235. }
  236.  
  237. .arrows path.a1 {
  238.   animation-delay:-1s;
  239.   -webkit-animation-delay:-1s; /* Safari 和 Chrome */*/
  240. }
  241.  
  242. .arrows path.a2 {
  243.   animation-delay:-0.5s;
  244.   -webkit-animation-delay:-0.5s/* Safari 和 Chrome */e */
  245. }
  246.  
  247. .arrows path.a3 {
  248.   animation-delay:0s;
  249.   -webkit-animation-delay:/* Safari 和 Chrome */om
Raw Paste

Login or Register to edit or fork this paste. It's free.