Jump to content

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...