+ Start a Discussion
Btuitasi1Btuitasi1 

Error in Visualforce Page

Hey guys,
I am trying to create visualforce pages from existing HTML code I have. Here is my apex so far:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Login into the blah blah</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/overrides.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div id="perc-container">
    <div id="header">
      <div class="secondary-nav" style="background-color: #fff;"> 
        <div class="container">
          <div class="row">
            <div class="col-lg-12" style="background-color: white;"> 
                <button class="show-search">Search</button>
                <div class="global-search">
                    <form class="global-search-inner">
                    <input type="text" class="search-main"> 
                    <input type="submit" class="search-main-submit" value="" >
                    <span class="search-icon"></span> 
                    </form>
                                  
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                     <li><a href="#">Visit Us</a></li>
                </ul>
            </div>               
          </div>
        </div>
      </div>
      <div class="primary-nav">
        <div class="container">
          <div class="row">
            <div class="col-lg-12">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a href="#" class="mobile-search-btn hidden-lg"></a>
                  <a class="navbar-brand logo" href="#"></a>
                  <a href="" class="mobile-login hidden-lg">Login</a>
                </div>
                <div class="mobile-search hidden-lg clearfix">
                    <div class="global-search">
                        <form class="global-search-inner">
                        <input type="text" class="search-main"> 
                        <input type="submit" class="search-main-submit" value="" >
                        </form>                                  
                    </div>
                </div>
                <div class="collapse navbar-collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">Stuff</a></li>
                    <li><a href="#contact">Stuff</a></li>
                    <li><a href="#about">Submit Your Stuff</a></li>
                    <li><a href="#contact">Make an Appointment</a></li>
                   
                  </ul>
                </div><!--/.nav-collapse -->
              </div>
            </div>
          </div>
        </div>
    </div><!-- /#header -->

    <div id="main" class="landing">      
      
      <div class="section welcome-ctr">
        <div class="container">
            <div class="row">                 
                <div class="col-lg-12">
     <div class="backg-art">
    <img src="images/StuffLogo.png" alt="Stuff">
  
      <div class="form-contain">
        <form class="form-login" role="form">
          <input type="username" class="form-control" placeholder="username" required autofocus>
          <input type="password" class="form-control" placeholder="password" required>
          <button class="btn btn-sm btn-primary btn-block forgot-password btn-width btn-shade" type="submit">Login</button>
          <label class="forgot-password"><a href="#">Forgot Password</a></label>
          <label class="checkbox">
            <input type="checkbox" value="remember-me">
            Remember me</label>
        </form>
      </div>
    </div>
                   <!-- /.row --> 
                                    
                </div>
                                
            </div>                       
        </div>
      </div><!-- /.section -->  

    </div><!-- /#main -->
    <div id="footer" class="section">
        <div class="container hidden-xs">
            <div class="row"> 
                <div class="special-col">
                    <h2>Quick Links</h2>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Stuff</a></li>
                    <li><a href="#">Discussion</a></li>
                    <li><a href="#">Submit Your Stuff</a></li>
                    <li><a href="#">Our Process</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Site Map</a></li>
                </div>
                <div class="special-col">
                    <h2>Stufforate</h2>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Site Map</a></li>
                    <li><a href="#">Stuffs</a></li>
                    <li><a href="#">Legal</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Stuff Store</a></li>
                </div> 
               
               
            </div>                       
        </div>
        <div class="container visible-xs">
                <div class="row">
                    <div class="panel-group" id="accordion">
                              <div class="panel panel-default">
                                <div class="panel-heading">
                                  <h2 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Quick Links<span></span></a></h2>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse">
                                  <div class="panel-body">
                                  <li><a href="#">Home</a></li>
                    <li><a href="#">Stuff</a></li>
                    <li><a href="#">Discussion</a></li>
                    <li><a href="#">Submit Your Stuff</a></li>
                    <li><a href="#">Our Process</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Site Map</a></li>
                                  </div>
                                </div>
                              </div>
                              <div class="panel panel-default">
                                <div class="panel-heading">
                                  <h2 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Stuff Solutions<span></span></a></h2>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                  <div class="panel-body">
                                      <li><a href="#">About Us</a></li>
                    <li><a href="#">Site Map</a></li>
                    <li><a href="#">Stuff</a></li>
                    <li><a href="#">Legal</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Stuff Store</a></li>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                </div>
            
        </div>
        <div class="container">
            <div class="row"> 
                <p class="copyright">©2014 Stuff Services, Inc.</p>
            </div>                       
        </div>
    </div><!-- /.footer -->
    <div id="video-modal" role="dialog" class="modal fade">     
            <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"><span>x</span></button>        
            <video autoplay src=""></video>
            </div> 
    </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/settings.js"></script>
  </body>
</html>

</apex:page>

I get the following error:
Error: StuffCenterLogin line 24, column 4: The element type "link" must be terminated by the matching end-tag "</link>"
Error Error: The element type "link" must be terminated by the matching end-tag "</link>".

Any ideas?
I'm new to visualforce

Thanks!
Best Answer chosen by Btuitasi1
Ravikant kediaRavikant kedia
You have to close all starting tag just like:
<link href="css/bootstrap.css" rel="stylesheet" />

 <link href="css/overrides.css" rel="stylesheet "      / >
 <link href="css/login.css" rel="stylesheet"     />


All Answers

Ravikant kediaRavikant kedia
You have to close all starting tag just like:
<link href="css/bootstrap.css" rel="stylesheet" />

 <link href="css/overrides.css" rel="stylesheet "      / >
 <link href="css/login.css" rel="stylesheet"     />


This was selected as the best answer
Deepak Kumar ShyoranDeepak Kumar Shyoran
As Ravikant mentioned there are lots of tags like <meta> and <link> which is not closed here. In Salesforce you need to close each and every tags used in VF page it's not like with HTML pages where it's not required to close every open tag rather you have to close every tag on VF page.
U JayU Jay
+1 Ravikant  :) 
Btuitasi1Btuitasi1
Thanks guys! That fixed the problem.