locked
NEED HELP PLEASE RRS feed

  • Question

  • User-527908287 posted

    Please, how do I add login textboxes and button on the navigation bar? and  what is the code for creating this attached image in the middle of my webpage and making it responsive. please find attached link to the image in order to know what I mean. Thank you in aniticipation.

    Donald Simons

    https://www.metacafe.com/galleries/63520/new-img/

    Monday, March 16, 2020 1:51 PM

Answers

  • User-1330468790 posted

    Hi, Donald416,

     

    Regarding the second requirement: 

    what is the code for creating this attached image in the middle of my webpage and making it responsive

     

    I suggest that you can build your page on the boostrap framework since it already has responsive, mobile first fluid grid system. In addition to the basic CSS, what you need to do is simply add your own preferred style sheet.

    More details, you can refer to below code.

    Markups:

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style type="text/css">
            .illustration {
                ;
                left: 0;
                width: 100%;
                top: -20%;
                z-index: 1;
            }
    
            .title {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
            }
    
            .desc {
                margin-bottom: 50px;
                margin-top: 12px;
                line-height: 1.7;
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-left col-z-index">
                        <h1 class="title">Fully coded UI Tools to create web apps</h1>
                        <h4 class="desc">UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                        </h4>
                    </div>
                    <div class="col-md-6">
                        <img src="./Images/illustration.jpg" class="illustration" />
                    </div>
                </div>
            </div>
        </form>
    </body>

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 17, 2020 5:42 AM

All replies

  • User475983607 posted

    The imagine link in your first post does not work. The title "NEED HELP PLEASE" is not descriptive. 

    I did a Google search and came up with this source code - first link...

    https://www.w3schools.com/howto/howto_css_login_form_navbar.asp

    Second link

    https://www.codeply.com/go/XefCTinzkY/bootstrap-4-navbar-with-login-form

     

    Monday, March 16, 2020 2:09 PM
  • User-1330468790 posted

    Hi, Donald416,

     

    Regarding the second requirement: 

    what is the code for creating this attached image in the middle of my webpage and making it responsive

     

    I suggest that you can build your page on the boostrap framework since it already has responsive, mobile first fluid grid system. In addition to the basic CSS, what you need to do is simply add your own preferred style sheet.

    More details, you can refer to below code.

    Markups:

    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style type="text/css">
            .illustration {
                ;
                left: 0;
                width: 100%;
                top: -20%;
                z-index: 1;
            }
    
            .title {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
            }
    
            .desc {
                margin-bottom: 50px;
                margin-top: 12px;
                line-height: 1.7;
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-left col-z-index">
                        <h1 class="title">Fully coded UI Tools to create web apps</h1>
                        <h4 class="desc">UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                        </h4>
                    </div>
                    <div class="col-md-6">
                        <img src="./Images/illustration.jpg" class="illustration" />
                    </div>
                </div>
            </div>
        </form>
    </body>

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 17, 2020 5:42 AM
  • User-527908287 posted

    Hello sean,

    Thank you very much. I really appreciate your help. It has really gone a long in helping me with my project work. However I encountered another issue as i tried to add two more of the same image code and write-ups, but it appeared that the image of the first class="row" seem to cover the top writings of the second row when the window is minimized, and the same happens in the second to third row. Please how do I overcome this as I have increased and decreased the height of the images and still get the same result. Also when I adjust the margin-top of the second row,  it gives a huge space between the first row and the second, which does not look good. 

    Finallly, How do I make my display information labels to align well when they are displayed on the screen?

    Here are the codes for the two major issues I am encountering in building my very first web project:

    CODE FOR THE FIRST ISSUE

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Homepage.aspx.cs" Inherits="Homepage" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Joscheck Home</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- 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.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .joscheck1 {
                ;
                left: 0;
                width: 100%;
                top: -20%;
                z-index: 1;
            }
    
            .title {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
    
            .desc {
                margin-bottom: 50px;
                margin-top: 12px;
                line-height: 1.7;
            }
            .joscheck2 {
                ;
                left: 0;
                width: 100%;
                top: -20%;
                z-index: 1;
            }
            .joscheck3 {
                ;
                left: 0;
                width: 100%;
                top: -20%;
                z-index: 1;
            }
    
        </style>
    
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
        <div>
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                   <a class="navbar-brand" style="color: white">JOSCHECK</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
                        <li><a href="About - 2.aspx" style="color: #FFFFFF">About Us</a></li>
                        <li><a href="#" style="color: #FFFFFF">Services</a></li>
                        <li><a href="Login.aspx"style="color: #FFFFFF">Sign Up</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
                <div class="jumbotron" style="margin-top:0%; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:160px;">
                    <div class="container">
                   <br /><br /> <h1 style="color: red; margin-top:-3%; font-size: large; font-family: Co Headline Corp">For Cars, Phones, Bar Code & QR Code Scan Verification</h1>               
                </div>
                    </div>      
               <div class="jumbotron" style="margin-top: -8%; background-image: url('images/homeimg.jpg'); height: 350px; background-size: 100% 100%;">
                   <div class="form-horizontal col-md-6" style="margin-right:0%;">
                    <h1 style="font-size:x-large; font-family: Co Headline Corp; margin-top:-4%; color:red;">Login</h1><hr style="color:#200662";/><br />
                       <div class="form-group">
                           <div class="col-xs-11">
                               <asp:Label ID="Label1" ForeColor="White" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="USERNAME"></asp:Label>
                               <div class="col-md-3">
                                   <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Username"></asp:TextBox>
                               </div>
                           </div>
                       </div>
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label2" ForeColor="White" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="PASSWORD"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                        <div class="col-md-6">
                            <asp:Button ID="Button1" runat="server" Width="300" Text="Login" Font-Size="larger" Class="btn btn-success" OnClick="Button1_Click" />
                            <br />
                            <asp:Label ID="Label7" runat="server"></asp:Label>
                        </div>
                    </div>
                </div>               
                   </div>
            <!--middle content-->
              <div class="container" style="margin-top:4%;">
                <div class="row">
                    <div class="col-md-6 text-left col-z-index">
                        <h1 class="title" style="font-size:medium; color:red; font-family:Co Headline Corp;">GET YOUR CAR(S) FULLY VERIFIED</h1>
                        <h4 class="desc" style="font-size:small; font-family:Lucida Sans Unicode"> Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                        </h4>
                    </div>
                    <div class="col-md-6" style="margin-top:3%;">
                        <img src="images/joscheck.jpg" class="joscheck1"/>
                    </div>
                </div>
            </div>
            <!--middle content end-->
            <!--middle content2-->
              <div class="container" style="margin-top:4%;">
                <div class="row">
                    <div class="col-md-6 text-left col-z-index">
                        <h1 class="title" style="font-size:medium; color:red; font-family:Co Headline Corp;">GET YOUR PHONE(S) FULLY VERIFIED</h1>
                        <h4 class="desc" style="font-size:small; font-family:Lucida Sans Unicode"> Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                        </h4>
                    </div>
                    <div class="col-md-6" style="margin-top:3%;">
                        <img src="images/Toyota-2016-Lineup.png" class="joscheck2"/>
                    </div>
                </div>
            </div>
            <!--middle content2 end-->
            <!--middle content3-->
              <div class="container" style="margin-top:10%;">
                <div class="row">
                    <div class="col-md-6 text-left col-z-index">
                        <h1 class="title" style="font-size:medium; color:red; font-family:Co Headline Corp;">GET YOUR PRODUCT(S) FULLY VERIFIED</h1>
                        <h4 class="desc" style="font-size:small; font-family:Lucida Sans Unicode"> Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                        </h4>
                    </div>
                    <div class="col-md-6" style="margin-top:3%;">
                        <img src="images/joscheck.jpg" class="joscheck3"/>
                    </div>
                </div>
            </div>
            <!--middle content3 end-->
    
            <hr /><footer class="container" style="background-color:black; width:auto; height:210px; margin-top:50%;">
                    <p class="pull-right"><a href="#" style="color: red;">Back to Top</a></p>
                    <p style="color: white;"><a href="Homepage.aspx" style="color: red;">Home</a> &middot; <a href="About - 2.aspx" style="color: red;">About Us</a> &middot; <a href="#" style="color: red;">Contact</a> &middot</p>
                 <p class="pull-center" style="color: gray;">Contact Address: 10 Adetokunbo Ademola Cresent</p>
                <p class="pull-center" style="color: gray;">Wuse Zone 1 Abuja, F.C.T</p>
                <p class="pull-center" style="color: gray;">08138709222 08037445843 08023456781</p>
                 <asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebook.png" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
                 <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/images/twitter.png" NavigateUrl="http://www.microsoft.com">HyperLink</asp:HyperLink>
                <br /><br /><p class="pull-center">Copyright &copy; 2020 Joscheck Tech. All Rights Reserved.</p>
            </footer>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

    CODE FOR THE SECOND ISSUE

    n/B: This code on this web form is for displaying information, when data is inputted in the previous form

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Information.aspx.cs" Inherits="pretonator" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Joscheck Information</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- 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.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
        <div>
            <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="Homepage.aspx"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
                        <li><a href="About.aspx" style="color: #FFFFFF">About Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
           
            <div class="jumbotron" style="background:rgba(0, 0, 0, 0.3); background-color:#200662; border-radius:5px; width:1000px; height:800px; margin-left:auto; margin-top:0%; ;">
                <p class="auto-style2" style="margin-top:5%; margin-left:2%; color:red; font-size:x-large;">WARNING!! This Property has been Reported stolen; Check Details Below</p><hr />
                   
                <div class="form-group">
                    <div class="col-xs-11">
                        <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                            <asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Vehicle Inspection Number:"></asp:Label>
                        </p>
                        <div class="col-md-3">
                            <p class="auto-style2" style="margin-top: 3%; margin-left:10%; color: white;">
                                <asp:Label ID="Label4" runat="server" Font-Bold="true" CssClass="control-label"></asp:Label>
                            </p>
                        </div>
    
                    </div>
                </div>
                    
                <div class="form-group">
                    <div class="col-xs-11">
                        <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                            <asp:Label ID="Label2" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Full Name:"></asp:Label>
                        </p>
                        <div class="col-md-3">
                            <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                                <asp:Label ID="Label5" runat="server" Font-Bold="true" CssClass=" control-label"></asp:Label>
                            </p>
                        </div>
    
                    </div>
                </div>
    
                 <div class="form-group">
                    <div class="col-xs-11">
                        <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                            <asp:Label ID="Label3" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Phone Number:"></asp:Label>
                        </p>
                        <div class="col-md-3">
                            <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                                <asp:Label ID="Label6" runat="server" Font-Bold="true" CssClass=" control-label"></asp:Label>
                            </p>
                        </div>
    
                    </div>
                </div>
    
               <div class="form-group">
                    <div class="col-xs-11">
                        <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                            <asp:Label ID="Label7" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Type of Vehicle:"></asp:Label>
                        </p>
                        <div class="col-md-3">
                            <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                                <asp:Label ID="Label8" runat="server" Font-Bold="true" CssClass=" control-label"></asp:Label>
                            </p>
                        </div>
    
                    </div>
                </div>
    
                <div class="form-group">
                    <div class="col-xs-11">
                        <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                            <asp:Label ID="Label9" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Date Stolen:"></asp:Label>
                        </p>
                        <div class="col-md-3">
                            <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                                <asp:Label ID="Label10" runat="server" Font-Bold="true" CssClass=" control-label"></asp:Label>
                            </p>
                        </div>
    
                    </div>
                </div>
    
                 <div class="form-group">
                    <div class="col-xs-11">
                        <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                            <asp:Label ID="Label11" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Stolen Location:"></asp:Label>
                        </p>
                        <div class="col-md-3">
                            <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                                <asp:Label ID="Label12" runat="server" Font-Bold="true" CssClass=" control-label"></asp:Label>
                        </div>
    
                    </div>
                </div>
    
                <div class="form-group">
                    <div class="col-xs-11">
                            <p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: white;">
                                <asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
                            </p>
                        </div>
                </div>
    
                </div>
            
      <footer class="container navbar-fixed-bottom" style="background-color:black; width:auto; height:auto;">
                    <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p>
                    <p style="color: white;">Copyright &copy; 2018 Doxtrak Tech. All Rights Reserved. &middot; <a href="Homepage.aspx">Home</a> &middot; <a href="#">About Us</a> &middot; <a href="#">Contact</a> &middot</p>
            </footer>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    

    Tuesday, March 17, 2020 9:22 PM
  • User-1330468790 posted

    Hi, Donald416,

     

    The problem here is that you simply copy the style sheet I provided you.

    The initial purpose I provided the style sheet in yellow background is to illustrate that you can add your own CSS style.

     

    Solution:

    In your case, the best choice is to remove all style sheet for pictures like below

    .joscheck1 {
                ;
                left: 0;
                width: 100%;
                top: -20%;
                z-index: 1;
            }

    and add bootstrap class "img-fluid" which makes the images responsive.

    For example:

    <div class="container" style="margin-top: 10%" >
                <div class="row">
                    <div class="col-md-6 text-left col-z-index">
                        <h1 class="title" style="font-size: medium; color: red; font-family: Co Headline Corp;">GET YOUR CAR(S) FULLY VERIFIED</h1>
                        <h4 class="desc" style="font-size: small; font-family: Lucida Sans Unicode">Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                            UI Kits and Dashboards built on top of Bootstrap, Vue.js, React and Angular.
                        </h4>
                    </div>
                    <div class="col-md-6" style="margin-top: 3%;">
                        <img src="Images/illustration.jpg" class="img-fluid" />
                    </div>
                </div>
            </div>

      

    Again, here I suggest you remove all of the properties if you don't know what the functionality it is and then add it to your html element one by one once you are sure what will happen after the addition.

      

    Hope this can help you.

    Best regards,

    Sean

    Wednesday, March 18, 2020 9:18 AM