Advertisement
Guest User

Untitled

a guest
Feb 18th, 2020
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.33 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.  
  91.  
  92.  
  93. .why-us {
  94.     height: 300px;
  95.     background-color: #fcfbfb;
  96.     border-bottom: 1px solid #f2f2f2;
  97.     color: #444444;
  98.     display:flex;
  99.     align-items: center;
  100.     justify-content: space-between;
  101.     padding: 0 100px;
  102. }
  103. .points h3 {
  104.     font-family: "Times New Roman", serif;
  105.     margin: 15px 0 30px 0;
  106.     font-size: 18px;
  107. }
  108.  
  109. .points ul {
  110.     list=style: none;
  111.     padding-left: 0;
  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. .points li span {
  124.     font-size: 9px;
  125.     font-weight: 600;
  126. }
  127.  
  128. .image img {
  129.     border-radius: 5px;
  130.    
  131. }
  132. .offer {
  133.     display:flex;
  134.     padding: 0 100px;
  135.     justify-content: space-between;
  136. }
  137.  
  138. .offer figure {
  139.     width: 200px;
  140.     background-color: #fcfbfb;
  141.     border: .5px solid #f2f2f2;
  142.     margin: 50px 0;
  143.     border-radius: 10px;
  144.     display:flex;
  145.     flex-direction: column;
  146.     align-items: center;
  147. }
  148.  
  149. .offer h5{
  150.     color: #9ac051;
  151.     text-transform: uppercase;
  152.     font-weight: 200;
  153. }
  154.  
  155. .offer p{
  156.     color:#444444;
  157.     margin: 0;
  158.     text-align: center;
  159.     font-size: 9px;
  160.     padding: 0 20px;
  161. }
  162.  
  163. .offer .read-more-less-btn {
  164.     background-color: #9ac051;
  165.     color: #fff;
  166.     font-size: 8px;
  167.     padding: 5px 15px;
  168.     border-radius: 5px;
  169.     border: none;
  170.     margin: 20px 0;
  171. }
  172.  
  173. .offer .circle-img{
  174.     height: 100px;
  175.     width: 100px;
  176.     border-radius: 50%;
  177.  
  178.     background-repeat: no-repeat;
  179.     background-size: cover;
  180.     margin-top: 20px;
  181. }
  182. .offer .skin-therapy {
  183.     background-image: url("../images/love-romantic-bath-candlelight.jpg");
  184.     background-position: bottom;
  185. }
  186.  
  187. .offer .face-therapy {
  188.     background-image: url("../images/pexels-photo-725998.jpeg");
  189.     background-position:center;
  190. }
  191.  
  192. .offer .body-therapy {
  193.     background-image: url("../images/pexels-photo-259810.jpeg");
  194.         background-position: center;
  195. }
  196.  
  197.  
  198. .gallery {
  199.     height: 300px;
  200. }
  201.  
  202. .newsletter {
  203.     height: 120px;
  204.     background-color: #9ac051;
  205.     color: #fff;
  206.     display: flex;
  207.     align-items:center;
  208.     justify-content: center;
  209.    
  210. }
  211.  
  212.  
  213. .newsletter h5 {
  214.     text-transform: uppercase;
  215.     font-family: "Times New Roman", serif;
  216.     font-size: 16px;
  217.     margin: 0 0 15px 0;
  218. }
  219. .newsletter-form {
  220.     display:flex;
  221.     justify-content: center;
  222. }
  223. .newsletter-form input,
  224. .newsletter-form button {
  225.     border-radius: 5px;
  226.     border:none;
  227.     font-size: 10px;
  228. }
  229. .newsletter-form input {
  230.     margin-right: 20px;
  231.     padding: 5px 15px;
  232.     width: 250px;
  233. }
  234. .newsletter-form button {
  235.     background-color: #647e32;
  236.     color: #fff;
  237.     padding: 0 15px;
  238. }
  239.  
  240. .slider-container {
  241.     height: 400px;
  242.     display: flex;
  243.     align-items: center;
  244.     justify-content: center;
  245. }
  246. .previous-arrow,
  247. .next-arrow {
  248.     color: #f2f2f2;
  249.     padding: 20px;
  250.     font-size: 25px;
  251. }
  252. .previous-arrow:hover,
  253. .next-arrow:hover {
  254.     color: #9ac051;
  255. }
  256. .slider-container i {
  257.     font-size: 25px;
  258. }
  259. .slider li img {
  260.     width: 500px;
  261. }
  262. .slider-stage {
  263.     width: 500px;
  264. }
  265. .slider {
  266.     list-style: none;
  267.     width: 500px;
  268.     padding: 0;
  269.     display:flex;
  270.     overflow-x: hidden;
  271. }
  272.  
  273.  
  274.  
  275. /*Go up*/
  276.  
  277. .go-up {
  278.     height: 50px;
  279.     display: flex;
  280.     align-items: center;
  281.     justify-content: center;
  282. }
  283.  
  284. .go-up i {
  285.     font-size: 25px;
  286.     color: #444444;
  287.     cursor: pointer;
  288. }
  289.  
  290. .go-up i:hover {
  291.     color: #9ac051;
  292. }
  293.  
  294. /*Footer*/
  295.  
  296. footer {
  297.     display: flex;
  298.     background-color: #444444;
  299.     padding: 60px 100px;
  300. }
  301.  
  302. footer > section {
  303.     width: 200px;
  304. }
  305.  
  306. .about-us h5 {
  307.     font-family: "New Times Roman", serif;
  308.     font-weight: 200px;
  309.     margin: 0 0 10px 0;
  310.     color: #FFF;
  311. }
  312.  
  313. .about-us p {
  314.     font-size: 8px;
  315.     line-height: 2;
  316.     margin: 0 0 20px 0;
  317.     color: #FFF;
  318. }
  319.  
  320. .social-media {
  321.     list-style: none;
  322.     padding: 0;
  323.     margin: 0;
  324.     display: flex;
  325. }
  326.  
  327. .social-media li {
  328.     background-color: #9ac051;
  329.     margin-right: 10;
  330.     height: 25px;
  331.     width: 25px;
  332.     border-radius: 5px;
  333.     display: flex;
  334.     justify-content: center;
  335.     align-items: center;
  336.     cursor: pointer;
  337. }
  338.  
  339. .social-media a {
  340.     color: #fff;
  341.     text-decoration: none;
  342. }
  343.  
  344. .contact-details {
  345.     width: 130px;
  346.     margin-left: 25px;
  347. }
  348.  
  349. .contact-details ul {
  350.     list-style: none;
  351.     padding: 0;
  352.     margin: 0;
  353.     color: #fff;
  354. }
  355.  
  356. .contact-details li {
  357.     font-size: 10px;
  358.     margin-bottom: 12px;
  359.     display: flex;
  360. }
  361.  
  362. .contact-details i {
  363.     color: #9ac051;
  364.     margin-right: 10px;
  365. }
  366.  
  367. .contact-details li a {
  368.     color: #fff;
  369.     text-decoration: none;
  370.     font-size: 10px;
  371. }
  372.  
  373. .quick-links {
  374.     display: flex;
  375.     width: 400px;
  376.     margin-left: 30px;
  377. }
  378.  
  379. .quick-links ul {
  380.     padding: 0;
  381.     margin: 0 10px 0 0;
  382.     list-style: none;
  383.     width: 150px;
  384. }
  385.  
  386. .quick-links a {
  387.     text-decoration: none;
  388.     color: #fff;
  389.     font-size: 10px;
  390. }
  391.  
  392. .quick-links li {
  393.     border-bottom: .5px solid #666464;
  394.     padding: 11px 0;
  395. }
  396.  
  397. .quick-links uli li:first-child {
  398.     padding-top: 0;
  399. }
  400.  
  401. .quick-links a i {
  402.     color: #9ac051;
  403.     font-size: 8px;
  404.     margin-right: 8px;
  405. }
  406.  
  407. /*Copyright*/
  408.  
  409. .copyright {
  410.     background-color: #9ac051;
  411.     height: 50px;
  412.     color: #FFF;
  413.     margin: 0;
  414.     display: flex;
  415.     flex-direction: column;
  416.     justify-content: center;
  417.     align-items: center;
  418. }
  419.  
  420. .copyright p {
  421.     margin: 0;
  422.     font-size: 8px;
  423. }
  424.  
  425. .copyright a{
  426.     text-decoration: none;
  427.     color: #fff;
  428.     font-size: 6px;
  429. }
  430.  
  431. .nested-menu {
  432.     list-style: none;
  433.     padding: 0;
  434.     margin: 0;
  435.     background-color: #fff;
  436.     text-transform: none;
  437.     position: absolute;
  438.     top: 40px;
  439.     display: none;
  440. }
  441.  
  442. .nested-menu li {
  443.     font-size: 9px;
  444.     padding: 10px 15px;
  445.     color: #444444;
  446.     cursor: pointer;
  447. }
  448.  
  449. .nested-menu li:hover {
  450.     color: #fff;
  451.     background-color: #9ac051;
  452. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement