Views/Home/Index.cshtml

@{
  ViewBag.Title = "Index";
  Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
   .txtBlue
   {
    color  : blue;
   }

  
</style>
<div class="container">
  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <div class="text-center">
      <h1>
        MVC with Bootstrap</h1>
    </div>
    <div class="text-center txtBlue">
      <strong>This website is a work-in-progress demonstrating MVC and Bootstrap. Who says you can't teach
        an old dog?</strong></div>
  </div>
  <div class="col-sm-12">
    <div class="col-sm-3 well">
    <div class="text-center">
      <h3>
        <strong>Features</strong></h3>
        </div>
         <div class="panel-group" id="accordian">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title text-center">
                <a href="#collapse1" data-toggle="collapse" data-parent="accordian">
                  Examples <span class="caret"></span>
                </a>
              </h3>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
              <div class="panel-body">
                This dropdown list in the navbar has exercises in various Bootstrap techniques
              </div>
            </div>
          </div>
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title text-center">
                <a href="#collapse2" data-toggle="collapse" data-parent="accordian">
                  Snippets <span class="caret"></span>
                </a>
              </h3>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
              <div class="panel-body ">
                This dropdown list in the navbar has listings of the code used in this website
              </div>
            </div>
          </div>
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title text-center">
                <a href="#collapse3" data-toggle="collapse" data-parent="accordian">
                  Modals <span class="caret"></span>
                </a>
              </h3>
            </div>
            <div id="collapse3" class="panel-collapse collapse">
              <div class="panel-body ">
                Modals take care of Logging in, Registereing, Retrieving Log In info, and Contact Us.
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="col-sm-6 text-center">
      <div class="row">
       <a href="@Url.Action("Index", "Home", new { area = "AlbacoreComics" }, null)">
          <img src="@Url.Content("~/Images/AlbacoreLogo.JPG")"  class="center-block img-responsive" alt="AAA"  />
       </a>
      </div>
      <div class="row txtBlue">
        <p>
          This is a demonstration site of an online comic book store using MVC and Bootstrap</p>
      </div>

      
    </div>
    <div class="col-sm-3 well text-center">
      <div class="text-center">
        <h3><strong>Notes</strong></h3>
        <div class="text-left txtBlue">
          While the @Html.ActionLink("Register", "Register_modal", new { controller = "Snippets" }) modal
          correctly stacks over the @Html.ActionLink("Log In", "LogIn_modal", new { controller = "Snippets" }) modal, the 
          @Html.ActionLink("Forgot Log In", "ForgotLogIn_modal", new { controller = "Snippets" }) modal won't. 
          <br/><br />Fixed it! Turns out you need to code the Forgot modal after the Log In modal in 
          @Html.ActionLink("_Layout.cshtml", "Layout_cshtml", new { controller = "Snippets" }).
      </div>

    
    </div>
  </div>
</div>
</div>