Fi2 Posted July 12, 2020 Share Posted July 12, 2020 To make a simple information website for my partner's local chicken farm, I got one of those website builders where you're supposed to just upload a template and tweak the html/css a bit but now I think I have gotten way over my head on this one! I have messed with html and css some in the past, that's why I thought I could do this, but the template we love (because we don't have a lot of text) is built with/on bootstrap and I am not at all familiar with it! can't seem to find where to tweak to remove/replace the background images of the different sections of the template. I don't even know what question I should be asking right now (in technical terms) so I will just drop the code here and hope someone here will be kind enough to tell me what I need to do, and thanks in advance. To be clear, I am trying to replace the (building) images in the different containers/sections/backgrounds in the code below with our chicken images: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chozeq Farms</title> <!-- Strip http://www.templatemo.com/tm-482-strip --> <!-- load stylesheets --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style --> <link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style --> <link rel="stylesheet" href="custom.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div class="container tm-container"> <div class="row navbar-row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 navbar-container mynav"> <a href="javascript:void(0)" class="navbar-brand" id="go-to-top">Chozeq Farms</a> <nav class="navbar navbar-full"> <div class="collapse navbar-toggleable-md" id="tmNavbar"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#tm-section-1">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-2">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-3">Trainings</a> </li> <li class="nav-item"> <a class="nav-link" href="#tm-section-4">Contact</a> </li> </ul> </div> </nav> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar"> ☰ </button> </div> </div> <div class="tm-page-content"> <!-- #home --> <section id="tm-section-1" class="row tm-section"> <div class="tm-white-curve-left col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-6"> <div class="tm-white-curve-left-rec"></div> <div class="tm-white-curve-left-circle"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header blue-text">About Us</h2> <p> Chozeq Farms is involved in the production of poultry meat, eggs, and processed and packaged poultry. Our farm is located in a serene rural environment and we strive to operate the best practices of poultry farming in order to offer the highest quality meat to our customers. </p> </div> </div> <div class="tm-home-right col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-6"> </div> </section> <!-- #home --> <!-- #vision --> <section id="tm-section-2" class="row tm-section"> <div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6"> <img src="img/XXX.jpg" alt="Image" class="img-fluid tm-img"> </div> <div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-right-circle"></div> <div class="tm-white-curve-right-rec"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header red-text">Our Vision</h2> <p>To provide top-quality white meat and egg protein within the most environmentally scrupulous conditions.</p> </div> </div> </section> <!-- #services --> <!-- #mission --> <section id="tm-section-3" class="row tm-section"> <div class="tm-white-curve-left col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-left-rec"> </div> <div class="tm-white-curve-left-circle"> </div> <div class="tm-white-curve-text"> <h2 class="tm-section-header gray-text">Our Mission</h2> <p class="thin-font">To impact, in the first instance, the local poultry industry, and evolve into a national and regional player, and to become a dominant force in the industry.</p> </div> </div> <div class="tm-flex-center col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6"> <img src="img/XXX.jpg" alt="Image" class="img-fluid tm-img"> </div> </section> <!-- #about --> <!-- #contact --> <section id="tm-section-4" class="row tm-section"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5 col-xl-6 tm-contact-left"> </div> <div class="tm-white-curve-right col-xs-12 col-sm-6 col-md-6 col-lg-7 col-xl-6"> <div class="tm-white-curve-right-circle"></div> <div class="tm-white-curve-right-rec"></div> <div class="tm-white-curve-text"> <h2 class="tm-section-header green-text">Contact</h2> <p>We're available to take your orders and answer any of your enquires between the hours of 8:00 am to 5:00 pm (Monday - Friday) and 10:00 am to 4:00 pm (Saturday).</p> <h3 class="tm-section-subheader green-text">Our Address</h3> <address> Ibadan 200261, Oyo State-NG </address> <div class="contact-info-links-container"> <span class="green-text contact-info"> Tel: <a href="tel:+2348134865720" class="contact-info-link">+2348134865720</a></span> <span class="green-text contact-info"> Email: <a href="mailto:info@chozeqfarms.com" class="contact-info-link">info@chozeqfarms.com</a></span> </div> </div> </div> </section> <!-- #contact --> <!-- footer --> <footer class="row tm-footer"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <p class="text-xs-center tm-footer-text">Copyright © 2020 Chozeq Farms</p> </div> </footer> </div> </div> <!-- .container --> <!-- load JS files --> <script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) --> <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h --> <script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) --> <script src="js/jquery.singlePageNav.min.js"></script> <!-- Single Page Nav (https://github.com/ChrisWojcik/single-page-nav) --> <!-- Templatemo scripts --> <script> var bigNavbarHeight = 90; var smallNavbarHeight = 68; var navbarHeight = bigNavbarHeight; $(document).ready(function(){ var topOffset = 180; $(window).scroll(function(){ if($(this).scrollTop() > topOffset) { $(".navbar-container").addClass("sticky"); } else { $(".navbar-container").removeClass("sticky"); } }); /* Single page nav -----------------------------------------*/ if($(window).width() < 992) { navbarHeight = smallNavbarHeight; } $('#tmNavbar').singlePageNav({ 'currentClass' : "active", offset : navbarHeight }); /* Collapse menu after click http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click ----------------------------------------------------------------------------------------*/ $('#tmNavbar').on("click", "a", null, function () { $('#tmNavbar').collapse('hide'); }); // Handle nav offset upon window resize $(window).resize(function(){ if($(window).width() < 992) { navbarHeight = smallNavbarHeight; } else { navbarHeight = bigNavbarHeight; } $('#tmNavbar').singlePageNav({ 'currentClass' : "active", offset : navbarHeight }); }); /* Scroll to top http://stackoverflow.com/questions/5580350/jquery-cross-browser-scroll-to-top-with-animation --------------------------------------------------------------------------------------------------*/ $('#go-to-top').each(function(){ $(this).click(function(){ $('html,body').animate({ scrollTop: 0 }, 'slow'); return false; }); }); }); </script> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now