Advertisement
Guest User

Untitled

a guest
Jan 21st, 2020
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.06 KB | None | 0 0
  1. html,
  2. body {
  3.     margin: 0;
  4.     padding: 0;
  5.    
  6. }
  7.  
  8. {
  9.     font-family: "Open Sans","Arial", sans-serif;
  10.     box-sizing: border-box;
  11.     font-size: 12px;
  12. }
  13.  
  14. header {
  15.     display: flex;
  16.     background-color: #444444;
  17.     text-transform: uppercase;
  18.     border: none;
  19.     padding-left: 100px;
  20. }
  21. nav > ul {
  22.     display: flex;
  23.     list-style: none;
  24.     padding-left: 0;
  25.    
  26. }
  27.  
  28. nav a {
  29.     text-decoration: none;
  30.     color: #fff;
  31.    
  32. }
  33.  
  34. nav a:hover {
  35.     border-bottom: 1px solid #9ac051;
  36. }
  37.  
  38. nav li {
  39.     padding-right: 40px;
  40.    
  41. }
  42. .main-site a {
  43.     font-weight: 700;
  44.    
  45. }
  46.  
  47. /*Navigation*/
  48.  
  49. .main-img{
  50.     height: 400px;
  51.     background-image: url("../images/dewang-gupta-272186-unsplash.jpg");
  52.     background-repeat: no-repeat;
  53.     background-size: cover;
  54.     background-position: bottom;
  55.     display: flex;
  56.     justify-content: center;
  57.     align-items: center;
  58.     color: #fff;
  59. }
  60.  
  61. .main-text {
  62.     text-align: center;
  63. }
  64.  
  65. .main-text h1 {
  66.     font-family: "Times New Roman", serif;
  67.     font-size: 45px;
  68.     text-transform: uppercase;
  69.     margin: 0;
  70. }
  71.  
  72. .main-text h2{
  73.     font-size: 18px;
  74.     font-weight: 200;
  75.     margin: 25px 0;
  76. }
  77.  
  78. .main-text .offer-btn {
  79.     background-color: #9ac051;
  80.     color: #fff;
  81.     padding: 10px 20px;
  82.     border: none;
  83.     border-radius: 5px;
  84.     cursor: pointer;
  85. }
  86.  
  87. .main-text .offer-btn:hover {
  88.     background-color: #004C0D;
  89. }
  90. .why-us {
  91.     height: 300px;
  92.     background-color: #fcfbfb;
  93.     border-bottom: 1px solid #f2f2f2;
  94.     color: #444444;
  95.     display: flex;
  96.     align-items: center;
  97.     justify-content: space-between;
  98.     padding: 0 100px;
  99.    
  100. }
  101. .points h3 {
  102.     font-family: "Times New Roman", serif;
  103.     margin: 10px 0 30px 0;
  104.     font-size: 16px;
  105.        
  106. }
  107.  
  108. .points ul {
  109.     list-style: none;
  110.     padding-left: 0;
  111. }
  112.  
  113.  
  114. .points i{
  115.     color: #9ac051;
  116.     padding-right: 15px;
  117. }
  118.  
  119. .points li{
  120.     font-size: 9px;
  121.     margin-bottom: 20px;    
  122. }
  123.  
  124.  
  125. .points li span{
  126.     font-size: 9px;
  127.     font-weight: 600;
  128. }
  129.  
  130. .image img {
  131.     border-radius: 5px;
  132. }
  133.  
  134. .offer {
  135.     height: 200px;
  136.     display: flex;
  137.     padding: 0 100px;
  138.     justify-content: space-between;
  139. }
  140.  
  141. .offer figure {
  142.     height: 100px;
  143.     width: 200px;
  144.     background-color: #fcfbfb;
  145.     border: .5px solid #f2f2f2;
  146.     margin: 50px 0;
  147.     border-radius: 10px;
  148.     flex-direction: column;
  149. }
  150.  
  151. .offer h5{
  152.     color: #9ac051;
  153.     text-transform: uppercase;
  154.     font-weight: 200;
  155.    
  156. }
  157.  
  158. .offer p {
  159.     color: #444444;
  160.     margin: 0;
  161.     text-align: center;
  162.     font-size: 9px;
  163.     padding: 0 20px;    
  164. }
  165.  
  166. .offer .read-more-less-btn {
  167.     background-color: #9ac051;
  168.     color: #fff;
  169.     font-size: 8px;
  170.     padding: 5px 15px;
  171.     border-radius: 5px;
  172.     margin: 20px 0;
  173. }
  174.  
  175. .offer .circle-img {
  176.     height: 100px;
  177.     width: 100px;
  178.     border-radius: 50%;
  179.     background-repeat: no-repeat;
  180.     background-size: cover;
  181. }
  182.  
  183. .offer .skin-therapy {
  184.     background-image: url("../images/love-romantic-bath-candlelight.jpg");
  185.     background-position: bottom;
  186. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement