Facebook
From Crimson Matamata, 1 Month ago, written in CSS.
Embed
Download Paste or View Raw
Hits: 55
  1.  
  2. .loader_bg{
  3.     position: fixed;
  4.     z-index: 999999;
  5.     background: #fff;
  6.     width: 300%;
  7.     height: 300%;
  8. }
  9. .loader{
  10.     border: 0 soild transparent;
  11.     border-radius: 50%;
  12.     width: 500px;
  13.     height: 500px;
  14.     position: absolute;
  15.     top: calc(50vh - 280px);
  16.     left: calc(50vw - 250px);
  17. }
  18. .loader:before, .loader:after{
  19.     content: '';
  20.     border: 1em solid #ffffff;
  21.     border-radius: 50%;
  22.     width: inherit;
  23.     height: inherit;
  24.     position: absolute;
  25.     top: 0;
  26.     left: 0;
  27.     animation: loader 2s linear infinite;
  28.     opacity: 0;
  29. }
  30. .loader:before{
  31.     animation-delay: .5s;
  32. }
  33. @keyframes loader{
  34.     0%{
  35.         transform: scale(0);
  36.         opacity: 0;
  37.     }
  38.     50%{
  39.         opacity: 1;
  40.     }
  41.     100%{
  42.         transform: scale(1);
  43.         opacity: 0;
  44.     }
  45. }
  46. h1{
  47.     margin:0;
  48.     padding:0;
  49.     font-family: Serif ;
  50.     text-align: left;
  51.     margin-left: 30px;
  52.     margin-top:40px;
  53.     font-size:100px;
  54.     text-decoration: none !important;
  55.  
  56. }
  57. p{
  58.     font:32px;
  59.     margin: 10px;
  60.     line-height: 2.0;
  61.     font-family:Serif;
  62.     text-decoration: none !important;
  63.  
  64.    
  65. }
  66. body{
  67.     font-family:serif ;
  68. }
  69. * {
  70.     margin: 0px;
  71.     padding: 0px;
  72.   }
  73.  
  74. .banner{
  75.     width: 100%;
  76.     height: 100vh;
  77.    background: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(background.jfif);
  78.     background-size: cover;
  79.     background-position: center;
  80.  
  81. }
  82. .navbar{
  83.     width: 85%;
  84.     margin: auto;
  85.     padding: 35px 0;
  86.     display: flex;
  87.     align-items: center;
  88.     justify-content: space-between;
  89.    
  90. }
  91. .logo{
  92.     width: 120px;
  93.     cursor:pointer;
  94.     margin-left: -20px;
  95.  
  96. }
  97. .navbar ul li{
  98.     list-style: none;
  99.     display: inline-block;
  100.     margin: 0 20px;
  101.     position: relative;
  102. }
  103. .navbar ul li a{
  104.     color: #fff;
  105.     text-decoration: none;
  106.     text-transform: uppercase;
  107. }
  108. .navbar ul li::after{
  109.     content: '';
  110.     height: 3px;
  111.     width: 0%;
  112.     background: #fff;
  113.     position: absolute;
  114.     left: 0;
  115.     bottom: -10px;
  116.     transition: 0.5s;
  117. }
  118. .navbar ul li:hover::after{
  119.     width: 100%;
  120. }
  121. .content{
  122.     width: fit-content;
  123.     position: absolute;
  124.     top:20%;
  125.     text-align:center;
  126.     color: #fff;
  127.     overflow: hidden;
  128.     border-bottom: 5px solid rgba(255, 255, 255, 0);
  129.     animation: animate 5s linear forwards;
  130.     text-align: left;
  131.     margin-top: 40px;
  132.     margin-left: 100px;
  133.  
  134. }
  135. .content h1{
  136.     font-size: 100px;
  137.     color: white;
  138. }
  139.  
  140. @keyframes animate {
  141.     0% {
  142.         width: 10%;
  143.         height: 0%;
  144.     }
  145.     10% {
  146.         width: 20%;
  147.         height: 10%;
  148.     }
  149.     20%{
  150.         width: 40%;
  151.         height: 20%;
  152.     }
  153.     30% {
  154.         width: 80%;
  155.         height: 40%;
  156.     }
  157.     60% {
  158.         width: 100%;
  159.         height: 80%;
  160.     }
  161.     80% {
  162.         width: 70%;
  163.         height: 100%;
  164.     }
  165. }
  166. .content p{
  167.     margin: 20px auto;
  168.     font-weight: 100;
  169.     line-height: 25px;
  170. }
  171. button{
  172.     text-decoration: none !important;
  173.     width: 200px;
  174.     padding: 15px 0;
  175.     margin: 20px 10px;
  176.     border-radius: 25px;
  177.     font-weight: bold;
  178.     border: 2px solid #fff;
  179.     background: transparent;
  180.     color: #fff;
  181.     cursor: pointer;
  182.     overflow: hidden;
  183.     font-family: serif;
  184.     margin-left: 100px;
  185.     margin-top:40px;
  186. }
  187. button span{
  188.     height: 100%;
  189.     width: 0;
  190.     border-radius: 25px;
  191.     left: 0;
  192.     bottom: 0;
  193.     z-index: -1;
  194.     transition: 0.5s;
  195.     background: #45a49d;
  196.  
  197. }
  198. button:hover button span{
  199.     width: 100%;
  200.  
  201. }
  202. a, a:hover, a:focus, a:active {
  203.     text-decoration: none;
  204.     color: inherit;
  205. }
  206. .aboutUsContent{
  207.     width: 100%;
  208.     position: absolute;
  209.     top:50%;
  210.     transform: translateY(-50%);
  211.     text-align:center;
  212.     color: #fff;
  213. }
  214. .aboutUsContent h1{
  215.     font-size: 70px;
  216.     margin-top: 80px;
  217. }
  218. .aboutUscontent p{
  219.     margin: 20px auto;
  220.     font-weight: 100;
  221.     line-height: 25px;
  222. }
  223. .aboutUsBanner{
  224.     width: 100%;
  225.    background-color: rgb(255, 255, 255);
  226.     background-size: cover;
  227.     background-position: center;
  228.     float:left;
  229.     margin-top: 70px;
  230.     font-size: 20px;
  231.     text-align: center;
  232. }
  233. .aboutUsSelfie{
  234.     height:300px;
  235.      float: left;
  236.      margin-left: 50px;
  237.      border: 10px solid #000000;
  238.      margin-bottom: -50px;;
  239. }
  240.     .logoimg{
  241.         height: 500px;
  242.         float: right;
  243. }
  244. .large-text{
  245.     font-weight: 100;
  246.     font-size: 1.57em;
  247.     line-height: 1.5em;
  248.     margin: 30px 0px;
  249.     margin-left: 250px;
  250.     margin-right: 250px;
  251. }
  252. .headline-container {
  253.     margin-bottom: 30px;
  254.     margin-top: 5px;
  255.    
  256. }
  257.  
  258.     .headline-container h2 {
  259.         max-width: 600px;
  260.         margin: 0px auto;
  261.     }
  262.  
  263. .headline-lines {
  264.     width: 20%;
  265.     height: 2px;
  266.     background: #272b2d;
  267.     margin: 20px auto;
  268. }
  269. .OurTeam{
  270.     width: 100%;
  271.    background-color: rgb(255, 255, 255);
  272.     background-size: cover;
  273.     background-position: center;
  274.     float:left;
  275.     margin-top: 70px;
  276.     font-size: 20px;
  277.     text-align: center;
  278. }
  279. .text-center{
  280.     text-align: center;
  281. }
  282. .center-btn {
  283.   background-color: #45a49d;
  284.   border: 2px solid #111;
  285.   border-radius: 8px;
  286.   box-sizing: border-box;
  287.   color: rgb(0, 0, 0);
  288.   cursor: pointer;
  289.   font-family: serif;
  290.   font-size: 16px;
  291.   height: 48px;
  292.   line-height: 24px;
  293.   max-width: 10%;
  294.   padding: 0 25px;
  295.   position: relative;
  296.   text-align: center;
  297.   text-decoration: none;
  298.   user-select: none;
  299.   -webkit-user-select: none;
  300.   touch-action: manipulation;
  301.   background-position: center;
  302.   display: flex;
  303.   justify-content: center;
  304.   align-items: center;
  305.  
  306.  
  307. }
  308.  
  309. .center-btn:after {
  310.   background-color: rgb(0, 0, 0);
  311.   border-radius: 8px;
  312.   content: "";
  313.   display: block;
  314.   height: 48px;
  315.   left: 0;
  316.   width: 100%;
  317.   position: absolute;
  318.   top: -2px;
  319.   transform: translate(8px, 8px);
  320.   transition: transform .2s ease-out;
  321.   z-index: -1;
  322. }
  323.  
  324. .center-btn:hover:after {
  325.   transform: translate(0, 0);
  326. }
  327.  
  328. .center-btn:active {
  329.   background-color: #000000;
  330.   outline: 0;
  331. }
  332.  
  333. .center-btn:hover {
  334.   outline: 0;
  335. }
  336.  
  337. @media (min-width: 768px) {
  338.   .center-btn {
  339.     padding: 0 40px;
  340.   }
  341. }