<!DOCTYPE html>
<html>
<head>
    <title>Emergency Assistance</title>
    <meta name="viewpoint" content="width-device-width",initial-scale="1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type="text/css">
       
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body
{
    background:url('bg.png');
}
header
{
    width:100%;
    height:100vh;
   
    background-size:100% 100%;
}
.logo
    {
        width:25% ;text-align:center;
        margin-left:10px;}
       
    nav
    {
        widht:100%;
        height:15vh;
       
        background-color:lightgray;
        display: flex;
        justify-content:space-around;
        align-items:center;
        margin-right:25px;
        margin-left:25px;
        margin-top:25px;
       
       
    }
          .dropbotton
       
        {   /*
            *DROPDOWN BUTTON */
            background-color:#ef629f;
            color:white;
            padding:10px;
             font-size:25px;
    width:150px;
            
            border-width:2px;
            border-style:solid;
            border-color:#ef629f;
            border-radius:15px;
        }
         .dropdown
        {
            /*
            *
            for applying dropdown*/
            position:relative;
            display:inline-block;
        }
     .dropdown-content
        {
        display:none;
        position:absolute;
        background-color:lightblue;
        min-width:160px;
       
        }
        .dropdown-content a
        {
        color:black;
        border:2px solid purple;
        /*border-radius:20px;*/
        padding:12px 16px;
        text-decoration:none;
        display:block;
        }
         .dropdown-content a:hover{
            background-color:#dcc7aa;
        }
         .dropdown:hover .dropdown-content
        {
            display:block ;
        }
         .dropdown:hover .dropbutton
        {
            background-color:6b7b8f;
        }
header nav img{ /*for logo that display in the left sides of the header*/
    width:150px;
    height:100px;
      margin-left:15px;
    }
    button
    {
    padding:12px;
    padding:10px;
            font-size:25px;
                        width:90px;
            background-color:#ef629f;
    border:2px solid purple;
    border-radius:10px;   
    }
    button:hover{
        background-color:grey;
    }
    span{
   
    padding:12px;
    padding:10px;
    font-size:25px;
    width:90px;
    background-color:#ef629f;
     color:white;
    border:2px solid #ef629f;
    border-radius:10px;   
   }
    span a
    {
        text-decoration:none;
        color:white;
    }
    
.mySlides {display:none;}
#img
{
    width:400px;
    height:300px;
    display:absolute;
}
#imagesize
{
    margin-left:900px;
    margin-top:-220px;
}
ul
{ 
    max-height:100px;
    overflow-y:scroll;
    width:300px;
}
table
{   margin-left:25px;
    margin-top:-400px;
}
    
</style>
</head>
<body>
    <header><!-- for the header content -->
    <nav class="content-text">
     
       <img src="images/logo.png">
       <div class="logo">
       <h1 class="" >Wesite Name</h1>
           </div>
            
   
                <div class="dropdown">
        <br><br>
        <!--
        created a for applying dropdown class in css
        -->
        <buttton class="dropbotton" id="moresize">More</buttton>
        <!--
        *created a button with class name i dropdownbotton*/-->
        <br><br><br>
        <div class="dropdown-content">
            <!--/* created a dropdown-content because you can use it
            *if you click dropdown button it will be apppear other related link on the */ -->
            <a href="#">&#10112; Parameter1</a>
            <a href="#">&#10113; Parameter2</a>
            <a href="#">&#10114; Parameter3</a>
              <a href="#">&#10115; Parameter4</a>
            <a href="#">&#10116; Parameter5</a>
            <a href="#">&#10117; Parameter6</a>
            <a href="#">&#10118;Parameter7</a>
            <a href="#">&#10119;Parameter8</a>
            <a href="#">&#10120;Parameter9</a>
            </div>
</div>
<div class="dropdown">
        <br><br>
        <!--
        created a for applying dropdown class in css
        -->
        <buttton class="dropbotton">Setting</buttton>
        <br><br><br>
        <!--
        *created a button with class name i dropdownbotton*/-->
       
    <div class="dropdown-content">
            <a href="#" style="text-decoration:none;">Dark Mode</a>
    </div>
</div>
    <span ><a href="privacy.html">Privacy</a></span>
    <span ><a href="contact.html">Contact</a></span>   
    </nav>   
    </header><!-- header for the page-->
  <table>
      <tr>
          <th>Hot Articals</th>
      </tr>
      <tr>
          <td id="design">
              <ul>
  <li>content</li>
  <li>Content2</li>
 
   <li>content</li>
  <li>Content2</li>
   <li>content</li>
  <li>Content2</li>
   <li>content</li>
  <li>Content2</li>
  <li>content</li>
  <li>Content2</li>
 
   <li>content</li>
  <li>Content2</li>
   <li>content</li>
  <li>Content2</li>
   <li>content</li>
  <li>Content2</li>
  <li>content</li>
  <li>Content2</li>
 
   <li>content</li>
  <li>Content2</li>
   <li>content</li>
  <li>Content2</li>
   <li>content</li>
  <li>Content2</li>
</ul>
      </td>   
     
      </tr>
  </table>
   
<h3 class="w3-content w3-display-container "  id="imagesize"><!--for images slider-->
  <img class="mySlides" src="images/a.jpg"  id="img">
    <img class="mySlides" src="images/b.jpg" id="img">
 
  <img class="mySlides" src="images/c.jpg" id="img">
  <img class="mySlides" src="images/d.jpg" id="img">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button><!--left botton-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button><!--right botton-->
</h3>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
  showDivs(slideIndex += n);
}
function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none"; 
  }
  x[slideIndex-1].style.display = "block"; 
}
</script><!--end images slider-->
</body>
</html>
Page Title


Comments

Post a Comment