Skip to content

Completed CSS-Mock #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KalynS wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Completed CSS-Mock #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
229 changes: 229 additions & 0 deletions blog-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style/styles.css">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Ikaros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-center collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!--SideBar -->
<div class="container" id="sidebar">
<h4><strong>POPULAR POSTS</strong></h4>
<div class="blog-card">
<div class="blog-card__image"></div>
<div class="blog-card__info">
<p>Vestibum malesuada</p>
<p>Etiam Magna</p>
<p><small>22 Nov, 2012</small></p>
</div>
</div>
<div class="blog-card">
<div class="blog-card__image"></div>
<div class="blog-card__info">
<p>Mattis Egestas </p>
<p>Fringilla Consectetur</p>
<p><small>15 Nov, 2012</small></p><br>
</div>
</div>
<div class="blog-card">
<div class="blog-card__image"></div>
<div class="blog-card__info">
<p>Justo Lorem </p>
<p>Fermentum Ultricies </p>
<p>Pharetra</p>
<p><small>12 Nov, 2012</small></p>
</div>
</div>
<img src=images/Dots-Horizontal.png width="400px;" height="40px;" alt="dots"> <br>
<h4><strong>SEARCH</strong></h4>
<input type="text">
<br><br>
<img src=images/Dots-Horizontal.png width="400px;" height="40px;" alt="dots"> <br>
<h4><strong>CUSTOM TEXT</strong></h4>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p><br>
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Fusce mauris condimentum.</p>
</div>
<div class="vl"></div>
<!--Main Content-->
<div class="container">
<div class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center"></div>
<div class="container main-content">
<div class="numberCircle">23 JAN</div><br><br>
<h2 class="blog-post-title">Pellentesque euismod libero nulla</h2>
<img src=images/Dots-Horizontal.png width="600px;" height="40px;" alt="dots"> <br>
<p class="blog-post-meta"> Posted by <a href="#">admin </a>in<a href="#"> Journal, Photography, Web Design | 9 Comments</a></p>
<div class="jumbotron p-4 p-md-5 rounded bg-dark" > </div>
</div>
</div>
<main role="main" >
<div class="row">
<div class="col-md-8 blog-main">
<div class="blog-post"><br>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod libero nulla, eu laoreet sapien ultricies a. Aliquam erat volutpat. Mauris quis magna ultricies, tempus velit at, dapibus orci. Nulla massa neque, hendrerit ultricies turpis sed, euismod pretium risus. Curabitur luctus, turpis quis tristique mattis, arcu nisl accumsan lectus, non vulputate eros nisl ac tellus. Aenean porttitor arcu mi, sit amet interdum ligula euismod ut.</p><br>
<p>Nam ac erat quis lorem commodo bibendum. In hac habitasse platea dictumst. Quisque quis nibh ac orci placerat consequat vestibulum non tortor.</p><br>
<blockquote>
<p>Phasellus vehicula augue sed velit vehicula gravida. Pellentesque eget ante eget sem suscipit sodales. Nunc feugiat, est non dignissim tristique, neque lacus vulputate nulla, hendrerit dignissim elit augue rhoncus mi. Cras scelerisque ultrices condimentum. </p><br>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p><br>
<img src="images/Dots-Horizontal.png" width="700px;" height="40px;" alt="dots">
</div>
<!--Related posts boxes -->
<h2>Related Posts</h2>
<div class="row">
<div class="col-md-3" id="post-one">
<div class="card mb-3 shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em"></text></svg>
</div>
</div>
<div class="col-md-3" id="post-two">
<div class="card mb-3 shadow-sm " >
<svg class="bd-placeholder-img card-img-top" width="100%" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em"></text></svg>
</div>
</div>
<div class="col-md-3" id="post-three">
<div class="card mb-3 shadow-sm " >
<svg class="bd-placeholder-img card-img-top" width="100%" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em"></text></svg>
</div>
</div>
<div class="col-md-3" id="post-four">
<div class="card mb-3 shadow-sm " >
<svg class="bd-placeholder-img card-img-top" width="100%" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em"></text></svg>
</div>
</div>
</div>
<img src="images/Dots-Horizontal.png" width="700px;" height="40px;" alt="dots">
</div>
<!--2 responses section-->
<h4> 2 Responses to "Pellentesque euismod libero nulla"</h4>
<div class= "row">
<div class="col-md-4" id="respond-one" >
<div class="card mb-4 shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="75%" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em"></text></svg>
</div>
</div>
<div class="card-body">
<h3>Barney Stinson</h3>
<p class="card-text ">Vestibulum placerat tempus mauris.</p>
</div><br>
</div><br>
<div class= "row">
<div class="col-md-4" id="respond-two" >
<div class="card mb-4 shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="75%" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em"></text></svg>
</div>
</div>
<div class="card-body">
<h3>Ted Evelyn Mosby </h3>
<p class="card-text ">Duis nec fringilla nulla. </p>
</div>
</div>
<img src="images/Dots-Horizontal.png" width="1000px;" height="40px;" alt="dots">
<!--comment section with boxes-->
<div class="blog-post">
<h2 class="blog-post-title">Submit a Comment</h2>
<p class="blog-post-meta">Your email address will not be published. Requiered fields are marked *</p>
<div class="col-md-3 col-sm-6 col-xs-12 segment-four">
<form action="">
<input type='text w-auto' id="box-4" placeholder=" Name*" style="width: 55rem;">
</form><br>
<form action="">
<input type='text w-auto' id="box-5" placeholder=" Email*" style="width:55rem;">
</form><br>
<form action="">
<input type='text' id="box-6" placeholder=" Website" style="width:55rem;">
</form><br>
<textarea action="" id="box-7" style="width:55rem; height: 300px;"></textarea>
<div>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<div class="btn float-left"></div>
<div>
</div>
</main>
</div>
<!--Footer-->
<footer>
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 segment-one">
<h5>POPULAR POSTS</h5>
<p> Sed gravida urna et purus dapibus, et accumsan massa feugiat.<br> 14 Nov, 2012 </p>
<p> Ut tristique pharetra orci, ac sollicitudin mauris tempor vitae.<br> 22 May, 2012 </p>
<p> Vivamus suscipit est vel urna dictum sodales.</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 segment-two">
<h5>TWITTER</h5>
<p><i style='font-size:24px' class='fab'>&#xf099;</i> Curabitur luctus erat nec arcu pellentesque convallis. <a href=“#598BAF”> -21 hours ago</a></p>
<p><i style='font-size:24px' class='fab'>&#xf099;</i> Cras gravida fermentum ante, in egestas lacus accumsan vitae. <a href=“#598BAF”> -2 days ago</a></p>
<p><i style='font-size:24px' class='fab'>&#xf099;</i> Pellentesque magna lacus, pellentesque at pretium pretium, maximus eu lectus. <a href=“#598BAF”> -3 days ago</a></p><br>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 segment-three">
<h5>A LITTLE ABOUT ME</h5>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vitae sem posuere mattis ac in eros. Etiam ullamcorper malesuada erat, luctus pulvinar purus ultrices id. Morbi porttitor ex sit amet facilisis lacinia. </p>
<p> Mauris rutrum consectetur luctus. Morbi ut convallis mauris, vel eleifend tellus. Nunc sapien augue, tristique sit amet aliquam ac, euismod at nisl. Vivamus vel purus et lorem dictum pharetra vitae eu lectus.</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 segment-four">
<h5>CONTACT FORM</h5>
<form action="">
<input type='text' id="box-1">
</form><br>
<form action="">
<input type='text' id="box-2">
</form><br>
<textarea action="" id="box-3"></textarea><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="copy">&copy; 2011 Ikaros. Theme by <a href=#588bae>elemis.</a></div>
<a href="#" class="fa fa-linkedin float-right"></a>
<a href="#" class="fa fa-pinterest float-right"></a>
<a href="#" class="fa fa-dribbble float-right"></a>
<a href="#" class="fa fa-twitter float-right"></a>
<a href="#" class="fa fa-facebook float-right"></a>
<a href="#" class="fa fa-rss float-right"></a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Binary file added images/Dots-Horizontal.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 blog-post.png → images/blog-post.png
View file
Open in desktop
File renamed without changes
0 blog.png → images/blog.png
View file
Open in desktop
File renamed without changes
Loading