Thiết kế website giá rẻ

Question

Preivewsly i asked this question, but didn’t provide full code (which is my fault)

I have a registration form. Container form – and inside div elements (login/email)

Height and Width are constant (width: 90%, height: 440px). Why its constant – Because i need exact height for this. OtherWise it stretch on the whole website height.
And have <div class=”error”> element – where i “innerHTML’ error message after each form (email / password) . But when it inserts ERROR, ilogin form gets out of container form (images)

Click “SIGN UP” – the “right-autorization” container size doesn’t stretch ( . How to stretch “right-autorization” to its new size with messages ?

You can run code here: https://jsfiddle.net/krekercod4/f94rsgky/4/

enter image description here

<!-- begin snippet -->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>VK.COM</title>



<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
 <script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">    
<script src="vk.js"></script>

</head>
<body>
<div class="zero">
<div id="head" class="container" >
    <nav class="nav" >
        <div><img src="logo.png" class="img1" type="button"></box-icon></div>
        <div><form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-black" type="submit">Search</button>
          </form></div>
        <div class="music">
            <i class='bx bx-skip-previous bx-md' type="button"></i>
            <i class='bx bx-play bx-md' type="button"></i>
            <i class='bx bx-skip-next bx-md' type="button"></i>
        </div>
        
        <div class="profilePicture"> 
            <div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                  <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
              </div>


        </div>
    </nav>
</div>
</div>

<div class="container center">

    <div class="left">
       <div class="leftTop">
        <div class="link" type="button"><i class='bx bx-user-circle bx-sm'></i>My Profile</div>
        <div class="link" type="button"><i class='bx bx-news bx-sm'></i>News</div>
        <div class="link" type="button"><i class='bx bx-chat bx-sm'></i>Messages</div>
        <div class="link" type="button"><i class='bx bx-phone-call bx-sm'></i>Calls</div>
        <div class="link" type="button"><i class='bx bx-group bx-sm'></i>Friends</div>
        <div class="link" type="button"><i class='bx bx-male-female bx-sm'></i>Communities</div>
        <div class="link" type="button"><i class='bx bx-camera bx-sm'></i>Photos</div>
        <div class="link" type="button"><i class='bx bx-music bx-sm'></i>Music</div>
        <div class="link" type="button"><i class='bx bx-video bx-sm'></i>Videos</div>
        <div class="link" type="button"><i class='bx bx-photo-album bx-sm'></i>Clips</div>
        <div class="link" type="button"><i class='bx bx-dice-6 bx-sm'></i>Games</div>
        <div class="link" type="button"><i class='bx bx-store bx-sm'></i>Market</div>
      </div>
    <hr>
      <div class="leftBottom1">
        <div class="link" type="button"><i class='bx bx-game bx-sm'></i>Mini apps</div>
        <div class="link" type="button"><i class='bx bx-money bx-sm'></i>VK Pay</div>
      </div>
    <hr>
      <div class="leftBottom1">
        <div class="link" type="button"><i class='bx bx-book bx-sm'></i>Bookmarks</div>
        <div class="link" type="button"><i class='bx bx-file bx-sm'></i>Files</div>
        <div class="link" type="button"><i class='bx bx-help-circle bx-sm'></i>Help</div>
      </div>
    <hr>
      <div class="let-bottom-text"><a href="">Blog</a><a href="">Developers</a> <a href="">Creators</a><a href="">About us</a></div>
    <hr>
      <div class="let-bottom-text"><a href="">Recomendations for using this website</a></div>
    </div>

  <div class="center-orta">
    <div class="top-line">
        <img src="profile.png" class="profile-pic">
        <input type="text" placeholder="What's new?">
                      <div class="icons" type="button"><i class='bx bx-camera bx-sm'></i>
                                                       <i class='bx bx-play-circle bx-sm'></i>
                                                       <i class='bx bx-music bx-sm'></i>
                                                       <i class='bx bx-left-indent bx-sm'></i>
                                                       <i class='bx bx-microphone bx-sm'></i></div>
    </div>

    <div class="news-bar1">
        <div class="news-background">
            <div class="news-top-head">
               <div class="head1">
                  <div><a href=""><img src="p1.jpg"></a></div>
                  <div class="head-text"><a href=""><h6>Чтение Книг</h6></a><p>8 Jul at 18:00 pm - from Andrey Golonicki</p></div>
                </div>
                <div class="dropdown">
                    <button class="btn btn-secondary " type="button" data-bs-toggle="dropdown" aria-expanded="false">...    </button>
                    <ul class="dropdown-menu dropdown-menu-dark">
                      <li><a class="dropdown-item active" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">Separated link</a></li>
                    </ul>
                  </div>
                  
              </div> 
              
              
        <div class="news-data"><p>На кадрах запечатлена простая, но волшебная встреча двух миров — мира малыша и мира маленького жучка, приносящего удачу.</p>
            <p>На этой нежной детской ножке, словно капелька счастья, уютно расположилась божья коровка. Мягкие складочки кожи и крошечные пальчики кажутся настоящим чудом природы.</p>
            <p>Этот момент, полный трепетной нежности, напоминает нам о красоте и чистоте первых открытий и радостей жизни.</p>
            <div id="carouselExample" class="carousel slide">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="y1.webp" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="y2.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="y3.avif" class="d-block w-100" alt="...">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
            </div>

            <div class="news-end">
              <div class="news-end-cover">
                <div class="news-buttons">
                  <div class="like end-border"><i class='bx bx-heart bx-sm' type="button"></i></div>
                  <div class="comment end-border"><i class='bx bx-message bx-sm' type="button"></i></div>
                  <div class="share end-border"><i class='bx bx-share bx-flip-horizontal bx-sm' type="button"></i></div>
                </div>

                <div class="eye end-border2"><i class='bx bx-low-vision bx-sx' type="button"></i>  <span>6.3K</span></div>
           </div>
        </div>
    </div>
   </div>
  </div>

<div class="right">
    <form class="right-authorization">
          <div class="sign-in">
            <i class='bx bx-user bx-sm'></i>
            SIGN-UP
          </div>
          <hr>
          <div class="login">
            <div class="login-outside" >
                <div class="login-write">
                    <i class='bx bx-user bx-xs'></i>
                    <input class="inside" type="text" placeholder="email" id="email" >
                </div>
            </div>
            <div id="emailDiv" class="invalid"></div>

            <div class="login-outside">
                <div class="password login-write">
                    <i class='bx bx-lock-alt bx-xs'></i>
                    <input class="inside" type="password" placeholder="password" minlength="6" id="password">
                    
                </div>
            </div>
            <div id="passDiv" class="invalid"></div>

            <div class="login-outside">
                <div class="name-surname login-write">
                    <i class='bx bx-edit-alt bx-xs'></i>
                    <input class="inside" type="text" placeholder="full name" id="fullName">
                </div>
            </div>
            <div id="fullNameDiv" class="invalid"></div>
            
            <div class="login-outside">
                <div class="number login-write">
                    <i class='bx bx-phone bx-xs'></i>
                    <input class="inside" type="text" placeholder="phone number" id="phoneNumber">
                </div>
            </div>
            <div id="phoneDiv" class="invalid"></div>

            <button type="button" onclick="userRegister()">Sign up</button>
              <div class="register-text">
                  <span>Already have an account ? <br><a href="web-site_login.html">Sign in</a></span>
              </div>
          </div>
        
    </form>
</div>

    
  </div>
</body>
<script>
</script>


</html>

<style>
body{
    background-color:#141414;
}

@media (min-width: 1200px) {
    .container{
        max-width: 1100px;
    }
}

.zero{
    background-color: #222222;
}

#head{
    background-color: #222222;
    width: 100%;
    height: 55px;
}


nav{
    color: white;
    display: inline;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0px 0px 0px;
}

.music{
    margin: 0px 200px 0px 0px ;
}
.btn-group:hover{
    background-color: #72aaeb;
    color: white;
}
.nav img{
    height: 40px;
    width: 50px;
    border-radius: 5px;
}


.bx-skip-previous, .bx-play, .bx-skip-next, .bx-bell{
    color: #6b6b6b;
}

.form-control {
    background-color: grey;
    border-color: grey;
}

.form-control:hover {
    background-color: rgb(255, 255, 255);
}

.btn-outline-black{
    color: grey;
    border-color: grey;
}
.btn-outline-black:hover{
    color: black;
    background-color: white;
}

.nav .bx:hover{
    color: white;
}
.profilePicture img{
    height: 50px;
    width: 50px;
}

.btn-group .btn{

    background-color: transparent;
    border-color: transparent;
    height: 40px;
    width: 60px;
}
.btn-group .dropdown-toggle{
    width: 40px;
}
.left{
    width: 15%;
    /*border: 2px solid white;*/

}

.link{
   
    padding: 6px;
    font-size: 14px;
    width: 100%;
    margin-top: px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.left .bx{
    color: #72aaeb;
}

.center{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.container .link:hover{
    background-color: rgb(58, 58, 58);
    border-radius: 5px;
}

hr{
    color: white;
    width: 80%;
    margin-left: 12px;
}
.let-bottom-text{
    width: 80%;
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 12px;
}
.let-bottom-text a{
    color: gray;
    text-decoration: none;
}

.let-bottom-text a:hover{
    text-decoration: underline white;
    color: rgb(165, 165, 165);;
}


.center-orta{
    /*border: 2px solid white;*/
    width: 52%;
    display: flex-row;
    justify-content: center;
}

.top-line{
    width: 100%;
    height: 50px;
    border: 1px solid #363738;
    border-radius: 12px;
    background-color: #222222;
    padding: 15px;
    padding-left: 20px;
    display: flex;
    align-items: center;
}

.top-line input{
    background-color: transparent;
    border-color: transparent;
    margin-left: 10px;
    width: 480px;
}
.top-line input:focus{
    border-color: transparent ;
    outline: none;
    color: white;
}

.top-line input:focus::placeholder{
    color: white;
}


.top-line .bx{
    color: #666666;
}

.top-line .icons{
    display: flex;
    gap: 8px;

}

.top-line .bx:hover{
color: #8c8989;
}
.profile-pic{
width: 30px;
}

.head1{
    /*border: 2px solid white;*/
    display: flex;
    align-items: center;
}
.news-background{
width: 92%;   
}

.head1 img{
    height: 45px;
    width: 45px;
    border-radius: 100%;
}

.head-text a{
    text-decoration: none;
    color: #72aaeb;
}

.head-text a:hover{
    color: #95c5fc;
}

.head-text{
    margin: 16px 0px 0px 15px ;
}
.head1 p {
    color: #868585;
    font-size: 14px;
    margin-top: -8px;
}
.news-top-head{
display: flex;
justify-content: space-between;
align-items: center;
}


.dropdown .btn{
    background-color: transparent;
    border-color: transparent;
    color: #868585;
    font-size: 35px;
    margin-bottom: 30px;
}
.dropdown .btn:active{
    background-color: transparent;
    border-color:transparent ;
}

.news-bar1{
    border: 1px solid #363738;
    border-radius: 12px;
    background-color: #222222;    
    margin-left: 0px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.news-data p{
    font-size: 14px;
    color: white
    
}

.slide{
    padding: 4px 0px 20px 0px;
}

.news-buttons{
    display: flex;
    gap: 10px

}
.news-end{
    padding: 0px 0px 15px 0px;
    color: white
}
.end-border{
    background-color: #333333;
    display: flex;
    border-radius: 50px;
    padding: 8px 15px 8px 15px;
    color: #b2b2b2;
    cursor: pointer;
}

.end-border:hover{
    background-color: #373737;
}

.carousel-item img{
    width: 300px;
    height: 500px;
    border-radius: 12px;
    object-fit: cover;
}



.news-end-cover{
    
    display: flex;
    justify-content: space-between;
}

.end-border2{
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 50px;
    padding: 8px 0px 8px 15px;
    color: #b2b2b2
    
}

.bx-low-vision{
    color: #666666;
}
.eye span{
    font-size: 12px;
    color: #666666;
}

.right{
    background-color: #222222;
    border-radius: 12px;
    width: 30%;
    display: flex;
    justify-content: center;
}
.right-authorization{
    width: 90%;
    height: 440px;
    max-height: 640px;
    border: 1px solid  #363738;
    border-radius: 12px;
    background-color: #2d2d2d;
    color: white;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    overflow: visible;
}

.sign-in{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
    

    
}


.login-outside {
    background-color: #222222;
    border-radius: 10px;
    border: 1px solid  #363738;
    padding: 5px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}


.login-write{
    margin-left: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.login-write input{
    margin-bottom: 2px;
    color: white;
    width: 200px;
}



.inside{
    background-color: transparent;
    border-color: transparent;
}

.login-write input:focus{
    border-color: transparent;
    outline: none;
}


.login{
    display: flex;
    flex-direction: column;
    align-items: center;
   
}
.login button{
    background-color: #5e8abe;
    border: 1px solid  #363738;
    border-radius: 10px;
    padding: 3px 20px;
    font-weight: 500;
    width: 110px;
    height: 35px;
    margin-top: 20px;
    color: white;
}

.login button:hover{
    background-color: white;
    color: black;
}


.register-text{
    font-size: 12px;
    color: #8f8f8f;
    padding: 10px;
    display: flex;
    text-align: center;
    margin-top: 10px;
}

.register-text a{
    text-decoration: underline rgb(193, 193, 193);
    color: white;
}

.register-text a:hover{
    color: #7a7a7a;
}

.invalid {
    color: #ff2748;
    border-color: #ff2748;
    margin-top: 5px;
    width: 100%; /* Заставляем текст занимать всю доступную ширину */
    word-wrap: break-word; /* Переносим слова, если они длинные */
}
</style>


<script>


function userRegister(){
    let emailField = document.getElementById("email").value;
    let passField = document.getElementById("password").value;
    let fullNameField = document.getElementById("fullName").value;
    let phoneField = document.getElementById("phoneNumber").value;
    

    let person = {
        email: emailField,
        password: passField,
        fullName: fullNameField,
        phoneNumber: phoneField,
    };

    
    let users = JSON.parse(localStorage.getItem("UsersVK")) || [];
    if(emailField==""){
        emailDiv.innerHTML="Please inter Email";
    }
    if(passField==""){
        passDiv.innerHTML="Please inter password";
    }
    if(fullNameField==""){
        fullNameDiv.innerHTML="Please inter full name";
    }
    if(phoneField==""){
        phoneDiv.innerHTML="Please inter phone number";
    }

    else{users.push(person);

    localStorage.setItem("UsersVK",JSON.stringify(users));
    alert("User saved successfully");}


}
</script>

Tried to give “right-autorization” class height auto: but it strecth to whole website. I need it to be form 440px to 660px (when stretched with error message)
Tried to give min and max height. Doesnt work. Applies only max height.

I’ve been tryinh to soolve this for 2nd day….

p.s. Sorry for 2nd post of question

Thiết kế website giá rẻ

Danh mục

How to stretch container, while adding elements inside ? (height)