/ / / / How to design template in Laravel-Part2

How to design template in Laravel-Part2

First you choose an html template from websites (e.g-- http://html5up.net/read-only/download)
And download it.

After complete download unzip this file. Copy this files and Paste in a folder in your project.

Now open index.html in your editor


And divvied code three part. 1. Header 2.Content and 3.footer

Header.blade.php:


<!DOCTYPE HTML>



<!--



                Read Only by HTML5 UP



                html5up.net | @n33co



                Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)



-->



<html>



                <head>



                                <title>Read Only by HTML5 UP</title>



                                <meta http-equiv="content-type" content="text/html; charset=utf-8" />



                                <meta name="description" content="" />



                                <meta name="keywords" content="" />



                                <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->



                                {{ HTML::script('assets/js/jquery.min.js') }}



                                {{ HTML::script('assets/js/jquery.scrollzer.min.js') }}



                                {{ HTML::script('assets/js/jquery.scrolly.min.js') }}



                                {{ HTML::script('assets/js/skel.min.js') }}



                                {{ HTML::script('assets/js/skel-layers.min.js') }}



                                {{ HTML::script('assets/js/init.js') }}



                               







                               



                                                {{ HTML::style('css/skel.css') }}



                                                {{ HTML::style('css/style.css') }}



                                                {{ HTML::style('css/style-xlarge.css') }}



                                               



                               



                                <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->



                </head>



                <body>



                                <div id="wrapper" style="padding:0px;">







                                                <!-- Header -->



                                                                <section id="header" class="skel-layers-fixed">



                                                                                <header>



                                                                                                <span class="image avatar">



                                                                                                {{ HTML::image('assets/images/avatar.jpg') }}







                                                                                                <h1 id="logo"><a href="#">Willis Corto</a></h1>



                                                                                                <p>I got reprogrammed by a rogue AI<br />



                                                                                                and now I'm totally cray</p>



                                                                                </header>



                                                                                <nav id="nav">



                                                                                                <ul>



                                                                                                                <li><a href="#one" class="active">About</a></li>



                                                                                                                <li><a href="#two">Things I Can Do</a></li>



                                                                                                                <li><a href="#three">A Few Accomplishments</a></li>



                                                                                                                <li><a href="#four">Contact</a></li>



                                                                                                </ul>



                                                                                </nav>



                                                                                <footer>



                                                                                                <ul class="icons">



                                                                                                                <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>



                                                                                                                <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>



                                                                                                                <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>



                                                                                                                <li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>



                                                                                                                <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>



                                                                                                </ul>



                                                                                </footer>



                                                                </section>







                                                <!-- Main -->



                                                                <div id="main">


Footer.blade.php:

     </div>









           <!-- Footer -->



                  <section id="footer">



                     <div class="container">



                               <ul class="copyright">



                                     <li>&copy; Untitled. All rights reserved.</li>

                                     <li>Design: <a href="http://html5up.net">HTML5 UP</a></li>



                                 </ul>



                         </div>



                     </section>



                                               



                 </div>



          </body>

</html>



Template.blabe.php:


@include('template.header')





@yield('content')

@include('template.footer')


Helo.blade.php:

 @extends('template.template')









@section('content')







<!-- One -->



                                                                                                <section id="one">



                                                                                                                <div class="container">



                                                                                                                                <header class="major">



                                                                                                                                                <h2>Read Only</h2>



                                                                                                                                                <p>Just an incredibly simple responsive site<br />



                                                                                                                                                template freebie by <a href="http://html5up.net">HTML5 UP</a>.</p>



                                                                                                                                </header>



                                                                                                                                <p>Faucibus sed lobortis aliquam lorem blandit. Lorem eu nunc metus col. Commodo id in arcu ante lorem ipsum sed accumsan erat praesent faucibus commodo ac mi lacus. Adipiscing mi ac commodo. Vis aliquet tortor ultricies non ante erat nunc integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer non. Adipiscing cubilia elementum.</p>



                                                                                                                </div>



                                                                                                </section>



                                                                                               



                                                                                <!-- Two -->



                                                                                                <section id="two">



                                                                                                                <div class="container">



                                                                                                                                <h3>Things I Can Do</h3>



                                                                                                                                <p>Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer non. Adipiscing cubilia elementum integer lorem ipsum dolor sit amet.</p>



                                                                                                                                <ul class="feature-icons">



                                                                                                                                                <li class="fa-code">Write all the code</li>



                                                                                                                                                <li class="fa-cubes">Stack small boxes</li>



                                                                                                                                                <li class="fa-book">Read books and stuff</li>



                                                                                                                                                <li class="fa-coffee">Drink much coffee</li>



                                                                                                                                                <li class="fa-bolt">Lightning bolt</li>



                                                                                                                                                <li class="fa-users">Shadow clone technique</li>



                                                                                                                                </ul>



                                                                                                                </div>



                                                                                                </section>



                                                                                               



                                                                                <!-- Three -->



                                                                                                <section id="three">



                                                                                                                <div class="container">



                                                                                                                                <h3>A Few Accomplishments</h3>



                                                                                                                                <p>Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer non. Adipiscing cubilia elementum integer. Integer eu ante ornare amet commetus.</p>



                                                                                                                                <div class="features">



                                                                                                                                                <article>



                                                                                                                                                                <a href="#" class="image">



                                                                                                                                                                {{ HTML::image('assets/images/pic01.jpg') }}



                                                                                                                                                               



                                                                                                                                                                </a>



                                                                                                                                                                <div class="inner">



                                                                                                                                                                                <h4>Possibly broke spacetime</h4>



                                                                                                                                                                                <p>Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer adipiscing ornare amet.</p>



                                                                                                                                                                </div>



                                                                                                                                                </article>



                                                                                                                                                <article>



                                                                                                                                                                <a href="#" class="image">



                                                                                                                                                                {{ HTML::image('assets/images/pic02.jpg') }}



                                                                                                                                                               



                                                                                                                                                                </a>



                                                                                                                                                                <div class="inner">



                                                                                                                                                                                <h4>Terraformed a small moon</h4>



                                                                                                                                                                                <p>Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer adipiscing ornare amet.</p>



                                                                                                                                                                </div>



                                                                                                                                                </article>



                                                                                                                                                <article>



                                                                                                                                                                <a href="#" class="image">



                                                                                                                                                                {{ HTML::image('assets/images/pic03.jpg') }}



                                                                                                                                                               



                                                                                                                                                                </a>



                                                                                                                                                                <div class="inner">



                                                                                                                                                                                <h4>Snapped dark matter in the wild</h4>



                                                                                                                                                                                <p>Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer adipiscing ornare amet.</p>



                                                                                                                                                                </div>



                                                                                                                                                </article>



                                                                                                                                </div>



                                                                                                                </div>



                                                                                                </section>



                                                                                               



                                                                                <!-- Four -->



                                                                                                <section id="four">



                                                                                                                <div class="container">



                                                                                                                                <h3>Contact Me</h3>



                                                                                                                                <p>Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer non. Adipiscing cubilia elementum integer. Integer eu ante ornare amet commetus.</p>



                                                                                                                                <form method="post" action="#">



                                                                                                                                                <div class="row uniform collapse-at-2">



                                                                                                                                                                <div class="6u"><input type="text" name="name" id="name" placeholder="Name" /></div>



                                                                                                                                                                <div class="6u"><input type="email" name="email" id="email" placeholder="Email" /></div>



                                                                                                                                                </div>



                                                                                                                                                <div class="row uniform">



                                                                                                                                                                <div class="12u"><input type="text" name="subject" id="subject" placeholder="Subject" /></div>



                                                                                                                                                </div>



                                                                                                                                                <div class="row uniform">



                                                                                                                                                                <div class="12u"><textarea name="message" id="message" placeholder="Message" rows="6"></textarea></div>



                                                                                                                                                </div>



                                                                                                                                                <div class="row uniform">



                                                                                                                                                                <div class="12u">



                                                                                                                                                                                <ul class="actions">



                                                                                                                                                                                                <li><input type="submit" class="special" value="Send Message" /></li>



                                                                                                                                                                                                <li><input type="reset" value="Reset Form" /></li>



                                                                                                                                                                                </ul>



                                                                                                                                                                </div>



                                                                                                                                                </div>



                                                                                                                                </form>



                                                                                                                </div>



                                                                                                </section>









@stop



Now show your project



Note: Generating a Link to CSS,js,image File


Css:
{{ HTML::style('css/skel.css') }}
Js:
{{ HTML::script('assets/js/jquery.min.js') }}
Img:
{{ HTML::image('assets/images/avatar.jpg') }} 
Share on Google Plus

About Samsul Hoque

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )