In this 4th tutorial on dynamic web application development, we will learn how to create a static home page in ASP.NET. We will create the static home page in asp.net & also do its styling using bootstrap framework.
Watch the video tutorial at the end of this video to understand more about how to create master page & apply custom styling. Use the code given below.
Download all Images for this project – CLICK HERE
Home Page Code –
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="homepage.aspx.cs" Inherits="WebApplication3.homepage" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <section> <img src="imgs/home-bg.jpg" class="img-fluid"/> </section> <section> <div class="container"> <div class="row"> <div class="col-12"> <center> <h2>Our Features</h2> <p><b>Our 3 Primary Features -</b></p> </center> </div> </div> <div class="row"> <div class="col-md-4"> <center> <img width="150px" src="imgs/digital-inventory.png"/> <h4>Digital Book Inventory</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/search-online.png"/> <h4>Search Books</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/defaulters-list.png"/> <h4>Defaulter List</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> </div> </div> </section> <section> <img src="imgs/in-homepage-banner.jpg" class="img-fluid"/> </section> <section> <div class="container"> <div class="row"> <div class="col-12"> <center> <h2>Our Process</h2> <p><b>We have a Simple 3 Step Process</b></p> </center> </div> </div> <div class="row"> <div class="col-md-4"> <center> <img width="150px" src="imgs/sign-up.png" /> <h4>Sign Up</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/search-online.png"/> <h4>Search Books</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> <div class="col-md-4"> <center> <img width="150px" src="imgs/library.png"/> <h4>Visit Us</h4> <p class="text-justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor. reprehenderit</p> </center> </div> </div> </div> </section> </asp:Content>
CSS Style (customstylesheet.css)-
.footerlinks { color: #ffffff; text-decoration: none ; } .footerlinks:hover { color: #ffd800; } #footer1 { background: #762b00; } #footer2 { background: #531f00; }