Hi, I\'m currently finished with my web project, but is there a way I can make t
ID: 3830036 • Letter: H
Question
Hi, I'm currently finished with my web project, but is there a way I can make the grid system containing the words "Games", "Fun", and "Awesomeness" a little more professional. I have both my html and css code provided. Thanks.
<!--html-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>LeavinesGameWeb</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">News
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PlayStation 4</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">Nintendo Switch</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Nintendo 3DS/2DS</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Events
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Game Nights</a></li>
<li><a href="#">Tournaments</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Content
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Articles</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Twitch</a></li>
<li><a href="#">Beam</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Store
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PlayStation 4</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">Nintendo Switch</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Nintendo 3DS/2DS</a></li>
<li><a href="#">Merchandise</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Reviews
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PlayStation 4</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">Nintendo Switch</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Nintendo 3DS/2DS</a></li>
</ul>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span></span>Apply Today</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span></span>Sign in</a></li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-8 text-left">
<img src="img/WebGame.png" width = "1570" height ="350"
<p></p>
<p><font size="6">Ward's Gaming Website!</font></p>
<p>This website is dedicated to bringing the latest news and entertainment in gaming 24/7. Not only just that, but we are also
committed into hosting gamenights that are held every Friday 8:00 pm CST and annual tournaments every summer. If you want
to apply and be part of our great community, feel free to do so by clicking the "Apply Today" link on the top right, or if you are
already a member, feel free to Sign in. Have fun! </p>
<div class="row">
<div class="col-md-1">Games</div>
<div class="col-md-1">Fun</div>
<div class="col-md-1">Awesomeness</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>© 2017 Ward Leavines</p>
</footer>
</body>
</html>
/*CSS*/
<!DOCTYPE html>
<html lang="en">
<head>
<title>LeavinesGameWeb</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">News
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PlayStation 4</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">Nintendo Switch</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Nintendo 3DS/2DS</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Events
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Game Nights</a></li>
<li><a href="#">Tournaments</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Content
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Articles</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Twitch</a></li>
<li><a href="#">Beam</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Store
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PlayStation 4</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">Nintendo Switch</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Nintendo 3DS/2DS</a></li>
<li><a href="#">Merchandise</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Reviews
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PlayStation 4</a></li>
<li><a href="#">Xbox One</a></li>
<li><a href="#">Nintendo Switch</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Nintendo 3DS/2DS</a></li>
</ul>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span></span>Apply Today</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span></span>Sign in</a></li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-8 text-left">
<img src="img/WebGame.png" width = "1570" height ="350"
<p></p>
<p><font size="6">Ward's Gaming Website!</font></p>
<p>This website is dedicated to bringing the latest news and entertainment in gaming 24/7. Not only just that, but we are also
committed into hosting gamenights that are held every Friday 8:00 pm CST and annual tournaments every summer. If you want
to apply and be part of our great community, feel free to do so by clicking the "Apply Today" link on the top right, or if you are
already a member, feel free to Sign in. Have fun! </p>
<div class="row">
<div class="col-md-1">Games</div>
<div class="col-md-1">Fun</div>
<div class="col-md-1">Awesomeness</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>© 2017 Ward Leavines</p>
</footer>
</body>
</html>
Explanation / Answer
In place of <div class="row">
<div class="col-md-1">Games</div>
<div class="col-md-1">Fun</div>
<div class="col-md-1">Awesomeness</div>
</div>
here there is no need to use div tag until the 3 are separate words,if they are separate just try this
this code try
div h3 {
color: gold;
background-color: blue
}
<div class="row" align="justify">
<div class="col-md-1"><h3>Games</h3></div>
<div class="col-md-1"><h3>Fun</h3></div>
<div class="col-md-1"><h3>Awesomeness</h3></div>
</div>
it is better if these are made as buttons because they perform action on clicking them so if Games is declared as submit button then it moves to certain page ...
If it is a single sentence make it in a single div tag as
<div> <h3> Games Fun Awesomeness </h3> </div>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.