Scribd
Upload
8 views

style.css (1)

The document contains CSS styles for a responsive website layout, featuring a smooth scrolling effect, a fixed header with navigation, and various sections such as hero, about, products, and contact. It includes animations for elements like logos and buttons, hover effects for links and cards, and a grid layout for product display. Media queries are utilized to adjust styles for smaller screens, ensuring a user-friendly experience across devices.

Uploaded by

asow83480
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
8 views

style.css (1)

The document contains CSS styles for a responsive website layout, featuring a smooth scrolling effect, a fixed header with navigation, and various sections such as hero, about, products, and contact. It includes animations for elements like logos and buttons, hover effects for links and cards, and a grid layout for product display. Media queries are utilized to adjust styles for smaller screens, ensuring a user-friendly experience across devices.

Uploaded by

asow83480
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/ 6

* {

margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

html {
scroll-behavior: smooth;
}

body {
background: url('https://placeholder.co/1920x1080') center/cover fixed;
min-height: 100vh;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
width: 100%;
z-index: 1000;
}

.logo img {
height: 50px;
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

nav a {
color: white;
text-decoration: none;
margin-left: 2rem;
font-weight: 500;
transition: all 0.3s;
position: relative;
}

nav a:hover {
color: #ff6b6b;
transform: translateY(-2px);
}

nav a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #ff6b6b;
transition: width 0.3s;
}

nav a:hover::after {
width: 100%;
}

.hero {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
background: rgba(0, 0, 0, 0.5);
padding: 0 20px;
}

h1 {
font-size: 3.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
}

.hero p {
font-size: 1.5rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.about {
padding: 5rem 2rem;
background: rgba(255, 255, 255, 0.9);
text-align: center;
}

.about-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

.about-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 300px;
transition: all 0.3s;
}

.about-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.about-card img {
width: 64px;
height: 64px;
margin-bottom: 1rem;
transition: transform 0.5s;
}

.about-card img:hover {
transform: rotate(360deg);
}

.about-card h3 {
color: #ff6b6b;
margin-bottom: 1rem;
}

.products {
padding: 5rem 2rem;
background: rgba(255, 255, 255, 0.9);
text-align: center;
}

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}

.product-card {
background: white;
padding: 1rem;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
overflow: hidden;
}

.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.product-card img {
width: 100%;
border-radius: 5px;
margin-bottom: 1rem;
transition: transform 0.5s;
}

.product-card img:hover {
transform: scale(1.1) rotate(2deg);
}

.price {
color: #ff6b6b;
font-size: 1.5rem;
font-weight: bold;
margin: 1rem 0;
}

button {
background: #ff6b6b;
color: white;
border: none;
padding: 0.8rem 2rem;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}

button:hover {
background: #ff5252;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

button:active {
transform: translateY(0);
}

.contact {
padding: 5rem 2rem;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.7);
}

form {
max-width: 500px;
margin: 2rem auto;
display: flex;
flex-direction: column;
gap: 1rem;
}

input, textarea {
width: 100%;
padding: 1rem;
border: none;
border-radius: 25px;
background: rgba(255, 255, 255, 0.1);
color: white;
transition: all 0.3s;
}

textarea {
height: 150px;
resize: vertical;
border-radius: 15px;
}

input:focus, textarea:focus {
outline: none;
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}

footer {
text-align: center;
padding: 2rem;
background: rgba(0, 0, 0, 0.8);
color: white;
}

@media (max-width: 768px) {


header {
flex-direction: column;
padding: 1rem;
}

nav {
margin-top: 1rem;
}

nav a {
margin: 0 1rem;
}

h1 {
font-size: 2.5rem;
}

.about-container, .product-grid {
grid-template-columns: 1fr;
}
}

You might also like