Jump to content

Fi2
 Share

Recommended Posts

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...