mirror of
https://github.com/yusufipk/chatty.git
synced 2026-09-11 11:06:09 +00:00
140 lines
4.4 KiB
HTML
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 & 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 & 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>
|