Advertisement
ImKingEz_

Untitled

Jun 10th, 2021
1,146
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.98 KB | None | 0 0
  1. * {
  2.   box-sizing: border-box;
  3. }
  4.  
  5. body {
  6.     margin: 0;
  7. }
  8.  
  9. nav img, nav a img{
  10.     width: 5vw;
  11.     height: 5vw;
  12.     display: inline-block;
  13. }
  14.  
  15. .logo {
  16.     float: left;
  17. }
  18.  
  19. .social {
  20.     float: right;
  21. }
  22.  
  23. nav {
  24.     width: 100%;
  25.     max-height: 5vw;
  26.   height: 5vw;
  27.     background-color: #0a0a0a;
  28.     clear: both;
  29.     z-index: 1;
  30. }
  31.  
  32. nav #menudesktop{
  33.     list-style-type: none;
  34.     text-align: center;
  35.     float: left;
  36.   margin: 0;
  37. }
  38.  
  39. nav #menudesktop li{
  40.     display: inline-block;
  41.     padding-top: 2.7vh;
  42.     padding-bottom: 3vh;
  43.   transition: all 0.7s cubic-bezier(.215, .61, .355, 1);
  44. }
  45.  
  46. nav #menudesktop li a:link, nav #menudesktop li a:visited, nav #menudesktop li a:active {
  47.     font-size: 1.6vw;
  48.     color: white;
  49.     text-decoration: none;
  50.     font-family: 'Inter', sans-serif;
  51.     padding: 1.5vw;
  52. }
  53.  
  54. nav #menudesktop li:hover, .social:hover {
  55.     background-color: #363636;
  56.     color: white;
  57.   height: 5vw;
  58. }
  59.  
  60. #menuresponsive {
  61.     display: none;
  62. }
  63.  
  64. @keyframes presentazione {
  65.     0%      {background-image: url("../img/pizza1.jpg");}
  66.     33.33%  {background-image: url("../img/pizza2.jpg");}
  67.     66.66%  {background-image: url("../img/pizza3.jpg");}
  68.     100%    {background-image: url("../img/pizza4.jpg");}
  69. }
  70.  
  71. @-webkit-keyframes presentazione {
  72.     0%      {background-image: url("../img/pizza1.jpg");}
  73.     33.33%  {background-image: url("../img/pizza2.jpg");}
  74.     66.66%  {background-image: url("../img/pizza3.jpg");}
  75.     100%    {background-image: url("../img/pizza4.jpg");}
  76. }
  77.  
  78. @-moz-keyframes presentazione {
  79.     0%      {background-image: url("../img/pizza1.jpg");}
  80.     33.33%  {background-image: url("../img/pizza2.jpg");}
  81.     66.66%  {background-image: url("../img/pizza3.jpg");}
  82.     100%    {background-image: url("../img/pizza4.jpg");}
  83. }
  84.  
  85. #top {
  86.     background-image: url("../img/pizza1.jpg"), url("../img/pizza2.jpg"), url("../img/pizza3.jpg"), url("../img/pizza4.jpg");
  87.     background-repeat: no-repeat;
  88.     background-attachment: fixed;
  89.     background-size: 100% 140%;
  90.   z-index: 0;
  91.   position: relative;
  92.     left: 0;
  93.     top: 0;
  94.   width: auto;
  95.     height: 30vw;
  96.  
  97.     animation-name: presentazione;
  98.     animation-duration: 15s;
  99.     animation-iteration-count: infinite;
  100.     animation-delay: 1.5s;
  101.     animation-timing-function: linear;
  102.     animation-direction: alternate;
  103.  
  104.     -webkit-animation-name: presentazione;
  105.     -webkit-animation-duration: 15s;
  106.     -webkit-animation-iteration-count: infinite;
  107.     -webkit-animation-delay: 1.5s;
  108.     -webkit-animation-timing-function: linear;
  109.     -webkit-animation-direction: alternate;
  110.  
  111.     -moz-animation-name: presentazione;
  112.     -moz-animation-duration: 15s;
  113.     -moz-animation-iteration-count: infinite;
  114.     -moz-animation-delay: 1.5s;
  115.     -moz-animation-timing-function: linear;
  116.     -moz-animation-direction: alternate;
  117. }
  118.  
  119. #top p {
  120.     z-index: 1;
  121.     position: relative;
  122.     top: 10vw;
  123.     text-align: center;
  124.     font-family: 'Redressed', cursive;
  125.     font-size: 2.2vw;
  126.     margin: 0;
  127.     opacity: 1;
  128.     background-color: rgba(204, 203, 202, 0.4);
  129. }
  130.  
  131. #bandiera {
  132.     position: absolute;
  133.     left: 38vw;
  134.     top: 23vw;
  135.     text-align: center;
  136.     font-size: 5vw;
  137.     border: 0;
  138.     margin: 0;
  139.     font-family: 'Open Sans', sans-serif;
  140.     opacity: 1;
  141.     background-color: transparent;
  142. }
  143.  
  144. #content {
  145.     font-family: 'Redressed', cursive;
  146.     position: relative;
  147.     background-color: rgba(245, 245, 245);
  148. }
  149.  
  150. #chi-siamo {
  151.     width: 50vw;
  152.     color: black;
  153.     position: relative;
  154.     height: 34vw;
  155.     top: 5vw;
  156.     left: 25%;
  157. }
  158.  
  159. #chi-siamo hr {
  160.     margin: 0;
  161.     position: relative;
  162. }
  163.  
  164. #chi-siamo h1 {
  165.     position: relative;
  166.     top: 6vw;
  167.     left: 3vw;
  168.     text-align: left;
  169.     font-size: 3.3vw;
  170.     margin: 0;
  171.     max-width: 22vw;
  172.     display: inline-block;
  173.     float: left;
  174. }
  175.  
  176. #chi-siamo p {
  177.     position: relative;
  178.     top: 6.5vw;
  179.     left: 4vw;
  180.     text-align: left;
  181.     font-size: 1.5vw;
  182.     margin-top: 1vw;
  183.     max-width: 22vw;
  184.     font-style: italic;
  185.     margin: 0;
  186.     display: inline-block;
  187.     float: left;
  188.     clear: both;
  189.     font-family: 'Roboto', sans-serif;
  190. }
  191.  
  192. #chi-siamo img {
  193.     position: absolute;
  194.     top: 3vw;
  195.     right: 2vw;
  196.     width: 18vw;
  197.     height: 18vw;
  198.     display: inline-block;
  199.     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
  200. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement