[sass] qwerty

Viewer

  1. * 
  2.         padding: 0
  3.         margin: 0
  4.         box-sizing: border-box
  5.         font-family: sans-serif
  6.  
  7. .all 
  8.         background-image: url(black-3d.jpg)
  9.         width: 100%
  10.         height: 100vh
  11.         background-position: center
  12.         background-repeat: no-repeat
  13.         background-size: cover
  14.         color: white
  15.  
  16. .header-header 
  17.         display: flex
  18.         justify-content: space-between
  19.         align-items: center
  20.         margin: 0 auto
  21.         width: 80%
  22.         height: 13vh
  23.  
  24. .tells 
  25.         display: flex
  26.         justify-content: space-between
  27.         align-items: center
  28.         p 
  29.                 margin-left: 10px
  30.        
  31.  
  32. .bu button 
  33.         padding: 17px 30px
  34.         border-radius: 20px
  35.         border: 1px solid cadetblue
  36.         background-color: cadetblue
  37.         color: white
  38.         &:hover 
  39.                 background-color: transparent
  40.                 transition: 0.4s
  41.                 border: 1px solid white
  42.                 color: white
  43.        
  44.  
  45. .header 
  46.         display: flex
  47.         justify-content: space-between
  48.         align-items: center
  49.         width: 80%
  50.         margin: 0 auto
  51.         border-top: none
  52.         border-left: none
  53.         border-right: none
  54.         border-bottom: 1px solid white
  55.         margin-top: 30px
  56.         padding-bottom: 30px
  57.  
  58. .toright 
  59.         width: 50%
  60.  
  61. ul.cls 
  62.         display: flex
  63.         justify-content: space-between
  64.         align-items: center
  65.         width: 100%
  66.         list-style: none
  67.         font-weight: bold
  68.         cursor: pointer
  69.         li:hover 
  70.                 color: cadetblue
  71.                 transition: 0.3s
  72.        
  73.  
  74. .toleft h1 
  75.         font-size: 40px
  76.         font-weight: bold
  77.  
  78. .home-main 
  79.         display: flex
  80.         justify-content: center
  81.         align-items: center
  82.         flex-direction: column
  83.         height: 75vh
  84.         h1 
  85.                 margin: 30px 0
  86.                 font-size: 75px
  87.                 font-weight: bold
  88.        
  89.         h3 
  90.                 font-size: 35px
  91.                 font-weight: bold
  92.        
  93.         p 
  94.                 width: 45%
  95.                 text-align: center
  96.                 line-height: 23px
  97.                 font-weight: bold
  98.        
  99.  
  100. .buttons 
  101.         display: flex
  102.         justify-content: space-between
  103.         align-items: center
  104.         width: 25%
  105.         margin-top: 50px
  106.  
  107. .btn.but 
  108.         padding: 22px 38px
  109.         border-radius: 20px
  110.         background-color: cadetblue
  111.         border: 2px solid cadetblue
  112.         color: white
  113.         font-size: 16px
  114.         &:hover 
  115.                 background-color: transparent
  116.                 border: 2px solid white
  117.                 transition: 0.4s
  118.        
  119.  
  120. .butto.n 
  121.         padding: 22px 38px
  122.         border-radius: 20px
  123.         background-color: transparent
  124.         color: white
  125.         border: 2px solid white
  126.         font-size: 16px
  127.         &:hover 
  128.                 background-color: cadetblue
  129.                 border: 2px solid cadetblue
  130.                 transition: 0.4s
  131.        
  132.  
  133. section.two 
  134.         padding: 100px 0
  135.  
  136. .head 
  137.         display: flex
  138.         justify-content: center
  139.         align-items: flex-start
  140.         flex-direction: column
  141.         margin-left: 120px
  142.         color: rgb(75, 76, 76)
  143.         h1 
  144.                 font-size: 45px
  145.                 font-weight: bold
  146.        
  147.         p 
  148.                 font-size: 18px
  149.                 font-weight: bold
  150.                 margin-top: 15px
  151.        
  152.  
  153. .lows 
  154.         display: flex
  155.         justify-content: space-between
  156.         width: 85%
  157.         margin: 90px auto
  158.  
  159. .low 
  160.         box-shadow: 0 0 4px black
  161.         border-radius: 20px
  162.         height: 420px
  163.         width: 23%
  164.         display: flex
  165.         justify-content: center
  166.         align-items: center
  167.         flex-direction: column
  168.         color: rgb(75, 76, 76)
  169.         h2 
  170.                 font-size: 28px
  171.                 margin: 25px 0
  172.        
  173.         i 
  174.                 font-size: 70px
  175.                 margin-bottom: 30px
  176.        
  177.         p 
  178.                 font-size: 16px
  179.                 width: 75%
  180.                 text-align: center
  181.                 line-height: 23px
  182.        
  183.         button 
  184.                 padding: 15px 32px
  185.                 border-radius: 18px
  186.                 margin-top: 25px
  187.                 cursor: pointer
  188.                 background-color: cadetblue
  189.                 color: white
  190.                 border: 1px solid cadetblue
  191.                 &:hover 
  192.                         color: black
  193.                         background-color: transparent
  194.                         border: 1px solid black
  195.                         transition: 0.4s
  196.                
  197.        
  198.  
  199. section.three 
  200.         padding: 100px 0
  201.         background-image: url(black-3d.jpg)
  202.         width: 100%
  203.         height: 100vh
  204.         background-position: center
  205.         background-repeat: no-repeat
  206.         background-size: cover
  207.         display: flex
  208.         justify-content: center
  209.         align-items: center
  210.  
  211. .every 
  212.         background-color: white
  213.         display: flex
  214.         justify-content: center
  215.         align-items: center
  216.         flex-direction: column
  217.         height: 650px
  218.         width: 80%
  219.  
  220. .top 
  221.         display: flex
  222.         justify-content: flex-start
  223.         align-items: center
  224.         flex-direction: column
  225.         color: rgb(75, 76, 76)
  226.         h2 
  227.                 font-size: 35px
  228.                 margin-top: 5px
  229.        
  230.  
  231. .right-img 
  232.         width: 450px
  233.         height: 350px
  234.  
  235. img 
  236.         width: 100%
  237.         height: 100%
  238.  
  239. .left-right 
  240.         display: flex
  241.         justify-content: space-between
  242.         align-items: center
  243.         width: 90%
  244.         margin: 0 auto
  245.  
  246. .icon-text 
  247.         display: flex
  248.         justify-content: space-between
  249.         align-items: center
  250.         width: 105%
  251.         margin: 60px 0
  252.  
  253. .text 
  254.         width: 85%
  255.         color: rgb(75, 76, 76)
  256.         h3 
  257.                 font-size: 25px
  258.        
  259.         p 
  260.                 font-size: 16px
  261.                 margin-top: 8px
  262.                 width: 80%
  263.        
  264.  
  265. .left 
  266.         margin-bottom: 20px
  267.  
  268. .icon 
  269.         width: 60px
  270.         height: 60px
  271.         border-radius: 50%
  272.         background-color: cadetblue
  273.         display: flex
  274.         justify-content: center
  275.         align-items: center
  276.         position: relative
  277.         i 
  278.                 font-size: 20px
  279.                 color: white
  280.        
  281.  
  282.  

Editor

You can edit this paste and save as new: