How to Create Menus in Website
How to write a code step by step Process
Step 1: Create a folder. Folder name Project.
Step 2: Open Sublime text and Type given HTML code.
Step 3: After enter this code, Save file name index.html (inside the Project folder)
Step 4: Open index.html with any browser like Chrome, Internet explorer, etc.
Step 5: Finally get an output.
Note:
*Available courses Image must be placed on your Device.
(For Ex: Here My Image Names- course1.jpg, course2.jpg, course3.jpg. File Name: Project) If I want view the image I should save the Images With in the Project Folder (File), otherwise i can’t View the images.
index.html
<html>
<head>
<title>Career Lines</title>
<link href=”css/bootstrap.css” rel=’stylesheet’ type=’text/css’ />
</head>
<body>
<div class=”menus” id=”menus”>
<div class=”container”>
<h3 class=”tittle”>Available Courses</h3><br><br />
<div class=”menus-grids”>
<div class=”row”>
<div class=”col-md-4 col-sm-6″>
<div class=”single-course”>
<div class=”course-img”>
<img src=”images/course1.jpg” class=”img-fluid” alt=”” height=”300″ width=”350″ /><br />
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”single-course mt-5 mt-sm-0″>
<div class=”course-img”>
<img src=”images/course2.jpg” class=”img-fluid” alt=””height=”300″ width=”350″ />
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”single-course mt-5 mt-md-0″>
<div class=”course-img”>
<img src=”images/course3.jpg” class=”img-fluid” alt=””height=”300″ width=”350″ />
</div>
</div><br /><br>
</div>
</div>
<div class=”row”>
<div class=”col-md-4 col-sm-6″>
<div class=”single-course”>
<div class=”course-img”>
<img src=”images/course4.jpg” class=”img-fluid” alt=”” height=”300″ width=”350″ /><br />
</div>
</div>
</div>
<div class=”col-md-4 col-sm-6″>
<div class=”single-course mt-5 mt-sm-0″>
<div class=”course-img”>
<img src=”images/course5.jpg” class=”img-fluid” alt=””height=”300″ width=”350″ />
</div>
</div>
</div>
</div>
</div>
</div>
<style type=”text/css”>
h3.tittle {
font-size: 3em;
color: darkblue;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: serif;
color: white;
font-style: bold;
}
#menus {
padding: 6em 0;
text-align: center;
}
body{
background-color: darkgray;
}
</style>
</div>
</body>
</html>
Next Blog – How to Create Service Page in Website step by step guidance.
For Detailed Information: Click Here