CSY1018-assignment-1/blog/blog.html

96 lines
6.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio showcasing projects worked on by Joshua Perry">
<meta name="keywords" content="HTML, CSS, JavaScript, jpez, jpez-development, home, bio, portfolio">
<meta name="author" content="Joshua Perry">
<base href="../">
<title>Blog: J-Pez Development</title>
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
<link rel="stylesheet" href="style/main.css" media = "screen">
<link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
<link rel="stylesheet" href="blog/blog.css" media="screen">
</head>
<body id="clicked">
<nav class="navigation">
<a class="hidenav" href="blog/blog.html#"> X</a>
<a class="nav link" id="home" href="home/index.html"><h2>J-Pez Development</h2></a>
<a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
<a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a>
<a class="arrow right"></a>
</nav>
<main id="open">
<a class="shownav" href="blog/blog.html#clicked"></a>
<section class="blog">
<section class="blog_post" id="first">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="second">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="third">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="fourth">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="fifth">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
<section class="blog_post" id="sixth">
<button class="arrow"></button>
<h1 class="blog_title">Blog Title</h1>
<img class="blog_image" src="assets/images/profileImage.png"/>
<p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
<p class="blog_details"></p>
</section>
</section>
</main>
<footer>
<a href="home/index.html">
<img src="assets/images/favicon.svg" id="footer_logo" alt="Logo"/>
<p>&copy;Joshua Perry 2022</p>
</a>
<a href="blog/blog.html"><h1>Blog</h1></a>
<a href="site/.html"><h1>Site Report</h1></a>
<a href="site/map.html"><h1>Site Map</h1></a>
<a href="site/construction.html"><h1>Terms</h1></a>
<a href="site/construction.html"><h1>Privacy</h1></a>
</footer>
</body>
</html>