Worked on the blog single page

This commit is contained in:
Chukwumdiebube
2023-01-20 16:17:13 +01:00
parent 523235a196
commit 362324925b
5 changed files with 414 additions and 387 deletions
+92 -40
View File
@@ -3010,9 +3010,12 @@ header.fix_style.white_header {
.blog_detail_section .blog_inner_pannel .review span {
line-height: 1;
color: var(--purple);
display: inline-block;
font-weight: 700;
}
.blog_detail_section .blog_inner_pannel .review span:first-child {
/* .blog_detail_section .blog_inner_pannel .review span:first-child {
color: var(--purple);
display: inline-block;
font-weight: 700;
@@ -3024,7 +3027,7 @@ header.fix_style.white_header {
margin-left: 15px;
padding-left: 15px;
border-left: 1px solid var(--dark-purple);
}
} */
.blog_detail_section .blog_inner_pannel .section_title {
margin-bottom: 40px;
@@ -3043,29 +3046,29 @@ header.fix_style.white_header {
}
.blog_detail_section .blog_inner_pannel .info h3 {
font-weight: 700;
color: var(--dark-purple);
margin-top: 30px;
font-size: 25px;
margin-bottom: 15px;
font-weight: 700;
color: var(--dark-purple);
margin-top: 30px;
font-size: 25px;
margin-bottom: 15px;
}
/* To highlight the link in the terms section */
.blog_detail_section .blog_inner_pannel .info p span a{
color: var(--dark-purple);
text-decoration: underline;
.blog_detail_section .blog_inner_pannel .info p span a {
color: var(--dark-purple);
text-decoration: underline;
}
/* To reduce the fonts for sub-headers */
.blog_detail_section .blog_inner_pannel .info h4 {
font-weight: 700;
color: var(--dark-purple);
margin-top: 30px;
font-size: 20px;
margin-bottom: 15px;
}
font-weight: 700;
color: var(--dark-purple);
margin-top: 30px;
font-size: 20px;
margin-bottom: 15px;
}
/* To align the text for proper readability */
/* To align the text for proper readability */
.blog_detail_section .blog_inner_pannel .info p {
text-align: justify;
}
@@ -3526,39 +3529,71 @@ header.fix_style.white_header {
}
/* Textarea scrollbar */
.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar {
.contact_page_section
.contact_inner
.contact_form
form
.form-group
textarea::-webkit-scrollbar {
width: 12px;
cursor: pointer;
}
.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
.contact_page_section
.contact_inner
.contact_form
form
.form-group
textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: var(--light-bg);
}
.contact_page_section .contact_inner .contact_form form .form-group textarea::-webkit-scrollbar-thumb {
.contact_page_section
.contact_inner
.contact_form
form
.form-group
textarea::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-color: var(--body-text-purple);
}
.contact_page_section .contact_inner .contact_form form .form-group .contact_btn{
.contact_page_section
.contact_inner
.contact_form
form
.form-group
.contact_btn {
display: flex !important;
align-items: center;
justify-content: center;
}
.contact_page_section .contact_inner .contact_form form .form-group .contact_btn p{
.contact_page_section
.contact_inner
.contact_form
form
.form-group
.contact_btn
p {
margin: 0 !important;
}
.contact_page_section .contact_inner .contact_form form .form-group .contact_btn > span{
.contact_page_section
.contact_inner
.contact_form
form
.form-group
.contact_btn
> span {
width: 24px;
height: 24px;
}
#contact_body{
#contact_body {
min-height: 48rem;
display: flex;
flex-direction: column;
@@ -3567,7 +3602,7 @@ header.fix_style.white_header {
gap: 10px;
}
.contact_body{
.contact_body {
display: flex;
flex-direction: column;
align-content: center;
@@ -3598,28 +3633,44 @@ header.fix_style.white_header {
}
/* For the err msg */
#errText{
#errText {
text-align: center;
color: tomato;
font-weight: 600;
}
.contact_page_section .contact_inner .contact_form form .form-group span{
.contact_page_section .contact_inner .contact_form form .form-group span {
font-size: 12px;
color: tomato;
padding: 3px;
display: none;
}
.contact_page_section .contact_inner .contact_form form .form-group input:valid[focused="true"]{
.contact_page_section
.contact_inner
.contact_form
form
.form-group
input:valid[focused="true"] {
border: 1px solid var(--dark-purple);
}
.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"]{
.contact_page_section
.contact_inner
.contact_form
form
.form-group
input:invalid[focused="true"] {
border: 1px solid tomato;
}
.contact_page_section .contact_inner .contact_form form .form-group input:invalid[focused="true"] ~ span{
.contact_page_section
.contact_inner
.contact_form
form
.form-group
input:invalid[focused="true"]
~ span {
display: block;
}
@@ -4689,19 +4740,20 @@ header.fix_style.white_header {
/* Loader */
.loader{
.loader {
border-radius: 100%;
position: relative;
}
.loader-sm{
.loader-sm {
width: 24px;
height: 24px;
}
/* LOADER 1 */
#loader-1:before, #loader-1:after{
#loader-1:before,
#loader-1:after {
content: "";
position: absolute;
width: 100%;
@@ -4711,24 +4763,24 @@ header.fix_style.white_header {
border-top-color: var(--body-text-purple);
}
#loader-1:before{
#loader-1:before {
z-index: 100;
animation: spin 1.5s infinite;
}
#loader-1:after{
#loader-1:after {
border: 3.5px solid #ccc;
}
@keyframes spin{
0%{
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);