Subscribe Us

Create Attractive Homepage using HTML and CSS

Anil Singhania November 22, 2020

Hello friends how are you, today in this blog i will teach you how you can create an attractive Homepage using HTML and CSS. This tutorial will help you definitely if you wan to create or design a website. Now i am going to describe everything step by step so just go through this post to get complete knowledge.

Follow step by step  

1.First create a folder HtmlPage in your system in any drive .
2.Create a folder image inside folder HtmlPage.
3.I am using 4 images to create a image slider so store 4 jpg or jpeg images inside image folder[user image size 1100x350 for better view].
4.Name of images should be banner1,banner2,banner3 and banner4, i am telling you by keeping in my mind that you have no pre knowledge of HTML and CSS but if you know how to apply images in HTML then forget this step.
5.Now open Notepad and paste the below code in it.

<html>
<head>
<title>Krazyprogrammer.com</title>
<style>
a{
color:white;
background-color:#FF3399;
padding:5px 15px 5px 15px;
text-decoration:none;
border-radius:20px;
display: block;
width: 120px;
}

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body style="background-color:rgb(6,23,58)">
<table border="0" width="100%" height="10%" bgcolor="#000000" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;border-bottom:1px dotted white;">
<tr>

<td style="color:#ffffff;font-size:50px;text-shadow:2px 2px 2px red">Project Title</td>
<td width="10%" align="center"> <a href="index.html">Home</a></td>
<td width="10%" align="center"> <a href="about.html">About</a></td>
<td width="10%" align="center"> <a href="reg.html">Registration</a></td>
<td width="10%" align="center"> <a href="login.html">Login</a></td>
</tr>
</table><br><br><br><br><br><br><br>

<table border="0" style="box-shadow:1px 1px 10px white" width="70%" height="70%" align="center">
<tr>
<td align="center" valign="top">
<div class="slideshow-container">

<div class="mySlides fade"> 
  <div class="numbertext">1 / 4</div>
  <img src="image/banner1.jpg" style="width:1100px" height="350px">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 4</div>
  <img src="image/banner2.jpg" style="width:1100px" height="350px">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 4</div>
  <img src="image/banner3.jpg" style="width:1100px" height="350px">
  <div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">4 / 4</div>
  <img src="image/banner4.jpg" style="width:1100px" height="350px">
  <div class="text">Caption Text</div>
</div>
</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
</td>
</tr>
<tr style="background-color:black;color:white;height:25px">
<td><marquee behavior="alternate">
Welcome of You in my Project.
</marquee></td>
</tr>
</table>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>


Now save the Notepad file with name index.html, here html is the extension of HTML file never forget to add .html after file name.
After doing these your directory will look like below

After that right click on index file go to open with Google Chrome [or you can choose any browser]

After click on Google Chrome or any browser you will get output of your HTML page that will look like below


Here you just wait for some seconds to see magic because after every 2 seconds you will see other image.

I hope now you can create and run HTML file. If you have any doubt regarding this post  or you want something more in this post then let me know by comment below i will work on it definitely.

If you like my post then share it with your friends. Thanks😊


Tags

Post a Comment

1 Comments