Scribd
Upload
2 views

styles.css

This document contains CSS styling rules for a webpage, including basic layout and design elements for the body, header, navigation, hero section, courses section, success stories section, and footer. It specifies colors, fonts, padding, and hover effects for buttons and various text elements. The layout utilizes flexbox for responsive design in the courses and success stories sections.

Uploaded by

lanil48441
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

styles.css

This document contains CSS styling rules for a webpage, including basic layout and design elements for the body, header, navigation, hero section, courses section, success stories section, and footer. It specifies colors, fonts, padding, and hover effects for buttons and various text elements. The layout utilizes flexbox for responsive design in the courses and success stories sections.

Uploaded by

lanil48441
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

/* Basic Styling */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

/* Header */
header {
background-color: #0066cc;
color: white;
padding: 20px;
text-align: center;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 15px;
}

nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

.hero {
padding: 100px 20px;
}

.hero h1 {
font-size: 3rem;
}

.hero p {
font-size: 1.5rem;
}

button {
padding: 10px 20px;
font-size: 1rem;
background-color: #ff6600;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #e65c00;
}

/* Courses Section */
#courses {
padding: 50px 20px;
background-color: #f0f0f0;
text-align: center;
}

.course-cards {
display: flex;
justify-content: space-around;
}

.course-card {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 30%;
text-align: center;
}

.course-card h3 {
font-size: 1.8rem;
color: #333;
}

.course-card p {
font-size: 1rem;
color: #666;
}

.course-card button {
margin-top: 15px;
background-color: #0066cc;
color: white;
}

.course-card button:hover {
background-color: #004fa3;
}

/* Success Stories Section */


#success-stories {
padding: 50px 20px;
background-color: #fff;
text-align: center;
}

.stories {
display: flex;
justify-content: space-around;
}

.story-card {
background-color: #f1f1f1;
padding: 20px;
width: 40%;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.story-card p {
font-size: 1.2rem;
color: #333;
}

.story-card h4 {
font-size: 1.4rem;
color: #0066cc;
}

/* Footer Section */
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

footer ul {
list-style-type: none;
padding: 0;
}

footer ul li {
display: inline;
margin-right: 15px;
}

footer ul li a {
color: white;
text-decoration: none;
}

You might also like