cosas

by jpeter06

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet">
<div class="hidden">
  <svg>
    <defs>
      <path id="canarias" d="m 89.917152,44.913121 c -0.04972,-0.002 -0.115491,0.01845 -0.179545,0.06284 -0.04719,0.037 -0.06743,0.103526 -0.04721,0.147914 0.05394,0.09616 0.310105,-0.02218 0.310105,-0.140544 0,-0.04438 -0.03364,-0.06837 -0.08335,-0.07022 z m 0.339533,0.440164 c -0.148321,0 -0.195432,0.04437 -0.249364,0.251505 -0.03372,0.140552 -0.141623,0.369826 -0.242752,0.510378 -0.215741,0.318089 -0.303398,0.769318 -0.148335,0.835895 0.289904,0.118361 1.125951,-0.784125 1.125951,-1.220575 0,-0.184935 -0.242789,-0.377203 -0.4855,-0.377203 z m 0.87125,1.342264 c -0.120764,-0.0041 -0.240422,0.03825 -0.426241,0.129815 -0.310131,0.155344 -0.397809,0.325422 -0.674228,1.264895 -0.229225,0.798921 -0.458399,1.072625 -0.822461,0.998649 -0.714644,-0.147946 -1.011285,-0.05177 -1.948411,0.636188 -0.566322,0.421653 -1.19334,0.739763 -1.334919,0.687981 -0.215745,-0.09616 -0.788768,0.458696 -1.375313,1.316801 -0.337097,0.488228 -0.404591,0.769301 -0.411334,1.560824 0,0.636179 -0.08764,0.939438 -0.404512,1.368487 -0.262938,0.362474 -0.337029,0.776708 -0.168482,0.976439 0.188772,0.229319 0.471926,0.258915 0.734863,0.08137 0.188772,-0.133156 0.262879,-0.14048 0.417944,-0.07391 0.107873,0.04438 0.249526,0.125765 0.310203,0.192343 0.09439,0.09616 0.134782,0.09614 0.24265,0.0074 0.242711,-0.184936 0.620302,-0.739767 0.620302,-0.909907 0,-0.09616 0.08083,-0.251561 0.195443,-0.347729 0.195518,-0.184936 0.296643,-0.221828 1.341636,-0.495534 0.694423,-0.184936 1.577626,-0.577033 2.170914,-0.9617 0.458452,-0.303295 1.260807,-1.161366 1.44958,-1.560826 0.05393,-0.118361 0.161801,-0.577021 0.229221,-1.020867 0.128094,-0.776727 0.128094,-0.798901 0,-1.19836 -0.06743,-0.221925 -0.12809,-0.429103 -0.12809,-0.458691 0,-0.02959 0.128049,-0.147883 0.289852,-0.266242 0.3371,-0.258958 0.627063,-0.850822 0.566384,-1.14672 -0.06742,-0.266308...

CSS

html, body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  overflow:hidden;
  --molino-fill: rgb(255, 255, 255);
  --molino-stroke: rgb(75, 74, 74);
  font-size: 1.125em;
  font-family: "Segoe UI",'Quicksand', sans-serif;
}

.hidden{ display:none}

/** SIZES **/
.wh100{
  width:100%;
  height:100%;
  position:relative;
}
.sqrVW30{
  width:30vw;
  height:30vw;
  position:relative;
}

.margin5{
  margin:5%;
}

.flexh{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:20px;
}

/** FONTS **/
.fontW{
  color: white;
  font-size: 9vw;
  text-decoration: none;
  font-weight: 300;
  text-shadow: #000 1px 0 10px;
}

.fontN{
  color: white;
  font-size: 7vw;
  text-decoration: none;
  font-weight: 300;
  text-shadow: #000 1px 0 10px;
}


/** TILT ELEMENTS **/
.tiltParent{
  width:100%;
  height:100%;
  transform-style: preserve-3d;
}

.tiltChild{
  width:100%;
  height:100%;
  position:absolute;
  flex-direction:column;
  position:absolute;
  display:flex;
}

.tiltChild.text{
  height:50%;
  justify-content: center;
  align-items: center;
}

.tiltChild.textN {
    align-items: center;
}

.tiltParent:after  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-shadow: 0 20px 70px -10px rgb(51 51 51 / 70%), 0 50px 100px 0 rgb(51 51 51 / 20%);
    z-index: -2;
    -webkit-transform: translateZ(-2px);
    transform: translateZ(-2px);
    -webkit-transition: .3s;
    transition: .3s;
}

/*isometric*/
.iso{
  transform-style: preserve-3d;
  transform:perspective(700px)  rotateX(330deg) rotateY(-45deg) rotateZ(0deg);
}
.isometric{
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}
.iso2{
  transform-style: preserve-3d;
  transform:perspective(700px)  rotateX(330deg) rotateY(45deg) rotateZ(0deg);
}
.isometric{
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
}


.bg-isometric2 {
    background:   repeating-linear-gradient(150deg, #686868, #686868 1px, transparent 2px,...