Pemrograman Web dengan Bootstrap

Assalamualaikum Wr. Wb.

Disini saya akan memposting sebuah karya seni 'jiah seni' hehe

Tugas dari dosen yg bikin pusing, kasih tugas masak cuma kasih tenggang 1 hari doank 'ohh no'

Tapi tunggu dulu tidak ada dosen yang akan membuat para mahasiswanya jadi orang yang "gx bener". Itu dilakukan biar kita bisa lebih berusaha menghadapi setiap masalah, ya contohnya tugas ini Dan dengan kerja keras akhirnya  dapat menyelesaikan tugas itu.

Oke langsung aja deh, ini hasil 'coding' yang berhasil terselesaikan :



  <!DOCTYPE html>
<html>
<head>
<title>P.Web Bootstrap</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">



<div class="row">
    <div id="nav" class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="index.html" class="brand">Anang Purnomo</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#home" class="anchorLink">Home</a></li>
                        <li><a href="#about" class="anchorLink">About</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="https://www.facebook.com/micaello.dificiles?ref=tn_tnmn">Facebook</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav pull-right">
                        <li>
                            <form class="form-search navbar-search">
                                <input type="text" class="search-query input-medium" placeholder="Search">
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
         <div class="container welcome-message">

             <h2>n</h2>
             <p></p>
         </div>
     </div>

     <div class="row">
         <div class="container">
             <div id="myCarousel" class="carousel slide">
                 <div class="carousel-inner">
                     <div class="item active">
                         <img src="d.jpg"alt="">
                         <div class="carousel-caption">
                             <h4>SanSiro Stadium</h4>
                             <p></p>
                         </div>
                     </div>
                     <div class="item">
                         <img src="a.jpg"alt="">
                         <div class="carousel-caption">
                             <h4>Maguwoharjo International Stadium</h4>
                             <p></p>
                         </div>
                     </div>
                     <div class="item">
                         <img src="c.jpg"alt="">
                         <div class="carousel-caption">
                             <h4>Stamforbridge stadium</h4>
                             <p></p>
                         </div>
                     </div>
                 </div>
                 <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                 <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
             </div>
         </div>
     </div>
     </br>

<div class="container-fluid">
<div class="row-fluid">
<div class="span2" id="sidebar">
<div class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">UAD</a></li>
<li><a href="#">Aplikasi</a></li>
<li><a href="#">Hacking</a></li>
<li><a href="#">Berita Terkini</a></li>
<li><a href="#">Lain-lain</a></li>
</div>
</div>
<div class="span10" id="isi"> 
<div class="hero-unit">
<h4>Hello, world!</h4>
<p>isi dengan apa yang anda inginkan.</p><br />
<a class="btn btn-primary btn-large" href="#">Read more</a>
</div>
</div>
</div>
</div>

<p>__________________________________________________________________________________________________________________________</p>

<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>isi dengan apa yang anda inginkan.</p><br />
<a class="btn" href="#">Read More</a></div>
<div class="span4">
<h2>Heading</h2>
<p>isi dengan apa yang anda inginkan.</p><br />
<a class="btn" href="#">Read More</a></div>
<div class="span4">
<h2>Heading</h2>
<p>isi dengan apa yang anda inginkan.</p><br />
<a class="btn" href="#">Read More</a></div>
</div>
</div>

<p>__________________________________________________________________________________________________________________________</p>
 
  <div id="contact" class="row">
        <div class="container">
            <h2>Contact</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="span6">
                    <form>
                        <label>Name :</label>
                        <input class="span6" type="text" placeholder="Nama Anda">
                        <label>Email Address :</label>
                        <input class="span6" type="text" placeholder="anangpurnomo23@yahoo.com">
                        <label>Your Message :</label>
                        <textarea class="input-xlarge span6" id="textarea" rows="6" placeholder="Pesan Anda"></textarea>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>

      
</head>



<body>

<script src="#"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->
<p>__________________________________________________________________________________________________________________________</p>
<div id='footer' align="center">Copyright &#169; 2013 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Powered by <a href='anang12018021.blogspot.com'>Anang Purnomo</a>
</div>
<p>__________________________________________________________________________________________________________________________</p>

</body>

</html>


Terlihat sangat rumit dan bikin pusing,, Emang gitu kenyataanya.

Hasil ScreenShot nya :

dan untuk file nya bisa di download klik Disini

Sekian Tugas Pemrograman Web.

TERIMA KASIH


Posting Komentar

Lebih baru Lebih lama

Popular Items