locked
Need your help please RRS feed

  • Question

  • User-527908287 posted

    I am currently creating a website as an assignment in school, since I started this assignment I have been getting difficulties. However, I managed to overcome some; currently there is one particular issue that has been giving me headache and that is making my webpage responsive. Jumbotron and some other write-ups on the webpage appear not to cover the full width of the page when the windows screen is minimized. 

    Please help me overcome this thank you.

    <!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]-->
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png')">
        <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="#" style="color: #FFFFFF">About Us</a></li>
                        <li><a href="#" style="color: #FFFFFF">Contact</a></li>
                        <li><a href="SignIn.aspx"style="color: #FFFFFF">Login/Register</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
                <div class="jumbotron" style="margin-top:15px; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:200px;">
                    <div class="container">
                    <h1 style="color:#200662; margin-top:2px; font-size:xx-large">Welcome To JosCheck</h1>
                    <p>
                        <i style="color:black; font-size:large; font-style:normal">Your Home For Tracking Lost Cars and/or Phones</i></p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">See More &raquo;</a>
                     </p>
                </div>
                    </div>
            <div class="container-fluid">
               <div class="jumbotron" style="margin-top:0%; background-image: url('images/pexels-photo-1229861.jpeg'); height:250px; background-size:cover;">
                       <h1 style="color: red; font-size: x-large; font-family: Co Headline Corp">Best Tracking System!</h1>
                       <p>
                           <i style="color: white; font-family:St Ryde; font-size:large; font-style:normal">Search Our Vast Database To Verify That Vehicle Before You Buy</i>
                       </p>
                       <p>
                            <asp:TextBox ID="TextBox1" runat="server" Height="30px" Width="250"></asp:TextBox>
                           <a href="#" class="btn btn-primary"; role="button">Search</a>
                       </p>
                   
                   </div>
           </div>
            <div class="container">
                <div class="row">
                    <div class="section">
                        <div class="col-md-4">
                            <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">How It Works...</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
          <!-- Example row of columns -->
          <div class="row">
              <div class="section">
                  <div class="col-md-4">
                      <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Car Verification and Tracking</h2>
                      <hr />
                      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
                      <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
                  </div>
              </div>
    
            <div class="col-md-4">
              <h2 style="color:#200662; margin-top:0; font-size:larger; font-family:St Ryde;">Phone Verification and Tracking</h2><hr />
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
              <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
           </div>
            <div class="col-md-4">
              <h2 style="color:#200662; margin-top:0; font-size:larger; font-family:St Ryde;">Tracking System for Children and Homes Buglars</h2><hr />
              <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.  Ut fermentum justo sit amet risus.</p>
              <p><a class="btn btn-primary" href="#" role="button">Read More &raquo;</a></p>
            </div>
          </div>
            </div>
    
            <hr /><footer class="container" style="background-color:black; width:100%; 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>



    Friday, February 22, 2019 12:13 AM

All replies

  • User839733648 posted

    Hi Donald416,

    According to your description, I've tested your code on my side and it seems work well.

    You could see from the following screenshot.

    When I change the size of tha page, it will resize the displaying style.

    Jumbotron and some other write-ups on the webpage appear not to cover the full width of the page when the windows screen is minimized. 

    If possible, please provide more details about your issue like a screenshot so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    Friday, February 22, 2019 7:23 AM
  • User-527908287 posted

    Thank you for seeing and responding to my thread. Here is a bit of what i meant.

    https://vimeo.com/319121861

    I can't directly add screenshot like you did but please check the above link to have a view of what i meant. Thank you once again.

    Saturday, February 23, 2019 12:47 AM
  • User839733648 posted

    Hi Donald416,

    I've tested your code on Chrome/Edge/IE11, it all works well without reproducing your issue.

    I guess that maybe because of the version of your browser you use.

    Could you share which browser and which version you've used?

    Besides, you could try to add 

    overflow-x: hidden;

    to your page to see if it could fix the issue.

    Best Regards,

    Jenifer

    Monday, February 25, 2019 2:07 AM
  • User-2054057000 posted

    I can't directly add screenshot like you.

    You can add screen shots to https://imgur.com/ and then Insert/Edit image control here to add the link of that image.

    Monday, February 25, 2019 11:19 AM
  • User438705957 posted

    Turn on your developer tools by hitting F12 and see whats causing the jumbotron class to behave like that.
    Out of the box, it just works.
    It most likely has something to do with  css overflow  been set to scroll somewhere.

    Tuesday, February 26, 2019 1:21 AM
  • User-527908287 posted

    Thanks, its working well now. Please, if you can, again help me with this: I am trying to make two containers to be in the same row; one container for login details and the other for sign up details. I don't want to keep login on a different webpage; i want both login and sign up to be in one webpage. here is what i did and its not working as expected. its not responsive and the sign up container is not in the same row with login. My code is below, please check. Thank you in anticipation

     <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SignIn.aspx.cs" Inherits="SignIn" %>
    
    <!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 Login</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; font-family: Nunito;">
                                <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"><span><img alt="Logo" src="images/Un.png" height="40" width="90"/></span></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>
                                <li><a href="#" style="color: #FFFFFF">Contact</a></li>
                                <li><a href="SignIn.aspx" style="color: #FFFFFF">Login</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
     
            <div class="container">
                <h1 style="color: #200662; margin-top: 80px; font-family: Nunito; font-size: xx-large">JosCheck Login</h1>
                <p>
                    <i style="color: black; font-family:Co Headline Corp; font-size: large; font-style: normal">You Must Login to Have Access to Our Services</i>
                </p>
                 <hr />
            </div>
            <br />
            <br />
            <!--login start-->
            
                <div class="row" style="font-family:Co Headline Corp;">
                    <div class="container">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-xs-11">
                                <asp:Label ID="Label1" runat="server" 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" runat="server" class="text-note" 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 class="col-md-6">
                                <asp:Label ID="Label4" runat="server"></asp:Label>
                            </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" Class="btn btn-success" OnClick="Button1_Click" />
                            </div>
                        </div>
    
                        <div class="form-group">
                            <div class="col-md-2"></div>
                            <div class="col-md-6">
                                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Signup.aspx" Font-Names="Co Headline Corp" ForeColor="Red" Font-Bold="True">Don&#39;t Have an Account? Sign Up Now</asp:HyperLink>
                            </div>
                        </div>
                    </div>
                        </div>
                    <div class="container2">
                    <div class="jumbotron pull-right" style="background:rgba(0, 0, 0, 0.1); width:600px; height:400px; border-radius:10px; font-family:Co Headline Corp; margin-top: 1%; margin-right:50px;">
                        <h4 class="title" style="color:#200662; margin-top:0%;font-size:x-large; margin-left:20px;">Sign up for a free JosCheck account</h4>
                        <p style="font-size:large;margin-left:20px;">Enjoy up to date information on vehicle security.</p><hr />
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-xs-11">
                                    <asp:Label ID="Label3" runat="server" CssClass="col-md-2 control-label" Text="E-mail"></asp:Label>
                                    <div class="col-md-3">
                                        <asp:TextBox ID="TextBox1" CssClass="form-control" Width="300px" runat="server" placeholder="Email Address"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="col-xs-11">
                                    <asp:Label ID="Label5" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
                                    <div class="col-md-3">
                                        <asp:TextBox ID="TextBox2" CssClass="form-control" Width="300px" runat="server" placeholder="Choose Username"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-11">
                                    <asp:Label ID="Label6" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
                                    <div class="col-md-3">
                                        <asp:TextBox ID="TextBox3" 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 class="col-md-6">
                                    <asp:Button ID="Button2" runat="server" Width="300" Text="Sign Up" Class="btn btn-success" OnClick="Button1_Click" />
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
    
    
            <footer class="container" style="background-color:black; margin-top:20%; width:100%;">
                    <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>

    Wednesday, March 6, 2019 1:02 AM
  • User839733648 posted

    Hi Donald416,

    I've seen that you start a new thread about your issue and I've given some suggestions.

    Hope it will be helpful to you.

    Best Regards,

    Jenifer

    Wednesday, March 6, 2019 9:30 AM
  • User-527908287 posted

    Hello Jenifer Jiang,

    I really appreciate you helping me out, thank you. I'm grateful. I've seen the suggestions you gave me, however I think I'll prefer using this frontend. Please check out this code; I'm trying to make the container that contains the signup details to be in line (on the same row) with the "login" and to be responsive too. Thanks

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SignIn.aspx.cs" Inherits="SignIn" %>
    
    <!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 Login</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; font-family: Nunito;">
                                <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"><span><img alt="Logo" src="images/Un.png" height="40" width="90"/></span></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>
                                <li><a href="#" style="color: #FFFFFF">Contact</a></li>
                                <li><a href="SignIn.aspx" style="color: #FFFFFF">Login</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
     
            <div class="container">
                <h1 style="color: #200662; margin-top: 80px; font-family: Nunito; font-size: xx-large">JosCheck Login</h1>
                <p>
                    <i style="color: black; font-family:Co Headline Corp; font-size: large; font-style: normal">You Must Login to Have Access to Our Services</i>
                </p>
                 <hr />
            </div>
            <br />
            <br />
            <!--login start-->
            
                <div class="row" style="font-family:Co Headline Corp;">
                    <div class="container">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-xs-11">
                                <asp:Label ID="Label1" runat="server" 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" runat="server" class="text-note" 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 class="col-md-6">
                                <asp:Label ID="Label4" runat="server"></asp:Label>
                            </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" Class="btn btn-success" OnClick="Button1_Click" />
                            </div>
                        </div>
    
                        <div class="form-group">
                            <div class="col-md-2"></div>
                            <div class="col-md-6">
                                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Signup.aspx" Font-Names="Co Headline Corp" ForeColor="Red" Font-Bold="True">Don&#39;t Have an Account? Sign Up Now</asp:HyperLink>
                            </div>
                        </div>
                    </div>
                        </div>
                    <div class="container2">
                    <div class="jumbotron pull-right" style="background:rgba(0, 0, 0, 0.1); width:600px; height:400px; border-radius:10px; font-family:Co Headline Corp; margin-top: 1%; margin-right:50px;">
                        <h4 class="title" style="color:#200662; margin-top:0%;font-size:x-large; margin-left:20px;">Sign up for a free JosCheck account</h4>
                        <p style="font-size:large;margin-left:20px;">Enjoy up to date information on vehicle security.</p><hr />
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-xs-11">
                                    <asp:Label ID="Label3" runat="server" CssClass="col-md-2 control-label" Text="E-mail"></asp:Label>
                                    <div class="col-md-3">
                                        <asp:TextBox ID="TextBox1" CssClass="form-control" Width="300px" runat="server" placeholder="Email Address"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
    
                            <div class="form-group">
                                <div class="col-xs-11">
                                    <asp:Label ID="Label5" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
                                    <div class="col-md-3">
                                        <asp:TextBox ID="TextBox2" CssClass="form-control" Width="300px" runat="server" placeholder="Choose Username"></asp:TextBox>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-11">
                                    <asp:Label ID="Label6" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
                                    <div class="col-md-3">
                                        <asp:TextBox ID="TextBox3" 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 class="col-md-6">
                                    <asp:Button ID="Button2" runat="server" Width="300" Text="Sign Up" Class="btn btn-success" OnClick="Button1_Click" />
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
    
    
            <footer class="container" style="background-color:black; margin-top:20%; width:100%;">
                    <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>

    Wednesday, March 6, 2019 9:53 AM
  • User839733648 posted

    Hi Donald416,

    You could add grid class to the horizontal line.

    Please refer to below code.

    <!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 Login</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; font-family: Nunito;"> <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"><span> <img alt="Logo" src="images/Un.png" height="40" width="90" /></span></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> <li><a href="#" style="color: #FFFFFF">Contact</a></li> <li><a href="SignIn.aspx" style="color: #FFFFFF">Login</a></li> </ul> </div> </div> </div> </div> <div class="container"> <h1 style="color: #200662; margin-top: 80px; font-family: Nunito; font-size: xx-large">JosCheck Login</h1> <p> <i style="color: black; font-family: Co Headline Corp; font-size: large; font-style: normal">You Must Login to Have Access to Our Services</i> </p> <hr /> </div> <br /> <br /> <!--login start--> <div class="container"> <div class="form-horizontal col-md-6"> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label1" runat="server" 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" runat="server" class="text-note" 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 class="col-md-6"> <asp:Label ID="Label4" runat="server"></asp:Label> </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" Class="btn btn-success" /> </div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Signup.aspx" Font-Names="Co Headline Corp" ForeColor="Red" Font-Bold="True">Don&#39;t Have an Account? Sign Up Now</asp:HyperLink> </div> </div> </div> <div class="container"> <div class="form-horizontal col-md-6"> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label3" runat="server" CssClass="col-md-2 control-label" Text="E-mail"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="TextBox1" CssClass="form-control" Width="300px" runat="server" placeholder="Email Address"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label5" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Username"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="TextBox2" CssClass="form-control" Width="300px" runat="server" placeholder="Choose Username"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label6" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="TextBox3" 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 class="col-md-6"> <asp:Button ID="Button2" runat="server" Width="300" Text="Sign Up" Class="btn btn-success" /> </div> </div> </div> </div> </div> </div> <footer class="container navbar-fixed-bottom" style="background-color: black; margin-top: 20%; width: 100%;"> <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>

    result:

    Best Regards,

    Jenifer

    Thursday, March 7, 2019 2:47 AM
  • User-527908287 posted

    Hello Jennifer,

    Thank you. You have been a great help to me. It’s working well. May I please ask that you help me on a few other things. How can I add a vertical line to separate the login and sign up? And when the window is minimized the line will disappear or appear as horizontal between the login and sign up. Also the buttons for login and sign up appear not to align well with the textboxes.

    There are three more issues i am looking to resolve: there are:

    1. how do I make the background to sign up be a bit darker than login, still on the same page?
    2. Is there a way to make a textbox disappear when clicking on a button to display information required?
    3. I need a message box to appear when inserting information; the messagebox should should give me options to choose from(between going back to previous webpage or going on to the next page).

    Thank you in anticipation,

    Donald

    Tuesday, March 19, 2019 1:24 PM
  • User-527908287 posted

    How can I make something like this appear on the top of my webpage, just below the navigation bar?

    Tuesday, March 19, 2019 2:26 PM
  • User-527908287 posted

    Hi,<br>
    How can I insert an image in Jumbotron and make the image responsive? that is, when the window is minimized, the image will still display fully rather than showing half of it
    Wednesday, March 20, 2019 8:33 PM
  • User475983607 posted


    How can I insert an image in Jumbotron and make the image responsive? that is, when the window is minimized, the image will still display fully rather than showing half of it

    Unclear.  Can you post code that reproduces this issue?  Does the default Visual Studio project exhibit this behavior? Is so, please explain the steps to reproduce this behavior.

    Wednesday, March 20, 2019 9:48 PM