HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Exercise 8 CSS Side bar navigation.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
$('i').click(function(){
$('ul').toggleClass('ul_show');
$('section').toggleClass('slide_image');
});
$('li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>
</head>
<body>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#link">Link</a></li>
</ul>
<section>
<i class="fas fa-bars"></i>
<div class="sec1">
</div>
<h2 id="Home">
Home</h2>
<H1>Hi my name is Excekel Cabarloc I'm a Freelance Videographer and Graphic Designer</h1>
<div class="sec2">
</div>
<h2 id="portfolio">
Portfolio</h2>
<p>
</p>
<div id="imagelist">
<a href="https://ibb.co/C89WTMD"><img src="https://i.ibb.co/8sxXSdt/DEADSKULL.png" alt="DEADSKULL" border="0" height="300" width="auto"></a>
<a href="https://ibb.co/r7qRrps"><img src="https://i.ibb.co/Rvtkw6y/ANDROID.png" alt="ANDROID" height="300" width="auto"></a>
<a href="https://ibb.co/0yJPR0B"><img src="https://i.ibb.co/TMhzxQK/HOPE.png" alt="HOPE" border="0" height="300" width="auto"></a>
<a href="https://ibb.co/bsyfWy1"><img src="https://i.ibb.co/y6M3fM0/SPACE.png" alt="SPACE" border="0" height="300" width="auto"></a>
<div class="sec3">
</div>
<h2 id="profile">
Profile</h2>
<p>HI! I'm <h1>Excekel Cabarloc</h1><br> Aspiring Videographer and Graphic Designer, I'm currently 3rd year Multimedia Arts student in University of Perpetual Help Molino. </p><br>
<li> Digital arts
<p>I make my own digital art and vector art I posted it on my instagram account</p>
<li> Photography
<p> Itake pictures in event like Debut and Wedding</p><br>
<li> Video and Film Productions
<p> I have some short film in my youtube channel</p><br>
<div class="sec4">
</div>
<h2 id="contact">
Contact</h2>
<h2>You Can contact me Via Instagram: KVNFVZED </h2>
<div class="sec5">
</div>
<h2 id="link">
link</h2>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
<a href="#" class="fa fa-youtube"></a>
...
<p> <a
<div class="sec6">
</div>
</div>
</section>
</body>
</html>
No comments:
Post a Comment