Advertisement
Guest User

Untitled

a guest
Aug 17th, 2023
69
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.30 KB | None | 0 0
  1. :root {
  2.     --jakarta: 'Plus Jakarta Sans', sans-serif;
  3.     --blueish: #13183F;
  4.     --gray: #83869A;
  5.     --pink: #F74780;
  6.     --gradient-1: linear-gradient(180deg, #FF6F48 0%, #F02AA6 100%);
  7. }
  8.  
  9. * {
  10.     box-sizing: border-box;
  11.     margin: 0;
  12.     padding: 0;
  13.     font-family: var(--jakarta);
  14. }
  15.  
  16. html, body
  17. {
  18.     -ms-overflow-style: none; /* for Internet Explorer, Edge */
  19.     scrollbar-width: none;
  20.     overflow-y: scroll;
  21.     width: 100%;
  22.     height: 100%;
  23.     margin: 0;
  24. }
  25.  
  26. html {
  27.     overflow-x: hidden;
  28. }
  29.  
  30. body {
  31.    /* margin: 0px 165px 50px 165px; */
  32.     overflow: visible;
  33. }
  34.  
  35. body::-webkit-scrollbar{
  36.     display: none;
  37. }
  38.  
  39. .main {
  40.     margin: 0px 165px 50px 165px;
  41.     display: flex;
  42.     flex-direction: column;
  43.     align-items: center;
  44. }
  45.  
  46. .btn {
  47.     width: 167px;
  48.     height: 56px;
  49.     border-radius: 28px;
  50.     font-size: 18px;
  51.     font-weight: 700;
  52.     line-height: 28px;
  53.     color: #fff;
  54.     border: 0;
  55.     z-index: 2;
  56. }
  57.  
  58. .btn:hover {
  59.     opacity: 0.5;
  60. }
  61.  
  62. .btn a {
  63.     color: #fff;
  64.     text-decoration: none;
  65. }
  66.  
  67. .btn a:hover {
  68.     color:#fff;
  69.     text-decoration:none;
  70.     cursor:pointer;
  71. }
  72.  
  73. .btn-get-started-header {
  74.     background: var(--blueish);
  75.     float: right;
  76. }
  77.  
  78. .nav {
  79.     max-width: 100%;
  80.     margin-bottom: 190px;
  81. }
  82.  
  83. .navigation img {
  84.     width: 112px;
  85.     height: 29px;
  86. }
  87. .navigation {
  88.     display: flex;
  89.     justify-content: space-between;
  90.     align-items: center;
  91.     flex: 1;
  92.     margin-top: 31px;
  93. }
  94.  
  95. .btn-get-started-head-section {
  96.     background: var(--gradient-1, linear-gradient(180deg, #FF6F48 0%, #F02AA6 100%));
  97. }
  98.  
  99. .head {
  100.     width: 100%;
  101.     display: flex;
  102.     justify-content: space-between;
  103.     position: relative;
  104.     margin-bottom: 110px;
  105. }
  106.  
  107. .section-left {
  108.     max-width: 457px;
  109. }
  110.  
  111. .section-left h1 {
  112.     width: 457px;
  113.     font-size: 56px;
  114.     font-weight: 800;
  115.     color: var(--blueish);
  116.     margin-bottom: 29px;
  117. }
  118.  
  119. .section-left p {
  120.     color: var(--gray);
  121.     font-size: 18px;
  122.     font-weight: 500;
  123.     line-height: 28px;
  124.     margin-bottom: 40px;
  125.     width: 445px;
  126. }
  127.  
  128. .section-right {
  129.     width: 457px;
  130.     height: 600px;
  131. }
  132.  
  133. .section-right .desktop {
  134.     height: auto;
  135.     position: absolute;
  136.     right: 0;
  137.     margin-right: -430px;
  138.     margin-top: -370px;
  139. }
  140.  
  141. .section-right .tablet {
  142.     display: none;
  143. }
  144.  
  145. .section-right .mobile {
  146.     display: none;
  147. }
  148.  
  149. .popular-section {
  150.     display: flex;
  151.     flex-direction: column;
  152. }
  153.  
  154. .popular-one {
  155.     display: flex;
  156.     justify-content: space-between;
  157.     margin-bottom: 80px;
  158.     gap: 30px;
  159. }
  160.  
  161. .popular-two {
  162.     display: flex;
  163.     justify-content: space-between;
  164.     gap: 30px
  165. }
  166.  
  167. .popular-text {
  168.     min-width: 350px;
  169.     min-height: 322px;
  170.     border-radius: 15px;
  171.     background: var(--gradient-1, linear-gradient(180deg, #FF6F48 0%, #F02AA6 100%));
  172. }
  173.  
  174. .popular-text h1 {
  175.     width: 286px;
  176.     color: #fff;
  177.     font-size: 32px;
  178.     font-weight: 800;
  179.     line-height: 40px;
  180.     padding: 64px 32px 138px 32px;
  181. }
  182.  
  183. .popular-card {
  184.     background: #f8f8f8;
  185.     min-width: 350px;
  186.     min-height: 322px;
  187.     border-radius: 15px;
  188.     box-shadow: 0px 25px 50px 0px rgba(6, 22, 141, 0.04);
  189.     padding-left: 32px;
  190. }
  191.  
  192. .popular-card .icon {
  193.     width: 56px;
  194.     height: 56px;
  195.     margin-top: -28px;
  196.     margin-left: 16px;
  197.     margin-bottom: 32px;
  198. }
  199.  
  200. .popular-card h2 {
  201.     color: var(--blueish);
  202.     font-size: 24px;
  203.     font-weight: 800;
  204.     margin-bottom: 24px;
  205. }
  206.  
  207. .popular-card p {
  208.     width: 286px;
  209.     color: var(--gray);
  210.     font-size: 18px;
  211.     font-weight: 500;
  212.     line-height: 28px;
  213.     padding-bottom: 24px;
  214. }
  215.  
  216. .popular-card .popular-anchor {
  217.     text-decoration: none;
  218.     color: var(--pink);
  219.     font-size: 18px;
  220.     font-weight: 700;
  221.     line-height: 28px;
  222. }
  223.  
  224. .popular-one .popular-card:nth-child(3) p {
  225.     padding-bottom: 52px;
  226. }
  227.  
  228. .popular-two .popular-card:nth-child(1) p {
  229.     padding-bottom: 52px;
  230. }
  231.  
  232. .popular-card a:hover {
  233.     opacity: .5;
  234. }
  235.  
  236. footer {
  237.     width: 100%;
  238. }
  239.  
  240. footer .nav-footer {
  241.     width: 100%;
  242.     height: 120px;
  243.     display: flex;
  244.     justify-content: space-between;
  245.     align-items: center;
  246.     background: var(--blueish);
  247. }
  248.  
  249. footer .nav-footer img {
  250.     margin-left: 165px;
  251. }
  252.  
  253. footer .nav-footer button {
  254.     margin-right: 165px;
  255. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement