Fani

March 16, 2019

Чтобы именно этот блок закрепился к фону, по сути не двигался, и если идёт уменьшение окна, то он никуда не съезжал, а оставался там, в уменьшенном окне невидимым.

March 13, 2019

12.03.2019 в 14:42, Switch74 сказал:

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

Мне бы хотелось чтобы их не было видно при уменьшении, по сути, пусть остаются на своих местах.

March 11, 2019

Сделал как Вы сказали, но проблему не решило

March 11, 2019

2 часа назад, Switch74 сказал:

выложите в песочницу https://jsfiddle.net/

https://jsfiddle.net/FaniFalyar/csnbxewq/

March 9, 2019

div блок постоянно съезжает, хотя опробовал все. Ответы, что я находил не помогали, смена позиционирования тоже. Может, кто знает как это исправить? Код прилагаю

HTML

Скрытый текст


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
    <title>Вход</title>
    </head>
    <body bgcolor="#34495e">
        <form class="box" action="index.html" method="post">
        <h1>Вход</h1>
        <input type="text" name="" placeholder="Имя пользователя">
        <input type="password" name="" placeholder="Пароль">
        <input type="submit" name="" value="Войти">
        </form>
            <div class="middle">
      <a class="btn" href="https://ru-ru.facebook.com/" target="_blank">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a class="btn" href="https://twitter.com/?lang=ru" target="_blank">
        <i class="fab fa-twitter"></i>
      </a>
      <a class="btn" href="https://www.instagram.com/?hl=ru" target="_blank">
        <i class="fab fa-instagram"></i>
      </a>
      <a class="btn" href="https://www.youtube.com/?gl=RU&hl=ru" target="_blank">
        <i class="fab fa-youtube"></i>
      </a>
      <a class="btn" href="https://vk.com/" target="_blank">
         <i class="fab fa-vk"></i>
                </a>
    </div>

CSS

Скрытый текст


body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #34495e;
}
.box {
    width: 400px;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: #2c3e50;
    box-shadow: 0px 1px 15px -5px black;
    border-radius: 4px;
}
.box h1 {
    color: azure;
    text-transform: uppercase;
    font-weight: 500;
}
.box input[type = "text"],.box input[type = "password"]{
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #12CBC4;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: beige;
    border-radius: 24px;
    transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
    width: 280px;
    border-color: aqua;
}
.box input[type = "submit"]{
    border: 0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #44bd32;
    padding: 14px 50px;
    width: 200px;
    outline: none;
    color: beige;
    border-radius: 24px;
    transition: 0.25s;  
    cursor: pointer;
}
.box input[type = "submit"]:hover{
    background: #4cd137;
}
.middle{
  position: relative;
  display: inline-block;
  bottom: 10%;
  transform: translateY(-50%, 120%);
  width: 150px 150px;
  text-align: center;
  transform: translate(675px, -30px);
  position: fixed;
}
.btn{
  display: inline-block;
  width: 90px;
  height: 90px;
  background: #263345;
  margin: 10px;
  border-radius: 30%;
  box-shadow: 0 5px 15px -5px #00000070;
  color: #3498db;
  overflow: hidden;
  position: relative;
}
.btn i{
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}
.btn:hover i{
  transform: scale(1.3);
  color: #f1f1f1;
}
.btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #3498db;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}
.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}
@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}

Sign In

Fani

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by Fani

div блок съезжает при уменьшении окна

div блок съезжает при уменьшении окна

div блок съезжает при уменьшении окна

div блок съезжает при уменьшении окна

div блок съезжает при уменьшении окна

Forums

Important Information