Scribd
Upload
4 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
Available Formats
Download as PDF, TXT or read online on Scribd
4 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
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