SHARE
TWEET

style.css

cherepenkovaa Dec 8th, 2019 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   font-family: "Poppins", sans-serif;
  5.   cursor: default; }
  6.  
  7. nav {
  8.   background-color: grey;
  9.   height: 10vh;
  10.   width: 100%; }
  11.   nav a {
  12.     text-decoration: none;
  13.     color: white; }
  14.   nav ul {
  15.     height: 100%;
  16.     display: flex;
  17.     align-items: center;
  18.     list-style: none; }
  19.     nav ul li {
  20.       margin: 0 10px;
  21.       padding: 10px;
  22.       font-size: 20px;
  23.       cursor: pointer;
  24.       font-weight: 500;
  25.       color: white;
  26.       transition: color 0.5s ease; }
  27.       nav ul li:hover {
  28.         color: #E878AA; }
  29.  
  30. body {
  31.   font-family: "Poppins", sans-serif; }
  32.  
  33. #main {
  34.   display: flex;
  35.   height: 90vh; }
  36.   #main .search {
  37.     width: 80%;
  38.     height: 100%;
  39.     display: flex;
  40.     justify-content: center;
  41.     flex-direction: column;
  42.     align-items: center; }
  43.     #main .search .title {
  44.       margin-top: 40px;
  45.       display: flex;
  46.       align-items: center;
  47.       width: 60%;
  48.       flex-wrap: wrap; }
  49.       #main .search .title h1 {
  50.         font-size: 45px;
  51.         font-weight: normal;
  52.         margin: 10px; }
  53.       #main .search .title p {
  54.         color: #E878AA;
  55.         margin: 10px;
  56.         font-size: 15px; }
  57.       #main .search .title .searching {
  58.         display: flex;
  59.         width: 100%;
  60.         align-items: center; }
  61.         #main .search .title .searching input {
  62.           width: 100%;
  63.           border: 0.5px solid grey;
  64.           border-radius: 2px;
  65.           font-size: 20px;
  66.           font-weight: 100;
  67.           padding: 5px;
  68.           color: grey;
  69.           cursor: text; }
  70.         #main .search .title .searching button {
  71.           margin-left: 20px;
  72.           background-color: #E878AA;
  73.           height: 30px;
  74.           width: 100px;
  75.           border: 1px solid lightgrey;
  76.           color: white;
  77.           border-radius: 2px; }
  78.       #main .search .title .lable {
  79.         display: flex; }
  80.     #main .search .cards {
  81.       width: 80%;
  82.       margin: 50px 10%;
  83.       cursor: default; }
  84.       #main .search .cards a {
  85.         text-decoration: none; }
  86.       #main .search .cards ul {
  87.         display: flex;
  88.         justify-content: space-between; }
  89.         #main .search .cards ul li {
  90.           width: 250px;
  91.           list-style: none; }
  92.           #main .search .cards ul li:nth-child(1) .card {
  93.             background-color: #C573AF; }
  94.           #main .search .cards ul li:nth-child(2) .card {
  95.             background-color: #E878AA; }
  96.           #main .search .cards ul li:nth-child(3) .card {
  97.             background-color: #8F9BDC; }
  98.           #main .search .cards ul li p {
  99.             font-size: 20px;
  100.             margin-left: 20px; }
  101.             #main .search .cards ul li p span {
  102.               font-size: 15px;
  103.               color: red; }
  104.           #main .search .cards ul li .type {
  105.             transition: color 0.5s ease; }
  106.           #main .search .cards ul li .type:hover {
  107.             color: #E878AA; }
  108.           #main .search .cards ul li .card {
  109.             min-height: 200px;
  110.             background-color: darkblue;
  111.             padding: 10px;
  112.             border-radius: 15px;
  113.             font-size: 20px; }
  114.       #main .search .cards .skills {
  115.         color: white;
  116.         border-bottom: 2px solid black;
  117.         padding: 5px; }
  118.       #main .search .cards .description {
  119.         padding: 5px;
  120.         color: white; }
  121.   #main .items {
  122.     width: 20%;
  123.     height: 100%;
  124.     display: flex;
  125.     position: relative;
  126.     flex-direction: column;
  127.     justify-content: stretch;
  128.     overflow: hidden; }
  129.     #main .items li {
  130.       list-style: none;
  131.       text-align: right;
  132.       padding: 16px;
  133.       font-size: 24px;
  134.       position: relative; }
  135.       #main .items li:nth-child(1) {
  136.         background-color: #C573AF; }
  137.       #main .items li:nth-child(2) {
  138.         background-color: #E878AA; }
  139.       #main .items li:nth-child(3) {
  140.         background-color: #F29747; }
  141.       #main .items li:nth-child(4) {
  142.         background-color: #F4D84F; }
  143.       #main .items li:nth-child(5) {
  144.         background-color: #CDDA59; }
  145.       #main .items li:nth-child(6) {
  146.         background-color: #86C877; }
  147.       #main .items li:nth-child(7) {
  148.         background-color: #56A5B0; }
  149.       #main .items li:nth-child(8) {
  150.         background-color: #85CBD9; }
  151.       #main .items li:before {
  152.         content: "";
  153.         position: absolute;
  154.         width: 100%;
  155.         height: 100%;
  156.         left: 0;
  157.         top: 0;
  158.         background-color: #0000; }
  159.       #main .items li:hover:before {
  160.         background-color: #ffffff5e; }
  161.     #main .items:before {
  162.       content: "";
  163.       position: absolute;
  164.       height: 100%;
  165.       width: 220px;
  166.       border-radius: 0 100% 100% 0;
  167.       background-color: white;
  168.       transform: translateX(-50%);
  169.       z-index: 2; }
  170.  
  171. * {
  172.   margin: 0;
  173.   padding: 0; }
  174.  
  175. body {
  176.   font-family: "Poppins", sans-serif; }
  177.   body .header {
  178.     display: flex;
  179.     justify-content: flex-end;
  180.     width: 96%;
  181.     padding: 20px; }
  182.     body .header .headerContent {
  183.       display: flex;
  184.       flex-direction: column; }
  185.       body .header .headerContent .enter {
  186.         color: #C573AF;
  187.         font-size: 20px;
  188.         transition: color 0.5s ease; }
  189.         body .header .headerContent .enter:hover {
  190.           color: #86C877; }
  191.   body .content {
  192.     display: flex;
  193.     width: 100%;
  194.     height: 80vh;
  195.     justify-content: center; }
  196.     body .content .title {
  197.       display: flex;
  198.       flex-direction: column;
  199.       align-items: center;
  200.       width: 70%;
  201.       padding: 20px; }
  202.       body .content .title h1 {
  203.         font-weight: normal;
  204.         font-size: 40px;
  205.         letter-spacing: 2px; }
  206.       body .content .title p {
  207.         font-weight: lighter;
  208.         font-size: 15px;
  209.         letter-spacing: 2px; }
  210.       body .content .title .inputs {
  211.         width: 100%;
  212.         display: flex;
  213.         align-items: center;
  214.         flex-direction: column;
  215.         padding-top: 30px;
  216.         padding-bottom: 30px; }
  217.         body .content .title .inputs input {
  218.           width: 50%;
  219.           height: 25px;
  220.           margin: 20px;
  221.           padding: 2px 10px 2px 8px;
  222.           font-size: 15px;
  223.           letter-spacing: 1px; }
  224.       body .content .title .buttons {
  225.         display: flex;
  226.         justify-content: wrap; }
  227.         body .content .title .buttons button {
  228.           margin: 15px;
  229.           padding: 5px 20px 5px 20px;
  230.           font-size: 20px;
  231.           border: 1px solid lightgrey;
  232.           border-radius: 2px; }
  233.         body .content .title .buttons .vk {
  234.           background-color: #6276BB; }
  235.         body .content .title .buttons .go {
  236.           background-color: #86C877; }
  237.  
  238. body {
  239.   font-family: "Poppins", sans-serif; }
  240.  
  241. * {
  242.   padding: 0;
  243.   margin: 0; }
  244.  
  245. .mainContent {
  246.   margin-top: 20px;
  247.   display: flex;
  248.   align-items: center;
  249.   justify-content: center;
  250.   flex-direction: column; }
  251.   .mainContent .title {
  252.     margin-top: 40px;
  253.     display: flex;
  254.     align-items: flex-start;
  255.     width: 60%;
  256.     border-bottom: 1px solid #6276BB; }
  257.     .mainContent .title h2 {
  258.       font-size: 30px;
  259.       font-weight: normal;
  260.       margin-left: 55px; }
  261.     .mainContent .title span {
  262.       color: red;
  263.       margin-left: 20px; }
  264.     .mainContent .title .colorElem {
  265.       display: flex;
  266.       align-items: flex-end;
  267.       justify-content: flex-end;
  268.       width: 40%; }
  269.       .mainContent .title .colorElem .mark {
  270.         color: #86C877;
  271.         font-size: 30px;
  272.         font-weight: 100; }
  273.       .mainContent .title .colorElem .ios {
  274.         display: flex;
  275.         justify-content: center;
  276.         align-items: center;
  277.         width: 80px;
  278.         height: 40px;
  279.         background-color: #E878AA;
  280.         color: white;
  281.         margin-left: 20px;
  282.         margin-bottom: 10px; }
  283.   .mainContent .languages {
  284.     width: 50%;
  285.     display: flex;
  286.     align-items: center;
  287.     background-color: lightgrey;
  288.     padding: 10px;
  289.     margin-top: 40px; }
  290.   .mainContent .description {
  291.     display: inline-block;
  292.     width: 50%;
  293.     padding-top: 30px; }
  294.  
  295. /*# sourceMappingURL=style.css.map */
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top