Scribd
Upload
2 views

Css

The document contains CSS styling rules for a webpage, including body, navbar, table, form, and button styles. It specifies colors, fonts, layout properties, and hover effects to enhance user experience. The styles are designed to create a visually appealing and user-friendly interface.

Uploaded by

Alabi Dauod
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Css

The document contains CSS styling rules for a webpage, including body, navbar, table, form, and button styles. It specifies colors, fonts, layout properties, and hover effects to enhance user experience. The styles are designed to create a visually appealing and user-friendly interface.

Uploaded by

Alabi Dauod
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

/*Body Styling*/

html {
box-sizing: border-box;
}

body {
background-color: #c0c0c0;
align-content: center;
margin: 0;
padding: 0;
font-family: Calibri, sans-serif;
}
/*Navbar styling*/
.horizontal-menu {
height: 180px;
background-color: white;
background: url('Tile-Background.jpg\ \(image\ file\).jpg') repeat center
center;
display: flex;
justify-content: center;
margin-top: 12px;
margin-left: 10px;
margin-right: 10px;

.horizontal-menu ul {
list-style-type: none;
margin: 0;
padding: 50px;
display: flex;
}

.horizontal-menu li {
margin: 1px;
}

.horizontal-menu a {
display: block;
color: #b30059;
text-decoration: underline;
padding: .3em 1.1em;
background-color: white;
letter-spacing: 7px;
font-size: 24px;
font-weight: bold;
background-color: #f2f2f2 ;
}

.horizontal-menu a:hover {
background-color: #b30059;
color: #ffffff;

.navbar-content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.navbar {
background-color: transparent;
color: red;
text-shadow: 4px 4px blue;
text-align: center;
padding: 5px 0;
margin-top: -85px;
font-size: 30px;
font-style: italic;
}
.center {
text-align: center;
}

.nav-img {
position: absolute; /* Position images absolutely to not affect centering */
height: 100%; /* Adjust height accordingly */
width: auto;

}
.nav-img.left {
left: 10px;

.nav-img.right {
right: 10px;

#datetime {
position: absolute;
width: 100%;
left: 0;
bottom: 10px;
font-size: 16px;
font-weight: bold;
text-align: center;

}
.Afeez {
margin-top: 30px;
color: #b30059;
text-shadow: 5px 5px 6px blue;
text-align: center;
font-size: 40px;
font-style: italic;
}

h3 {
color: #b30059;
text-shadow: 4px 4px 3px blue;
text-align: center;
font-size: 17px;

/*Table styling*/

.table-container {
display: flex;
justify-content: center;

}
table {
width: 40%;
border: 20px inset #b30059;
background-color: white;
}
td {
text-align:center;
color: #e0115f;
font-weight: bold;
border: 2px solid #e0115f ;
padding: 8px;
}
th {
border: 2px solid #e0115f ;;
color: #e0115f;
font-weight: bold;
padding: 8px;
text-align: center;

}
.align-left {
text-align: left;
}
/*Form fieldset*/

.form-fieldset {
border: 15px double #b30059;
border-radius: 0px;
padding: 30px;
width: 730px;
margin: 5px auto;
}

.form-legend {
font-size: 20px;
font-weight: bold;
color: #b30059;
}

form {
color: #b30059;
text-align: center;

label {
display: inline-block;
color: #b30059;
vertical-align: middle;
padding: 4px;
font-size: 16px;
font-weight: bold;
}

input[type="text"],
input[type="email"] {
width: 75%;
padding: 5px;
margin-bottom: 10px;
border: dashed #b30059 2px;
display: inline-block;

}
/* yES OR NO option styling */

.radio-group {
margin-bottom: 10px;
}

.radio-group input[type="radio"] {
display: none;

.radio-group input[type="radio"]:checked + label {


background-color: #0056b3;
}

/*Button styling*/

button[type="submit"] {
background-color: #df004f;
color: white;
padding: 5px 10px;
border: none;
border-radius: 0px;
}
.button-container {
width: 100%;
text-align: center;
}

.promotion {
text-align: center;
color: #df004f;
font-weight: bold;
font-size: 16px;

.button-container {
width: 9%;
text-align: center;
border: 2px solid black;
margin: auto;
}

button {
background-color: red;
color: white;
border: none;
padding: 10px 20px;
font-weight: bold;

You might also like