Вопрос по написанию футера сайта HTML + CSS

Question

Я - начинающий верстальщик. Прошёл парочку курсов. И при тренировке написания сайта появился один вопрос, на который никак не могу найти ответ.

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

Интересует именно правая часть, не могу расположить элементы в правильном порядке. Пытался использовать FLEXBOX и GRID, но они вставлялись у меня в неправильном порядке, либо же все смещалось туда, куда мне не нужно)

Попрошу написать так, как сделали бы это вы, чтобы я разобрал ваш код и понял для себя, как это сделать. Заранее, спасибо!

Answer 1

можешь через bootstrap/tailwind с помощью col, либо сделать как отдельные объекты. ?

Answer 2

Для начала я написал кастомный select option - работает выбор по клику а выпадает по hover в котором просто вставил внутрь блока .output методом innerHTML то что попадает в event.target

А потом уже обычный flex

Всю разметку и реализацию видно в примере =>

let iconSelect = `<svg viewBox="-10 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <path d="M-9,1 0,8 9,1" fill="none" stroke="#fff" stroke-width="1.5" />
</svg>`;

let iconTwitter = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

<path d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016
            c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992
            c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056
            c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152
            c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792
            c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44
            C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568
            C480.224,136.96,497.728,118.496,512,97.248z" stroke-width="15px"/>
</svg>`;

let iconFacebook = `<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.734 60.733"><path d="M57.378,0.001H3.352C1.502,0.001,0,1.5,0,3.353v54.026c0,1.853,1.502,3.354,3.352,3.354h29.086V37.214h-7.914v-9.167h7.914
        v-6.76c0-7.843,4.789-12.116,11.787-12.116c3.355,0,6.232,0.251,7.071,0.36v8.198l-4.854,0.002c-3.805,0-4.539,1.809-4.539,4.462
        v5.851h9.078l-1.187,9.166h-7.892v23.52h15.475c1.852,0,3.355-1.503,3.355-3.351V3.351C60.731,1.5,59.23,0.001,57.378,0.001z" stroke-width="3px"/></svg>`;

let iconHz = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect width="90" height="90" fill="none" stroke="#fff" stroke-width="3"/>
  <circle cx="45" cy="45" r="30" fill="#fff"/>
</svg>`;

document.querySelector(".user-icon").innerHTML = iconSelect;

document.querySelector(".facebook").innerHTML = iconFacebook;
document.querySelector(".twitter").innerHTML = iconTwitter;
document.querySelector(".hz").innerHTML = iconHz;

let output = document.querySelector(".output");

document.querySelector(".select").addEventListener("click", Selection);

function Selection(e) {
  e = event.target;
  if (e.classList.contains === "choice") return false;
  output.innerHTML = e.innerHTML;
}

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

body {
  background: #000;
}

.select {
  width: 200px;
  height: 30px;
  cursor: pointer;
  background-color: #3b3b3b;
  color: #fff;
  margin-bottom: 10px;
}

.choice,
.option {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.option {
  user-select: none;
  visibility: hidden;
  opacity: 0;
  transition: 0.1s ease 0.1s;
  padding-left: 10px;
}

.select:hover .option {
  visibility: visible;
  opacity: 1;
  background: inherit;
  position: relative;
}

.option:hover {
  background: linear-gradient(#fff, #ccc);
  color: #000;
}

.user-icon {
  width: 20px;
}

.dashboard {
  background: #262626;
  padding: 30px;
  color: #fff;
  display: flex;
  justify-content: space-around;
}

p {
  font-size: 16px;
  margin-bottom: 10px;
}

p span {
  color: #2ec927;
}

.icons {
  width: 140px;
  display: flex;
  justify-content: space-between;
}

.icons svg {
  max-width: 30px;
  width: 30px;
  fill: none;
  stroke: #fff;
}

<div class="dashboard">
  <div class="item">
    <div class="select">
      <div class="choice">
        <div class="output">Выбрать язык</div>
        <div class="user-icon"></div>
      </div>
      <div class="option">Русский</div>
      <div class="option">English</div>
      <div class="option">Deutsch</div>
    </div>
    <!-- select -->

    <p><span>&#35;</span>UberEats</p>

    <div class="icons">
      <div class="facebook"></div>
      <div class="twitter"></div>
      <div class="hz"></div>
    </div>

  </div>
  <!-- item -->
  <div class="item">
    <p>Об UberEats</p>
    <p>Станьте партнёром по доставке</p>
    <p>Станьте партнёром-рестораном</p>
  </div>
  <!-- item -->
  <div class="item">
    <p>Все города</p>
    <p>Цены</p>
    <p>Помощь</p>
    <p>FAQs</p>
  </div>
  <!-- item -->

</div>

Нажмите на показать код и выполнить код

иконки я вставил в javascript для того что бы не захломлять разметку но вы можете взять весь html из панели разработчика

Разумеется что все параграфы должны быть заменены на тег ссылки

БЛОГ НА HUSL

Вопрос по написанию футера сайта HTML + CSS

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