Saturday, February 17, 2018

Skptricks CSS html html5 web development Youtube Like Template Layout Design Using HTML5 and CSS

Youtube Like Template Layout Design Using HTML5 and CSS

by on February 17, 2018 in , , ,
In this post, we are going to discuss how to create youtube like HTML5 template design. In case you are new and want to build basic understanding on HTML5 Template design, Check out below blog archive  topic :
HTML5 Layout Design From Scratch including header, article, footer tag etc.

Here we have designed simple example using HTML5 semantic elements and also it includes basic header and footer design. Refer the below diagram that help you to build more understanding on HTML5 template design.

youtube html template free, youtube background template html, youtube like html template,youtube style html template

Youtube style html5 template design :

Lets see the below source code to build youtube like layout design.
Youtube HTML 5 Layout Design.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>HTML5 Template Design
    </title>
    <meta content='HTML5 Template Design' name='description' />
    <meta content='width=device-width, initial-scale=1' name='viewport' />
    <link rel="stylesheet" href="style.css" /> 
  </head>
  <body>
    <div id="main-container">
      <header id="header">
   
   <section> <img src="menu.png"  />  </section>
   <section style="font-size:24px;" > <img src="youtube.png"  /> Youtube </section>
   <section>  <input type="text" id="search" placeholder="Search "  />  </section> 
   <section style="background-color:#e5e5e5;width:50px;height:30px;text-align:center;"> <img src="search.png" style="margin-top:3px;"  /> </section>    
    
      </header>    
      
      <section id="main-body-container"  >
   
        <article id="main-article" >  
      <section style="text-align: center;width:100%;"> <iframe frameborder="0" style="min-width:99%;min-height:400px;"  src="https://www.youtube.com/embed/94DqCs8qtlI" ></iframe> </section> 
   <h1> Social Networking Project     </h1>
   <section> I have created Small Project based on Social networking site. You can check out the demo at www.wayplus.url.ph . Also you can share your Thoughts on this.
   This PHP project is an example of functionality of dynamic pages using php source code.Throughout this project JavaScript is used for validations be it simple one or complex.Facebook is a software for social networking media.
   Its a platform for sharing owr day-to-day life and thoughts by using electronic media.A totally new concept that is way ahead from the simple mail exchange andIM’s facilitated by Yahoomail and other mail servers. Now a days it’s widely used for sharingsome memorable movements of our life as-well-as bussiness growth by photo shairing. 
   The main types of social networking services contain category places(such as former school-year or classmates), means to connect with friends (usually with self-description pages), and a recommendation system linked to trust. One can categorize social-network services into three types:
   socializing social network services used primarily for socializing with existing friends (e.g., Facebook)
   networking social network services used primarily for non-social interpersonal communication (e.g., LinkedIn, a career- and employment-oriented site)
   social navigation social network services used primarily for helping users to find specific information or resources (e.g., Goodreads for books)
   </section>  
        </article>
  
        <aside id='sidebar' >
  
    <article id="slider-article">
    <section > <iframe style="min-width:20%;min-height:40px;" frameborder="0"  src="https://www.youtube.com/embed/PsaRb8ga3Y0" style=""></iframe> </section>  
    <h1> Submit Checkbox values in Form with JQuery/PHP  </h1>
    </article>
   
    <article id="slider-article">
    <section > <iframe style="min-width:20%;min-height:40px;" frameborder="0"  src="https://www.youtube.com/embed/94DqCs8qtlI" style=""></iframe> </section>  
    <h1> Social Networking Project in PHP </h1>
    </article> 
   
    <article id="slider-article">
    <section > <iframe style="min-width:20%;min-height:40px;" frameborder="0"  src="https://www.youtube.com/embed/qZXdPNW477o" style=""></iframe> </section>  
    <h1> Using Google reCAPTCHA with PHP - Are you a Robot?  </h1>
    </article> 
         
    <article id="slider-article">
    <section > <iframe style="min-width:20%;min-height:40px;" frameborder="0"  src="https://www.youtube.com/embed/4Gfk-Jt35gk" style=""></iframe> </section>  
    <h1> Htaccess File Tutorial and Tips </h1>
    </article>  

        </aside>
  
      </section>
   
      <footer id="footer">Copyright ©    <a href="http://www.skptricks.com">www.skptricks.com    </a>    </footer>
    </div>
  </body>
</html>

style.css
Stylesheet design for above html template.
* {
     margin: 0px;
     padding: 0px 
}
body{
 
 background-color: #f9f9f9;
}
 #main-container {
     width: 100%;
     margin: 0px auto;
}
 #header {
     width: 100%;
     background-color: white;
     padding: 10px;
     color: black;
  border-bottom:1px solid #f9f9f9;
}
 #header:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}
 #header section {
     float: left;     
     font-size: 18px;
     font-weight: bold;
  margin-right:22px;
  
}
input{
   display: block;            
   min-width: 100%;
   height: 6px;
   padding: 10px;
   border: solid 1px #BDC7D8;
   width:300px;
   margin-left:22px;
}

 #main-body-container {
     padding: 10px;
     margin: 0px auto; 
  width:80%;
}
 #main-body-container:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

 #main-article {
     float: left;
     width: 60%;
     min-height: 450px;     
  margin-top:10px;
}
 #sidebar {
     float: left;
     width: 28%;
     min-height: 450px;     
  margin-top:10px;
  margin-left:20px;
}
#slider-article{
 
 margin-bottom:10px;
}

 #footer {
     width: 100%;
     background-color: #ccc;
     padding: 10px;
     
}

Output:

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Youtube%20Like%20Template%20Layout%20Design%20Using%20HTML5%20and%20CSS

Demo Link :
https://skptricks.github.io/learncoding/youtube-template-design/Youtube%20HTML%205%20Layout%20Design.html

 This all about design of youtube like html template including header and footer design. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.



By at
Tags: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)