Modal pop ups... (Only CSS, give click on the descriptions...)

HTML
<div class="compu"> <ul> <li> <input id="click1" type="checkbox"> <label for="click1" class="boton1"></label> <div class="bloque1"> <div class="device"> <span class="head"></span> <span class="body"><span class="brillo"></span></span> <span class="footer"></span> </div> </div> </li> <li><input id="click2" type="checkbox"> <label for="click2" class="boton2"></label> <div class="bloque2"> <div class="foto"> <div class="relleno"> <span class="mont"></span> <span class="sol"></span></div> </div> </div></li> <li><input id="click3" type="checkbox"> <label for="click3" class="boton3"></label> <div class="bloque3"> <div class="video"> <span class="globo"></span> <span class="luna"></span> <span class="linea"><span class="circ"></span></span> </div> </div></li> <li><input id="click4" type="checkbox"> <label for="click4" class="boton4"></label> <div class="bloque4"> <span class="audio"><span class="audio3"></span><span class="audio5"></span></span> </div></li> <li><input id="click5" type="checkbox"> <label for="click5" class="boton5"></label> <div class="bloque5"> <span class="hoja"><span class="escri"><span class="escri3"></span></span> </div></li> <li><input id="click6" type="checkbox"> <label for="click6" class="boton6"></label> <div class="bloque6"> <div class="celu"><span class="sol3"></span><span class="nubes"></span><span class="nubes3"><span class="gotas"></span><span class="gotas3"></span><span class="gotas7"></span></span></div> </div></li> </ul> </div> <div class="base"></div>
CSS
*{ margin:0; padding:0; } body{ background:black; } .compu{ position:relative; width:600px; height:400px; background:white; border-radius:12px; border:30px solid #212121; margin:231px auto; } .base{ position:relative; width:40px; height:50px; background:#121212; margin:-231px auto; } .base::before{ content:""; position:absolute; width:152px; height:21px; border-radius:100%; background:#121212; margin:40px -55px } ul{ position:absolute; width:560px; height:400px; list-style:none; margin:21px 23px; } ul li{ display:inline-block; width:172px; height:172px; border:3px solid #212121; margin-right:5px } ul li:nth-child(1){ background:#FD7B87; } ul li:nth-child(2){ background:#FDA65F; } ul li:nth-child(3){ background:#5FB3F9; } ul li:nth-child(4){ background:#313246; } ul li:nth-child(5){ background:#3ABECA; } ul li:nth-child(6){ background:#E65D5D; } ul li:nth-child(1) ~ input[type="checkbox"] { display: none; } ul li:nth-child(2) ~ input[type="checkbox"] { display: none; } ul li:nth-child(3) ~ input[type="checkbox"] { display: none; } ul li:nth-child(4) ~ input[type="checkbox"] { display: none; } ul li:nth-child(5) ~ input[type="checkbox"] { display: none; } ul li:nth-child(5) ~ input[type="checkbox"] { display: none; } #click1,#click2,#click3{ position:absolute; top:30px;} #click4, #click5,#click6{ position:absolute; top:321px;} :checked ~ .bloque1 {display:block;} :checked ~ .bloque2 {display:block;} :checked ~ .bloque3 {display:block;} :checked ~ .bloque4 {display:block;} :checked ~ .bloque5 {display:block;} :checked ~ .bloque6 {display:block;} .bloque1, .bloque2, .bloque3, .bloque4,.bloque5, .bloque6{ position:fixed; width:300px; height:212px; border:3px solid #121212; display:none; z-index:333; animation:grow9 3s linear; -moz-animation:grow9 3s linear; -webkit-animation:grow9 3s linear ; } .bloque1{ margin:67px 132px; background:#FD7B87; } .bloque2{ margin:67px -54px; background:#FDA65F; } .bloque3{ margin:67px -240px; background:#5FB3F9; } .bloque4{ margin:-121px 132px; background:#313246; } .bloque5{ margin:-121px -54px; background:#3ABECA; } .bloque6{ margin:-121px -240px; background:#E65D5D; } .boton1, .boton2, .boton3{ position:absolute; width:172px; height:70px; margin: 0 0px; cursor:pointer; text-align:center; } .boton4,.boton5,.boton6{ position:absolute; width:172px; height:70px; margin: 102px 0px; cursor:pointer; } .boton1::before, .boton2::before, .boton3::before, .boton4::before,.boton5::before,.boton6::before{ display:block; color:white; font-family:verdana; font-size:1.2em; margin: 17px 0px; text-transform:uppercase; text-align:center; } .boton1:hover::before, .boton2:hover::before, .boton3:hover::before,.boton4:hover::before, .boton5:hover::before, .boton6:hover::before{ color:#ccc; } .boton1::before{ content:"Web"; } .boton2::before{ content:"Photo"; } .boton3::before{ content:"Video"; } .boton4::before{ content:"Audio"; } .boton5::before{ content:"Graphics"; } .boton6::before{ content:"App"; } .boton1{ background:#FC6773; } .boton2{ background:#FC984B; } .boton3{ background:#339FF7; } .boton4{ background:#1D2042; } .boton5{ background:#21BBC6; } .boton6{ background:#E24141; } .device{ position:absolute; width:175px; height:132px; border-radius:9px; background:#333; border:3px solid #212121; margin:30px 60px; animation:grow 3s linear ; -moz-animation:grow 3s linear; -webkit-animation:grow 3s linear ; } .device::before{ content:""; display:block; width:132px; height:102px; background:white; margin:12px 19px; border:3px solid #212121; } .device::after{ content:""; display:block; width:190px; height:9px; border-radius:12px; background:#333; border:3px solid #212121; margin:0 -9px; } .head{ position:absolute; width:132px; height:21px; background:#1D2042; margin:-117px 22px; border-bottom:2px solid #212121; animation:grow3 3s linear; -moz-animation:grow3 3s linear; -webkit-animation:grow3 3s linear; } .body{ position:absolute; width:30px; height:30px; border-radius:100%; background:#E65D5D; margin:-83px 29px; border:1px solid #212121; animation:grow5 3s linear; -moz-animation:grow5 3s linear; -webkit-animation:grow5 3s linear; } .body::before{ content:""; position:absolute; width:30px; height:30px; border-radius:100%; background:#E65D5D; margin:-1px 42px; border:1px solid #212121; } .body::after{ content:""; position:absolute; border-radius:100%; width:30px; height:30px; background:#E65D5D; margin:-1px 85px; border:1px solid #212121; } .brillo{ position:absolute; width:21px; height:12px; border-radius:21px 21px 0 0; border-right:3px solid white; margin:3px 3px; z-index:333; } .brillo::before{ content:""; position:absolute; width:21px; height:12px; border-radius:21px 21px 0 0; border-right:3px solid white; margin:0px 43px; } .brillo::after{ content:""; position:absolute; width:21px; height:12px; border-radius:21px 21px 0 0; border-right:3px solid white; margin:0px 86px; } .footer{ position:absolute; width:132px; height:21px; background:#1D2042; margin:-38px 22px; border-top:2px solid #212121; animation:grow3 3s linear; -moz-animation:grow3 3s linear; -webkit-animation:grow3 3s linear ; } .foto{ position:absolute; width:152px; height:152px; background:#eee; border:3px solid #212121; margin:27px 73px; animation:grow 3s linear; -moz-animation:grow 3s linear; -webkit-animation:grow 3s linear; } .relleno{ position:absolute; width:132px; height:132px; background:#5FB3F9; margin:9px 9px; border:1px solid #212121; overflow:hidden; } .mont{ position:absolute; width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 90px solid #FC984B; margin:45px 0px; animation:grow6 3s linear; -moz-animation:grow6 3s linear; -webkit-animation:grow6 3s linear; } .mont::before{ content:""; position:absolute; width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 73px solid #E65D5D; margin:17px 12px } .sol{ position:absolute; width:30px; height:30px; border-radius:100%; background:#FDA65F; border:1px solid #212121; margin:12px 55px; animation:grow5 3s linear; -moz-animation:grow5 3s linear; -webkit-animation:grow5 3s linear; } .sol::before{ content:""; display:block; width:21px; height:12px; border-radius:21px 21px 0 0; border-right:3px solid white; margin:3px 3px; } .video{ position:absolute; width:192px; height:152px; background:#313246; margin:27px 50px; border:3px solid #212121; animation:grow 3s linear ; -moz-animation:grow 3s linear; -webkit-animation:grow 3s linear ; } .globo{ position:absolute; top: 0; left: 0; width: 35px; height: 35px; border: 3px solid #212121; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); background:#FD7B87; margin:60px 3px; animation:va 7s alternate ; -moz-animation:va 7s alternate; -webkit-animation:va 7s alternate ; } .globo::before{ content:""; display:block; border-top: 12px solid #1D2042; border-left: 7px solid transparent; border-right: 7px solid transparent; height: 0; width: 12px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); margin:40px 33px; } .globo::after{ content:""; display:block; width:30px; height:16px; border-radius:30px 30px 0 0; border-right:3px solid white; margin:-85px -5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .luna{ position:absolute; width:45px; height:45px; border-radius:100%; background:white; border:2px solid #212121; margin:3px 70px; } .linea{ position:absolute; width:192px; height:6px; background:white; border-top:2px solid #212121; border-bottom:2px solid #212121; margin:142px 0; } .circ{ position:absolute; width:12px; height:12px; border-radius:100%; background:#E24141; margin:-4px 172px; border:1px solid #212121; animation:va3 7s alternate ; -moz-animation:va3 7s alternate; -webkit-animation:va3 7s alternate; } .audio3{ position:absolute; width:60px; height:60px; border-radius:100%; background:#FD7B87; margin:-78px 21px; -moz-animation:sube3 .3s alternate infinite ; -webkit-animation:sube3 .3s alternate infinite; animation:sube3 .3s alternate infinite; } .audio3::before{ content:""; position:absolute; width:30px; height:16px; border-radius:30px 30px 0 0; border-right:3px solid white; margin:9px 21px; z-index:333; } .audio5{ position:absolute; width:25px; height:25px; border-radius:100%; background:#FD7B87; margin:0px 37px; -moz-animation:sube3 .3s alternate infinite ; -webkit-animation:sube3 .3s alternate infinite; -o-animation: sube3 .3s alternate infinite; animation:sube3 .3s alternate infinite; } .audio5::before{ content:""; position:absolute; width:21px; height:9px; border-radius:21px 21px 0 0; border-right:3px solid white; margin:3px -2px; z-index:333; } .audio{ position:absolute; width:102px; height:132px; border-radius:12px; background:#21BBC6; border:3px solid #212121; margin:40px 99px; animation:grow 3s linear ; -moz-animation:grow 3s linear; -webkit-animation:grow 3s linear ; } .audio::before{ content:""; display:block; width:60px; height:60px; border-radius:100%; border:9px solid #333; background:#3ABECA; margin:9px 12px; } .audio::after{ content:""; display:block; width:21px; height:21px; border-radius:100%; border:9px solid #333; background::#FD7B87;; margin:-7px 30px; } .hoja{ position:absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 160px; height: 159px; border: none; font: normal 100%/normal Arial, Helvetica, sans-serif; color: rgba(255,255,255,1); -o-text-overflow: clip; text-overflow: clip; background: -webkit-linear-gradient(90deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(90deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(252,100,123,1); background: -moz-linear-gradient(0deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(0deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(252,100,123,1); background: linear-gradient(0deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(90deg, #212121 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(0deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), linear-gradient(90deg, #212121 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(252,100,123,1); background-position: -2px -19px, -22px 5px, -1px -1px, -1px -1px; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; margin:23px 67px; border:3px solid #212121; animation:grow 3s linear; -moz-animation:grow 3s linear; -webkit-animation:grow 3s linear; } .escri{ position:absolute; width:25px; height:90px; background:#21BBC6; border-radius:12px 12px 0 0 ; border:2px solid #212121; margin:25px 102px; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); transform: rotate(35deg); -moz-animation:esc 3s linear; -webkit-animation: esc 3s linear ; animation:esc 3s linear ; } .escri::before{ content:""; display:block; width: 0; height: 0; border-left: 13px solid transparent; border-right:13px solid transparent; border-top: 13px solid #21BBC6; margin: 92px -1px; } .escri3::before{ content:""; position:absolute; width:3px; height:50px; background:white; margin:-90px 5px } .escri3{ position:absolute; width: 0; height: 0; border-left: 12px solid transparent; border-right:12px solid transparent; border-top: 12px solid #212121; margin: -102px 0px; } .celu{ position:absolute; width:112px; height:172px; background:#333; border-radius:9px; margin:17px 93px; border:3px solid #212121; animation:grow 3s linear; -moz-animation:grow 3s linear; -webkit-animation:grow 3s linear; } .celu::before{ content:""; display:block; width:88px; height:129px; background:#3ABECA; margin:21px 12px; } .celu::after{ content:"Raining"; font-family:verdana; text-align:center; color:white; display:block; width:88px; height:30px; background:#21BBC6; margin:-40px 12px; border-top:2px solid #212121; } .sol3{ position:absolute; width:21px; height:21px; border-radius:100%; background:#FDA65F; border:1px solid #212121; margin:-142px 21px; } .sol3::before{ content:""; position:absolute; width:21px; height:21px; border-radius:100%; background:#FDA65F; border:1px solid #212121; margin:-1px 43px; } .sol3::after{ content:""; display:block; width:21px; height:9px; border-radius:21px 21px 0 0; border-right:3px solid white; margin:3px -5px; } .nubes{ position:absolute; width:17px; height:17px; border-radius:100%; background:white; margin:-132px 60px; border:1px solid #212121; } .nubes::before{ content:""; position:absolute; width:16px; height:16px; border-radius:100%; background:white; margin:-3px 7px; border-top:1px solid #212121; } .nubes::after{ content:""; position:absolute; width:17px; height:17px; border-radius:100%; background:white; margin:-1px 16px; border-top:1px solid #212121; border-right:1px solid #212121; border-bottom:1px solid #212121; } .nubes3{ position:absolute; width:21px; height:21px; border-radius:100%; background:#ccc; margin:-102px 37px; border:1px solid #212121; } .nubes3::before{ content:""; position:absolute; width:19px; height:19px; border-radius:100%; background:#ccc; margin:-3px 7px; border-top:1px solid #212121; } .nubes3::after{ content:""; position:absolute; width:21px; height:21px; border-radius:100%; background:#ccc; margin:-1px 16px; border-top:1px solid #212121; border-right:1px solid #212121; border-bottom:1px solid #212121; } .gotas, .gotas3, .gotas7{ position:absolute; width: 7px; height: 7px; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(221deg); -moz-transform: rotate(221deg); transform: rotate(221deg); } .gotas{ background:#ccc; margin:30px 3px; animation:caen 1s linear infinite; -moz-animation:caen 1s linear infinite; -webkit-animation:caen 1s linear infinite; } .gotas3{ background:#ccc; margin:25px 14px; animation:caen3 2s linear infinite; -moz-animation:caen3 2s linear infinite; -webkit-animation:caen3 2s linear infinite; } .gotas7{ background:#ccc; margin:30px 25px; animation:caen7 3s linear infinite; -moz-animation:caen7 3s linear infinite; -webkit-animation:caen7 3s linear infinite; } @keyframes grow{ 0%,25%{transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0);} 35%,45%,55%,65%,75%,85%,95%,100%{ transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1);} } @-moz-keyframes grow{ 0%,25%{transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0);} 35%,45%,55%,65%,75%,85%,95%,100%{ transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1);} } @-webkit-keyframes grow{ 0%,25%{transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0);} 35%,45%,55%,65%,75%,85%,95%,100%{ transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1);} } @keyframes grow3{ 0%,25%,35%{width:0px; height:21px;} 45%,55%,65%,75%,85%,95%,100%{width:132px; height:21px;} } @-moz-keyframes grow3{ 0%,25%,35%{width:0px; height:21px;} 45%,55%,65%,75%,85%,95%,100%{width:132px; height:21px;} } @-webkit-keyframes grow3{ 0%,25%,35%{width:0px; height:21px;} 45%,55%,65%,75%,85%,95%,100%{width:132px; height:21px;} } @keyframes grow5{ 0%,25%,35%,45%{opacity:0;} 55%,65%,75%,85%,95%,100%{opacity:1;} } @-moz-keyframes grow5{ 0%,25%,35%,45%{opacity:0;} 55%,65%,75%,85%,95%,100%{opacity:1;} } @-webkit-keyframes grow5{ 0%,25%,35%,45%{opacity:0;} 55%,65%,75%,85%,95%,100%{opacity:1;} } @keyframes grow6 { 0%,25%,35%{margin:132px 0px;} 45%,55%,65%,75%,85%,95%,100%{margin:45px 0px;} } @-moz-keyframes grow6 { 0%,25%,35%{margin:132px 0px;} 45%,55%,65%,75%,85%,95%,100%{margin:45px 0px;} } @-webkit-keyframes grow6 { 0%,25%,35%{margin:132px 0px;} 45%,55%,65%,75%,85%,95%,100%{margin:45px 0px;} } @keyframes va { 0%,25%{margin:60px 142px;} 100%{margin:60px 3px;} } @-moz-keyframes va { 0%,25%{margin:60px 142px;} 100%{margin:60px 3px;} } @-webkit-keyframes va { 0%,25%{margin:60px 142px;} 100%{margin:60px 3px;} } @keyframes va3 { 0%,25%{margin:-4px 0px;} 100%{margin:-4px 172px;} } @-moz-keyframes va3 { 0%,25%{margin:-4px 0px;} 100%{margin:-4px 172px;} } @-webkit-keyframes va3 { 0%,25%{margin:-4px 0px;} 100%{margin:-4px 172px;} } @keyframes grow9{ 0%{opacity:0;} 12%{opacity:1;} } @-moz-keyframes grow9{ 0%{opacity:0;} 12%{opacity:1;} } @-webkit-keyframes grow9{ 0%{opacity:0;} 12%{opacity:1;} } @-webkit-keyframes sube3 { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } } @-moz-keyframes sube3 { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } } @keyframes sube3 { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } } @keyframes esc{ 0%,25%,35%{margin:25px 30px;} 45%,55%,65%,75%,85%,95%,100%{margin:25px 102px;} } @-moz-keyframes esc{ 0%,25%,35%{margin:25px 30px;} 45%,55%,65%,75%,85%,95%,100%{margin:25px 102px;} } @-webkit-keyframes esc{ 0%,25%,35%{margin:25px 30px;} 45%,55%,65%,75%,85%,95%,100%{margin:25px 102px;} } @keyframes caen { 0%,25%,35%{margin:12px 3px; opacity:1} 45%,55%,65%,75%,85%,95%,100%{margin:80px 3px; opacity:0;} } @-moz-keyframes caen { 0%,25%,35%{margin:12px 3px; opacity:1} 45%,55%,65%,75%,85%,95%,100%{margin:80px 3px; opacity:0;} } @-webkit-keyframes caen { 0%,25%,35%{margin:12px 3px; opacity:1} 45%,55%,65%,75%,85%,95%,100%{margin:80px 3px; opacity:0;} } @keyframes caen3 { 0%,25%,35%,45%{margin:12px 14px; opacity:1} 55%,65%,75%,85%,95%,100%{margin:70px 14px; opacity:0;} } @-moz-keyframes caen3 { 0%,25%,35%,45%{margin:12px 14px; opacity:1} 55%,65%,75%,85%,95%,100%{margin:70px 14px; opacity:0;} } @-webkit-keyframes caen3 { 0%,25%,35%,45%{margin:12px 14px; opacity:1} 55%,65%,75%,85%,95%,100%{margin:70px 14px; opacity:0;} } @keyframes caen7 { 0%,25%,35%,45%,55%{margin:12px 25px; opacity:1} 65%,75%,85%,95%,100%{margin:70px 25px; opacity:0;} } @-moz-keyframes caen7 { 0%,25%,35%,45%,55%{margin:12px 25px; opacity:1} 65%,75%,85%,95%,100%{margin:70px 25px; opacity:0;} } @-webkit-keyframes caen7 { 0%,25%,35%,45%,55%{margin:12px 25px; opacity:1} 65%,75%,85%,95%,100%{margin:70px 25px; opacity:0;} }
JAVASCRIPT
Expand for more options Login