css
/* style.css */
body, html {
background-color: #fff;
background-image: url('https://example.com/assurance13.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 50% 50%;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 24px;
-webkit-font-smoothing: true;
-webkit-tap-hold: 500ms;
}
body, .container {
margin: 1px auto;
padding: 0;
}
body, .container, h1, h2, h3, h4, h5 {
border-bottom: 1px solid #333;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
body, .container, .title {
color: #ff0000;
font-weight: bold;
font-size: 30px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}
body, .container, .description {
color: #000;
font-size: 18px;
text-align: center;
text-transform: none;
letter-spacing: 1px;
word-wrap: break-word;
word-break: break-word;
word-break-inside: auto;
}
body, .container, .links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
body, .container, .link {
display: inline-block;
width: 150px;
height: 30px;
margin: 5px 5px 5px 5px;
padding: 10px 10px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
transition: 0.2s;
background-color: #fff;
background-clip: padding-box;
color: #666;
cursor: pointer;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
body, .container, .link:hover {
background-color: #ccc;
border: 1px solid #000;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.7);
}
body, .container, .link:active {
background-color: #999;
border: 1px solid #000;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.7);
}
body, .container, .link:visited {
background-color: #666;
border: 1px solid #000;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.7);
}
body, .container, .header {
background-image: linear-gradient(to right, #333 0, #000 50%, #333 100%);
background-size: 200px 100%;
background-position: 0 0;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-radius: 0 0 1px 1px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
color: #000;
font-size: 20px;
font-weight: 300;
line-height: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
padding: 20px 0;
margin: 0;
text-align: center;
text-justify: center;
}
body, .container, .subheader {
background-color: #fff;
border: 1px solid #000;
border-style: solid;
border-width: 1px;
border-radius: 1px 1px 1px 1px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
color: #666;
font-size: 16px;
font-weight: 300;
line-height: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px 0;
margin: 10px 0;
text-align: center;
text-justify: center;
}
body, .container, .footer {
background-image: linear-gradient(to right, #000 0, #333 50%, #000 100%);
background-size: 200px 100%;
background-position: 0 0;
background-repeat: no-repeat;
border-bottom: 1px solid #000;
border-radius: 0 0 1px 1px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
color: #000;
font-size: 18px;
font-weight: 300;
line-height: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px 0;
margin: 0;
text-align: center;
text-justify: center;
}