Skip to content

Commit

Permalink
Improved Overall Styling of Pages
Browse files Browse the repository at this point in the history
  • Loading branch information
aslams2020 committed Jul 7, 2024
1 parent 49455a6 commit 6ab8caa
Showing 1 changed file with 213 additions and 50 deletions.
263 changes: 213 additions & 50 deletions tnc.css
Original file line number Diff line number Diff line change
@@ -1,57 +1,220 @@
body {
font-family: 'Lato', sans-serif;
background-color: #0e1525;
color: #ffffff;
margin: 0;
padding: 0;
}
@font-face {
font-family: Aller;
src: url("../fonts/aller/aller_bd.eot");
/* IE9 Compat Modes */
src: url("../fonts/aller/aller_bd.eot?#iefix") format("embedded-opentype"), url("../fonts/aller/aller_bd.woff") format("woff"), url("../fonts/aller/aller_bd.ttf") format("truetype"), url("../fonts/aller/aller_bd.svg#svgFontName") format("svg");
/* Legacy iOS */
font-weight: bold;
font-style: normal; }

.header-gradient, .header {
background: #4a90e2;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #4a90e2, #d56fa1);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #4a90e2, #d56fa1);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #4a90e2, #d56fa1);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #4a90e2, #d56fa1);
/* Standard syntax */ }

.header {
padding: 40px 0;
margin-bottom: 40px; }
.header .logo {
margin: 40px 0; }
.header .title {
margin-top: 0;
font-family: Lato;
font-weight: lighter;
font-style: italic;
color: white; }
.header .subtitle {
font-family: Lato;
font-size: 20px;
color: white;
margin-bottom: 30px; }
.header .store-button {
max-width: 45%;
height: auto; }

@media (min-width: 768px) and (max-width: 991px) {
.header .logo {
margin-top: 80px; } }

.footer-gradient, .footer {
background: #4a90e2;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#4a90e2, #6e7fd8);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#4a90e2, #6e7fd8);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#4a90e2, #6e7fd8);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#4a90e2, #6e7fd8);
/* Standard syntax */ }

.footer {
padding: 40px 10px; }
.footer .footer-logo-container img {
margin-bottom: 30px; }
.footer .title {
color: white;
font-family: Lato;
font-style: italic;
font-weight: lighter; }
.footer .link-container .links {
color: white;
font-family: Lato;
font-size: 20px; }
.footer .link-container .links.transparent {
opacity: 0.6; }
.footer .copyright {
margin-top: 20px;
color: white;
font-family: Lato;
font-size: 15px;
opacity: 0.6; }
.footer .copyright:last-child {
margin-top: 0; }

@media (max-width: 767px) {
.footer {
border-radius: 0; } }

#terms-and-conditions .terms-and-conditions-section {
margin: 10px 0; }
#terms-and-conditions .terms-and-conditions-section.grey {
background-color: #f8f8fb; }
#terms-and-conditions .terms-and-conditions-section {
color: #979797; }

#about .about-section {
margin: 10px 0; }
#about .about-section.grey {
background-color: #f8f8fb; }

#about .text-section {
margin-top: 30px;
margin-bottom: 100px; }

.how-to-section {
margin: 10px 0;
padding: 20px 0; }
.how-to-section.grey {
background-color: #f8f8fb; }

.text-wrapper {
height: 400px;
position: relative; }
.text-wrapper .section-text {
position: absolute;
top: 40%;
height: 100px;
margin-top: -50px; }


.logo {
width: 130px;
border-radius: 6px;
margin-top: 20px;
margin-left: 20px;
}
.subtext {
font-family: Lato;
font-size: 18px;
color: #919191; }

.how-to-image {
height: 400px;
max-width: 100%; }

@media (max-width: 767px) {
.text-wrapper {
height: auto;
position: static; }
.text-wrapper .section-text {
position: static;
height: auto;
margin-top: 0; }
.how-to-image {
height: 200px; } }

.container.terms-container {
max-width: 70%;
margin: 0 auto;
padding: 20px;
background-color: #0e1525;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.container-fluid .logo {
width: 130px;
border-radius: 6px;
margin-top: 20px;
margin-left: 20px;
}

.container.terms-container {
max-width: 70%;
margin: 0 auto;
padding: 20px;
background-color: #0e1525;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.title {
font-size: 3.5em;
color: #2d7dff;
margin-bottom: 20px;
}

.section-title {
font-size: 2em;
color: #0dcaf0;
margin-top: 20px;
}

.content p {
font-size: 1.2em;
line-height: 1.6;
color: #f0f0f0;
margin-bottom: 20px;
}

@media (max-width: 768px) {
.title {
font-size: 2em;
.video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
opacity: 0.3;
}

.section-title {
font-size: 1.5em;
}

.container-fluid .title {
font-size: 4.3em;
color: #0d94ba;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 20px;
font-weight: 700;

.content p {
font-size: 1em;
}
}
}

.container-fluid .section-title {
font-size: 2em;
color: #0dcaf0;
margin-top: 20px;
}

.container-fluid .content p {
font-size: 1.2em;
line-height: 1.6;
color: #f0f0f0;
margin-bottom: 20px;
}
.text-center hr {
width: 50%;
color: #d56fa1;
opacity: 0.3;
}

@media (max-width: 768px) {
.container-fluid .title {
font-size: 2em;
}

.container-fluid .section-title {
font-size: 1.5em;
}

.container-fluid .content p {
font-size: 1em;
}
}

body {
font-family: 'Lato', sans-serif;
/* background-color: #0e1525; */
background: linear-gradient(to top, #080f21, #06255b);
color: #ffffff;
margin: 0;
padding: 0;
}
.copyright-footer {
display: flex;
justify-content: center;
margin-top: 25px;
font-size: 17px;
color: rgb(185, 185, 185);
}

0 comments on commit 6ab8caa

Please sign in to comment.