Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Group 2/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <title>Glide</title>
</head>
<body>
​
​
    <header class="header">
        <div class="container">
          <div class="header_content"> 
            <div class="header_left"> <!-- Левая часть -->
              <a href="#"><img src="img/FrameLogo.png" width="73" height="24" class="header_logo"></a>
              <nav class="header_navbar">
                <ul class="header_list">
                  <li><a href="#"><span>Why Glide</span><img src="img/Frame.png" class="header_arrow"></a></li>
                  <li><a href="#">Templates</a></li>
                  <li><a href="#"><span>Products</span><img src="img/Frame.png" class="header_arrow"></a></li>
                  <li><a href="#"><span>Resources</span><img src="img/Frame.png" class="header_arrow"></a></li>
                  <li><a href="#">Pricing</a></li>
                </ul>
              </nav>
            </div>
            <div class="header_right"> <!-- Правая часть -->
              <div class="header_log">
                <a href="#"><img src="img/search.png"></a>
                <a href="#" class="header_btn_1">Log In</a>
                <a href="#" class="header_btn_2">Sign Up</a>
              </div>
            </div>
          </div>
        </div>
      </header>
      
​
 
​
​
    <main class="main"> 
        <div class="container"> 
                <div class="main_content">
                    <div class="main_content_text">
                        <h1>Turn your data into software.<br>
                            No coding or design skills needed.
                        </h1>
                        <p>Glide lets anyone in your company create powerful custom tools to move <br>
                             your business forward. Stop waiting on IT and create your app today.</p>
                    </div>
                <div class="main_container">
                    <div class="main_text_btn">
                        <a href="#" class="main_btn">Get started for free</a>
                          <div class="main_man_play_container">
                              <a href="#"><img src="img/main_man.png" alt="" class="main_man_play"></a>
                              <a href="#"><img src="img/main_play.png" class="main_play_btn"></a>
                          </div>
                       <div class="main_text_man">
                           <p id="tag_p">Watch Demo</p>
                           <p>60 seconds</p>
                       </div>
                    </div>
                    <p>No credit card required</p>
                </div>
                </div> 
​
                  <div class="main_logo">
                    <div class="main_big_logo_inner">
                        <img src="img/IMAGE.png" width="1030" height="464"class="big_logo">
                        <img src="img/Phone.png" class="phone_logo">
                        
                            <div class="main_block_completed">
                                <span>Completed</span>
                                <img src="img/main_nice.png" class="nice_logo">
                            </div>
                    </div>  
                  </div>
​
                  <div class="main_footer">
                      <div class="main_footer_content">
                        <div class="main_info_bottom_text">
                          <h1>Create custom apps for any <br>
                              workflow with zero coding</h1>
                          <p>Transforming your spreadsheet data into powerful Glide apps is <br>
                             remarkably easy. Save time with hundreds of pre-built templates and <br>
                             quickly customize them to match your needs.
                          </p> 
                        </div>
                      </div>
                  </div>
        </div> 
        
    </main> 
​
 <footer class="footer">
 </footer>
​
</body>
</html>
​
 
.main .container {
   height: 100%;
}
​
.main_content h1 {
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.15ch;
}
.main_content p {
    font-weight: 400;
    font-size: 21px;
    color:#757575;
    letter-spacing: 0.1ch;
    font-weight: 500;
    margin-top: 50px;
}
.main_content_text {
    padding-top: 100px;
}
​
​
​
.main_btn {
    font-size: 17px;
    letter-spacing: 0.1ch;
​
    width: 201px;
    height: 48px;
    border-radius: 9px;
​
    background: #12CCE5;
    color: white;
​
    display: flex;
    align-items: center;
    justify-content: center;
}
.main_text_btn {
    margin-top: 41px;
    display: flex;
    align-items: center;
​
    position: relative; 
    text-align: center
}
.main_man_play {
    margin-left: 25px;
}
.main_man_play_container {
    position: relative; 
    
}
​
#tag_p {
    font-size: 16px;
    font-weight: 500;
    color: black;
    margin-left: 12px;
}
.main_text_man p {
    margin: 0;
    font-size: 15px;
    color: #908F91;
    margin-bottom: 10px;
}
.main_play_btn {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%); 
}
.main_container p {
    font-size: 11px;
    color: #A5A6A7;
​
    margin-top: 6px;
}
​
​
​
.main_logo { 
    float: right;
    position: relative;
    margin-top: 86px;
​
}
​
.main_big_logo_inner { 
    position: relative;
    display: inline-block;
   
}
.phone_logo {
    position: absolute;
    top: 50%;
    left:-10.8ch; 
    transform: translateY(-50%);
   
}
​
​
.main_block_completed {
    position: absolute;
    top: 48px;
    right: 31px;
    background-color: #FFFFFFE5;
​
    border-radius: 16px;
    width: 292px;
    height: 90px;
​
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
.nice_logo {
    margin-right: 18px;
}
.main_block_completed span {
    margin-left: 90px;
    margin-top: 15px;
}
​
​
.main_info_bottom_text p {
  margin-top: 100px;
}
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers