Отображение текста и иконок с сылками на сайте HTML

Question

Хочу сделать что-то типа такого (Скриншот #1):

Код:

<!DOCTYPE html>
<html lang="ru" >
<head>
        <meta charset="utf-8">
        <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'><link rel="stylesheet" href="./style.css">
        <meta http-equiv="Cache-Control" content="no-cache">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">

        <title>Test Site</title>
        <meta name="description" content="A WebGL fluid simulation that works in mobile browsers.">

        <meta property="og:type" content="website">
        <meta property="og:title" content="Webgl Fluid Simulation">
        <meta property="og:description" content="A WebGL fluid simulation that works in mobile browsers.">
        <meta property="og:url" content="https://paveldogreat.github.io/WebGL-Fluid-Simulation/">

        <script type="text/javascript" src="dat.gui.min.js"></script>
        <style>
            * {
                user-select: none;
            }

            html, body {
                overflow: hidden;
            }

            body {
                margin: 0;
                position: fixed;
                width: 100%;
                height: 100%;
            }

            canvas {
                width: 100%;
                height: 100%;
            }

            .dg {
                opacity: 0.9;
            }

            .dg .property-name {
                overflow: visible;
            }

            .bigFont {
                font-size: 150%;
                color: #8C8C8C;
            }

            .cr.function.appBigFont {
                font-size: 150%;
                line-height: 27px;
                background-color: #2F4F4F;
            }

            .cr.function.appBigFont .property-name {
                float: none;
            }

            .cr.function.appBigFont .icon {
                position: sticky;
                bottom: 27px;
            }
        </style>
</head>
<body>
  <canvas></canvas>
  <script src="./script_fl.js"></script>





</body>
</html>

Когда вставляю туда текст и картинки с сылкой, они не отображаются. Если ставить перед

  <canvas></canvas>
  <script src="./script_fl.js"></script>

тогда они отображаются, но сверху белая полоска образуется. В общем не знаю как поместить текст с картинками у которых своя ссылка по середине экрана

Answer 1

По идее то не сложно, куча котейнеров и позиционирования, только на фон надо поставить видео с дымом (называется футаж) который надо стилизовать под зелёный оттенок(делается это фильтрами или mix-blend-mode) но реализация примерно такая .. я применил js что бы вставить иконки так как захломлять html не любитель =>

let tele = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M16 0.5c-8.563 0-15.5 6.938-15.5 15.5s6.938 15.5 15.5 15.5c8.563 0 15.5-6.938 15.5-15.5s-6.938-15.5-15.5-15.5zM23.613 11.119l-2.544 11.988c-0.188 0.85-0.694 1.056-1.4 0.656l-3.875-2.856-1.869 1.8c-0.206 0.206-0.381 0.381-0.781 0.381l0.275-3.944 7.181-6.488c0.313-0.275-0.069-0.431-0.482-0.156l-8.875 5.587-3.825-1.194c-0.831-0.262-0.85-0.831 0.175-1.231l14.944-5.763c0.694-0.25 1.3 0.169 1.075 1.219z"/>
</svg>`;

let vk = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 363.301 363.301" >
<path d="M347.506,240.442c-7.91-9.495-16.899-18.005-25.592-26.235c-3.091-2.927-6.287-5.953-9.368-8.962  c-8.845-8.648-9.167-11.897-2.164-21.72c4.845-6.771,9.982-13.551,14.95-20.108c4.506-5.949,9.166-12.101,13.632-18.273l0.917-1.269  c8.536-11.811,17.364-24.024,22.062-38.757c1.22-3.887,2.501-9.607-0.428-14.39c-2.927-4.779-8.605-6.237-12.622-6.918  c-1.987-0.337-3.96-0.383-5.791-0.383l-55.901-0.04l-0.462-0.004c-8.452,0-14.148,3.983-17.412,12.178  c-3.116,7.83-6.539,16.168-10.445,24.096c-7.773,15.787-17.645,33.97-31.93,49.135l-0.604,0.645  c-1.687,1.813-3.598,3.866-4.995,3.866c-0.214,0-0.447-0.041-0.711-0.124c-2.959-1.153-4.945-8.316-4.855-11.648  c0.001-0.046,0.002-0.092,0.002-0.138l-0.039-64.61c0-0.224-0.016-0.446-0.045-0.668c-1.422-10.503-4.572-17.041-16.474-19.372  c-0.316-0.063-0.639-0.094-0.961-0.094h-58.126c-9.47,0-14.688,3.849-19.593,9.61c-1.324,1.54-4.08,4.746-2.714,8.635  c1.386,3.947,5.885,4.791,7.35,5.065c7.272,1.384,11.371,5.832,12.532,13.604c2.027,13.496,2.276,27.901,0.784,45.334  c-0.416,4.845-1.239,8.587-2.595,11.784c-0.315,0.746-1.432,3.181-2.571,3.182c-0.362,0-1.409-0.142-3.316-1.456  c-4.509-3.089-7.808-7.497-11.654-12.942c-13.084-18.491-24.065-38.861-33.575-62.288c-3.527-8.624-10.114-13.452-18.556-13.594  c-9.276-0.141-17.686-0.209-25.707-0.209c-8.764,0-16.889,0.081-24.823,0.246C8.914,83.74,4.216,85.776,1.744,89.676  c-2.476,3.903-2.315,9.03,0.479,15.236c22.366,49.723,42.645,85.876,65.755,117.228c16.193,21.938,32.435,37.123,51.109,47.784  c19.674,11.255,41.722,16.727,67.402,16.727c2.911,0,5.921-0.071,8.956-0.213c14.922-0.727,20.458-6.128,21.158-20.657  c0.333-7.425,1.145-15.212,4.795-21.853c2.304-4.184,4.452-4.184,5.158-4.184c1.36,0,3.046,0.626,4.857,1.799  c3.248,2.12,6.033,4.96,8.316,7.441c2.149,2.357,4.274,4.738,6.401,7.12c4.59,5.141,9.336,10.456,14.294,15.497  c10.852,11.041,22.807,15.897,36.538,14.843h51.252c0.109,0,0.219-0.004,0.328-0.011c5.107-0.337,9.53-3.17,12.135-7.772  c3.227-5.701,3.162-12.974-0.174-19.46C356.718,251.867,351.808,245.601,347.506,240.442z"/>
</svg>`;

document.querySelector(".tele").innerHTML = tele;
document.querySelector(".vk").innerHTML = vk;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: center;
}

.container_img {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

img {
  display: block;
  width: 160%;
  height:100vh;
  object-fit: cover;
}

.container_user {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: sans;
}

.container_user-name,
.container_user-info {
  padding: 10px 0;
}

.user_info-icons {
  display: flex;
  justify-content: space-around;
  --size: 30px;
}

.icon {
  width: var(--size);
  height: var(--size);
  padding: 20px 0;
}

.icon svg {
  fill: #fff;
  transition: 0.2s linear;
}

.icon:hover svg {
  fill: green;
}

.container_timer {
  display: flex;
  justify-content: center;
  font-size: 24px;
  padding: 20px 0;
  font-family: sans;
}

<div class="container">
  <div class="container_img">
    <img src="https://i.ibb.co/xm4JrTr/Smoke-Footage-online-video-cutter-com.gif" alt="">
  </div>
  <div class="container_user">
    <div class="container_user-name">
      <h1>Gera Xakin</h1>
    </div>
    <div class="container_user-info">
      <h4>Dev ForseDex & Queenhost Hosting</h>
        <div class="user_info-icons">
          <div class="icon tele"></div>
          <div class="icon vk"></div>
        </div>
    </div>
    <div class="container_timer">
      <p>14</p>:
      <p>47</p>:
      <p>30</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Отображение текста и иконок с сылками на сайте HTML

Ответы (1 шт):