D
Donald Uko
Guest
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. Here is a bit of what I mean in picture; the code is bottom
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 »</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 »</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 »</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 »</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 © 2018 Doxtrak Tech. All Rights Reserved. · <a href="Homepage.aspx">Home</a> · <a href="#">About Us</a> · <a href="#">Contact</a> ·</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>
Continue reading...
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 »</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 »</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 »</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 »</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 © 2018 Doxtrak Tech. All Rights Reserved. · <a href="Homepage.aspx">Home</a> · <a href="#">About Us</a> · <a href="#">Contact</a> ·</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>
Continue reading...