mxlock

codar-master

Oct 27th, 2020
1,150
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. * {
  2.     padding: 0;
  3.     margin: 0;  
  4.     font-family: 'Roboto';
  5.    
  6. }
  7.  
  8. footer2 {
  9.     color: white;
  10. }
  11.  
  12. button {
  13.     border: none;
  14. }
  15.  
  16. a {
  17.     text-decoration: none;
  18.     cursor: pointer;
  19.     opacity: 0.9;
  20.     color: black;
  21. }
  22.  
  23.  
  24. a:hover{
  25.     opacity: 2;
  26. }
  27.  
  28. a:link{
  29.     text-decoration: none;
  30. }
  31.  
  32. ul {
  33.     list-style: none;
  34. }
  35.  
  36.  
  37. .container{
  38.     max-width: 800px;
  39.     margin: 0 auto;
  40.     width: 85%;
  41.  
  42. /* HEADER */
  43.  
  44. }
  45.  
  46. header{
  47.     width: 100%;
  48.     padding: 20px 0;
  49. }
  50.  
  51. header span {
  52.     color: #D6000D;
  53. }
  54.  
  55. header button {
  56.     background-color: red;
  57.     padding: 5px 35px;
  58.     border-radius: 8px;
  59.     color: white;
  60.     margin-top: -10px;
  61. }
  62.  
  63. .header-flex {
  64.     display: flex;
  65.     justify-content: space-between;
  66.     align-items: center;
  67. }
  68.  
  69. .nav ul {
  70.     display: flex;
  71.  
  72. }
  73.  
  74. .nav li+li {
  75.     margin-left: 15px;
  76.  
  77. }
  78.  
  79. /* SECTION */
  80.  
  81.  
  82. .img-flex {
  83.     display: block;
  84. }
  85.  
  86. .texto1-flex  {
  87.     margin-top: 100px;
  88.     margin-right: 20px;
  89. }
  90.  
  91. .texto1-flex h1 {
  92.     margin: 5px 0 30px 0;
  93.     color: red;
  94.  
  95. }
  96.  
  97.  
  98. .texto1-flex a {
  99.     background-color: red;
  100.     padding: 5px 30px;
  101.     border-radius: 8px;
  102.     color: white;
  103. }
  104.  
  105.  
  106. .local1-flex{
  107.     display: flex;
  108.     align-items: center;
  109.     justify-content: space-between;
  110. }
  111.  
  112. .img-flex img{
  113.     width: 300px;
  114.     margin-top: 100px;
  115.     margin-left: 20px;
  116. }
  117.  
  118.  
  119. /* MAIN */
  120.  
  121.  
  122.  
  123. main i {
  124.     color: red;
  125. }
  126.  
  127. main img {
  128.     width: 300px;
  129.     margin-top: 100px;
  130. }
  131.  
  132. .main-flex {
  133.     display: flex;
  134.     justify-content: space-between;
  135.     align-items: center;
  136.     margin-left: 20px;
  137.  
  138. }
  139.  
  140. .input-call  {
  141.     margin: 100px auto;
  142.     margin-left: 20px;
  143. }
  144.  
  145. .input-call button {
  146.     background-color: red;
  147.     padding: 10px 30px;
  148.     border-radius: 10px;
  149.     color: white;
  150.  
  151. }
  152.  
  153. .input-call input {
  154.     background-color: #D4D4D4;
  155.     border: none;
  156.     padding: 10px 25px;
  157.     border-radius: 10px;
  158.    
  159. }
  160.  
  161.  
  162.  
  163. /* FOOTER 1 */
  164.  
  165. .footer1 {
  166.    display: flex;
  167. }
  168.  
  169. #retangulo1-flex {
  170.    display: flex;
  171.    align-items: center;
  172.    width: 50%;
  173.    margin-right: 15px;
  174.    padding: 15px;
  175.    background-color: #D4D4D4;
  176.    border-radius: 3%;
  177. }
  178.  
  179.  
  180. #retangulo-text{
  181.     display: block;
  182.     align-items: center;
  183.    
  184.    
  185.    
  186. }
  187.  
  188.  
  189. #retangulo2-flex {
  190.     display: flex;
  191.     width: 50%;
  192.     margin-left: 20px;
  193.     padding: 15px;
  194.     background-color: #D4D4D4;
  195.     border-radius: 3%;
  196. }
  197.  
  198.  
  199. #retangulo-text2{
  200.     display: block;
  201.     align-items: center;
  202.    
  203. }
  204.  
  205. footer span {
  206.     font-size: 14px;
  207. }
  208.  
  209.  
  210. /* FOOTER 2 */
  211.  
  212.  
  213. .footer2-flex {
  214.     display: flex;
  215.     justify-content: space-between;
  216.     margin-top: 50px;
  217.     background-color: black;
  218.     padding: 70px;
  219.    
  220. }
  221.  
  222.  
  223. #texto4 ul {
  224.     display: flex;
  225.     justify-content: space-between;
  226.     align-items: center;
  227.     color: red;
  228.     font-size:25px;
  229. }
  230.  
  231.  
  232.  
  233.  
  234. /* CIRCULO */
  235.  
  236. #circle1 {
  237.    
  238.     width: 250px;
  239.     height: 70px;
  240.     background-color: red;
  241.     margin: 20px;
  242.     margin-top: -30px;
  243.     border-radius: 50%;
  244. }
  245.  
  246. #circle2 {
  247.    
  248.     width: 210px;
  249.     height: 70px;
  250.     background-color: red;
  251.     margin: 20px;
  252.     margin-top: -3px;
  253.     border-radius: 50%;
  254. }
  255.  
  256.  
  257. @media (max-width:768px) {
  258.  
  259.     .container {
  260.         max-width: 1024px;
  261.        
  262.     }
  263.  
  264.     .header-flex {
  265.         align-items: center;
  266.         flex-direction: column;
  267.     }
  268.  
  269.     .nav ul {
  270.         display: flex;
  271.         align-items: center;
  272.         margin-top: 25px;
  273.         margin-bottom: -50px;
  274.     }
  275.  
  276.    
  277.     header button {
  278.         display: none;
  279.     }
  280.  
  281.     /* SECTION */
  282.  
  283.     .local1-flex{
  284.         display: flex;
  285.         flex-direction: column;
  286.         align-items: center;
  287.        
  288.     }
  289.  
  290.     .texto1-flex  {
  291.         width: 100%;
  292.         display: block;
  293.         text-align: center;
  294.     }
  295.    
  296.     .texto1-flex h1 {
  297.         font-size: 25px;
  298.         color: red;
  299.        
  300.     }
  301.    
  302.     .texto1-flex p {
  303.         font-size: 15px;
  304.     }
  305.    
  306.     .texto1-flex a {
  307.         background-color: red;
  308.         padding: 5px 30px;
  309.         border-radius: 8px;
  310.         color: white;
  311.         font-size: 25px;
  312.         font-weight: normal;
  313.     }
  314.  
  315.  
  316.     /* MAIN */
  317.  
  318.    
  319.     main img {
  320.         margin-bottom: 25px;
  321.  
  322.     }
  323.    
  324.     .main-flex {
  325.         display: flex;
  326.         flex-direction: column-reverse;
  327.         align-items: center;
  328.     }
  329.    
  330.     main li+li {
  331.     margin-top: 20px;
  332.     }
  333.    
  334.     .input-call {
  335.         display: flex;
  336.         flex-direction: column;
  337.         text-align: center;
  338.         align-items: center;
  339.         margin-bottom: 15px;
  340.     }
  341.  
  342.     .input-call input {
  343.       width: 30%;
  344.       align-items: center;
  345.      
  346.        
  347.     }
  348.    
  349.  
  350.     .input-call button {
  351.         margin-top: 20px;
  352.        
  353.     }
  354.  
  355.     /* footer 1 */
  356.  
  357.     .footer1 {
  358.         display: flex;
  359.         flex-direction: column;
  360.         align-items: center;
  361.     }
  362.      
  363.      #retangulo1-flex {
  364.         width: 50%;
  365.         margin-bottom: 20px;
  366.      }
  367.      
  368.      
  369.      #retangulo2-flex {
  370.         width: 50%;
  371.         margin-right: 35px;
  372.      }
  373.      
  374.    
  375.      /* FOOTER 2 */
  376.  
  377.      
  378.      .footer2-flex {
  379.         width: auto;
  380.         display: flex;
  381.         flex-direction: column;
  382.         align-items: center;
  383.         margin-top: 10px;
  384.  
  385.      }
  386.      
  387.      #texto1 h2 {
  388.          display: block;
  389.          text-align: center;
  390.          font-size: 45px;
  391.          
  392.      }
  393.      
  394.      #texto1 h6 {
  395.          display: block;
  396.          text-align: center;
  397.          margin-bottom: 60px;
  398.          font-size: 15px;
  399.      }
  400.      
  401.      #texto2 {
  402.          margin-bottom: 25px;
  403.      }
  404.    
  405.      #texto3 {
  406.         margin-bottom: 25px;
  407.     }
  408.  
  409.     #texto3 h2 {
  410.         margin-right: 50px;
  411.     }
  412.  
  413.     #texto4 h2{
  414.         margin-bottom: 25px;
  415.  
  416.     }
  417.    
  418.      /* CIRCLE */
  419.  
  420.      #circle2 {
  421.         width: 180px;
  422.         height: 70px;
  423.         background-color: red;
  424.         margin: 20px;
  425.         margin-top: -3px;
  426.         border-radius: 50%;
  427.      }
RAW Paste Data