Contoh Script HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Title Tag -->
<title>Arief_ichwan.f</title>
<!--
November Template
http://www.templatemo.com/tm-473-november
-->
<!-- <<Mobile Viewport Code>> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <<Attched Stylesheets>> -->
<link rel="stylesheet" href="css/theme.css" type="text/css" />
<link rel="stylesheet" href="css/media.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,600italic,400italic,800,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- \\ Begin Holder \\ -->
<div class="DesignHolder">
<!-- \\ Begin Frame \\ -->
<div class="LayoutFrame">
<!-- \\ Begin Header \\ -->
<header>
<div class="Center">
<div class="site-logo">
<h1><a href="#">Arief<span>Ichwan</span>Fanani</a></h1>
</div>
<div id="mobile_sec">
<div class="mobile"><i class="fa fa-bars"></i><i class="fa fa-times"></i></div>
<div class="menumobile">
<!-- \\ Begin Navigation \\ -->
<nav class="Navigation">
<ul>
<li class="active">
<a href="#home">Home</a>
<span class="menu-item-bg"></span>
</li>
<li>
<a href="#about">Profil</a>
<span class="menu-item-bg"></span>
</li>
<li>
<a href="#services">Tentang</a>
<span class="menu-item-bg"></span>
</li>
<li>
<a href="#contact">Kontak</a>
<span class="menu-item-bg"></span>
</li>
</ul>
</nav>
<!-- // End Navigation // -->
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!-- // End Header // -->
<!-- \\ Begin Banner Section \\ -->
<div class="Banner_sec" id="home">
<!-- \\ Begin banner Side -->
<div class="bannerside">
<div class="Center">
<!-- \\ Begin Left Side -->
<div class="leftside">
<h3>Biodata<span>Arief Ichwan Fanani</span></h3>
<p>Arief Ichwan Fanani, Kelas 12 Jurusan Teknik Komputer Jaringan di SMK HARAPAN BANGSA,</p>
<a href="#about">MORE DETAILS</a>
</div>
<!-- // End Left Side // -->
<!-- \\ Begin Right Side -->
<div class="rightside">
<ul id="slider">
<li>
<div class="Slider">
<figure><img src="foto1.jpg" alt="foto"></figure>
<div class="text">
<div class="Icon">
<ul>
<li><a href="#"><i class="fa fa-heart"></i>100k</a></li>
<li><a href="#"><i class="fa fa-commenting"></i>0</a></li>
</ul>
</div>
<div class="Lorem">
<p>Arief Ichwan Fanani<span>LP2M ARAY</span></p>
</div>
</div>
</div>
</li>
<li>
<div class="Slider">
<figure><img src="foto2.jpg" alt="foto"></figure>
<div class="text">
<div class="Icon">
<ul>
<li><a href="#"><i class="fa fa-heart"></i>700k</a></li>
<li class="num"><a href="#"><i class="fa fa-commenting"></i>0</a></li>
</ul>
</div>
<div class="Lorem">
<p>Arief Ichwan Fanani<span>HARAPAN BANGSA</span></p>
</div>
</div>
</div>
</li>
</ul>
<figure><img src="img/Shadow-img.png" alt="image" class="Shadow"></figure>
</div>
<!-- // End Right Side // -->
</div>
</div>
<!-- // End banner Side // -->
<div class="clear"></div>
</div>
<!-- // End Banner Section // -->
<div class="bgcolor"></div>
<!-- \\ Begin Container \\ -->
<div id="Container">
<!-- \\ Begin About Section \\ -->
<div class="About_sec" id="about">
<div class="Center">
<h2>Biodata</h2>
<p>Nama Arief Ichwan Fanani<br>Tempat,tanggal lahir : Jakarta,24 Desember 2004<br>Jenis kelamin : Laki-laki<br>Sekolah : SMK HARAPAN BANGSA<br>Jurusan : Teknik Komputer Jaringan(TKJ)</p>
<div class="Line"></div>
<!-- \\ Begin Tab side \\ -->
<div class="Tabside">
<ul>
<li><a href="javascript:;" class="tabLink activeLink" id="cont-1">Mision</a></li>
<li><a href="javascript:;" class="tabLink" id="cont-2">vision</a></li>
</ul>
<div class="clear"></div>
<div class="tabcontent" id="cont-1-1">
<div class="TabImage">
<div class="img1">
<figure><img src="foto3.jpg" alt="foto"></figure>
</div>
<div class="img2">
<figure><img src="foto4.jpg" alt="foto"></figure>
</div>
</div>
<div class="Description">
<h3>Misi<span>berusaha menjadi yang terbaik</span></h3>
<p>1. Menjadi seorang pengusaha yang membawa dampak bagi lingkungannya.<br>
2. Dikenal dan dihormati sebagai salah satu asosiasi utama dari pengembangan sumber daya manusia profesional.</p>
</div>
</div>
<div class="tabcontent hide" id="cont-2-1">
<div class="TabImage">
<div class="img1">
<figure><img src="foto3.jpg" alt="foto"></figure>
</div>
<div class="img2">
<figure><img src="foto4.jpg" alt="foto"></figure>
</div>
</div>
<div class="Description">
<h3>VISI<span>Menjadi pribadi yang bertanggung jawab</span></h3>
<p> “ menjadi pribadi yang profesional bagi kemajuan". Visi visi saya dalam bekerja adalah “menjadi pegawai yang profesional, tangguh, bertanggung jawab, dan peduli secara sosial pada perusahaan”.</p>
</div>
</div>
<div class="tabcontent hide" id="cont-3-1">
<div class="TabImage">
<div class="img1">
<figure><img src="img/about-img2.jpg" alt="image"></figure>
</div>
<div class="img2">
<figure><img src="img/about-img1.jpg" alt="image"></figure>
</div>
</div>
<div class="Description">
<h3>Donec molestie malesuada nisl <span>Aenean eget consequat diam</span></h3>
<p>Nullam at sem non enim aliquam ultrices non quis magna. In interdum interdum magna vitae accumsan. Etiam turpis tortor, malesuada vitae metus non, pharetra auctor mi. Pellentesque tincidunt enim vitae tincidunt euismod. Integer id ex enim. Nullam euismod efficitur libero quis interdum.</p>
<p>Phasellus porttitor tempus nibh, id luctus nibh porta ac. Nunc sed metus est. Proin ut nisi metus. Duis consectetur purus iaculis ornare suscipit.</p>
</div>
</div>
<div class="clear"></div>
</div>
<!-- // End Tab Side // -->
</div>
</div>
<!-- // End About Section // -->
<!-- \\ Begin Services Section \\ -->
<div class="Services_sec" id="services">
<div class="Center">
<h2>TENTANG</h2>
<p> Hoby yang paling saya sukai</p>
<div class="Line"></div>
<!-- \\ Begin Services Side \\ -->
<div class="Serviceside">
<ul>
<li class="Development"><a href="#services"><h4>VOLY</h4></a></li>
<li class="Desdin"><a href="#services"><h4>FUTSAL</h4></a></li>
<li class="Concept"><a href="#services"><h4>RENANG</h4></a></li>
<li class="System"><a href="#services"><h4>GAME</h4></a></li>
</ul>
</div>
<!-- // End Services Side // -->
</div>
</div>
<!-- // End Services Section // -->
<!-- \\ Begin Contact Section \\ -->
<div class="Contact_sec" id="contact">
<div class="Contactside">
<div class="Center">
<h2>Kontak Saya</h2>
<p></p>
<div class="Line"></div>
</div>
</div>
<div class="Map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2724.080530773068!2d106.83513506534179!3d-6.3530505382590325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69eb428c638947%3A0x3be0fb2677668621!2sSekolah%20Menengah%20Kejuruan%20Harapan%20Bangsa!5e0!3m2!1sid!2sid!4v1659928487017!5m2!1sid!2sid" width="1255" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- \\ Begin Get Section \\ -->
<div class="Get_sec">
<div class="Mid">
<!-- \\ Begin Left Side \\ -->
<div class="Leftside">
<form action="#">
<fieldset>
<p><input type="text" value="" placeholder="NAME" class="field"></p>
<p><input type="email" value="" placeholder="EMAIL" class="field"></p>
<p><input type="text" value="" placeholder="TITLE" class="field"></p>
<p><textarea cols="2" rows="2" placeholder="MESSAGE"></textarea></p>
<p><input type="submit" value="send" class="button"></p>
</fieldset>
</form>
</div>
<!-- // End Left Side // -->
<!-- \\ Begin Right Side \\ -->
<div class="Rightside">
<h3>Hubungi !</h3>
<address>
Jl. Akses UI No.89, RW.1, Tugu, Kec. Cimanggis, Kota Depok, Jawa Barat 16451
</address>
<address class="Number">
(Tri) - <br>(By.u) -
</address>
<address class="Email">
<a href="mailto:ariefichwan2404@gmail.com">ariefichwan2404@gmail.com</a>
</address>
<div class="clear"></div>
<ul>
<li><a rel="nofollow" href="https://id-id.facebook.com/lp2maray/photos/" target="_new"><img src="img/facebook-icn.png" alt="fb"></a></li>
<li><a href="https://twitter.com/lp2maray"><img src="img/twitter-icn.png" target="_new" alt="tweter"></a></li>
<li><a href="#"><img src="img/google-plus-icn.png" target="_new" alt="google"></a></li>
</ul>
</div>
<!-- // End Right Side // -->
</div>
<!-- \\ Begin Footer \\-->
<footer>
<div class="Cntr">
<p>COPYRIGHT © 2084 COMPANY NAME. DESIGN: <a rel="nofollow" href="http://www.templatemo.com" target="_parent">TEMPLATEMO</a></p>
</div>
</footer>
<!-- // End Footer // -->
</div>
<!-- // End Get Section // -->
</div>
<!-- // End Contact Section // -->
</div>
<!-- // End Container // -->
</div>
<!-- // End Layout Frame // -->
</div>
<!-- // End Design Holder // -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- <<Attched Javascripts>> -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.sudoSlider.min.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
</body>
</html>
Hasil Script HTML :
0 Komentar