Advertisement
nahuelbkn

style.css

Jul 20th, 2020
101
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.36 KB | None | 0 0
  1. /* Paleta de colores:
  2.  
  3. https://coolors.co/ffffff-00171f-003459-007ea7-00a8e8
  4.  
  5. Blanco............: #FFFFFF
  6. Azul oscuro.......: #00171F
  7. Azul..............: #003459
  8. Celeste...........: #007EA7
  9. Celeste claro.....: #00A8E8
  10.  
  11. */
  12.  
  13. /*ESTILOS GENERALES*/
  14.  
  15. * {
  16.     box-sizing: border-box;
  17.     padding: 0;
  18.     margin: 0;
  19. }
  20.  
  21. body {
  22.     font-family: "Roboto", sans-serif;
  23. }
  24.  
  25. nav {
  26.     background-color: #00171F;
  27.     /*color: #00171F;*/
  28.     display: flex;
  29.     height: 70px;
  30.     justify-content: space-between;
  31.     padding: 20px 40px;
  32.     margin: auto;
  33.     position: fixed;
  34.     top: 0;
  35.     width: 100%;
  36. }
  37.  
  38. h1 {
  39.     color: #FFFFFF;
  40.     font-size: 24px;
  41.     font-style: italic;
  42.     text-transform: uppercase;
  43.     letter-spacing: 3px;
  44. }
  45.  
  46.  
  47. div.menu a {
  48.     color: #FFFFFF;
  49.     font-size: 20px;
  50.     margin-left: 20px;
  51.     text-decoration: none;
  52. }
  53.  
  54. div.menu a:hover {
  55.     text-decoration: underline;
  56. }
  57.  
  58. h2 {
  59.     color: #00171F;
  60.     margin-left: 10%;
  61.     margin-bottom: 15px;
  62.     margin-top: 110px;
  63. }
  64.  
  65. label
  66. {
  67.     color: #00171F;
  68. }
  69.  
  70. p {
  71.     color: #00171F;
  72.     font-size: 16px;
  73.     text-align: justify;
  74.     line-height: 1.8rem;
  75.     margin: auto;
  76.     margin-bottom: 1rem;
  77.     width: 80%;
  78. }
  79.  
  80. footer h6 {
  81.     background-color: #00171F;
  82.     color: #FFFFFF;
  83.     font-size: 14px;
  84.     font-style: italic;
  85.     font-weight: 200;
  86.     text-align: center;
  87.     padding: 40px;
  88.     margin-top: 80px;
  89.     width: 100%;
  90. }
  91.  
  92. /*PAGINA HOME*/
  93.  
  94. img.logo {
  95.     display: block;
  96.     margin: auto;
  97.     margin-top: 70px;
  98.     width: 100%;
  99.    
  100. }
  101.  
  102. section.principal h2 {
  103.     margin-top: 60px;
  104. }
  105.  
  106. table.premio {
  107.     border: 1px solid #00171F;
  108.     margin-left: 20px;
  109.     margin: auto;
  110.     width: 50%;
  111. }
  112.  
  113. table.premio td {
  114.     border: 1px solid #00171F;
  115.     padding: 5px;
  116.     width: 50%;
  117.     text-align: center;
  118. }
  119.  
  120. table.premio thead {
  121.     background-color: #007EA7;
  122.     font-weight: 700;
  123.     letter-spacing: 1px;
  124. }
  125.  
  126. /*PAGINA PRODUCTOS*/
  127.  
  128. div.producto {
  129.     display: flex;
  130.     margin: auto;
  131.     margin-bottom: 40px;
  132.     width: 80%;
  133. }
  134.  
  135. div.producto:hover {
  136.     box-shadow: 0px 0px 10px #007EA7;
  137.     cursor: pointer;
  138. }
  139.  
  140. div.producto:hover img {
  141.     width: 320px;
  142. }
  143.  
  144. div.producto img {
  145.     transition: width 1s ease;
  146.     width: 300px;
  147. }
  148.  
  149. div.producto h3 {
  150.     color: #007EA7;
  151.     font-weight: 700;
  152.     margin: auto;
  153.     margin-bottom: 20px;
  154.     margin-top: 20px;
  155.     width: 80%;
  156. }
  157.  
  158. section.productos h2 {
  159.     margin-bottom: 40px;
  160. }
  161.  
  162. /*PAGINA CONTACTO*/
  163.  
  164. section.contacto form {
  165.     display: flex;
  166.     flex-direction: column;
  167.     margin: auto;
  168.     width: 450px;
  169. }
  170.  
  171. section.contacto form label {
  172.     font-size: 20px;
  173.     margin-bottom: 5px;
  174. }
  175.  
  176. section.contacto form input,
  177. section.contacto form select,
  178. section.contacto form textarea {
  179.     margin-bottom: 20px;
  180.     padding: 5px;
  181. }
  182.  
  183. section.contacto form input[type="submit"] {
  184.     background-color: #007EA7;
  185.     /*color:  #00171F;*/
  186.     border: none;
  187.     text-transform: uppercase;
  188.     font-size: 16px;
  189.     font-weight: 600;
  190.     padding: 10px;
  191.     margin-left: auto;
  192.     width: 200px;
  193. }
  194.  
  195. section.contacto form input[type="submit"]:hover {
  196.     background-color: #003459;
  197.     color: #FFFFFF;
  198.     cursor: pointer;
  199. }
  200.  
  201. section.mapa iframe {
  202.     display: block;
  203.     margin: auto;
  204.     margin-top: 40px;
  205.     width: 750px;
  206. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement