API tools faq
paste
Advertisement
Guest User

Home Camicado - BLOCO 1

a guest
Mar 30th, 2020
285
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.33 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. .main-banner-new {
  3.     background: url(https://www.juni.com.br/img/camicado/nova-home/imgs/header.jpg)
  4.         no-repeat;
  5.     text-align: center;
  6. }
  7.  
  8. .buy-now .mobile {
  9.     display: none;
  10. }
  11.  
  12. img.momento-casa {
  13.     margin-top: 50px;
  14.     margin-bottom: 30px;
  15. }
  16.  
  17. .buy-now:first-child {
  18.     margin-right: 5%;
  19. }
  20.  
  21. .buy-now {
  22.     position: relative;
  23.     display: inline-block;
  24. }
  25.  
  26. .wrap-buy {
  27.     width: 100%;
  28.     text-align: center;
  29.     display: inline-block;
  30. }
  31.  
  32. .choices {
  33.     margin-top: 70px;
  34. }
  35.  
  36. .choices h2 {
  37.     font-family: Hurme Geometric Sans 4;
  38.     font-style: normal;
  39.     font-weight: normal;
  40.     font-size: 30px;
  41.     line-height: 20px;
  42.     text-align: center;
  43.     letter-spacing: 8px;
  44.     text-transform: uppercase;
  45.     color: #000000;
  46. }
  47.  
  48. .choices ul {
  49.     width: 100%;
  50.     display: inline-block;
  51.     text-align: center;
  52. }
  53.  
  54. .choices ul li {
  55.     display: inline-grid;
  56.     margin: 0 1%;
  57.     width: 225px;
  58. }
  59.  
  60. .choices ul li p {
  61.     clear: both;
  62.     display: block;
  63.     font-family: Hurme Geometric Sans 4;
  64.     font-style: normal;
  65.     font-weight: normal;
  66.     font-size: 15px;
  67.     line-height: 20px;
  68.     text-align: center;
  69.     letter-spacing: 5px;
  70.     text-transform: uppercase;
  71.     color: #000000;
  72.     min-height: 50px;
  73.     margin-top: 20px;
  74. }
  75.  
  76. .choices h2 {
  77.     font-family: Hurme Geometric Sans 4;
  78.     font-style: normal;
  79.     font-weight: normal;
  80.     font-size: 30px;
  81.     line-height: 20px;
  82.     text-align: center;
  83.     letter-spacing: 8px;
  84.     text-transform: uppercase;
  85.     color: #000000;
  86.     margin-bottom: 40px;
  87. }
  88.  
  89. @media (min-width: 320px) and (max-width: 480px) {
  90.     .main-banner-new {
  91.         background: url(https://www.juni.com.br/img/camicado/nova-home/imgs/bg-mobile.jpg)
  92.             no-repeat;
  93.         background-size: cover;
  94.         height: 370px;
  95.     }
  96.  
  97.     .buy-now img.mobile {
  98.         display: block;
  99.     }
  100.  
  101.     .buy-now img {
  102.         display: none;
  103.     }
  104.  
  105.     img.momento-casa {
  106.         margin-top: 20px;
  107.         margin-bottom: 30px;
  108.         width: 70%;
  109.     }
  110.  
  111.     .buy-now {
  112.         position: relative;
  113.         display: inline-block;
  114.     }
  115.  
  116.     .wrap-buy {
  117.         text-align: center;
  118.         display: inline-block;
  119.         overflow-x: scroll;
  120.         overflow-y: hidden;
  121.         white-space: nowrap;
  122.         -webkit-overflow-scrolling: touch;
  123.         &::-webkit-scrollbar {
  124.            display: none;
  125.         }
  126.     }
  127.  
  128.     .buy-now:first-child {
  129.         margin-right: 5%;
  130.         margin-left: 5%;
  131.     }
  132.  
  133.     .buy-now:last-child {
  134.         margin-right: 5%;
  135.     }
  136.  
  137.     .choices {
  138.         margin-top: 50px;
  139.     }
  140.  
  141.     .choices h2 {
  142.         font-family: Hurme Geometric Sans 4;
  143.         font-style: normal;
  144.         font-weight: normal;
  145.         font-size: 20px;
  146.         line-height: 30px;
  147.         text-align: center;
  148.         letter-spacing: 5px;
  149.         text-transform: uppercase;
  150.         color: #000000;
  151.         margin-bottom: 40px;
  152.     }
  153.  
  154.     .choices ul {
  155.         text-align: center;
  156.         display: inline-block;
  157.         overflow-x: scroll;
  158.         overflow-y: hidden;
  159.         white-space: nowrap;
  160.         -webkit-overflow-scrolling: touch;
  161.         &::-webkit-scrollbar {
  162.            display: none;
  163.         }
  164.     }
  165.  
  166.     .choices ul li {
  167.         display: inline-block;
  168.         margin: 0 3%;
  169.         overflow: hidden;
  170.         min-height: 270px;
  171.         position: relative;
  172.     }
  173.  
  174.     .choices ul li p {
  175.         position: absolute;
  176.         width: 100%;
  177.     }
  178. }
  179.  
  180. </style>
  181. <html>
  182. <div class="main-banner-new">
  183.     <img
  184.        src="https://www.juni.com.br/img/camicado/nova-home/imgs/momento-casa.png"
  185.        class="momento-casa"
  186.    />
  187.     <div class="wrap-buy">
  188.         <div class="buy-now">
  189.             <a href="#">
  190.                 <img
  191.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/banner-home_colecao.jpg"
  192.                />
  193.                 <img
  194.                    class="mobile"
  195.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/banner-home-mobile_colecao.jpg"
  196.                />
  197.             </a>
  198.         </div>
  199.         <div class="buy-now">
  200.             <a href="#">
  201.                 <img
  202.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/banner-home_checklist.jpg"
  203.                />
  204.                 <img
  205.                    class="mobile"
  206.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/banner-home-mobile_checklist.jpg"
  207.                />
  208.             </a>
  209.         </div>
  210.     </div>
  211. </div>
  212. <div class="choices">
  213.     <h2>Casa Confortável e Funcional</h2>
  214.     <ul>
  215.         <li>
  216.             <a href="#">
  217.                 <img
  218.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/casa-confortavel-funcional_eletro.jpg"
  219.                    alt=""
  220.                />
  221.                 <p>Eletro</p>
  222.             </a>
  223.         </li>
  224.         <li>
  225.             <a href="#">
  226.                 <img
  227.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/casa-confortavel-funcional_utensilios.jpg"
  228.                    alt=""
  229.                />
  230.                 <p>Utensílios a Mão e Organizados</p>
  231.             </a>
  232.         </li>
  233.         <li>
  234.             <a href="#">
  235.                 <img
  236.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/casa-confortavel-funcional_cozinha.jpg"
  237.                    alt=""
  238.                />
  239.                 <p>
  240.                     Guia<br />
  241.                     de Panelas
  242.                 </p>
  243.             </a>
  244.         </li>
  245.         <li>
  246.             <a href="#">
  247.                 <img
  248.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/casa-confortavel-funcional_mesa.jpg"
  249.                    alt=""
  250.                />
  251.                 <p>
  252.                     Mesa<br />
  253.                     Passo a Passo
  254.                 </p>
  255.             </a>
  256.         </li>
  257.         <li>
  258.             <a href="#">
  259.                 <img
  260.                    src="https://www.juni.com.br/img/camicado/nova-home/imgs/casa-confortavel-funcional_kits.jpg"
  261.                    alt=""
  262.                />
  263.                 <p>
  264.                     Kits para Todas<br />
  265.                     as Ocasiões
  266.                 </p>
  267.             </a>
  268.         </li>
  269.     </ul>
  270. </div>
  271.  
  272. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!