Question backgroud:
I am attempting to make a simple ASP.NET MVC website with the use of Twitter bootstrap. I am using Microsoft VS2013 Express on an MVC project.
The issue:
I have downloaded a Bootstrap website which should look as follows:
Mine currently look like:
I so far done the following to no avail:
Deleted the contents of the _layout.cshtml page, added the Header and Footer of the Index.html Header and Footer of the 'MetroMan' theme I've downloaded.
2.Replaced the contents of the 'Scripts' folder with the contents of the Scripts folder of the MetroMan theme.
3.Created a 'Template' Folder under the 'Contents' Folder of the project. In this I have added the img, css, fonts folders and there respective contents from the MetroMan theme.
The _Layout.cshtml file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Title here -->
<title>MetroMan</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="stylesheet" href="css/settings.css" media="screen" />
<!-- Navigation menu -->
<link rel="stylesheet" href="css/ddlevelsmenu-base.css">
<link rel="stylesheet" href="css/ddlevelsmenu-topbar.css">
<!-- PrettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css">
<!-- cSlider -->
<link rel="stylesheet" href="css/slider.css">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
</head>
<body>
<!-- Sliding panel starts-->
<div class="slidepanel">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="spara">
<!-- Contact details -->
<p>
<i class="fa fa-envelope-o lightblue"></i> [email protected]
@*<i class="fa fa-twitter lightblue"></i> @something *@
<i class="fa fa-desktop lightblue"></i> 123-456-7890
</p>
</div>
</div>
<div class="col-md-4">
<div class="social">
<!-- Social media icons. Repalce # with your profile links -->
<a href="#" class="bblue"><i class="fa fa-facebook"></i></a>
<a href="#" class="borange"><i class="fa fa-google-plus"></i></a>
<a href="#" class="blightblue"><i class="fa fa-twitter"></i></a>
<a href="#" class="bviolet"><i class="fa fa-linkedin"></i></a>
<a href="#" class="bred"><i class="fa fa-pinterest"></i></a>
<a href="#" class="borange"><i class="fa fa-rss"></i></a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Sliding panel ends-->
<!-- Header starts -->
<header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<!-- Logo starts -->
<div class="logo">
<div class="logo-image">
<!-- Image link -->
<a href="index.html"><i class="fa fa-desktop blue"></i></a>
</div>
<div class="logo-text">
<h1><a href="index.html">Metro<span class="lightblue">Man</span></a></h1>
<div class="logo-meta">Cool Metro Theme</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Logo ends -->
</div>
<div class="col-md-9 col-sm-8">
<!-- Navbar starts -->
<div class="navi pull-right">
<div id="ddtopmenubar" class="mattblackmenu">
<!-- Main navigation -->
<!-- Use the background color class in anchor tag for colorful menu -->
<ul>
<li>
<a href="#" rel="ddsubmenu2" class="blightblue"> <i class="fa fa-home"></i> Home</a>
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="index.html">Revolution Slider</a></li>
<li><a href="index-parallax.html">Parallax Slider</a></li>
</ul>
</li>
<!-- Main navigation -->
<li>
<a href="#" rel="ddsubmenu2" class="bred"> <i class="fa fa-desktop"></i> Pages</a>
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="landingpage.html">Landing Page</a></li>
<li><a href="comingsoon.html">Coming Soon</a></li>
<li><a href="features2.html">Features</a></li>
<li><a href="service1.html">Service</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li>
<a href="#">Sub Navigation</a>
<ul>
<li><a href="#">Nav Level #3</a></li>
</ul>
</li>
</ul>
</li>
<!-- Main navigation -->
<li>
<a href="#" rel="ddsubmenu2" class="bviolet"> <i class="fa fa-tablet"></i> Pages</a>
<!-- Sub Navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="404.html">404</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="pricingtable.html">Pricing Table</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</li>
<li>
<a href="#" rel="ddsubmenu2" class="bgreen"> <i class="fa fa-comments"></i> Blog</a>
<!-- Sub navigation -->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="blog2.html">Blog #1</a></li>
<li><a href="blog1.html">Blog #2</a></li>
<li><a href="blogsingle.html">Blog Single</a></li>
</ul>
</li>
<li><a href="portfolio.html" class="borange"> <i class="fa fa-camera"></i> Portfolio</a></li>
<li><a href="contactus.html" class="bblue"> <i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
<div class="navis"></div>
<!-- Navbar ends -->
<div class="clearfix"></div>
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<!-- Header ends -->
@RenderBody()
<!-- Footer -->
<!-- Below area is for testimonial -->
<div class="foot blightblue">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- User icon -->
<span class="twitter-icon text-center"><i class="fa fa-user"></i></span>
<p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum dolor eget nisi <br />fermentum quis hendrerit magna vestibulum."</em></p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="widgets">
<div class="col-md-3">
<div class="fwidget">
<h4>Contact</h4>
<p>Nullam justo nunc, dignissim at convallis posuere, sodales eu orci. </p>
<hr />
<i class="fa fa-home"></i> 123, Some Area. Los Angeles, CA, 54321.
<hr />
<i class="fa fa-phone"></i> +239-3823-3434
<hr />
<i class="fa fa-envelope-o"></i> <a href="mailto:#">[email protected]</a>
<hr />
<div class="social">
<a href="#" class="bblue"><i class="fa fa-facebook"></i></a>
<a href="#" class="borange"><i class="fa fa-google-plus"></i></a>
<a href="#" class="blightblue"><i class="fa fa-twitter"></i></a>
<a href="#" class="bviolet"><i class="fa fa-linkedin"></i></a>
<a href="#" class="bred"><i class="fa fa-pinterest"></i></a>
<a href="#" class="borange"><i class="fa fa-rss"></i></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Categories</h4>
<ul>
<li><a href="#">Condimentum - Condimentum gravida</a></li>
<li><a href="#">Etiam at - Condimentum gravida</a></li>
<li><a href="#">Fusce vel - Condimentum gravida</a></li>
<li><a href="#">Vivamus - Condimentum gravida</a></li>
<li><a href="#">Pellentesque - Condimentum gravida</a></li>
<li><a href="#">Fusce vel - Condimentum gravida</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Subscribe</h4>
<p>Duis leo risus, condimentum ut posuere ac, vehicula luctus nunc. Quisque rhoncus, a sodales enim arcu quis turpis.</p>
<p>Enter you email to Subscribe</p>
<form class="form-inline" role="form">
<div class="input-group">
<input type="text" class="form-control" id="subscribe" placeholder="Subscribe...">
<span class="input-group-btn">
<button type="submit" class="btn btn-danger">Subscribe</button>
</span>
</div>
</form>
</div>
</div>
<div class="col-md-3">
<div class="fwidget">
<h4>Recent Posts</h4>
<ul>
<li><a href="#">Sed eu leo orci, condimentum gravida metus</a></li>
<li><a href="#">Etiam at nulla ipsum, in rhoncus purus</a></li>
<li><a href="#">Fusce vel magna faucibus felis dapibus facilisis</a></li>
<li><a href="#">Vivamus scelerisque dui in massa</a></li>
<li><a href="#">Pellentesque eget adipiscing dui semper</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copy">
<p>Copyright © <a href="#">Your Site</a> - <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contactus.html">Contact Us</a></p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</footer>
<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="fa fa-angle-up"></i></a></span>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<!-- prettyPhoto -->
<script src="js/jquery.prettyPhoto.js"></script>
<!-- isotope -->
<script src="js/jquery.isotope.js"></script>
<!-- Navigation menu -->
<script src="js/ddlevelsmenu.js"></script>
<!-- jQuery cSlider / Extra script for cslider -->
<script src="js/jquery.cslider.js"></script>
<script src="js/modernizr.custom.28468.js"></script>
<!-- Support -->
<script src="js/filter.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
<!-- This page JS -->
<script>
/* JS for SLIDER REVOLUTION */
jQuery(document).ready(function () {
jQuery('.tp-banner').revolution(
{
delay: 9000,
startheight: 500,
hideThumbs: 10,
navigationType: "none",
hideArrowsOnMobile: "on",
touchenabled: "on",
onHoverStop: "on",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
stopAtSlide: -1,
stopAfterLoops: -1,
shadow: 0,
fullWidth: "on",
fullScreen: "off"
});
});
</script>
</body>
</html>
