I changed a code template’s section id and class from "ourstory" to "privacy policy" and all the fonts and text placements cant be fixed.
The background was changed too. The code fails whenever,1) the picture changes, 2) I change the section id.
<section id="Privacy-Policy" class="Privacy-Policy">
<img src="assets/img/our-story-bg.png " class="story-bg" alt="" data-aos="fade-in" />
<div class="container-fluid" data-aos="fade-up">
<div class="row gy-4">
<div class="col-lg-8 offset-lg-2 offset-rg-2 splash-content">
<h2 data-aos="fade-up" data-aos-delay="200">Privacy Policy</h2>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>1. Information We Collect</h3>
<p>
We may collect various types of personal information, including but not limited to names, email addresses, and payment details, when you use our website. This information is collected through forms, cookies, and other technologies.
</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>2. Use of Information</h3>
<p>The information we collect is used to process orders, provide services, and enhance user experiences. We may also use this information to communicate with you, personalize content, and improve our website.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>3. Third-Party Sharing</h3>
<p>We may share your information with trusted third parties, such as partners and service providers, to facilitate our services. However, we do not sell or rent your personal information to third parties for marketing purposes.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>4. Cookies and Tracking Technologies</h3>
<p>Our website may use cookies and other tracking technologies to enhance user experiences. You can manage your cookie preferences through your browser settings.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>5. Security Measure</h3>
<p>We employ industry-standard security measures to protect your personal information from unauthorized access or disclosure. However, no method of transmission over the internet is entirely secure, and we cannot guarantee absolute security.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>6. User Choices</h3>
<p>You have the choice to opt-out of certain data collection and processing activities. Please refer to your browser settings and our website features for opt-out options.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>7. Access and Correction</h3>
<p>You have the right to access and correct your personal information. For inquiries or corrections, please contact us at [email protected].</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>8. Data Retention</h3>
<p>We retain your information for as long as necessary to fulfill the purposes outlined in this policy unless a longer retention period is required or permitted by law.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>9. Children's Privacy</h3>
<p>Our website is not intended for children under 6. We do not knowingly collect or maintain information from individuals under this age. If you are a parent or guardian and believe we have collected information from your child, please contact us.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>10. Policy Changes</h3>
<p>We may update this Privacy Policy periodically. Any changes will be effective immediately upon posting. Please check this page regularly for updates.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3>11. Contact Information</h3>
<p>For any privacy-related inquiries or concerns, please contact us at [email protected]. By using our website, you agree to the terms of this Privacy Policy. If you do not agree with the terms, please refrain from using our services.</p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3></h3>
<p></p>
</div>
</div>
</div>
<div class="row gy-4">
<div class="col-12 splash-desc">
<div class="splash-content">
<h3></h3>
<p></p>
</div>
</div>
</div>
</div>
</section>
I was supposed to get picture A the nice one. enter image description here But im getting this.enter image description here
This is the CSS
.why-ttracing {
--default-color: #ffffff;
--default-color-rgb: 255, 255, 255;
--background-color: #000000;
--background-color-rgb: 0, 0, 0;
position: relative;
padding-top: 160px;
}
.why-ttracing .splash-bg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 0;
}
.why-ttracing .splash-chair {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
z-index: 2;
}
.why-ttracing .splash-chair img{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
z-index: 2;
border-radius: 20px;
}
.why-ttracing .splash-desc {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
.why-ttracing .splash-content h2 {
color: #E2D18E;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: 2.25rem; /* 75% */
text-align: center;
position:relative;
z-index: 1;
}
.why-ttracing .splash-content h3 {
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 1.5rem; /* 100% */
text-transform: uppercase;
}
.why-ttracing .splash-content p {
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem; /* 150% */
}
.why-tt-content {
--default-color: #ffffff;
--default-color-rgb: 255, 255, 255;
--background-color: #000000;
--background-color-rgb: 0, 0, 0;
position: relative;
padding-top: 50px;
}
.why-tt-content .splash-bg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 0;
}
.why-tt-content .splash-desc {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
.why-tt-content .splash-content h2 {
color: #E2D18E;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: 2.25rem; /* 75% */
text-align: center;
position:relative;
z-index: 1;
}
.why-tt-content .splash-content h3 {
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 1.5rem; /* 100% */
text-transform: uppercase;
}
.why-tt-content .splash-content p {
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem; /* 150% */
}
.our-story {
--default-color: #ffffff;
--default-color-rgb: 255, 255, 255;
--background-color: #000000;
--background-color-rgb: 0, 0, 0;
position: relative;
}
.our-story .story-bg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 0;
}
.our-story .splash-desc {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 5rem;
position: relative;
z-index: 2;
}
.our-story .splash-content h2 {
color: #E2D18E;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: 2.25rem; /* 75% */
text-align: center;
position:relative;
z-index: 1;
}
.our-story .splash-content h3 {
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: 1.5rem; /* 100% */
text-transform: uppercase;
}
.our-story .splash-content p {
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem; /* 150% */
}
.why-tt-content .client-header h2 {
color: #E2D18E;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Poppins;
font-size: 3rem;
font-style: normal;
font-weight: 800;
line-height: 2.25rem; /* 75% */
text-align: center;
position:relative;
z-index: 1;
padding-bottom:5rem;
}
.why-tt-content .splash-review {
display: flex;
justify-content: left;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
.why-tt-content .splash-testimonial {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
position: relative;
z-index: 2;
padding-bottom: 2rem;
}
2
Answers
Based on your css there are many css rules containing .our-story. Your description says you replaced "ourstory" but I’m assuming you meant class="our-story" and replaced it with class="Privacy-Policy". First I would change class="Privacy-Policy" to class="privacy-policy", then replace all occurrences of .our-story in your css to .privacy-policy.
Good luck.
It seems like you replaced
.our-storyclass on.Privacy-Policy. Like @mediaguru said.Now you have to replace css selector on
.Privacy-Policytoo.to
And please write your CSS selectors in lowercase with hyphens.
Adhere to these rules: https://google.github.io/styleguide/htmlcssguide.html