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
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
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