updates
This commit is contained in:
parent
1a7c938195
commit
096ec47313
23 changed files with 4380 additions and 0 deletions
753
css/style.css
Normal file
753
css/style.css
Normal file
|
|
@ -0,0 +1,753 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: nunito, sans-serif
|
||||
}
|
||||
|
||||
.censervice {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.landing-page {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.landing-page::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(bh.png) no-repeat;
|
||||
background-size: cover;
|
||||
opacity: .3
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
50% {
|
||||
transform: scale(1.2)
|
||||
}
|
||||
100% {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
position: relative;
|
||||
top: 35vh;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-content img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: 200px
|
||||
}
|
||||
|
||||
.page-content img:hover {
|
||||
opacity: .8
|
||||
}
|
||||
|
||||
.page-content h1 {
|
||||
color: #fff;
|
||||
font-size: 45px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 20px rgba(0, 0, 0, .41);
|
||||
}
|
||||
|
||||
.page-content p {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 20px rgba(0, 0, 0, .41);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.page-content a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #059ced;
|
||||
border: 2px solid #059ced;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 20px;
|
||||
transition: .4s linear
|
||||
}
|
||||
|
||||
.page-content a:hover {
|
||||
color: #fff;
|
||||
background: #059ced
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 10px;
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
.text div {
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
.eventsup h2 {
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
margin-top: 25px
|
||||
}
|
||||
|
||||
.img-col {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
margin-top: 15px
|
||||
}
|
||||
|
||||
.text-left a {
|
||||
font-size: 14px;
|
||||
background-color: #059ced;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
border-radius: .3rem;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color .3s;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, .04)
|
||||
}
|
||||
|
||||
.text-left a:hover {
|
||||
background-color: #056fb5
|
||||
}
|
||||
|
||||
.text-left h4 {
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: #2660fd;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
width: 50%;
|
||||
float: left
|
||||
}
|
||||
|
||||
.text-left p {
|
||||
padding: 0 30px 0 0;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.text-left h3 {
|
||||
color: #2660fd;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.right-picture {
|
||||
float: right;
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.right-picture img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 42px 64px 0 #e7e7ec;
|
||||
transition: transform .5s ease-in-out;
|
||||
}
|
||||
|
||||
.right-picture img:hover {
|
||||
transform: scale(1.02) rotate(1deg);
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.text-right {
|
||||
width: 50%;
|
||||
float: right
|
||||
}
|
||||
|
||||
.text-right p {
|
||||
padding: 0 0 0 30px;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.text-right h4 {
|
||||
padding: 0 0 0 30px;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
color: #2660fd;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.left-picture {
|
||||
float: left;
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.left-picture-panel {
|
||||
float: left;
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.left-picture img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 16px 0 rgba(19, 26, 44, .02), 0 0 32px 0 rgba(19, 26, 44, .1);
|
||||
transition: transform .5s ease-in-out
|
||||
}
|
||||
|
||||
.left-picture img:hover {
|
||||
transform: scale(1.02) rotate(1deg);
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.left-picture-panel img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 16px 0 rgba(19, 26, 44, .02), 0 0 32px 0 rgba(19, 26, 44, .1)
|
||||
}
|
||||
|
||||
.text-right h3 {
|
||||
padding: 0 0 0 30px;
|
||||
color: #2660fd;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (max-width:860px) {
|
||||
.text-right {
|
||||
width: 100%
|
||||
}
|
||||
.left-picture {
|
||||
width: 100%;
|
||||
float: right;
|
||||
margin-top: 10px
|
||||
}
|
||||
.left-picture-panel {
|
||||
width: 100%;
|
||||
float: right
|
||||
}
|
||||
}
|
||||
|
||||
.text-right a {
|
||||
font-size: 14px;
|
||||
background-color: #059ced;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
border-radius: .3rem;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color .3s;
|
||||
margin: 15px 0 0 30px;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, .04)
|
||||
}
|
||||
|
||||
.text-right a:hover {
|
||||
background-color: #a32121
|
||||
}
|
||||
|
||||
@media screen and (max-width:860px) {
|
||||
.text-left {
|
||||
width: 100%
|
||||
}
|
||||
.right-picture {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-top: 10px
|
||||
}
|
||||
.text-right h3 {
|
||||
padding: 0
|
||||
}
|
||||
.text-right h4 {
|
||||
padding: 0
|
||||
}
|
||||
.text-right a {
|
||||
margin: 15px 0 0
|
||||
}
|
||||
.text-right p {
|
||||
padding: 0
|
||||
}
|
||||
}
|
||||
|
||||
.testimonials {
|
||||
background: #ebebec;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.testimonials h1 {
|
||||
display: inline-block;
|
||||
border-bottom: 3px solid #2660fd;
|
||||
font-size: 20px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.testimonials p {
|
||||
font-size: 13px;
|
||||
padding: 15px 0
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 33.33%;
|
||||
max-width: 33.33%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin: 0 -2px
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
transition: .4s;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 42px 64px 0 #e7e7ec;
|
||||
}
|
||||
|
||||
.testimonial img:hover {
|
||||
transform: scale(1.1) rotate(3deg);
|
||||
border-radius: 10px
|
||||
}
|
||||
|
||||
.testimonial img {
|
||||
width: 75px;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, .04);
|
||||
height: 75px;
|
||||
float: right;
|
||||
border-radius: 10px;
|
||||
transition: transform .4s ease-in-out
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin: 2px 0 0;
|
||||
color: #2660fd;
|
||||
}
|
||||
|
||||
.pricing {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.stars {
|
||||
color: #059ced
|
||||
}
|
||||
|
||||
.cen {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.testimonial li {
|
||||
list-style-type: none;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
float: none
|
||||
}
|
||||
|
||||
.testimonial i {
|
||||
margin-right: .2em;
|
||||
color: #2660fd;
|
||||
}
|
||||
|
||||
.testimonial a {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background-color: #2660fd;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: 10px 25px;
|
||||
border-radius: 5px;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color .3s;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.testimonial a:hover {
|
||||
background-color: #4070f1;
|
||||
}
|
||||
|
||||
.strong1 {
|
||||
color: #366af8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media screen and (max-width:1100px) {
|
||||
.col {
|
||||
flex: 50%;
|
||||
max-width: 48%
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:860px) {
|
||||
.col {
|
||||
flex: 100%;
|
||||
max-width: 90%
|
||||
}
|
||||
}
|
||||
|
||||
.fas.fa-globe-americas {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.fas.fa-star {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 70px;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, .04)
|
||||
}
|
||||
|
||||
nav img {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
top: 12px;
|
||||
left: 6%
|
||||
}
|
||||
|
||||
nav ul {
|
||||
float: right;
|
||||
margin-right: 6%;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
line-height: 70px;
|
||||
margin: 0 6px
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
transition: color .3s
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: #0860c2
|
||||
}
|
||||
|
||||
label #btn,
|
||||
label #cancel {
|
||||
font-size: 30px;
|
||||
color: #000;
|
||||
float: right;
|
||||
line-height: 70px;
|
||||
margin-right: 40px;
|
||||
cursor: pointer;
|
||||
display: none
|
||||
}
|
||||
|
||||
#check {
|
||||
display: none
|
||||
}
|
||||
|
||||
@media(max-width:1118px) {
|
||||
nav img {
|
||||
left: 8%
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:944px) {
|
||||
nav img {
|
||||
width: 130px;
|
||||
top: 20px;
|
||||
left: 6%
|
||||
}
|
||||
nav ul li a {
|
||||
font-size: 17px
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:860px) {
|
||||
label #btn {
|
||||
display: block
|
||||
}
|
||||
ul {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
top: 60px;
|
||||
left: -100%;
|
||||
text-align: center;
|
||||
transition: all .5s
|
||||
}
|
||||
nav ul li {
|
||||
display: block;
|
||||
margin: 50px 0;
|
||||
line-height: 30px
|
||||
}
|
||||
nav ul li a {
|
||||
font-size: 20px
|
||||
}
|
||||
#check:checked~ul {
|
||||
left: 0
|
||||
}
|
||||
#check:checked~label #btn {
|
||||
display: none
|
||||
}
|
||||
#check:checked~label #cancel {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.footer-basic-centered {
|
||||
background-color: #2660fd;
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.footer-basic-centered .footer-company-name {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-basic-centered img {
|
||||
max-width: 220px;
|
||||
transition: .4s;
|
||||
margin: 0 0 15px
|
||||
}
|
||||
|
||||
.footer-basic-centered .footer-company-name a {
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 1px
|
||||
}
|
||||
|
||||
.footer-basic-centered img:hover {
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
.footer-basic-centered .footer-links {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
letter-spacing: .2px;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
.footer-basic-centered .footer-links a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
font-size: 16px;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.footer-basic-centered .footer-links a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
@media(max-width:600px) {
|
||||
.footer-basic-centered {
|
||||
padding: 35px
|
||||
}
|
||||
.footer-basic-centered .footer-company-motto {
|
||||
font-size: 18px
|
||||
}
|
||||
.footer-basic-centered .footer-company-name {
|
||||
font-size: 12px
|
||||
}
|
||||
.footer-basic-centered .footer-links {
|
||||
font-size: 14px;
|
||||
margin: 0 12px 0 0
|
||||
}
|
||||
.footer-basic-centered .footer-links a {
|
||||
line-height: 1.8
|
||||
}
|
||||
}
|
||||
|
||||
.score h2 {
|
||||
color: #2660fd;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.score p {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.mcadbanner {
|
||||
width: 48%;
|
||||
border-radius: 15px;
|
||||
max-width: 48%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media(max-width:1100px) {
|
||||
.mcadbanner {
|
||||
width: 46%;
|
||||
max-width: 46%
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:860px) {
|
||||
.mcadbanner {
|
||||
width: 87%;
|
||||
max-width: 87%
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:1100px) {
|
||||
.page-content {
|
||||
padding: 20px
|
||||
}
|
||||
}
|
||||
|
||||
.advtag {
|
||||
border: 2px solid #2660fd;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
padding: 12px 10px;
|
||||
margin-top: 15px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 50%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.specsinfo{
|
||||
display: inline-block;
|
||||
width: calc(100% / 3);
|
||||
margin: 0 -2px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: 0.4s;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.specsinfo li{
|
||||
list-style-type: none;
|
||||
margin-top: 3px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.col1{
|
||||
flex: 33.33%;
|
||||
max-width: 33.33%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.specsinfo:hover{
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04)
|
||||
}
|
||||
|
||||
.specsinfo i{
|
||||
color: #2E90F9;
|
||||
margin-right: .5em;
|
||||
}
|
||||
.specsinfo h2{
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #2660fd;
|
||||
}
|
||||
.specsinfo h3{
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.specsinfo p{
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.specsinfo img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
|
||||
.specsinfo a {
|
||||
font-size: 16px;
|
||||
background-color: #2E90F9;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
border-radius: .3rem;
|
||||
margin-top: 15px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
letter-spacing: 1.2px;
|
||||
}
|
||||
|
||||
.specsinfo a:hover {
|
||||
background-color: #0860C2;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.specsinfo{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.specsinfo{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.specs{
|
||||
background: #f8f9fa;
|
||||
text-align: center;
|
||||
}
|
||||
.specs h1{
|
||||
display: inline-block;
|
||||
border-bottom: 3px solid #2660fd;
|
||||
font-size: 20px;
|
||||
padding-bottom: 5px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue