Question

Create a mockup of your web application that will display a list of favorites. Remember, this can be a list of any favorite items, such as books, movies, restaurants, music, and so on. Your web application should contain at least 3 pages (HTML documents). Your mockup should contain mockups of each HTML document. You should follow a similar format as the sample mockup provided here. Your 5-6-page document should include the following: A description of the site's organizational structure. A description of each page that you'd like to add to the site and its specifications, including color schemes, the size of logos and images, and the fonts being used. Create your first home page. Your home page must include the following elements:

At least 1 heading.

At least 2 paragraphs.

Answer 1

Html:

<div class="navbar-wrapper">

<div class="container-fluid">

<nav class="navbar navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

<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="#">Logo</a>

</div>

<div id="navbar" class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#" class="">Music</a></li>

<li>

<a href="#" role="button" aria-haspopup="true" aria-expanded="false">Audio<span></span></a>

</li>

  

<li ><a href="#" role="button" aria-haspopup="true" aria-expanded="false">restaurants</a>

  

</li>

</ul>

<ul class="nav navbar-nav pull-right">

<li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Signed in as <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">Change Password</a></li>

<li><a href="#">My Profile</a></li>

</ul>

</li>

<li class=""><a href="#">Logout</a></li>

</ul>

</div>

</div>

</nav>

</div>

</div>

<!-- ================ INICIA FORMULARIO DE LOGIN ============================================================== -->

<div class="container">

  

<div class="row" style="margin-top:60px">

<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">

<form role="form">

<fieldset>

<h2>Please Sign In</h2>

<hr class="colorgraph">

<div class="form-group">

<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address">

</div>

<div class="form-group">

<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">

</div>

<span class="button-checkbox">

<button type="button" class="btn" data-color="info">Remember Me</button>

<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">

<a href="" class="btn btn-link pull-right">Forgot Password?</a>

</span>

<hr class="colorgraph">

<div class="row">

<div class="col-xs-6 col-sm-6 col-md-6">

<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In">

</div>

<div class="col-xs-6 col-sm-6 col-md-6">

<a href="" class="btn btn-lg btn-primary btn-block">Register</a>

</div>

</div>

</fieldset>

</form>

</div>

</div>

</div>

CSS:

body{
background: #fff;
}
.navbar, .dropdown-menu{
background:#09ba32;
border: none;

}

.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: rgba(154, 154, 154, 0.27);
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}

.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #b6f423 4px solid;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #82e2ea 4px solid;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #f8b42c 4px solid;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #fd594a 4px solid;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #e8479d 4px solid;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #a12eeb 4px solid;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #4785d9 4px solid;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #2aed9a 4px solid;
}

.navbar-toggle .icon-bar{
color: #fff;
background: #000000;
}

/* Credit to bootsnipp.com for the css for the color graph
ESTO SOLO ES PARA EL FORMULARIO DE LOGIN
*/
.colorgraph {
height: 5px;
border-top: 0;
background: #c4e17f;
border-radius: 5px;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

Output: