<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative Agency - Transforming ideas into impactful digital experiences">
<title>NOVA | Creative Agency</title>
<style>
:root {
--primary-color: #2A2A2A;
--accent-color: #FF6B6B;
--light-color: #F8F9FA;
--dark-color: #212529;
--transition: all 0.3s ease-in-out;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background-color: var(--light-color);
color: var(--dark-color);
line-height: 1.6;
}
header {
background-color: transparent;
padding: 20px 0;
position: fixed;
width: 100%;
z-index: 1000;
transition: var(--transition);
}
header.scrolled {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 28px;
font-weight: 700;
color: var(--primary-color);
}
.logo span {
color: var(--accent-color);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 40px;
}
.nav-links a {
text-decoration: none;
color: var(--dark-color);
font-weight: 500;
transition: var(--transition);
}
.nav-links a:hover {
color: var(--accent-color);
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 50px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
}
.btn:hover {
background-color: #ff5252;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}
.hero {
height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-content {
width: 50%;
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.2;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
color: #666;
}
.hero-img {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 80%;
background: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80') center/cover;
border-radius: 20px 0 0 20px;
box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
}
.services {
padding: 100px 0;
background-color: white;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 60px;
height: 3px;
background-color: var(--accent-color);
transform: translateX(-50%);
}
.section-header p {
color: #666;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.service-card {
background-color: #f8f9fa;
padding: 30px;
border-radius: 10px;
transition: var(--transition);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.service-icon {
font-size: 40px;
color: var(--accent-color);
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}
.service-card p {
color: #666;
}
.portfolio {
padding: 100px 0;
background-color: #f8f9fa;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.portfolio-item {
position: relative;
border-radius: 10px;
overflow: hidden;
height: 300px;
}
.portfolio-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 107, 107, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: var(--transition);
padding: 20px;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-item:hover .portfolio-img {
transform: scale(1.1);
}
.portfolio-overlay h3 {
color: white;
font-size: 1.5rem;
margin-bottom: 10px;
transform: translateY(20px);
transition: var(--transition);
}
.portfolio-overlay p {
color: white;
text-align: center;
transform: translateY(20px);
transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay h3,
.portfolio-item:hover .portfolio-overlay p {
transform: translateY(0);
}
footer {
background-color: var(--primary-color);
color: white;
padding: 60px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-logo {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.footer-logo span {
color: var(--accent-color);
}
.footer-about p {
margin-bottom: 20px;
color: #ccc;
}
.footer-links h3,
.footer-contact h3 {
font-size: 18px;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.footer-links h3::after,
.footer-contact h3::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 30px;
height: 2px;
background-color: var(--accent-color);
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #ccc;
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--accent-color);
padding-left: 5px;
}
.contact-item {
display: flex;
margin-bottom: 15px;
}
.contact-icon {
margin-right: 15px;
color: var(--accent-color);
}
.contact-text {
color: #ccc;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid #444;
color: #aaa;
font-size: 14px;
}
@media (max-width: 992px) {
.hero-content {
width: 100%;
text-align: center;
padding: 0 20px;
}
.hero-img {
display: none;
}
.hero h1 {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.5rem;
}
.section-header h2 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">NOVA<span>.</span></div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="btn">Get In Touch</a>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<h1>We Create Digital <br>Experiences That Matter</h1>
<p>Transform your brand with our creative solutions that drive engagement and deliver measurable results. We're a team of passionate designers, developers, and strategists.</p>
<a href="#services" class="btn">Explore Our Services</a>
</div>
</div>
<div class="hero-img"></div>
</section>
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2>Our Services</h2>
<p>We offer comprehensive creative solutions to help your brand stand out in the digital landscape.</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">✦</div>
<h3>UI/UX Design</h3>
<p>Creating intuitive and engaging user experiences that convert visitors into customers through thoughtful design.</p>
</div>
<div class="service-card">
<div class="service-icon">✦</div>
<h3>Web Development</h3>
<p>Building responsive, high-performance websites and applications that work flawlessly across all devices.</p>
</div>
<div class="service-card">
<div class="service-icon">✦</div>
<h3>Brand Strategy</h3>
<p>Developing comprehensive brand identities that communicate your values and resonate with your audience.</p>
</div>
<div class="service-card">
<div class="service-icon">✦</div>
<h3>Digital Marketing</h3>
<p>Implementing strategic campaigns that increase visibility, drive traffic, and generate qualified leads.</p>
</div>
<div class="service-card">
<div class="service-icon">✦</div>
<h3>Content Creation</h3>
<p>Producing engaging, shareable content that tells your brand story and connects with your target audience.</p>
</div>
<div class="service-card">
<div class="service-icon">✦</div>
<h3>Motion Graphics</h3>
<p>Creating captivating animations and visual effects that bring your brand message to life in dynamic ways.</p>
</div>
</div>
</div>
</section>
<section id="portfolio" class="portfolio">
<div class="container">
<div class="section-header">
<h2>Featured Work</h2>
<p>A selection of our recent projects that showcase our creativity and expertise.</p>
</div>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="https://images.unsplash.com/photo-1541560052-77ec1bbc09f7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80" alt="Portfolio Item" class="portfolio-img">
<div class="portfolio-overlay">
<h3>Vertex Financial</h3>
<p>Brand identity and website redesign for a financial technology startup.</p>
</div>
</div>
<div class="portfolio-item">
<img src="https://images.unsplash.com/photo-1616469829581-73993eb86b02?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="Portfolio Item" class="portfolio-img">
<div class="portfolio-overlay">
<h3>Lumin Skincare</h3>
<p>E-commerce platform and digital marketing campaign for a premium skincare brand.</p>
</div>
</div>
<div class="portfolio-item">
<img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" alt="Portfolio Item" class="portfolio-img">
<div class="portfolio-overlay">
<h3>Nomad Coffee</h3>
<p>Complete branding and in-store experience design for a boutique coffee chain.</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-about">
<div class="footer-logo">NOVA<span>.</span></div>
<p>We're a full-service creative agency specializing in helping brands grow fast. Engage your clients through compelling visuals that do most of the marketing for you.</p>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-contact" id="contact">
<h3>Contact Us</h3>
<div class="contact-item">
<div class="contact-icon">✦</div>
<div class="contact-text">123 Design Street, Creative City, 10001</div>
</div>
<div class="contact-item">
<div class="contact-icon">✦</div>
<div class="contact-text">hello@novaagency.com</div>
</div>
<div class="contact-item">
<div class="contact-icon">✦</div>
<div class="contact-text">+1 (555) 123-4567</div>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 NOVA Creative Agency. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
</body>
</html>
Projects 
Teams
Account
