Scribd
Upload
25 views

code.pdf

The document is an HTML template for a website titled 'Noella - Elevate Your Brand', which focuses on brand establishment and visibility. It includes a navigation bar, a hero section with a call to action, statistics about the platform's success, and a testimonial. The design features a modern layout with responsive elements and visually appealing styles.

Uploaded by

kingderick554
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

code.pdf

The document is an HTML template for a website titled 'Noella - Elevate Your Brand', which focuses on brand establishment and visibility. It includes a navigation bar, a hero section with a call to action, statistics about the platform's success, and a testimonial. The design features a modern layout with responsive elements and visually appealing styles.

Uploaded by

kingderick554
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noella - Elevate Your Brand</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #fff;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
overflow: hidden;
}

/* Navigation */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}

.logo {
font-size: 24px;
font-weight: bold;
color: #5a4a2e;
}

.nav-links {
display: flex;
gap: 30px;
}
.nav-link {
text-decoration: none;
color: #000;
font-weight: 500;
}

.buttons {
display: flex;
gap: 15px;
}

.btn {
padding: 12px 28px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
cursor: pointer;
}

.btn-primary {
background-color: #E6D72A;
color: #000;
border: none;
}

.btn-secondary {
background-color: transparent;
color: #000;
border: 2px solid #000;
}

/* Hero Section */
.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px 0;
position: relative;
}

.hero-text {
width: 50%;
z-index: 1;
}

.hero-title {
font-size: 80px;
line-height: 1;
margin-bottom: 20px;
font-weight: bold;
}

.brand-highlight {
color: #E6D72A;
display: block;
}

.hero-description {
font-size: 16px;
line-height: 1.5;
color: #000;
margin-bottom: 30px;
max-width: 500px;
}

.hero-buttons {
display: flex;
gap: 15px;
margin-bottom: 50px;
}

/* Stats Section */
.stats {
display: flex;
gap: 20px;
align-items: center;
}

.stat {
display: flex;
flex-direction: column;
align-items: center;
}

.stat-divider {
height: 50px;
width: 2px;
background-color: #000;
margin: 0 20px;
}

.stat-number {
font-size: 32px;
font-weight: bold;
}

.stat-text {
font-size: 16px;
color: #000;
}

/* Testimonial */
.testimonial {
display: flex;
align-items: center;
gap: 15px;
margin-top: 20px;
}

.testimonial-image {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;

.testimonial-text {
font-size: 14px;
line-height: 1.4;
}

/* Hero Images */
.hero-images {
background-image: url(Black\ &\ Blue\ Minimalist\ Modern\ Initial\ Font\ Logo\ \(3\).png);
background-repeat: no-repeat;
position: relative;
background-size: cover;
width: 50%;
height: 80vh;
}
.person-secondary {
position: absolute;
width: 150px;
height: 150px;
object-fit: cover;
top: 25%;
right: 5%;
z-index: 3;
border-radius: 15px;
}

/* Decorative elements */
.shape {
position: absolute;
z-index: 0;
}

.shape-1 {
width: 150px;
height: 50px;
background-color: #E6D72A;
border-radius: 25px;
top: 15%;
left: 1%;
}

</style>
</head>
<body>
<div class="container">
<!-- Navigation -->
<nav class="nav">
<div class="logo">Noella.</div>
<div class="nav-links">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Pricing</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Contact</a>
</div>
<div class="buttons">
<a href="#" class="btn btn-primary">Get started</a>
<a href="#" class="btn btn-secondary">Login</a>
</div>
</nav>

<!-- Hero Section -->


<div class="shape shape-1"></div>
<div class="hero">

<div class="hero-text">

<h1 class="hero-title">Elevate your<br>Brand with<br><span


class="brand-highlight">Noella</span></h1>
<p class="hero-description">
Noella is a platform which focuses on ensuring the proper establishment of brands
and helping them get better visibility in the online world of today.
</p>
<div class="hero-buttons">
<a href="#" class="btn btn-primary">Get started</a>
<a href="#" class="btn btn-secondary">Login</a>
</div>

<!-- Stats -->


<div class="stats">
<div class="stat">
<div class="stat-number">10k</div>
<div class="stat-text">Downloads</div>
</div>
<div class="stat-divider"></div>
<div class="stat">
<div class="stat-number">1k+</div>
<div class="stat-text">customers</div>
</div>
<div class="stat-divider"></div>
<div class="stat">
<div class="stat-number">100%</div>
<div class="stat-text">satisfaction</div>
</div>
</div>

<!-- Testimonial -->


<div class="testimonial">
<img src="68c551dccb7333559992c2e2625a654f.jpg" alt="Testimonial"
class="testimonial-image">
<p class="testimonial-text">This platform is the best.It just took my brand from zero
to an unimaginable level</p>
</div>
</div>

<!-- Hero Images and Decorative Elements -->


<div class="hero-images">

</div>
</div>
</div>
</body>
</html>

You might also like