Scribd
Upload
16 views

Converted Text (4)

The document contains CSS styles for a webpage, defining general styles for the body, header, hero section, collections section, about section, and footer. It includes layout properties, color schemes, and typography settings to create a visually appealing design. Key features include a responsive header, a hero section with a background image, and styled collection items.

Uploaded by

victorbenjaminolamide
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
16 views

Converted Text (4)

The document contains CSS styles for a webpage, defining general styles for the body, header, hero section, collections section, about section, and footer. It includes layout properties, color schemes, and typography settings to create a visually appealing design. Key features include a responsive header, a hero section with a background image, and styled collection items.

Uploaded by

victorbenjaminolamide
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

/* General Styles */

body {

font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;

/* Header Styles */

header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 50px;

background-color: #333;

color: #fff;

}
header .logo {

font-size: 24px;

font-weight: bold;

header nav ul {

list-style: none;

display: flex;

gap: 20px;

header nav ul li a {

text-decoration: none;

color: #fff;

/* Hero Section */
#hero {

background: url('hero-bg.jpg') no-repeat center center/cover;

height: 100vh;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

#hero .cta-button {

background: #ff6f61;

color: #fff;

padding: 10px 20px;

text-decoration: none;

font-size: 16px;

border-radius: 5px;

margin-top: 20px;
}

/* Collections Section */

#collections {

padding: 50px;

text-align: center;

.collection-grid {

display: flex;

gap: 20px;

justify-content: center;

.collection-item {

background: #f4f4f4;

padding: 20px;
text-align: center;

border-radius: 8px;

width: 300px;

.collection-item img {

max-width: 100%;

border-radius: 8px;

.collection-item .cta-button {

background: #333;

color: #fff;

padding: 10px 15px;

text-decoration: none;

margin-top: 10px;

display: inline-block;

}
/* About Section */

#about {

padding: 50px;

text-align: center;

#about img {

max-width: 50%;

border-radius: 10px;

/* Footer */

footer {

background: #333;

color: #fff;

text-align: center;
padding: 20px;

footer .social-links a {

color: #ff6f61;

margin: 0 10px;

text-decoration: none;

You might also like