Introduction
This document presents a detailed report on the Alma Cosmetics
website project. It outlines the goals, structure, technologies used, and
features of the project.
Alma Cosmetics is envisioned as a modern, elegant, and responsive
online platform designed to showcase a wide range of beauty products.
The aim of the project is to create a visually appealing, user-friendly
interface that highlights cosmetics such as foundation, lipstick, and
mascara while ensuring a smooth and intuitive browsing experience.
This website serves as a front-end prototype that leverages basic yet
powerful web technologies to simulate a real-world brand presence. It
demonstrates how HTML, CSS, and JavaScript can be seamlessly
combined to create a clean layout, responsive design, and interactive
user experience. This report provides insights into the design approach,
code structure, and overall development process behind the Alma
Cosmetics website.
Project Overview
Alma Cosmetics is a front-end web application developed to represent a
modern cosmetics brand with an emphasis on elegance, simplicity, and
product visibility. The website is designed to showcase a curated
selection of beauty products such as foundation, lipstick, and mascara
through high-quality visuals and a user-friendly layout.
The purpose of this project is to simulate an online storefront or brand
landing page that could be expanded into a full-fledged e-commerce
platform. Built entirely using HTML, CSS, and JavaScript, the application
ensures smooth user interactions, responsive design across devices, and
a professional look that aligns with contemporary beauty industry
standards
Code
The project contains three main files: HTML, CSS, and JavaScript.
[Link]:
- Defines the structure of the website.
[Link]:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
color: #ffffff;
background: #0a0a0a;
overflow-x: hidden;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
.logo {
display: flex;
align-items: center;
gap: 10px;
margin-right: auto;
padding-left: 0;
.logo-img {
width: 45px;
height: 45px;
object-fit: contain;
.logo-text {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: #d4af37;
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
margin-left: auto;
.nav-link {
text-decoration: none;
color: #ffffff;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
.nav-link:hover {
color: #d4af37;
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: #d4af37;
transition: width 0.3s ease;
.nav-link:hover::after {
width: 100%;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: #000 url('images/[Link]');
background-size: contain;
background-position: 100% center;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
position: relative;
overflow: hidden;
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
pointer-events: none;
}
.hero-content {
flex: 1;
padding: 0 2rem;
z-index: 2;
animation: slideInLeft 1s ease-out;
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px);
to {
opacity: 1;
transform: translateX(0);
.hero-title {
font-family: 'Playfair Display', serif;
font-size: 5rem;
margin-bottom: 1rem;
line-height: 1.05;
text-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
animation: titleGlow 3s ease-in-out infinite alternate;
word-break: normal;
white-space: normal;
font-weight: 700;
.hero-title-sub {
display: block;
font-size: 3.5rem;
font-weight: 400;
margin-top: 0.5rem;
@media (max-width: 900px) {
.hero-title {
font-size: 2.5rem;
.hero-title-sub {
font-size: 1.5rem;
.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.9;
font-weight: 300;
letter-spacing: 1px;
.cta-button {
background: linear-gradient(45deg, #d4af37, #f4d03f);
color: white;
border: none;
padding: 18px 35px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
font-weight: 600;
letter-spacing: 1px;
position: relative;
overflow: hidden;
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2),
transparent);
transition: left 0.5s;
.cta-button:hover::before {
left: 100%;
.cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5);
.hero-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
position: relative;
}
/* Products Section */
.products-section {
padding: 5rem 0;
background: #111111;
.section-title {
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #ffffff;
position: relative;
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(45deg, #d4af37, #f4d03f);
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
.product-card {
background: #0a0a0a;
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 20px;
padding: 2.5rem;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
.product-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4),
transparent);
transition: left 0.5s;
.product-card:hover::before {
left: 100%;
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
.product-image {
margin-bottom: 1.5rem;
transition: all 0.4s ease;
.perfume-img {
width: 170px;
height: 170px;
object-fit: cover;
border-radius: 15px;
.cosmetic-img {
width: 170px;
height: 170px;
object-fit: cover;
border-radius: 15px;
background: transparent;
display: block;
margin-left: auto;
margin-right: auto;
.product-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: #ffffff;
.product-card p {
color: #cccccc;
margin-bottom: 1rem;
.price {
display: block;
font-size: 1.3rem;
font-weight: 600;
color: #d4af37;
margin-bottom: 1rem;
.add-to-cart {
background: linear-gradient(45deg, #d4af37, #f4d03f);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
.add-to-cart:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
/* About Section */
.about-section {
padding: 5rem 0;
background: #0a0a0a;
.about-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
.about-content p {
font-size: 1.1rem;
color: #cccccc;
margin-bottom: 3rem;
line-height: 1.8;
.features {
display: flex;
justify-content: center;
align-items: stretch;
gap: 2rem;
margin-top: 3rem;
flex-wrap: nowrap;
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
.feature {
text-align: center;
padding: 2rem;
border-radius: 15px;
background: #1a1a1a;
border: 1px solid rgba(212, 175, 55, 0.2);
transition: transform 0.3s ease;
flex: 1 1 0;
min-width: 0;
max-width: none;
.feature:hover {
transform: translateY(-5px);
}
.feature i {
font-size: 2.5rem;
color: #d4af37;
margin-bottom: 1rem;
.feature h3 {
font-family: 'Playfair Display', serif;
margin-bottom: 0.5rem;
color: #ffffff;
.feature p {
color: #cccccc;
@media (max-width: 900px) {
.features {
gap: 1rem;
.feature {
padding: 1rem;
font-size: 0.95rem;
}
}
/* Contact Section */
.contact-section {
padding: 5rem 0;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460
100%);
color: white;
.contact-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-top: 2rem;
.contact-info h3 {
font-family: 'Playfair Display', serif;
margin-bottom: 1.5rem;
.contact-info p {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 10px;
.contact-info i {
color: #d4af37;
font-size: 1.2rem;
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
.contact-form input,
.contact-form textarea {
padding: 15px;
border: none;
border-radius: 10px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(10px);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: rgba(255, 255, 255, 0.7);
.submit-btn {
background: linear-gradient(45deg, #d4af37, #f4d03f);
color: white;
border: none;
padding: 15px;
border-radius: 10px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
/* Footer */
.footer {
background: #000000;
color: white;
padding: 2rem 0;
border-top: 1px solid rgba(212, 175, 55, 0.2);
.footer-bottom {
text-align: center;
color: #cccccc;
font-size: 0.9rem;
letter-spacing: 1px;
.developers {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(212, 175, 55, 0.2);
.developers p {
margin: 0.3rem 0;
font-size: 0.8rem;
color: #999999;
}
.developers p:first-child {
color: #d4af37;
font-weight: 600;
margin-bottom: 0.5rem;
/* Shopping Cart */
.cart-sidebar {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100vh;
background: #1a1a1a;
border-left: 1px solid rgba(212, 175, 55, 0.2);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
z-index: 2000;
transition: right 0.3s ease;
display: flex;
flex-direction: column;
.[Link] {
right: 0;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
background: #0a0a0a;
.cart-header h3 {
font-family: 'Playfair Display', serif;
color: #ffffff;
.close-cart {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #cccccc;
transition: color 0.3s ease;
.close-cart:hover {
color: #d4af37;
.cart-items {
flex: 1;
padding: 1rem;
overflow-y: auto;
.cart-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
.cart-item-info {
flex: 1;
.cart-item-info h4 {
margin-bottom: 0.25rem;
color: #ffffff;
}
.cart-item-info p {
color: #cccccc;
font-size: 0.9rem;
.cart-total {
padding: 1rem;
border-top: 1px solid rgba(212, 175, 55, 0.2);
background: #0a0a0a;
.cart-total h4 {
margin-bottom: 1rem;
color: #ffffff;
.checkout-btn {
width: 100%;
background: linear-gradient(45deg, #d4af37, #f4d03f);
color: white;
border: none;
padding: 15px;
border-radius: 10px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
.checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
.cart-toggle {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(45deg, #d4af37, #f4d03f);
color: white;
border: none;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 1000;
}
.cart-toggle:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
.cart-count {
position: absolute;
top: -5px;
right: -5px;
background: #e74c3c;
color: white;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
/* Animations and Effects */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
.[Link] {
opacity: 1;
transform: translateY(0);
.success-animation {
animation: successPulse 0.6s ease;
@keyframes successPulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
- Contains all style rules and layout definitions.
[Link]:
[Link]('DOMContentLoaded', function() {
[Link]('Website loaded successfully!');
setupScrollAnimations();
setupShoppingCart();
setupContactForm();
showWelcomeMessage();
});
function setupScrollAnimations() {
const animatedElements = [Link]('.product-
card, .feature, .section-title');
const observer = new IntersectionObserver(function(entries) {
[Link](entry => {
if ([Link]) {
[Link]('fade-in', 'visible');
setTimeout(() => {
[Link] = '1';
[Link] = 'translateY(0)';
}, 100);
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});
[Link](element => {
[Link] = '0';
[Link] = 'translateY(30px)';
[Link] = 'all 0.6s ease';
[Link](element);
});
function setupShoppingCart() {
let cart = [];
let cartTotal = 0;
const cartSidebar = [Link]('cartSidebar');
const cartItems = [Link]('cartItems');
const cartTotalElement = [Link]('cartTotal');
const cartCountElement = [Link]('cartCount');
const addToCartButtons = [Link]('.add-to-cart');
[Link](button => {
[Link]('click', function() {
const productCard = [Link]('.product-card');
const productName = [Link]('h3').textContent;
const productPrice =
parseFloat([Link]('.price').[Link]('₹',
'').replace(',', ''));
const productDescription = [Link]('p').textContent;
addToCart(productName, productPrice, productDescription);
[Link]('success-animation');
setTimeout(() => {
[Link]('success-animation');
}, 600);
});
});
function addToCart(name, price, description) {
const existingItem = [Link](item => [Link] === name);
if (existingItem) {
[Link] += 1;
} else {
[Link]({
name: name,
price: price,
description: description,
quantity: 1
});
}
updateCartDisplay();
showNotification(`${name} added to cart!`);
function updateCartDisplay() {
[Link] = '';
cartTotal = 0;
let totalItems = 0;
[Link](item => {
cartTotal += [Link] * [Link];
totalItems += [Link];
const cartItem = [Link]('div');
[Link] = 'cart-item';
[Link] = `
<div class="cart-item-info">
<h4>${[Link]}</h4>
<p>${[Link]}</p>
<p>Quantity: ${[Link]} | ₹${([Link] *
[Link]).toLocaleString('en-IN')}</p>
</div>
<button onclick="removeFromCart('${[Link]}')" style="background:
#e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor:
pointer;">Remove</button>
`;
[Link](cartItem);
});
[Link] = [Link]('en-IN');
[Link] = totalItems;
[Link] = function(name) {
const itemIndex = [Link](item => [Link] === name);
if (itemIndex > -1) {
if (cart[itemIndex].quantity > 1) {
cart[itemIndex].quantity -= 1;
} else {
[Link](itemIndex, 1);
updateCartDisplay();
showNotification(`${name} removed from cart!`);
};
[Link] = function() {
[Link]('open');
};
const checkoutBtn = [Link]('.checkout-btn');
if (checkoutBtn) {
[Link]('click', function() {
if ([Link] === 0) {
showNotification('Your cart is empty!', 'warning');
} else {
showNotification('Thank you for your purchase!', 'success');
cart = [];
updateCartDisplay();
toggleCart();
});
function setupContactForm() {
const contactForm = [Link]('.contact-form');
if (contactForm) {
[Link]('submit', function(e) {
[Link]();
const formData = new FormData(contactForm);
const name = [Link]('input[type="text"]').value;
const email = [Link]('input[type="email"]').value;
const message = [Link]('textarea').value;
if (!name || !email || !message) {
showNotification('Please fill in all fields!', 'error');
return;
const submitBtn = [Link]('.submit-btn');
const originalText = [Link];
[Link] = '<span class="loading"></span> Sending...';
[Link] = true;
setTimeout(() => {
showNotification('Message sent successfully!', 'success');
[Link]();
[Link] = originalText;
[Link] = false;
}, 2000);
});
function showNotification(message, type = 'info') {
const notification = [Link]('div');
[Link] = `notification ${type}`;
[Link] = message;
[Link] = `
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 10px;
color: white;
font-weight: 500;
z-index: 3000;
transform: translateX(400px);
transition: transform 0.3s ease;
max-width: 300px;
`;
switch(type) {
case 'success':
[Link] = '#27ae60';
break;
case 'error':
[Link] = '#e74c3c';
break;
case 'warning':
[Link] = '#f39c12';
break;
default:
[Link] = '#3498db';
[Link](notification);
setTimeout(() => {
[Link] = 'translateX(0)';
}, 100);
setTimeout(() => {
[Link] = 'translateX(400px)';
setTimeout(() => {
[Link](notification);
}, 300);
}, 3000);
[Link]('DOMContentLoaded', function() {
const productCards = [Link]('.product-card');
[Link](card => {
[Link]('mouseenter', function() {
[Link] = 'translateY(-10px) scale(1.02)';
});
[Link]('mouseleave', function() {
[Link] = 'translateY(0) scale(1)';
});
});
const buttons = [Link]('button');
[Link](button => {
[Link]('click', function() {
const ripple = [Link]('span');
[Link] = `
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple 0.6s linear;
pointer-events: none;
`;
const rect = [Link]();
const size = [Link]([Link], [Link]);
const x = [Link] - [Link] - size / 2;
const y = [Link] - [Link] - size / 2;
[Link] = [Link] = size + 'px';
[Link] = x + 'px';
[Link] = y + 'px';
[Link] = 'relative';
[Link] = 'hidden';
[Link](ripple);
setTimeout(() => {
[Link]();
}, 600);
});
});
const style = [Link]('style');
[Link] = `
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
`;
[Link](style);
});
[Link]('scroll', function() {
const navbar = [Link]('.navbar');
if ([Link] > 100) {
[Link] = 'rgba(10, 10, 10, 0.98)';
[Link] = '0 2px 20px rgba(0, 0, 0, 0.3)';
} else {
[Link] = 'rgba(10, 10, 10, 0.95)';
[Link] = 'none';
});
- Adds interactivity like scrolling and user events.
Key Features
- Responsive and mobile-friendly design
- Stylish and elegant product layout
- Lightweight and easy to deploy
- Use of visual assets for brand appeal
Screenshots
Below are some product and layout visuals from the website.
[Link]
[Link]
[Link]
[Link]
Conclusion
This project serves as a professional front-end solution for a beauty and
cosmetics brand, effectively combining visual design, product
presentation, and basic web interactivity. The Alma Cosmetics website
successfully showcases a variety of cosmetic products in a way that is
clean, modern, and accessible to users across devices.
Its modular design and clear structure make it a strong foundation for
further development. With the addition of backend technologies, it
could evolve into a fully functional e-commerce platform capable of
handling dynamic content, user authentication, product filtering, and
secure transactions.
Furthermore, the project demonstrates how essential front-end
technologies—HTML, CSS, and JavaScript—can be leveraged to create a
visually compelling and user-friendly website. It stands as a suitable
prototype for businesses aiming to establish an online presence in the
cosmetics industry and can serve as a template for similar product-
based websites across other domains.