FINAL WEBSITE | C# Online Compiler

FINAL WEBSITE by dianejanetapleras@gmail.com

namespace Tumabiene.Models
{
    public class Student
    {
        public string Student_Name { get; set; }
        public int Age { get; set; }
		public string Gender { get; set; }
		public string Birthdate { get; set; }
		public string Place_of_Birth { get; set; }
		public string Civil_Status { get; set; }
		public string Address { get; set; }
		public string Citizenship { get; set; }
		public string Zipcode { get; set; }
		public string Email { get; set; }
		public string Mobile_No { get; set; }

    }
}

Model

​x
 
namespace Tumabiene.Models
{
    public class Student
    {
        public string Student_Name { get; set; }
        public int Age { get; set; }
        public string Gender { get; set; }
        public string Birthdate { get; set; }
        public string Place_of_Birth { get; set; }
        public string Civil_Status { get; set; }
        public string Address { get; set; }
        public string Citizenship { get; set; }
        public string Zipcode { get; set; }
        public string Email { get; set; }
        public string Mobile_No { get; set; }
​
    }
}

@model IEnumerable<Tumabiene.Models.Student>

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<html>
	<head>
		<!-- CSS Includes -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
			<!-- //for-mobile-apps -->
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!-- gallery -->
	<link rel="stylesheet" href="css/lightGallery.css" type="text/css" media="all" />
	<!-- //gallery -->
	<!-- font-awesome icons -->
	<link href="css/font-awesome.css" rel="stylesheet">

	<!-- //font-awesome icons -->
	<link href="//fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
	<link href="//fonts.googleapis.com/css?family=Jura:300,400,500,600" rel="stylesheet">
	<link
		href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
		rel='stylesheet' type='text/css'>
		 <!-- Custom Theme files -->
			<!--Important link source from https://bbbootstrap.com/snippets/simple-footer-newsletter-subscription-input-95837754-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	</head>
		<div>
				<input type="submit" value="">
			</form>
		</div>
		<div class="clearfix"> </div>
	</div>
	<div class="w3_navigation">
		<div class="container">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<div class="w3_navigation_pos">
						<h1><b><p style="color: orange">The Best Hotel in The Town</a></b></h1>
					</div>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="cl-effect-5" id="cl-effect-5">
						<ul class="nav navbar-nav">
							<li class="active"><a href="index.html"><span data-hover="Cast">Home</span></a></li>
							<li><a href="#about" class="scroll"><span data-hover="About">Sypnosis</span></a></li>
							<li><a href="#services" class="scroll"><span data-hover="Services">Episodes</span></a></li>
							<li><a href="#work" class="scroll"><span data-hover="Gallery">Soundtracks</span></a></li>
							<li><a href="#work" class="scroll"><span data-hover="Gallery">Feedbacks</span></a></li>
							<li><a href="#mail" class="scroll"><span data-hover="Contact">Personal Information</span></a></li>
						</ul>
					</nav>
				</div>
			</nav>
		</div>
	</div>
<body>
	<style> 
body { 
background-image: url("https://i.pinimg.com/236x/32/cc/47/32cc4734ecdf60ca370047223c88b3be.jpg");
}  
</style> 
		</body>	<br>
		<h4 align="center"><s><p style="color: white">Experience a luxury and comfort at our hotel!</s></p></h4>
							<h2 align="center"><b><p style="color: blue">Hotel Del Luna<p style="color: orange">Where comfort meets style in every room.</p></h2> 
</div>
								<br>
									<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
									<div class="row"> <div class="column">
    <img src="https://i.pinimg.com/236x/d8/3c/91/d83c91f423d9c2bc5ed34e8c5b4817d0.jpg".jpg" alt="" "width="800" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/42/97/50/429750513e1b5685f096bd114a209114.jpg" alt="" "width="1000" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/60/84/b3/6084b3e9fda7709c31a00afda0b0a38c.jpg" alt="" "width="800" height="400" ">
  </div>
</div>
<br>
										<h4 align="center"><p style="color: white">Lee Ji-eun as Jang Man-wol </body>
										<h4 align="center"><p style="color: white">Yeo Jin-goo as Koo Chan-sung </body>
		<br>
		<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
/* Style the navigation bar links */
.navbar a {
	background: url(https://i.pinimg.com/564x/21/98/91/219891fbb0e97cfe5fa74ffa4535c659.jpg)
	no-repeat;
  float: left;
  display:  url(https://i.pinimg.com/564x/21/98/91/219891fbb0e97cfe5fa74ffa4535c659.jpg)
	no-repeat;;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}



/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
	background: url(https://i.pinimg.com/564x/69/16/c9/6916c9252e2aff5187524b5ad9fa2c38.jpg);
  background-color: #aaa;
  width: 100%;
  padding: 30px;
}
	
</style>
	<body> 
  <div class="side">
    <h2><b>Sypnosis</h2>
    <h5><b>Eunoia</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Hotel del Luna (previously known as "Guest House of the Moon") is not like any other hotel. A supernatural place, the hotel is not visible in its true form during the daytime and humans can only come across the hotel under special circumstances. Its staff and clients are all ghosts coming to terms with unfinished business in their former lives before they pass on to the afterlife and cycle of reincarnation;[6] the staff, in particular, have been there for decades or centuries as they have not settled their grudges. The exception to this is the hotel's general manager, a post that has been filled by a succession of human "passersby" since they need to interact normally with the real world in certain instances, like paying bills or fulfilling ghosts' requests with still-living relatives/friends.

Jang Man-wol is the owner of this hotel, which is located in Myeong-dong, Seoul. Due to a huge sin committed more than a millennium ago, the hotel catering to the dead has been bound to her soul.

As a result of manipulation by the deity Mago, Man-wol meets Gu Chan-sung's father and makes a deal: in exchange for his life, his son will work for her 20 years later.

Desperate to save his son, the father takes Chan-sung abroad. The young man grows up to be a sincere, level-headed perfectionist with a soft heart. 21 years later, after his father's death, he comes back to South Korea to be an assistant manager at a multinational hotel corporation, only to face Man-wol and end up fulfilling the agreement by becoming the general manager of Hotel del Luna.[7]

										Through Chan-sung, the mysteries and the secrets behind the hotel and its owner are revealed. 
										</body>
		<br>
			<br>
			 <h2><b>Motivational</h2>
			<iframe id="myFrame" src="https://podcasters.spotify.com/pod/show/faheema-jaffarin/episodes/Ep-6--Dangers-of-Toxic-Positivity-e1at7js" style="height:380px;width:100%"></iframe>
<br>
<p>Motivational speaker. Despite The Situation, Let Me Inspire You.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var iframe = document.getElementById("myFrame");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0];
  elmnt.style.display = "none";
}
</script>
	<br>
		<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: center;
  width: 180px;
}

div.gallery:hover {
  border: 5px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
<body>
	<h1><b> Gallery</h1>
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Theme Made By www.w3schools.com - No Copyright -->
  <title>Bootstrap Theme The Band</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  .container {
    padding: 80px 120px;
  }
  .person {
    border: 10px solid transparent;
    margin-bottom: 25px;
    width: 80%;
    height: 80%;
    opacity: 0.7;
  }
  .person:hover {
    border-color: #f1f1f1;
  }
  .carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */ 
    width: 100%; /* Set width to 100% */
    margin: auto;
  }
  .carousel-caption h3 {
    color: #fff !important;
  }
  }  
  </style>
</head>
<body>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
	  <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://i.pinimg.com/originals/16/60/19/166019db3c1e7445d73e5a6aa84d9c3e.gif" alt="New York" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Motivational</h3>
          <p>Inspiration does exist, but it must find you working.</p>
        </div>      
      </div>

      <div class="item">
        <img src="https://i.pinimg.com/originals/c1/4c/36/c14c36b35ad17b05511bfbd460712297.gif" alt="Chicago" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Trust</h3>
          <p>If people are doubting how far you can go, go so far that you can’t hear them anymore..</p>
        </div>      
      </div>
      <div class="item">
        <img src="https://i.pinimg.com/originals/f9/93/45/f99345b2ccf2a7da11e1b490e03ee925.gif" alt="Los Angeles" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Be Yourself</h3>
          <p>Trust yourself that you can do it and get it!</p>
        </div>      
      </div>	  
		  <div class="item">
        <img src="https://i.pinimg.com/originals/73/57/a3/7357a3dfcb587557f2e08776d74aa498.gif" alt="Los Angeles" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Be Real</h3>
          <p>You are not your illness. You have an individual story to tell. You have a name, a history, a personality. Staying yourself is part of the battle!</p>
        </div>      
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>
		  <br>
		  <h1><b> Inspirational Video.... </h1>
		 <iframe width="100%" height="380" src="https://www.youtube.com/embed/MzJw2E2k454" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
		  <br>
			  <br>
		   <h2><b>Coping Mental Health Problems</h2>
			<iframe id="myFrame" src="https://www.cdc.gov/mentalhealth/index.htm" style="height:380px;width:100%"></iframe>
<br>
<p>Ways on how you help yourself to be better in everyways.</p>
		  <h1><b>HOTLINES:</h1>
		  	<form action="/action_page.php">
 			 <label for="Crises Hotlines">Crises Hotlines</label>
 			  <select name="Crises Hotlines" id="Crises Hotlines">
  			   <option value="National Institute for Mental Health">National Institute for Mental Health---0917-899-8227</option>
    			<option value="Aklan Provincial Health Office">Aklan Provincial Health Office--0938-757-6458</option>
				 <option value="Philippine Red Cross---0917-558-4673">Philippine Red Cross---0917-558-4673</option>
   				  <option value="DOH Western Visayas CHD Mental Health Program">DOH Western Visayas CHD Mental Health Program---0917-775-9256 / 0998-532-4047</option>
  				    <option value="In Touch Philippines---0917-800-1123 (globe) / 0922-893-8944 (sun)">In Touch Philippines---0917-800-1123 (globe) / 0922-893-8944 (sun)</option>
  </select>
  <br>
	  <br>
  <input type="submit" value="Submit">
</form>
<!-- Container (TOUR Section) -->
<div class="bg-1">
  <div class="container">
    <h3 class="text-center">FINAL PROJECT</h3>
    <p class="text-center">This content is for those people who suffered mental illness, this will help you to be more motivated and inspired at the same time!</p>
    <ul class="list-group">
      <li class="list-group-item">Submitted By: <span class="label label-danger">BTVTEd-CSSP</span></li>
      <li class="list-group-item">Submitted to: <span class="label label-danger">Course Facilitator</span></li> 
    </ul>
    
    <div class="row text-center">
      <div class="col-sm-4">
        <div class="thumbnail">
          <img src="https://scontent.fceb1-2.fna.fbcdn.net/v/t39.30808-6/340648209_2265686793618104_7732834605287889730_n.jpg?_nc_cat=109&ccb=1-7&_nc_sid=174925&_nc_eui2=AeGtB7rqENYVY-ht-fG_XOMQ8UcAqFYbkKHxRwCoVhuQoYuLZFvqvsyfd_jAZVA-8kxZ28NUN64XWCqv3WKh_5XK&_nc_ohc=K9OK-Ai6OLkAX8aWqpm&_nc_zt=23&_nc_ht=scontent.fceb1-2.fna&oh=00_AfBH8tTUJtgxHNTgevkSc4m5Si2H7d8uXiBJ5GF9fPa8OQ&oe=6469197F" alt="Paris" width="400" height="300">
          <p><a href="https://web.facebook.com/aylahailanG/"><strong>Katherine Claud Tumabiene</strong></a></p>
          <button class="btn">BTVTEd-CSSP</button>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail">
          <img src="https://scontent.fceb1-3.fna.fbcdn.net/v/t39.30808-6/297121400_577989117367948_895035264463189805_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=09cbfe&_nc_eui2=AeF_SApIwqKyNTfVH1M6uAkW4Z0VFo4eBD_hnRUWjh4EP0TdQCo64hinvKeq3gTQvi0LFU6N8dnMi2K9xrCWnjrO&_nc_ohc=gW-Vmf9hTpEAX9wo0fa&_nc_zt=23&_nc_ht=scontent.fceb1-3.fna&oh=00_AfABjNs4bSola2e5JHKU723calQ-u6DgWRHCJ4EAyWMxvg&oe=64689A30" alt="Course Facilitator" width="400" height="300">
          <p><a href="https://web.facebook.com/lezel.nieves"><strong>Ms. Lezel Nieves</strong></a></p>
          <button class="btn">Course Facilitator</button>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

</body
</body>
	<br>
			<h1 style="background-color:LightGray;"><b>My Personal Information</h2>
<p style="background-color:LightGray;">
		<table class="table">
    		<tr>
        		<th>
          		 	@Html.DisplayNameFor(model => model.Student_Name)
       			</th>	
        		<th>
          		 	@Html.DisplayNameFor(model => model.Age)
       			</th>	
        		<th>
          		 	@Html.DisplayNameFor(model => model.Gender)
       			</th>	
        		<th>
          		 	@Html.DisplayNameFor(model => model.Birthdate)
       			</th>		
        		<th>
          		 	@Html.DisplayNameFor(model => model.Place_of_Birth)
       			</th>	
        		<th>
          		 	@Html.DisplayNameFor(model => model.Civil_Status)
       			</th>	
        		<th>
          		 	@Html.DisplayNameFor(model => model.Address)
       			</th>	
        		<th>
          		 	@Html.DisplayNameFor(model => model.Citizenship)
       			</th>	
        		<th>
          		 	@Html.DisplayNameFor(model => model.Zipcode)
       			</th>
        		<th>
          		 	@Html.DisplayNameFor(model => model.Email)
       			</th>		
        		<th>
          		 	@Html.DisplayNameFor(model => model.Mobile_No)
       			</th>							
   			</tr>
			

@foreach (var item in Model) {
    	<tr>
        	<td>
            	@Html.DisplayFor(modelItem => item.Student_Name)
        	</td>
        	<td>
            	@Html.DisplayFor(modelItem => item.Age)
        	</td>
			<td>
            	@Html.DisplayFor(modelItem => item.Gender)
				
				@Html.DropDownList("Gender", new List<SelectListItem> {
				new SelectListItem {Text="Select Gender",Value="-1" },
				new SelectListItem {Text="Male",Value="1" },
				new SelectListItem {Text="Female", Value="2" }
				}, new { @class = "custom-select" })					
        	</td>
        	<td>
            	@Html.DisplayFor(modelItem => item.Birthdate)
        	</td>			
        	<td>
            	@Html.DisplayFor(modelItem => item.Place_of_Birth)
        	</td>			
        	<td>
            	@Html.DisplayFor(modelItem => item.Civil_Status)
				
				@Html.DropDownList("Civil_Status", new List<SelectListItem> {
				new SelectListItem {Text="Select Status",Value="-1" },
				new SelectListItem {Text="Single",Value="1" },
				new SelectListItem {Text="Married", Value="2" }
				}, new { @class = "custom-select" })
        	</td>
        	<td>
            	@Html.DisplayFor(modelItem => item.Address)
        	</td>
        	<td>
            	@Html.DisplayFor(modelItem => item.Citizenship)
        	</td>
        	<td>
            	@Html.DisplayFor(modelItem => item.Zipcode)
        	</td>
        	<td>
            	@Html.DisplayFor(modelItem => item.Email)
        	</td>
        	<td>
            	@Html.DisplayFor(modelItem => item.Mobile_No)
        	</td>
    	</tr>
}	
				</table> 
				<frameset>
					<table>
						<tr>
							<td>
<div style="background-color:white;background-image:url(https://i.pinimg.com/originals/0c/c9/23/0cc9239a5b976692f68900f20551c0ed.gif);background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;border:1px solid black;width:2000px;height:2300px;font-size:18px;"</div>
								<br>
									<br>
								
									<div class="row"> <div class="column">
    <img src="https://i.pinimg.com/236x/9c/01/2e/9c012ec4ee3e77d634e54f288fe51f3a.jpg" alt="" "width="400" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/18/57/d7/1857d711c8779dd385db4df108b3aff9.jpg" alt="" "width="400" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/ac/e1/de/ace1dee2ef3f967ddb763f5a7dc6d29c.jpg" alt="" "width="400" height="400" ">
  </div>
</div>
<br>
	<h4 align="center"><p style="color: white"><b>"The most beautiful people we have known are those who have known defeat, known suffering, known struggle, known loss, and have found their way out of the depths. These persons have an appreciation, a sensitivity, and an understanding of life that fills them with compassion, gentleness, and a deep loving concern. Beautiful people do not just happen." — Elisabeth Kübler-Ross</s></p></h4>
				<br>
					<br>
						<center>
		<div class="w3l_footer_pos">
				<p style="color:white;">© eunoia. All Rights Reserved | Design by <a href="https://web.facebook.com/aylahailanG//">kath</a></p>
			</div>
	</div>
	</center>
						</footer>
</body>
</html>

View

 
@model IEnumerable<Tumabiene.Models.Student>
​
@{
    ViewBag.Title = "Index";
    Layout = null;
}
​
<html>
    <head>
        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
            <!-- //for-mobile-apps -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- gallery -->
    <link rel="stylesheet" href="css/lightGallery.css" type="text/css" media="all" />
    <!-- //gallery -->
    <!-- font-awesome icons -->
    <link href="css/font-awesome.css" rel="stylesheet">
​
    <!-- //font-awesome icons -->
    <link href="//fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Jura:300,400,500,600" rel="stylesheet">
    <link
        href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
        rel='stylesheet' type='text/css'>
         <!-- Custom Theme files -->
            <!--Important link source from https://bbbootstrap.com/snippets/simple-footer-newsletter-subscription-input-95837754-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
        <div>
                <input type="submit" value="">
            </form>
        </div>
        <div class="clearfix"> </div>
    </div>
    <div class="w3_navigation">
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="navbar-header navbar-left">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="w3_navigation_pos">
                        <h1><b><p style="color: orange">The Best Hotel in The Town</a></b></h1>
                    </div>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                    <nav class="cl-effect-5" id="cl-effect-5">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="index.html"><span data-hover="Cast">Home</span></a></li>
                            <li><a href="#about" class="scroll"><span data-hover="About">Sypnosis</span></a></li>
                            <li><a href="#services" class="scroll"><span data-hover="Services">Episodes</span></a></li>
                            <li><a href="#work" class="scroll"><span data-hover="Gallery">Soundtracks</span></a></li>
                            <li><a href="#work" class="scroll"><span data-hover="Gallery">Feedbacks</span></a></li>
                            <li><a href="#mail" class="scroll"><span data-hover="Contact">Personal Information</span></a></li>
                        </ul>
                    </nav>
                </div>
            </nav>
        </div>
    </div>
<body>
    <style> 
body { 
background-image: url("https://i.pinimg.com/236x/32/cc/47/32cc4734ecdf60ca370047223c88b3be.jpg");
}  
</style> 
        </body> <br>
        <h4 align="center"><s><p style="color: white">Experience a luxury and comfort at our hotel!</s></p></h4>
                            <h2 align="center"><b><p style="color: blue">Hotel Del Luna<p style="color: orange">Where comfort meets style in every room.</p></h2> 
</div>
                                <br>
                                    <style>
* {
  box-sizing: border-box;
}
​
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
​
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
                                    <div class="row"> <div class="column">
    <img src="https://i.pinimg.com/236x/d8/3c/91/d83c91f423d9c2bc5ed34e8c5b4817d0.jpg".jpg" alt="" "width="800" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/42/97/50/429750513e1b5685f096bd114a209114.jpg" alt="" "width="1000" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/60/84/b3/6084b3e9fda7709c31a00afda0b0a38c.jpg" alt="" "width="800" height="400" ">
  </div>
</div>
<br>
                                        <h4 align="center"><p style="color: white">Lee Ji-eun as Jang Man-wol </body>
                                        <h4 align="center"><p style="color: white">Yeo Jin-goo as Koo Chan-sung </body>
        <br>
        <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
​
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
/* Style the navigation bar links */
.navbar a {
    background: url(https://i.pinimg.com/564x/21/98/91/219891fbb0e97cfe5fa74ffa4535c659.jpg)
    no-repeat;
  float: left;
  display:  url(https://i.pinimg.com/564x/21/98/91/219891fbb0e97cfe5fa74ffa4535c659.jpg)
    no-repeat;;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}
​
/* Right-aligned link */
.navbar a.right {
  float: right;
}
​
/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
​
​
​
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
​
/* Fake image, just for this example */
.fakeimg {
    background: url(https://i.pinimg.com/564x/69/16/c9/6916c9252e2aff5187524b5ad9fa2c38.jpg);
  background-color: #aaa;
  width: 100%;
  padding: 30px;
}
    
</style>
    <body> 
  <div class="side">
    <h2><b>Sypnosis</h2>
    <h5><b>Eunoia</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Hotel del Luna (previously known as "Guest House of the Moon") is not like any other hotel. A supernatural place, the hotel is not visible in its true form during the daytime and humans can only come across the hotel under special circumstances. Its staff and clients are all ghosts coming to terms with unfinished business in their former lives before they pass on to the afterlife and cycle of reincarnation;[6] the staff, in particular, have been there for decades or centuries as they have not settled their grudges. The exception to this is the hotel's general manager, a post that has been filled by a succession of human "passersby" since they need to interact normally with the real world in certain instances, like paying bills or fulfilling ghosts' requests with still-living relatives/friends.
​
Jang Man-wol is the owner of this hotel, which is located in Myeong-dong, Seoul. Due to a huge sin committed more than a millennium ago, the hotel catering to the dead has been bound to her soul.
​
As a result of manipulation by the deity Mago, Man-wol meets Gu Chan-sung's father and makes a deal: in exchange for his life, his son will work for her 20 years later.
​
Desperate to save his son, the father takes Chan-sung abroad. The young man grows up to be a sincere, level-headed perfectionist with a soft heart. 21 years later, after his father's death, he comes back to South Korea to be an assistant manager at a multinational hotel corporation, only to face Man-wol and end up fulfilling the agreement by becoming the general manager of Hotel del Luna.[7]
​
                                        Through Chan-sung, the mysteries and the secrets behind the hotel and its owner are revealed. 
                                        </body>
        <br>
            <br>
             <h2><b>Motivational</h2>
            <iframe id="myFrame" src="https://podcasters.spotify.com/pod/show/faheema-jaffarin/episodes/Ep-6--Dangers-of-Toxic-Positivity-e1at7js" style="height:380px;width:100%"></iframe>
<br>
<p>Motivational speaker. Despite The Situation, Let Me Inspire You.</p>
​
<button onclick="myFunction()">Try it</button>
​
<script>
function myFunction() {
  var iframe = document.getElementById("myFrame");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0];
  elmnt.style.display = "none";
}
</script>
    <br>
        <style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: center;
  width: 180px;
}
​
div.gallery:hover {
  border: 5px solid #777;
}
​
div.gallery img {
  width: 100%;
  height: auto;
}
​
div.desc {
  padding: 15px;
  text-align: center;
}
</style>
<body>
    <h1><b> Gallery</h1>
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Theme Made By www.w3schools.com - No Copyright -->
  <title>Bootstrap Theme The Band</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  .container {
    padding: 80px 120px;
  }
  .person {
    border: 10px solid transparent;
    margin-bottom: 25px;
    width: 80%;
    height: 80%;
    opacity: 0.7;
  }
  .person:hover {
    border-color: #f1f1f1;
  }
  .carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */ 
    width: 100%; /* Set width to 100% */
    margin: auto;
  }
  .carousel-caption h3 {
    color: #fff !important;
  }
  }  
  </style>
</head>
<body>
​
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
​
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://i.pinimg.com/originals/16/60/19/166019db3c1e7445d73e5a6aa84d9c3e.gif" alt="New York" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Motivational</h3>
          <p>Inspiration does exist, but it must find you working.</p>
        </div>      
      </div>
​
      <div class="item">
        <img src="https://i.pinimg.com/originals/c1/4c/36/c14c36b35ad17b05511bfbd460712297.gif" alt="Chicago" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Trust</h3>
          <p>If people are doubting how far you can go, go so far that you can’t hear them anymore..</p>
        </div>      
      </div>
      <div class="item">
        <img src="https://i.pinimg.com/originals/f9/93/45/f99345b2ccf2a7da11e1b490e03ee925.gif" alt="Los Angeles" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Be Yourself</h3>
          <p>Trust yourself that you can do it and get it!</p>
        </div>      
      </div>      
          <div class="item">
        <img src="https://i.pinimg.com/originals/73/57/a3/7357a3dfcb587557f2e08776d74aa498.gif" alt="Los Angeles" width="1200" height="700">
        <div class="carousel-caption">
          <h3>Be Real</h3>
          <p>You are not your illness. You have an individual story to tell. You have a name, a history, a personality. Staying yourself is part of the battle!</p>
        </div>      
      </div>
    </div>
​
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>
          <br>
          <h1><b> Inspirational Video.... </h1>
         <iframe width="100%" height="380" src="https://www.youtube.com/embed/MzJw2E2k454" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
          <br>
              <br>
           <h2><b>Coping Mental Health Problems</h2>
            <iframe id="myFrame" src="https://www.cdc.gov/mentalhealth/index.htm" style="height:380px;width:100%"></iframe>
<br>
<p>Ways on how you help yourself to be better in everyways.</p>
          <h1><b>HOTLINES:</h1>
            <form action="/action_page.php">
             <label for="Crises Hotlines">Crises Hotlines</label>
              <select name="Crises Hotlines" id="Crises Hotlines">
               <option value="National Institute for Mental Health">National Institute for Mental Health---0917-899-8227</option>
                <option value="Aklan Provincial Health Office">Aklan Provincial Health Office--0938-757-6458</option>
                 <option value="Philippine Red Cross---0917-558-4673">Philippine Red Cross---0917-558-4673</option>
                  <option value="DOH Western Visayas CHD Mental Health Program">DOH Western Visayas CHD Mental Health Program---0917-775-9256 / 0998-532-4047</option>
                    <option value="In Touch Philippines---0917-800-1123 (globe) / 0922-893-8944 (sun)">In Touch Philippines---0917-800-1123 (globe) / 0922-893-8944 (sun)</option>
  </select>
  <br>
      <br>
  <input type="submit" value="Submit">
</form>
<!-- Container (TOUR Section) -->
<div class="bg-1">
  <div class="container">
    <h3 class="text-center">FINAL PROJECT</h3>
    <p class="text-center">This content is for those people who suffered mental illness, this will help you to be more motivated and inspired at the same time!</p>
    <ul class="list-group">
      <li class="list-group-item">Submitted By: <span class="label label-danger">BTVTEd-CSSP</span></li>
      <li class="list-group-item">Submitted to: <span class="label label-danger">Course Facilitator</span></li> 
    </ul>
    
    <div class="row text-center">
      <div class="col-sm-4">
        <div class="thumbnail">
          <img src="https://scontent.fceb1-2.fna.fbcdn.net/v/t39.30808-6/340648209_2265686793618104_7732834605287889730_n.jpg?_nc_cat=109&ccb=1-7&_nc_sid=174925&_nc_eui2=AeGtB7rqENYVY-ht-fG_XOMQ8UcAqFYbkKHxRwCoVhuQoYuLZFvqvsyfd_jAZVA-8kxZ28NUN64XWCqv3WKh_5XK&_nc_ohc=K9OK-Ai6OLkAX8aWqpm&_nc_zt=23&_nc_ht=scontent.fceb1-2.fna&oh=00_AfBH8tTUJtgxHNTgevkSc4m5Si2H7d8uXiBJ5GF9fPa8OQ&oe=6469197F" alt="Paris" width="400" height="300">
          <p><a href="https://web.facebook.com/aylahailanG/"><strong>Katherine Claud Tumabiene</strong></a></p>
          <button class="btn">BTVTEd-CSSP</button>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail">
          <img src="https://scontent.fceb1-3.fna.fbcdn.net/v/t39.30808-6/297121400_577989117367948_895035264463189805_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=09cbfe&_nc_eui2=AeF_SApIwqKyNTfVH1M6uAkW4Z0VFo4eBD_hnRUWjh4EP0TdQCo64hinvKeq3gTQvi0LFU6N8dnMi2K9xrCWnjrO&_nc_ohc=gW-Vmf9hTpEAX9wo0fa&_nc_zt=23&_nc_ht=scontent.fceb1-3.fna&oh=00_AfABjNs4bSola2e5JHKU723calQ-u6DgWRHCJ4EAyWMxvg&oe=64689A30" alt="Course Facilitator" width="400" height="300">
          <p><a href="https://web.facebook.com/lezel.nieves"><strong>Ms. Lezel Nieves</strong></a></p>
          <button class="btn">Course Facilitator</button>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
​
</body
</body>
    <br>
            <h1 style="background-color:LightGray;"><b>My Personal Information</h2>
<p style="background-color:LightGray;">
        <table class="table">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Student_Name)
                </th>   
                <th>
                    @Html.DisplayNameFor(model => model.Age)
                </th>   
                <th>
                    @Html.DisplayNameFor(model => model.Gender)
                </th>   
                <th>
                    @Html.DisplayNameFor(model => model.Birthdate)
                </th>       
                <th>
                    @Html.DisplayNameFor(model => model.Place_of_Birth)
                </th>   
                <th>
                    @Html.DisplayNameFor(model => model.Civil_Status)
                </th>   
                <th>
                    @Html.DisplayNameFor(model => model.Address)
                </th>   
                <th>
                    @Html.DisplayNameFor(model => model.Citizenship)
                </th>   
                <th>
                    @Html.DisplayNameFor(model => model.Zipcode)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Email)
                </th>       
                <th>
                    @Html.DisplayNameFor(model => model.Mobile_No)
                </th>                           
            </tr>
            
​
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Student_Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Gender)
                
                @Html.DropDownList("Gender", new List<SelectListItem> {
                new SelectListItem {Text="Select Gender",Value="-1" },
                new SelectListItem {Text="Male",Value="1" },
                new SelectListItem {Text="Female", Value="2" }
                }, new { @class = "custom-select" })                    
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Birthdate)
            </td>           
            <td>
                @Html.DisplayFor(modelItem => item.Place_of_Birth)
            </td>           
            <td>
                @Html.DisplayFor(modelItem => item.Civil_Status)
                
                @Html.DropDownList("Civil_Status", new List<SelectListItem> {
                new SelectListItem {Text="Select Status",Value="-1" },
                new SelectListItem {Text="Single",Value="1" },
                new SelectListItem {Text="Married", Value="2" }
                }, new { @class = "custom-select" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Citizenship)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Zipcode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Mobile_No)
            </td>
        </tr>
}   
                </table> 
                <frameset>
                    <table>
                        <tr>
                            <td>
<div style="background-color:white;background-image:url(https://i.pinimg.com/originals/0c/c9/23/0cc9239a5b976692f68900f20551c0ed.gif);background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;border:1px solid black;width:2000px;height:2300px;font-size:18px;"</div>
                                <br>
                                    <br>
                                
                                    <div class="row"> <div class="column">
    <img src="https://i.pinimg.com/236x/9c/01/2e/9c012ec4ee3e77d634e54f288fe51f3a.jpg" alt="" "width="400" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/18/57/d7/1857d711c8779dd385db4df108b3aff9.jpg" alt="" "width="400" height="400" ">
  </div>
  <div class="column">
    <img src="https://i.pinimg.com/236x/ac/e1/de/ace1dee2ef3f967ddb763f5a7dc6d29c.jpg" alt="" "width="400" height="400" ">
  </div>
</div>
<br>
    <h4 align="center"><p style="color: white"><b>"The most beautiful people we have known are those who have known defeat, known suffering, known struggle, known loss, and have found their way out of the depths. These persons have an appreciation, a sensitivity, and an understanding of life that fills them with compassion, gentleness, and a deep loving concern. Beautiful people do not just happen." — Elisabeth Kübler-Ross</s></p></h4>
                <br>
                    <br>
                        <center>
        <div class="w3l_footer_pos">
                <p style="color:white;">© eunoia. All Rights Reserved | Design by <a href="https://web.facebook.com/aylahailanG//">kath</a></p>
            </div>
    </div>
    </center>
                        </footer>
</body>
</html>
​

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Tumabiene.Models;

namespace Tumabiene.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ActionResult Index()
        {
			var studentList = new List<Student>
			{ 
				new Student() { Student_Name = "Katherine Claud Tumabiene", Age = 21, Birthdate = "August 9, 2001", Place_of_Birth = "Malay, Aklan", Address = "Malay, Aklan", Citizenship = "Filipino", Zipcode = "5608", Email = "csspkatherine1a@gmail.com", Mobile_No = "09953960970"} ,
		   };
        	return View(studentList);
        }
    }
}

Controller

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Tumabiene.Models;
​
namespace Tumabiene.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ActionResult Index()
        {
            var studentList = new List<Student>
            { 
                new Student() { Student_Name = "Katherine Claud Tumabiene", Age = 21, Birthdate = "August 9, 2001", Place_of_Birth = "Malay, Aklan", Address = "Malay, Aklan", Citizenship = "Filipino", Zipcode = "5608", Email = "csspkatherine1a@gmail.com", Mobile_No = "09953960970"} ,
           };
            return View(studentList);
        }
    }
}

View in Full Screen

Action	Entities	Performance
Execute (Many)	1000	2982 ms
SingleInsert	1000	3227 ms
BulkInsert	1000	18 ms

Cached Result
Last Run:	8:47:20 am
Compile:	0.587s
Execute:	10.83s
Memory:	46.14Mb
CPU:	1.266s

View IL Code