🔒 Closed Pa help naman po

Status
Not open for further replies.

Jmrie_

in memoriam 1995-2021
Legendary
Paano po ba maging katulad ng h1 ko yung footer yung kagaya ng h1 ko na may navigation at hover effect

HTML:
<Doctype html>
<html>
<head>
      <title>  my blog site   </title>
         <style>
         body {
             background-color:pink;
         }
         h1 { color:steelblue;
         font-family:raleway;
         font-size:200%;
         }
        
         ul  {
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
             background-color: #333;
             top: 0;
         }
        
        li {
            float: left;
            }
        
         li a {
            
             display: block;
             color: white;
             text-align: center;
             padding: 14px 16px;
             text-decoration: none;
         }
        
         li a:hover:not(.active)  {
             background-color: turquoise;
            
             }
        
         .active {
            
              background-color: steelblue;
              }
        
      
         p  {
             border:5px solid steelblue;
             padding:10px;
              margin:30px;
         }
         div {
             width: 320px;
         padding: 10px;
         border: 5px solid Turquoise;
         margin: 30px;
         }
        
        
         div {
             list-style-type: none;
            
         }
        
        
        
         </style>
  </head>
<body>
<div  class=the"container 1">
 <h1> My blog  site
  <ul>   
 <li><a href="#Content">home</a>
 </li>
  <li><a href="#Content">gallery</a>
  </li>
   <li> <a href="#Content">about</a>
   </li>
  </ul>
 </h1>
 
 
</div>

<div class="container 1">
<p>  lorem ipsum </p>
</div>

<div class="container 2">
<p> lorem ipsum</p>
</div>


<div  class="social  media">
<ul>
 <li>  instagram   </li>
  <li>  Facebook   </li>
   <li>  gmail   </li>
   </ul>
</div>
</body>


</html>

Tingnan niyo yung footer po paano po yun?
 

Attachments

  • Screenshot_2018-10-10-10-19-43-92.png
    Screenshot_2018-10-10-10-19-43-92.png
    10 KB · Views: 0
Code:
<div class="footer">
<nav>
<a href="">Content</a>&nbsp<a href="">Content2</a>&nbsp<a href="">Content3</a>
</nav>
</div>

.footer {
font:5px bold;
}

nav {
text-align:center;
}

a {
text-decoration:none;
}

ganyan lanf kasi ginagawa ko para sa footer...
sample ko lang yan...
 
Kulang ng anchor tag "<a></a>" para maging navigation links yung mga social media links.

Code:
<div  class="social-media">
 <ul>
      <li>
           <a href="#">instagram</a>
     </li>
      <li>
           <a href="#">facebook</a>
     </li>
     <li>
           <a href="#">gmail</a>
     </li>
 </ul>
</div>

For color issue:

Point your css rule into something like this

Code:
.social-media ul li > a {
 text-decoration: none;
 color: #fff;
 ...etc
}
 
Status
Not open for further replies.

About this Thread

  • 14
    Replies
  • 731
    Views
  • 8
    Participants
Last reply from:
Jmrie_

Trending Topics

Online now

Members online
822
Guests online
659
Total visitors
1,481

Forum statistics

Threads
2,279,442
Posts
28,990,737
Members
1,225,914
Latest member
joh62
Back
Top