API tools faq
paste
Dopesaurio

Pagina nueva CSS

Dopesaurio
Aug 26th, 2021
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.13 KB | None | 0 0
raw download clone embed print report
  1. @import url(http://fonts.googleapis.com/css?family=Open+Sans);
  2. @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);
  3. span.icon{
  4.  
  5.     padding-left: px;
  6.  
  7. /*  border-radius: 50px;*
  8. }
  9. span.icon > ion-icon{
  10.     border: 3x solid ;
  11. /*  border-radius: 30;*/
  12.     margin: 10px;
  13.     margin-left: 300;
  14. }
  15. .botones{
  16.    
  17.     padding-left: 200px;
  18. }
  19. .button{
  20.   display: inline-block;
  21.   padding: 10px 30px;
  22.   margin: 0px 0px 0px 00px;
  23.   position: center;
  24.   color: #FFFFFF;
  25.   border-radius: 1em/7em;
  26.  
  27. }
  28.  
  29. #button-7{
  30.   -webkit-perspective: 50px;
  31.   -moz-perspective: 50px;
  32.   -ms-perspective: 50px;
  33.   perspective: 50px;
  34.   background-color: #000000;
  35.   -webkit-transition: all 0.6s ease-in-out;
  36.   -o-transition: all 0.6s ease-in-out;
  37.   transition: all 0.6s ease-in-out;
  38. }
  39.  
  40. #button-7:hover{
  41.   -webkit-transform: rotateX(360deg);
  42.   -ms-transform: rotateX(360deg);
  43.   -o-transform: rotateX(360deg);
  44.   transform: rotateX(360deg);
  45. }
  46. .
  47.    .link { color: #000000; } /* CSS link color (red) */
  48. .link:hover { color: #572364; }
  49. *{text-decoration:none; list-style:none; margin:0px; padding:0px; outline:none;}
  50. body{margin:0px; padding:0px; font-family: 'Open Sans', sans-serif;}
  51. section{width:100%; max-width:1200px; margin:0px auto; display:table; position:relative;}
  52.  
  53. header{width:100%; display:table; background-color:#FFFFFF; margin-bottom:.0px;}
  54. #logo{float:left; font-size:18px; text-transform:uppercase; color: #001400; font-weight:600; padding:0px 0px ; padding-left: 0px;}
  55. nav{width:auto; float:right;}
  56. nav ul{display:table; float:right;}
  57. nav ul li{float:left;}
  58. nav ul li:last-child{padding-right:0px;}
  59. nav ul li a{color: #001400; font-size:20px; padding: 25px 20px; display:inline-block; transition: all 0.5s ease 0s;}
  60. nav ul li a:hover{background-color:#001400; color:#BAAEE1; transition: all 0.5s ease 0s;}
  61. nav ul li a:hover i{color:#BAAEE1; transition: all 0.5s ease 0s;}
  62. nav ul li a i{padding-right:10px; color:nav ul li a i{padding-right:10px; color:#001400; transition: all 0.5s ease 0s;}
  63. ; transition: all 0.5s ease 0s;}
  64.  
  65. .toggle-menu ul{display:table; width:25px;}
  66. .toggle-menu ul li{width:100%; height:3px; background-color:#001400; margin-bottom:4px;}
  67. .toggle-menu ul li:last-child{margin-bottom:0px;}
  68.  
  69. input[type=checkbox], label{display:none;}
  70.  
  71. .content{display:table; margin-bottom:60px; width:900px;}
  72. .content h2{font-size:18px; font-weight:500; color:#001400; border-bottom:1px solid #001400; display:table; padding-bottom:10px; margin-bottom:10px;}
  73. .content p{font-size:14px; line-height:22px; color:#001400; text-align:justify;}
  74.  
  75. @media only screen and (max-width: 1440px) {
  76. section{max-width:95%;}
  77. }
  78.  
  79.  
  80. @media only screen and (max-width: 980px) {
  81. header{padding:20px 0px;}
  82. #logo{padding:0px 0% 0px 0px;}
  83. input[type=checkbox] {position: absolute; top: -9999px; left: -9999px; background:none;}
  84. input[type=checkbox]:fous{background:none;}
  85. label {float:right; padding:8px 0px; display:inline-block; cursor:pointer; }
  86. input[type=checkbox]:checked ~ nav {display:block;}
  87.  
  88. nav{display:none; position:absolute; right:0px; top:53px; background-color:#001400; padding:0px; z-index:99;}
  89. nav ul{width:auto;}
  90. nav ul li{float:none; padding:0px; width:100%; display:table;}
  91. nav ul li a{color:#FFF; font-size:15px; padding:10px 20px; display:block; border-bottom: 1px solid rgba(225,225,225,0.1);}
  92.  
  93. }
  94.  
  95.  
  96.  
  97. .SmallPanel {
  98.             display: none;
  99.            
  100.         }
  101.  
  102.         .BigPanel {
  103.             display: block;
  104.         }
  105.  
  106.  
  107.     @media only screen and (max-width: 1279px) {
  108.  
  109.             .SmallPanel {
  110.             display: block;
  111.             }
  112.  
  113.             .BigPanel {
  114.             display: none;
  115.             }
  116.  
  117.     }
  118.  
  119.  
  120.     @media only screen and (max-device-width: 500px) {
  121.             .SmallPanel {
  122.             display: block;
  123.            
  124.             }
  125.  
  126.             .BigPanel {
  127.             display: none;
  128.             }
  129.  
  130.  
  131.         }
  132.  
  133. .small-menu {
  134.             display: none;
  135.            
  136.         }
  137.  
  138.         .regular-menu {
  139.             display: block;
  140.         }
  141.  
  142.  
  143.     @media only screen and (max-width: 1279px) {
  144.  
  145.             .small-menu {
  146.             display: block;
  147.             }
  148.  
  149.             .regular-menu {
  150.             display: none;
  151.             }
  152.  
  153.     }
  154.  
  155.  
  156.     @media only screen and (max-device-width: 500px) {
  157.             .small-menu {
  158.             display: block;
  159.            
  160.             }
  161.  
  162.             .regular-menu {
  163.             display: none;
  164.             }
  165.  
  166.  
  167.         }
  168.  
  169.  
  170. @media only screen and (max-width: 980px) {
  171. .content{width:90%;}
  172. }
  173.  
  174. @media only screen and (max-width: 568px) {
  175. h1{padding:25px 0px;}
  176. h1 span{display:block;}
  177. }
  178.  
  179. @media only screen and (max-width: 480px) {
  180. section {max-width: 90%;}
  181.     h1{font-size:20px;}
  182. }
  183.  
  184. @media only screen and (max-width: 360px) {
  185. h1{font-size:20px;}
  186. label{padding:5px 0px;}
  187. #logo{font-size: 20px;}
  188. nav{top:47px;}
  189. }
  190.  
  191. @media only screen and (max-width: 320px) {
  192. h1 {padding: 20px 0px;}
  193. }
  194.  
  195. .flex-center {
  196.   width: 100%;
  197.   min-height: 50vh;
  198.  
  199.   background: #000;
  200.  
  201.   display: -webkit-box;
  202.   display: -webkit-flex;
  203.   display: -ms-flexbox;
  204.   display: flex;
  205.   -webkit-box-pack: center;
  206.   -webkit-justify-content: center;
  207.       -ms-flex-pack: center;
  208.           justify-content: center;
  209.   -webkit-box-align: center;
  210.   -webkit-align-items: center;
  211.       -ms-flex-align: center;
  212.           align-items: center;
  213. }
  214.  
  215. .icon-3d {
  216.   padding: 10px;
  217.   -webkit-animation: icon3d 200ms 10;
  218.   animation: icon3d 200ms 10;
  219.   color: #fff;
  220.   &:hover {
  221.     -webkit-animation: icon3d 200ms infinite;
  222.           animation: icon3d 200ms infinite;
  223.   }
  224. }
  225.  
  226. @keyframes icon3d {
  227.   0% {
  228.     text-shadow: 5px 4px $redColor, -5px -6px $blueColor;
  229.   }
  230.   25% {
  231.     text-shadow: -5px -6px $redColor, 5px 4px $blueColor;
  232.   }
  233.   50% {
  234.     text-shadow: 5px -4px $redColor, -8px 4px $blueColor;
  235.   }
  236.   75% {
  237.     text-shadow: -8px -4px $redColor, -5px -4px $blueColor;
  238.   }
  239.   100% {
  240.     text-shadow: -5px 0 $redColor, 5px -4px $blueColor;
  241.   }
  242. }
  243.  
  244.  
  245.  
  246. body {
  247.   background-color: #eee;
  248.   color: #555;
  249.   font-family: 'Open Sans', sans-serif;
  250.   font-size: 16px;
  251.   font-weight: normal;
  252.   margin: 0;
  253. }
  254. .fa {
  255.     font-size: 200% !important;
  256.     padding-left: 3%;
  257. }
  258. ul#menu {
  259.   margintop:22 px;
  260.   width: 77px;
  261.   position: fixed;
  262.   top: 0;
  263.   left: 1%;
  264.   top: 33%;
  265.     text-align:center;
  266.   margin: 0;
  267.   padding: 0;
  268.   list-style-type: none;
  269.   z-index: 1000;
  270. }
  271.  
  272. header div.row .col-6, .col-5, .col-1{
  273.     background: black;
  274.     color:white;
  275. }
  276.    
  277. img{
  278.     max-width: 100%:
  279. }
  280. img.arriba{
  281.     max-width: 15%;
  282. }
  283.  
  284.  
  285. div.tex-white{
  286.     position: relative;
  287.  
  288. }
  289. h1{
  290.     color: white;
  291.     position: absolute;
  292.     top: 120px;
  293.     left: 20%;
  294.     text-align: center;
  295.     font-size: 55px;
  296.  
  297. }
  298. span.icon{
  299. /*  background: white;*/
  300.     position: absolute;
  301.     top:320px;
  302.     right: 300px;
  303. /*  border-radius: 50px;*/
  304. }
  305. span.icon > ion-icon{
  306.     border: 3x solid ;
  307. /*  border-radius: 30;*/
  308.     margin: 50px;
  309. }
  310. h6{
  311.     color: white;
  312.     position: absolute;
  313.     top: 280px;
  314.     left: 55%;
  315. }
  316. p.card-text{
  317.     position: absolute;
  318.     top: 350px;
  319.     left: 65%;
  320.     text-align: center;
  321.     font-size: 14px;
  322.  
  323. }
  324. div.col{
  325.     padding: 90px;
  326. }
  327.  p.mt-2{
  328.     font-size: 11px;
  329.     padding: 10px;
  330. }
  331. img.card-img-top{
  332.     position: relative;
  333.     left: 2%;
  334.  }
  335.  a.carousel-control-prev{
  336.     background: gray;
  337.  }
  338.  a.carousel-control-next {
  339.     background: gray;
  340.  } 
  341.  
  342. @media (max-width: 1023px) {
  343.     h6{
  344.         position: absolute;
  345.         top: 20px;
  346.         font-size: 12px;
  347.     }
  348.     h1.card-title{
  349.     position: absolute;
  350.     top: 50px;
  351.     left: 40%;
  352.     text-align: center;
  353.     font-size: 12px;
  354.  
  355.     }
  356.     p.card-text{
  357.     position: absolute;
  358.     top: 70px;
  359.     left: 55%;
  360.     text-align: center;
  361.     font-size: 10px;
  362.  
  363.     }
  364. }
  365.  
  366. @media (min-width: 1024px) and (max-width: 1200px) {
  367.     h6{
  368.         position: absolute;
  369.         top: 35px;
  370.         font-size: 15px;
  371.     }
  372.     h1.card-title{
  373.     position: absolute;
  374.     top: 50px;
  375.     left: 20%;
  376.     text-align: center;
  377.     font-size: 40px;
  378.  
  379.     }
  380.     p.card-text{
  381.     position: absolute;
  382.     top: 160px;
  383.     left: 65%;
  384.     text-align: center;
  385.     font-size: 20px;
  386.  
  387.     }
  388. }
  389. @media screen and (max-width: 1200px) {
  390.     h1{
  391.         position: absolute;
  392.         top: 75px;
  393.         font-size: 45px;
  394.     }
  395.     h6{
  396.         position: absolute;
  397.         top: 200px;
  398.     }
  399.     span.icon{
  400.     background: white;
  401.     position: absolute;
  402.     top: 240px;
  403.     right: 21%;
  404.     border-radius: 50px;
  405.     }
  406.    
  407. }
  408.  
  409. @media screen and (max-width: 500px) {
  410.     body{
  411.         padding: 0;
  412.         margin: 0;
  413.     }
  414.     h1{
  415.         position: absolute;
  416.         top: 35px;
  417.         right: 15px;
  418.         font-size: 20px;
  419.     }
  420.     h6{
  421.         position: absolute;
  422.         top: 90px;
  423.         left: 60%;
  424.         font-size: 5px;
  425.     }
  426.     span.icon{
  427.     background: white;
  428.     position: absolute;
  429.     top: 115px;
  430.     right: 18%;
  431.     border-radius: 50px;
  432.  
  433. }
  434. div.carousel-inner{
  435.     width: 100%;
  436.     height:  40%;
  437.     margin-left: 40px;
  438. }
  439.  
  440. div.card{
  441.     margin: 0px;
  442.     padding: 0px;
  443.     width: 100%;   
  444.     position: relative;
  445. }
  446.  
  447. div#izq{
  448.     width: 19%;
  449.     position: absolute;
  450.     top:0%;
  451.     left: 0%;
  452. }
  453. div#cen{
  454.     width: 19%;
  455.     position: absolute;
  456.     top:0%;
  457.     left: 35%;
  458. }
  459. div#der{
  460.     width: 19%;
  461.     position: absolute;
  462.     top:0%;
  463.     right: 10%;
  464. }
  465.  
  466. div.card-group{
  467.     width: 100%;
  468.     height: 110px;
  469. }
  470. img.card-img-top{  
  471.     width: 130px;
  472.  }
  473.  a.carousel-control-prev{
  474.     background: black;
  475.  }
  476.  a.carousel-control-next {
  477.     background: black;
  478.  } 
  479.  
  480.     ul#menu {
  481.  
  482.   width: 77px;
  483.   position: fixed;
  484.   top: 0;
  485.   left: 1%;
  486.   top: 33%;
  487.     text-align:center;
  488.   margin: 0;
  489.   padding: 0;
  490.   list-style-type: none;
  491.   z-index: 1000;
  492. }
  493. ul#menu li {
  494.   border-top: 1px solid #ccc;
  495.     border-left:10px solid #fff;
  496. }
  497. ul#menu li.one {
  498.     border-left-color: #55acee;
  499. }
  500. ul#menu li.two {
  501.     border-left-color: #3b5998;
  502. }
  503. ul#menu li.three {
  504.     border-left-color: #bc2a8d;
  505. }
  506. ul#menu li.four {
  507.     border-left-color: #dd4b39;
  508. }
  509. ul#menu li.five {
  510.     border-left-color: #007bb5;
  511. }
  512. ul#menu li a {
  513.   text-decoration: none;
  514.   color: #000;
  515.   padding: 11px 5px;
  516.   background-color: #fff;
  517.   display: block;
  518. }
  519. ul#menu li.one a:hover {
  520.     background-color: #55acee;
  521.     color: #fff;
  522. }
  523. ul#menu li.two a:hover {
  524.     background-color: #3b5998;
  525.     color: #fff;
  526. }
  527. ul#menu li.three a:hover {
  528.     background-color: #bc2a8d;
  529.     color: #fff;
  530. }ul#menu li.four a:hover {
  531.     background-color: #dd4b39;
  532.     color: #fff;
  533. }
  534. ul#menu li.five a:hover {
  535.     background-color: #007bb5;
  536.     color: #fff;
  537. }
  538.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!