Scribd
Upload
2 views

style.css

This document contains CSS styling rules for a web page, including general styles, header, navigation, sections, facilities, photo gallery, contact, and footer. It also includes media queries for responsive design to adjust styles for different screen sizes. The styles focus on layout, typography, colors, and hover effects to enhance user experience.

Uploaded by

tewari.krishna1312
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

style.css

This document contains CSS styling rules for a web page, including general styles, header, navigation, sections, facilities, photo gallery, contact, and footer. It also includes media queries for responsive design to adjust styles for different screen sizes. The styles focus on layout, typography, colors, and hover effects to enhance user experience.

Uploaded by

tewari.krishna1312
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

/* General Styling */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

a{

color: white;

body {

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

background-color: whitesmoke;

color: #333;

line-height: 1.6;

header {

background: url('images/header-background.jpg') no-repeat center center/cover;

height: 80vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: goldenrod;

text-align: center;

position: relative;

header h1 {

font-size: 3.5em;
font-weight: 700;

text-transform: uppercase;

margin-bottom: 10px;

header p {

font-size: 1.2em;

margin-bottom: 20px;

letter-spacing: 1px;

nav ul {

list-style-type: none;

display: flex;

justify-content: center;

background-color: rgba(0, 0, 0, 0.6);

padding: 10px 20px;

border-radius: 8px;

nav ul li {

margin: 0 15px;

nav ul li a {

color: #fff;

text-decoration: none;

font-size: 1.1em;

font-weight: bold;

padding: 10px 15px;

border-radius: 5px;
transition: background-color 0.3s;

nav ul li a:hover {

background-color: rgba(255, 255, 255, 0.3);

/* Section Styling */

section {

padding: 50px 20px;

margin: 0 auto;

max-width: 1200px;

h2 {

font-size: 2.5em;

text-align: center;

margin-bottom: 20px;

color: #444;

position: relative;

h2::after {

content: '';

width: 80px;

height: 4px;

background-color: #fcba03;

display: block;

margin: 10px auto 20px;

border-radius: 2px;

}
/* Facilities Section */

#facilities ul {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

#facilities ul li {

background-color: #fcba03;

color: white;

padding: 20px;

margin: 10px;

border-radius: 10px;

flex: 1 1 200px;

text-align: center;

font-weight: bold;

box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

transition: transform 0.3s;

#facilities ul li:hover {

transform: translateY(-10px);

/* Photo Gallery Section */

.gallery {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}
.gallery img {

width: 100%;

max-width: 300px;

margin: 15px;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

transition: transform 0.3s, box-shadow 0.3s;

.gallery img:hover {

transform: scale(1.05);

box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

/* Contact Section */

#contact {

text-align: center;

background-color: #fcba03;

padding: 30px 20px;

border-radius: 8px;

box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

#contact p {

font-size: 1.2em;

color: #fff;

margin: 10px 0;

#contact a {
color: #fff;

text-decoration: underline;

#contact a:hover {

text-decoration: none;

color: #333;

/* Footer Styling */

footer {

background-color: #333;

color: white;

text-align: center;

padding: 20px 0;

font-size: 0.9em;

position: relative;

footer p {

margin: 0;

/* Media Queries for Responsiveness */

@media (max-width: 768px) {

header h1 {

font-size: 2.5em;

.gallery {

justify-content: center;
}

nav ul {

flex-direction: column;

nav ul li {

margin-bottom: 10px;

@media (max-width: 500px) {

#facilities ul {

flex-direction: column;

header p {

font-size: 1em;

You might also like