Files
chatty/index.html
2021-10-25 16:48:48 +03:00

140 lines
4.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatty</title>
<link rel="icon" type="image/png" href="./favicon-32x32.png" />
<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=Poppins:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Roboto:ital,wght@0,300;0,500;0,700;1,300;1,500;1,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<section class="hero">
<div class="container container-hero">
<div class="navbar">
<img src="img/logo.svg" alt="logo" class="logo" />
<div class="navbar_mobile">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="navbar_right">
<a href="#">Product</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#">Log In</a>
<a href="#" class="a_white">Try It Free</a>
</div>
</div>
<div class="hero_text">
<h1 class="hero_heading">Have your best chat</h1>
<p class="hero_p-1">Fast, easy &amp; unlimited team chat</p>
<div class="hero_text-buttons">
<button class="button_main button_main-hero">Try It Free</button>
<button class="button_transparent button_transparent-hero">
Get a Demo
</button>
</div>
</div>
<div class="hero_container-image">
<img
class="image_hero"
src="img/Hero Pictures-min.png"
alt="Hero Image"
/>
</div>
</div>
</section>
<section class="middle">
<div class="container container-middle">
<div class="middle_text">
<h2>Instant Team Chats</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibuset magnis dis parturient montes, nascetur ridiculus mus.
</p>
<img src="img/chat-img.jpg" alt="chat_app" />
</div>
</div>
</section>
<section class="cta">
<div class="container container-cta">
<img
src="img/CTA-img.png"
alt="people looking at computer"
class="cta_img"
/>
<div class="cta_text">
<h2>Perfect Solution for Small Businesses</h2>
<p class="cta_p-1">Pricing plans that fit like a glove.</p>
<div class="cta_text-buttons">
<button class="button_main">Try it Free</button>
<button class="button_transparent">Get a Demo</button>
</div>
<div class="line"></div>
<div class="cta_review">
<img src="img/stars.svg" alt="" class="stars" />
<p>
<b>5,200 businesses</b> use Chatty and they rate it as 5-stars
</p>
</div>
</div>
</div>
</section>
<section class="footer">
<div class="container-footer">
<div class="footer-logo">
<img src="img/logo-dark.svg" alt="" class="logo" />
<p class="logo-text">The last team chat you will ever need.</p>
</div>
<div class="footer-help">
<p>Help</p>
<li><a href="#">Support</a></li>
<li><a href="#">Knowledgebase</a></li>
<li><a href="#">Tutorials</a></li>
</div>
<div class="footer-features">
<p>Features</p>
<li><a href="#">Screen Sharing</a></li>
<li><a href="#">iOS &amp; Android Apps</a></li>
<li><a href="#">File Sharing</a></li>
<li><a href="#">User Management</a></li>
</div>
<div class="footer-company">
<p>Company</p>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers </a></li>
<li><a href="#">Contact Us</a></li>
</div>
<div class="footer-contact">
<p>Contact Us</p>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li>1-111-111-111</li>
<li>400 Baker St, UK</li>
</div>
</div>
</section>
</body>
</html>