All geek questions in one place

Create a mesh of hexagons, as in builtbuffalo.com

First of all, I apologize if this is not the right place to ask this question. I just don't know another source for Q / A.

I have a college project in which I have to submit an exact copy of this site for the transfer of my web developer in practice.

I managed to copy everything, and only what was left was left hexagonal grid.

If someone can visit the site, he can see that number of hexagons per row changes according to width of browser window.

Here is my code for
CSS and HTML grid

.container {
  margin-top: 120px;
}
.hex-3-row {
  display: table;
  margin: 30px auto;
}
.hex {
  display: inline-block;
  width: 190px;
  height: 110px;
  color: white;
  background-color: red;
  position: relative;
  margin-left: 15px;
  z-index: 110;
  text-align: center;
  line-height: 110px;
}
.hex::after {
  content: "";
  background-color: red;
  height: 110px;
  width: 190px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(60deg);
  z-index: -1;
}
.hex::before {
  content: "";
  background-color: red;
  height: 110px;
  width: 190px;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: rotate(-60deg);
  z-index: -1;
}
img {
  position: relative;
  height: 150px;
  width: 150px;
  top: 50%;
  transform: translateY(-50%);
}
<html>

<head>
  <title>hexagon</title>
  <link rel="stylesheet" href="css.css">
</head>

<body>

  <div class="container">
    <div class="hex-3-row">
      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>
    </div>

    <div class="hex-3-row">
      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>


      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

    </div>

    <div class="hex-3-row">
      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>

      <div class="hex">
        <img src="arrow.png" alt="image">
      </div>
    </div>
  </div>





</body>

</html>
Run codeHide result

, , . ? ? , , , , <br> , .

, - , CSS, . .

, , , - , , builtbybuffalo.com, <div> <br> , <ul><li>.

+4
2

, , . ( br , .) , , . , , , , .

, ; , , , / , .

+1

-, . , . ,

@media screen and (max-width: 768px) {
.container{
width:500px;
}
}
+1

Source: https://habr.com/ru/post/1664857/

More articles:


All Articles