tcc pagina principal

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />

<style>
$cols: 10;
$rows: 6;
$cells: $cols * $rows;
$bgcolor: #6223D2;
$shapeHeight: 230;
$shapeWidth: 200;

body {
  margin: 0;
  background-color: $bgcolor;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

//Radial gradient to fade edges of viewport
.overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 2;
  background: radial-gradient(circle, transparent 0%, transparentize($bgcolor, .15) 100%);
}

//Container to provide grid layout for all items
.container {
  display: grid;

  grid-template-columns: repeat($cols, $shapeWidth+px);
  grid-template-rows: repeat($rows, $shapeHeight+px);
  transform: translate(-3%, -4%); // Starting point bleeds off edge
}

//Invividual shapes
.shape {
  width: $shapeWidth+px;
  height: $shapeHeight+px;
  //Create hexagon mask
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  //Snap hexagon together by moving each "row" up and over
  @for $i from 1 through $cells {
    @if $i > $cols {
      &:nth-child(#{$i}) {
        transform: translate(-50%, -25%);
      }
    }
    @if $i > ($cols * 2) {
      &:nth-child(#{$i}) {
        transform: translate(0%, -50%);
      }
    }
    @if $i > ($cols * 3) {
      &:nth-child(#{$i}) {
        transform: translate(-50%, -75%);
      }
    }
    @if $i > ($cols * 4) {
      &:nth-child(#{$i}) {
        transform: translate(0%, -100%);
      }
    }
    @if $i > ($cols * 5) {
      &:nth-child(#{$i}) {
        transform: translate(-50%, -125%);
      }
    }
  }
}


    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
<script src="https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js"></script>

</head>

<body>

 mixin triangle(num, color)
    polygon(
      points=""
      fill="none"
      stroke=color
      stroke-width="5")
      animate(
        attributeName="points"
        repeatCount="indefinite"
        dur="4s"
        begin=num+"s"
        from="50 57.5, 50 57.5, 50 57.5"
        to="50 -75, 175 126, -75 126")

  //- Create Overlay
  div(class="overlay")

  //- Instantiate triangles
  div(class="container")
    - for (var x = 1; x < 60; x++)
      svg(class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice")
        +triangle(0, "hsl(320,100%,70%)")
        +triangle(1, "hsl(240,100%,70%)")
        +triangle(2, "hsl(160,100%,70%)")
        +triangle(3, "hsl(80,100%,70%)")
<center>

<br><br><br>
<div class="text-center">
  <img src="logo.png" class="rounded" alt="..."  width="300" height="300"/>
</div>
<br><br>
<form class="form-inline mr-auto">
  <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
  <button class="btn blue-gradient btn-rounded btn-sm my-0" type="submit">Search</button>
</form>
</center>
</body>
</html>