Thursday , September 19 2019

Home / HTML/CSS / Home Page Design With HTML CSS
Home Page Design With html css

Home Page Design With HTML CSS

0%

User Rating: 4.28 ( 2 votes)

Home Page Design With HTML CSS. it’s very simple for design and also download the full source code from our site include HTML CSS javascript source code.

You can view another article :

HTML5 Element List, tags
5 Best CSS Learning Website
10 best Web Design Learning Site(Free)

Home Page Design With HTML CSS

Step-1

First Create the HTML page and “index.html” Then Write The Code in The Below Home Page Design With HTML CSS

<!DOCTYPE HTML>
<html>


<head>



<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  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: 13px;
  width: 13px;
  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>
<meta charset="UTF-8">

  <title>Home </title>
</head>
<body>

<table border="0" align="center" width="100%" cellspacing="0" cellpadding="10">
<tr height="120px" background="image/1.jpg">
<td colspan="3" align="center"> <h1>Welcome To RRF</h1></td>

</tr>

<tr height="50px" bgcolor="yellow">
<td colspan="3"> 
<a href="index.html">Home</a>&nbsp; &nbsp;&nbsp;|
<a href="Gallery.html">Gallery</a>&nbsp;&nbsp;&nbsp;|
<a href="contactus.html">Contract us</a>&nbsp;&nbsp;&nbsp;|
<a href="aboutus.html">About US</a>&nbsp;&nbsp;&nbsp;
</tr>

<tr height="400px">
<td bgcolor="green" width="20%" valign="top"  align="center"> 

<h3 align="center"><font color="#fff">Loging Hear</font> </h3>

<p>ID  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<input type="text"/></p>

<p>
Password :<input type="password"/></p>

<img src="image/PFU-B3-013.jpg" width="200px" height="250" align="center"/>




</td>
<td width="60%" valign="top">

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="image/img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="image/img_fjords_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="image/img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<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>









 
<p align="justify">
I can take your creative web design and convert it into a HTML website.

Full HTML5 & CSS3
Cross-Browser Compatible! (Firefox,IE9+, Chrome, Safari, Opera)
Optimized Code
Responsive Design (optional via Bootstrap)

Check out front end develop work links below 

i will create fully professional website
Responsive Design
10 Pages
Include Source Code
Design Customization
Content Upload



BASIC Package
Here i am offering a Unit, feel free to connect me, for more details.. thanks
Responsive Design
1 Page
Include Source Code
Design Customization
Content Upload



I Will Fix Your Html, Css, WordPress, Asp, Php Bugs
Facing difficulty in programming? Unable to catch the bugs? Leave it to me! I will fix your html, css, wordpress, asp, php bugs and show you what the problem was.

P.S. The delivery time depends on how complicated the problem is, does not necessary a few days. If it's just a minor change, it might be completed within an hour or a few hours when I am online. The time is negotiable too. So, always remember to message me first before placing the order ya. Thank you :)

</p>


</td>
<td bgcolor="blue"  align="center"> 

<h3 align="center"><font color="#fff">Loging Hear</font> </h3>

<p>ID  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:<input type="text"/></p>

<p>
Password :<input type="password"/></p>

<img src="image/PFU-B3-013.jpg" width="200px" height="250" align="center"/>

</td>

</tr>

<tr height="80px">
<td colspan="3" bgcolor="gray" align="center"> 


All Right Reserved &copy; RRF

</td>


</tr>



</table>


  
</body>
</html>

Step-2

Change Slider image path and image in HTML CSS

download Full source code

Download

Check Also

UpWork Bootstrap Test Answer (Get top 20%)

UpWork Bootstrap Test Answer (Get top 20%)

UpWork Bootstrap Test Answer Very Important for the new freelancer. Upwork is one of the …

Leave a Reply

Translate »