From 6ab8caadb8f572de3c9abc9f9160a7288faa0f18 Mon Sep 17 00:00:00 2001 From: Sayyad Aslam Date: Sun, 7 Jul 2024 13:14:23 +0530 Subject: [PATCH] Improved Overall Styling of Pages --- tnc.css | 263 +++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 213 insertions(+), 50 deletions(-) diff --git a/tnc.css b/tnc.css index 195fce5a..52299225 100644 --- a/tnc.css +++ b/tnc.css @@ -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); + } \ No newline at end of file