3d css cube

3d css cube infographics css3 animation What is a 3d css cube How do you make a 3d css cube? This script and codes were developed by Elena on 18 February 2022, Friday.

How do I make an 3d css cube?
  1. 3d css cube Previews
  2. 3d css cube HTML Codes
3d css cube Previews

3d css cube HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>3d css cube </title>
  
  
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cube 3d</title>
	

	<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300|Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>

	<style>

      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      [class*="wall-"] p {
        color: #fff;
        font: 17px/1.2 Arial;			
      }
      .box-logo {
        text-transform: uppercase;
        color: #fff;
        font: 52px/210px 'Roboto Condensed', sans-serif;
        font-weight: 700;
          letter-spacing: -2px;
      }

      #b1 [class*="wall-"] {
        background: rgba(255,136,16,0.8);
        background: -moz-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,136,16,0.8)), color-stop(100%, rgba(255,183,55,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: linear-gradient(to right, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8810', endColorstr='#ffb737', GradientType=1 );

        -webkit-box-shadow: inset -65px -40px 102px 0px #E87309;
        -moz-box-shadow: inset -65px -40px 102px 0px #E87309;
        box-shadow: inset -65px -40px 102px 0px #E87309;

        border: 1px solid rgb(247, 129, 18);			
      }
      #b2 [class*="wall-"] {
        background: rgba(3,169,244,0.8);
        background: -moz-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,169,244,0.8)), color-stop(100%, rgba(0,188,212,0.8)));
        background: -webkit-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -o-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: linear-gradient(to right, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );

        -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        -moz-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        border: 1px solid rgba(8, 110, 156, 0.54);
      }
      #b3 [class*="wall-"] {
        background: rgba(255,190,0,0.8);
        background: -moz-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,190,0,0.8)), color-stop(100%, rgba(255,225,49,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: linear-gradient(to right, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbe00', endColorstr='#ffe131', GradientType=1 );

        -webkit-box-shadow: inset 10px 10px 113px 0px rgba(255,190,0,1);
        -moz-box-shadow: inset 10px 10px 113px 0px rgba(255,190,0,1);
        box-shadow: inset 0 -70px 113px 0px rgba(255, 190, 0, 0.55);
        border: 1px solid rgba(255, 190, 0, 0.33);			
      }

      #b4 [class*="wall-"] {
        background: rgba(249,82,137,0.8);
        background: -moz-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(249,82,137,0.8)), color-stop(100%, rgba(255,135,176,0.8)));
        background: -webkit-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -o-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: linear-gradient(to right, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f95289', endColorstr='#ff87b0', GradientType=1 );

        -webkit-box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);
        -moz-box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);
        box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);

        border: 1px solid rgba(233, 30, 99, 0.68);			
      }

      #b5 [class*="wall-"] {
        background: rgba(215,224,34,1);
        background: -moz-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(215,224,34,1)), color-stop(100%, rgba(117,191,67,1)));
        background: -webkit-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -o-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -ms-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: linear-gradient(to right, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e022', endColorstr='#75bf43', GradientType=1 );

        -webkit-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        -moz-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        /*border: 1px solid rgba(88, 136, 35, 0.88);*/
      }

      #b6 [class*="wall-"] {
        background: rgba(102,61,139,0.8);
        background: -moz-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,61,139,0.8)), color-stop(100%, rgba(147,111,207,0.8)));
        background: -webkit-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -o-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: linear-gradient(to right, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663d8b', endColorstr='#936fcf', GradientType=1 );


        -webkit-box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);
        -moz-box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);
        box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);

        border: 1px solid #634A8E;
      }

      #b7 [class*="wall-"] {
        background: rgba(240,52,41,0.8);
        background: -moz-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,52,41,0.8)), color-stop(100%, rgba(252,92,68,0.8)));
        background: -webkit-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -o-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: linear-gradient(to right, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f03429', endColorstr='#fc5c44', GradientType=1 );

        -webkit-box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);
        -moz-box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);
        box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);

        border: 1px solid #E83426;
      }

      #b2 .wall-4,
      #b4 .wall-4,
      #b5 .wall-4 {
        animation: shadow 2s 1s ease-in both; 

      }

      @keyframes shadow {
        to { box-shadow: -40px 50px 120px 3px rgba(0, 0, 0, 0.52); }
      }

      .container-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        transform: scale(.5);
        justify-content: center;
        max-width: 3000px;
        width: 100%;

        float: left;
      }

      .box {	
        width: 270px;
        height: 270px;
        /*margin: 12% 0 7% 27%;*/
        margin: 0 auto;		
        transform-style: preserve-3d;


        /*animation: rotate 27s infinite ease-in;*/			
      }
        [class*="wall-"] {
          position: absolute;
          text-align: center;
          width: 210px;
          height: 210px;			
          padding-left: 20px;
        }		

          .wall-1 { transform: translateX(-105px) rotateY(90deg); }
          .wall-2 { transform: translateY(-105px) rotateX(90deg); }
          .wall-3 { transform: translateZ(-105px); }				
          .wall-4 { transform: translateY(105px) rotateX(90deg); }		
          .wall-5 { transform: translateZ(105px); }
          .wall-6 { transform: translateX(105px) rotateY(90deg); }


      @keyframes box1 {
        22% { 
          transform: translate(0px, 500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-50px, 5px) rotateX(120deg) rotateY(-35deg) rotateZ(180deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(0px, 500px) rotateX(200deg) rotateY(-45deg) rotateZ(230deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(20px, 230px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(20px, 252px) rotateX(340deg) rotateY(-45deg) rotateZ(360deg);
          animation-timing-function: ease-out;
        }			
      }

      @keyframes box2 {
        22% { 
          transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-250px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(-290px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(-267px, 420px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(-267px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
      }		

      @keyframes box3 {
        22% { 
          transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-100px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(-170px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(-110px, 490px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(-110px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
      }

      @keyframes box4 {
        20% { 
          transform: translate3d(0px, 500px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) ;
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(-50px, 50px, 30px) rotateX(200deg) rotateY(-35deg) rotateZ(180deg) ;
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(-80px, 550px, 30px) rotateX(340deg) rotateY(-45deg) rotateZ(230deg) ;
          animation-timing-function: ease-out;
        }
        /*95%{ 
          transform: translate3d(20px, 700px, 30px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg) scale3d(1.075,1.075,1.075);
          animation-timing-function: ease-in;
        }*/
        100%{ 
          transform: translate3d(-100px, 745px, 30px) rotateX(338deg) rotateY(-44deg) rotateZ(360deg) ;
          animation-timing-function: ease-out;
        }
      }

      @keyframes box5 {
        20% { 
          transform: translate3d(0px,500px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) ;
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(-300px, 250px, 0px) rotateX(-25deg) rotateY(-40deg) rotateZ(300deg) ;
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(-470px, 700px, 30px) rotateX(-20deg) rotateY(-45deg) rotateZ(390deg) ;
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-43deg) rotateZ(358deg) ;
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-44deg) rotateZ(360deg) ;
          animation-timing-function: ease-out;
        }
      }

      @keyframes box6 {
        20% { 
          transform: translate3d(20px,320px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99,.99,.99);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(120px, 0px, 0px) rotateX(270deg) rotateY(270deg) rotateZ(10deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(150px, 320px, 30px) rotateX(300deg) rotateY(300deg) rotateZ(25deg) scale3d(.945,.945,.945);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate3d(220px, 310px, 30px) rotateX(370deg) rotateY(300deg) rotateZ(25deg) scale3d(.9,.9,.9);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate3d(220px, 320px, 30px) rotateX(340deg) rotateY(320deg) rotateZ(0deg) scale3d(.9,.9,.9);
          animation-timing-function: ease-out;
        }
      }

      @keyframes box7 {
        20% { 
          transform: translate3d(0px,320px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99,.99,.99);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(-40deg) rotateZ(300deg) scale3d(.985,.985,.985);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(350px, 320px, 30px) rotateX(20deg) rotateY(-50deg) rotateZ(390deg) scale3d(.975,.975,.975);
          animation-timing-function: ease-out;
        }
        /*95%{ 
          transform: translate3d(520px, 310px, 30px) rotateX(20deg) rotateY(-60deg) rotateZ(390deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-in;
        }*/
        100%{ 
          transform: translate3d(520px, 320px, 30px) rotateX(-20deg) rotateY(-50deg) rotateZ(360deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-out;
        }
      }

      #b1 { 
        transform: translateY(0px) rotateX(-20deg) rotateY(-40deg) rotateZ(20deg);
        animation: box1 2s .25s cubic-bezier(.69,.59,.57,2) both; 
      }

      #b2 { 
        transform: translateY(0px) rotateX(35deg) rotateY(-40deg) rotateZ(30deg);
        animation: box2 2s cubic-bezier(.69,.59,.57,2) both; 
      }

      #b3 { 
        transform: translateY(0px) rotateX(20deg) rotateY(-35deg) rotateZ(0deg);
        animation: box3 2s .05s cubic-bezier(.69,.59,.57,2)  both;
      }

      #b4 { 
        transform: translateY(0px) rotateX(10deg) rotateY(-45deg) rotateZ(10deg);
        animation: box4 2s .15s cubic-bezier(.69,.59,.57,2.5)  both;
      }

      #b5 { 
        transform: translateY(0px) rotateX(25deg) rotateY(-50deg) rotateZ(-10deg);
        animation: box5 2.4s .15s cubic-bezier(.69,.59,.57,2.5)  both;
      }

      #b6 { 
        transform: translateY(0px) rotateX(40deg) rotateY(-25deg) rotateZ(20deg);
        animation: box6 5s .05s cubic-bezier(.69,.59,.57,1.7) both; 
      }

      #b7 { 
        transform: translateY(0px) rotateX(40deg) rotateY(-45deg) rotateZ(5deg);
        animation: box7 2.5s cubic-bezier(.72,.59,.57,2) both; 
      }

		.wrap {
			width: 100%;
min-height: 700px;
			height: 100%;
    			background: rgba(227,234,240,1);
			background: -moz-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(227,234,240,1)), color-stop(100%, rgba(206,223,237,1)));
			background: -webkit-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -o-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -ms-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: linear-gradient(to bottom, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3eaf0', endColorstr='#cedfed', GradientType=0 );
		}
    
    .wrap-inner {
      width:700px;
      margin: 0 auto;
    }

      .info {
        display: block;
        position: absolute;
        z-index: 10;		    
        padding: 15px;
        width: 350px;
          color: #777;
          font-size: 27px;
          font-family:  'Roboto', sans-serif;
          font-weight: 300;
          opacity: 0;
          transition: all .52s ease-in-out;
      }

      #b1 .info,
      #b3 .info,
      #b4 .info {
          top: 130px;
          left: 0px;		    

        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
      }

      #b2 .info,
      #b5 .info {
          top: 130px;
          left: 0px;		    
        text-align: right;
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
      }

      #b1:hover > .info,
      #b3:hover > .info,
      #b4:hover > .info {
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
        opacity: 1;
        left: 300px;
        top: 0;
      }

      #b2:hover > .info {
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
        opacity: 1;
        top: 450px;
        left: -515px;
      }

      #b5:hover > .info {
          opacity: 1;
          top: 450px;
          left: -570px;
      }

	</style>
</head>
<body>
	    <div class="wrap">
        <div class="wrap-inner">
		      <div class="container-box">		    
			
        <div class="box" id="b1">
          <div class="wall-1"></div>
          <div class="wall-2"></div>
          <div class="wall-3"></div>
          <div class="wall-4"> </div>
          <div class="wall-5">
            <span class="box-logo">90%</span>
          </div>
          <div class="wall-6">
            <span class="box-logo">HTML</span>
          </div>

          <p class="info">HTML5 | JADE | Bootstrap <br> Валидация | Адаптивность под различные устройства и разрешения</p>
        </div>			
				
        <div class="box" id="b2">
          <div class="wall-1"></div>
          <div class="wall-2"></div>
          <div class="wall-3"></div>
          <div class="wall-4">

          </div>
          <div class="wall-5">
            <span class="box-logo pers">95%</span>
          </div>
          <div class="wall-6">
            <span class="box-logo">CSS</span>
          </div>	
          <p class="info">css3 | sass | sass compass </p>			
        </div>

        <div class="box" id="b3">
          <div class="wall-1"></div>
          <div class="wall-2"></div>
          <div class="wall-3"></div>
          <div class="wall-4">

          </div>
          <div class="wall-5">
            <span class="box-logo">60%</span>
          </div>
          <div class="wall-6">
            <span class="box-logo">jQuery</span>
          </div>

          <p class="info">jQuery Ui</p>
        </div>		

			        <div class="box" id="b4">
          <div class="wall-1"></div>
          <div class="wall-2"></div>
          <div class="wall-3"></div>
          <div class="wall-4"></div>
          <div class="wall-5">
            <span class="box-logo">65%</span>
          </div>
          <div class="wall-6">
            <span class="box-logo">Ai</span>
          </div>
            <p class="info">svg</p>
        </div>

			        <div class="box" id="b5">
          <div class="wall-1"></div>
          <div class="wall-2"></div>
          <div class="wall-3"></div>
          <div class="wall-4"></div>
          <div class="wall-5">
            <span class="box-logo">80%</span>
          </div>
          <div class="wall-6">
            <span class="box-logo">Ps</span>
          </div>
				          <p class="info">Landing page design | Mock Up card | Ретушь фото </p>
			        </div>	
			
		      </div>
          </div>
	    </div>
  </body>
</html>
  
  
</body>
</html>
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.