Snippet HTML, CSS example .Tanslate-app.
This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML or Copy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translate App</title>
<link rel="stylesheet" href="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=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<a href="#" class="logo">Translate App</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Translate</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-content">
<h1>Effortless Translation at Your Fingertips</h1>
<p>Translate text, documents, and websites in over 100 languages with our powerful translation app.</p>
<div class="hero-actions">
<button class="btn-primary">Translate Text</button>
<button class="btn-secondary">Translate Document</button>
</div>
</div>
<div class="hero-image">
<img src="picsume.jpg" alt="Translation App">
</div>
</section>
<section class="features">
<div class="feature">
<img src="text-icon.svg" alt="Text Translation">
<h3>Text Translation</h3>
<p>Translate text in over 100 languages with our fast and accurate translation engine.</p>
</div>
<div class="feature">
<img src="document-icon.svg" alt="Document Translation">
<h3>Document Translation</h3>
<p>Translate documents, including PDFs and Microsoft Office files, with ease.</p>
</div>
<div class="feature">
<img src="website-icon.svg" alt="Website Translation">
<h3>Website Translation</h3>
<p>Translate entire websites with a single click, ensuring a seamless multilingual experience.</p>
</div>
</section>
<section class="cta">
<h2>Start Translating Today</h2>
<p>Experience the power of our translation app and unlock a world of communication.</p>
<button class="btn-primary">Get Started</button>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footer-col">
<h3>About</h3>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Services</h3>
<ul>
<li><a href="#">Text Translation</a></li>
<li><a href="#">Document Translation</a></li>
<li><a href="#">Website Translation</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Contact</h3>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Address</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Translate App. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Snippet HTML, CSS example .Tanslate-app.
This css snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download CSS OR Copy.
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style-type: none;
}
/* Header Styles */
header {
background-color: #2c3e50;
color: #fff;
padding: 1rem;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
}
nav ul {
display: flex;
}
nav ul li {
margin-left: 1.5rem;
}
nav ul li a {
font-size: 1rem;
font-weight: 600;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #7f8c8d;
}
/* Hero Section Styles */
.hero {
display: flex;
align-items: center;
background-color: #f4f4f4;
padding: 4rem 2rem;
}
.hero-content {
flex: 1;
padding-right: 2rem;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.hero-actions button {
margin-right: 1rem;
}
.hero-image {
flex: 1;
}
.hero-image img {
width: 100%;
height: auto;
}
/* Features Section Styles */
.features {
display: flex;
justify-content: space-between;
padding: 4rem 2rem;
}
.feature {
flex-basis: 30%;
text-align: center;
}
.feature img {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.feature h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.feature p {
font-size: 1rem;
color: #7f8c8d;
}
/* CTA Section Styles */
.cta {
background-color: #2c3e50;
color: #fff;
padding: 4rem 2rem;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
/* Footer Styles */
footer {
background-color: #34495e;
color: #fff;
padding: 2rem;
}
.footer-content {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
}
.footer-col h3 {
font-size: 1.2rem;
margin-bottom: 1rem;
}
.footer-col ul li {
margin-bottom: 0.5rem;
}
.footer-col ul li a {
font-size: 1rem;
transition: color 0.3s ease;
}
.footer-col ul li a:hover {
color: #7f8c8d;
}
.footer-bottom {
text-align: center;
font-size: 0.9rem;
}
/* Buttons Styles */
.btn-primary {
background-color: #2980b9;
color: #fff;
border: none;
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-primary:hover {
background-color: #3498db;
}
.btn-secondary {
background-color: transparent;
color: #2980b9;
border: 1px solid #2980b9;
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-secondary:hover {
background-color: #2980b9;
color: #fff;
}
This is snippet for design