Skip to content

RR-JS-CSS-Convert-Mock #4

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
vpkonkiel wants to merge 10 commits into
base: main
Choose a base branch
from
Open

RR-JS-CSS-Convert-Mock #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4a008e5
added navbar main content and popular posts
vpkonkiel Nov 11, 2020
73eed82
added recent posts
vpkonkiel Nov 11, 2020
a8eabb7
fixed position of searchbar and add custom text
vpkonkiel Nov 11, 2020
11d1228
added responses
vpkonkiel Nov 12, 2020
9768d4b
added form at bottom and fixed formatting
vpkonkiel Nov 14, 2020
61d9db5
started adding copyright footer
vpkonkiel Nov 14, 2020
a44a005
added social media on footer
vpkonkiel Nov 14, 2020
40543ee
finished blog post page except minor formatting edits
vpkonkiel Nov 15, 2020
02c1d5b
main content on index.html and some formatting fixes on blog-post.html
vpkonkiel Nov 15, 2020
955040d
fixed formatting on index.html and tweaked some formatting on blog-po…
vpkonkiel Nov 16, 2020
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
259 changes: 259 additions & 0 deletions blog-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles/blog-post-css.css">

<!-- Twitter -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<title>Blog Post</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand ml-5 logo" href="#">Ikaros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto mr-5">
<li class="nav-item">
<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 active">
<a class="nav-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!-- /navbar -->

<!-- card columns -->
<div class="container" id="main-article" height="500px">
<div class="card-columns row mx-auto">
<div class="card col-lg-8">
<div class="card-body">
<img src="images/calendar.png" alt="Calendar Icon" width="60px" height="60px" style="border-radius: 10%;" id="ridiculus-image">
<div class="main-banner">
<h5 class="card-title">Ridiculus Mattis Lorem Dolor Inceptos</h5>
<hr>
<h6>Posted by <a href="...">admin</a> in <a href="...">Journal</a>, <a href="...">Photography</a>, <a href="...">Web Design</a> | <a href="...">9 Comments</a></h6>
</div>
<img src="images/grey-block.jpg" class="card-img-top" alt="grey block" height="250px">
<p class="card-text main-text mt-3">Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Aenean leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes ridiculus.</p>
<p class="card-text main-text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p class="card-text main-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</p>
<p class="card-text main-text">Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>

<div class="card" style="max-width: 250px; max-height: 750px;">
<div class="row no-gutters">
<div class="col-sm-12">
<div class="card-body">
<h5 class="card-title">POPULAR POSTS</h5>
<div class="container">
<div class="row">
<div class="col-sm-2">
<img src="images/grey-block.jpg" class="card-img" alt="grey block" id="vestibum">
</div>
<div class="col-sm">
<div class="card-body post-one">
<p class="card-text">Vestibum Malesuada Etiam Magna</p>
<p class="card-text"><small class="text-muted">22 Nov, 2012</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<img src="images/grey-block.jpg" class="card-img" alt="grey block">
</div>
<div class="col-sm-8">
<div class="card-body">
<p class="card-text">Mattis Egestas Fringilla Consectetur</p>
<p class="card-text"><small class="text-muted">15 Nov, 2012</small></p>
</div>
</div>
<div class="col-sm-4">
<img src="images/grey-block.jpg" class="card-img" alt="grey block">
</div>
<div class="col-sm-8">
<div class="card-body">
<p class="card-text">Justo Lorem Fermentum Ultricies Pharetra</p>
<p class="card-text"><small class="text-muted">12 Nov, 2012</small></p>
</div>
</div>
<hr>
<div class="mr-5 pb-1 ml-3">
<label id="search">SEARCH</label><br>
<input type="text" id="search" name="search">
</div>
<br>
<hr>
<div>
<label class="custom-text">CUSTOM TEXT</label>
<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>
<p>Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Fusce mauris condimentum.</p>
</div>
</div>
</div>

<div class="card-columns row mx-auto">
<div class="card col-lg-8">
<div class="card-body" id="recent-posts-imgs">
<h5 class="card-title">Related Posts</h5><br>
<image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
<image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
<image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
<image src="images/grey-block.jpg" alt="grey block" width="24.5%" height="100px"></image>
</div>
</div>
</div>

<hr>
<div class="card-columns row mx-auto">
<div class="card col-lg-8">
<div class="card-body">
<h5 class="card-title">2 Responses to "Ridiculus Mattis Lorem Dolor Inceptos "</h5><br>
<div class="container">
<div class="row">
<div class="col-md-2" id="barney-image">
<img src="images/grey-block.jpg" class="card-img" alt="grey block" width="5%" height="75px">
</div>
<div class="col-md-10">
<div class="card-body" id="barney-comment">
<h6 class="card-title">Barney Stinson</h6>
<p class="card-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula porta euismod semper.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2" id="ted-image">
<img src="images/grey-block.jpg" class="card-img" alt="grey block" width="5%" height="75px">
</div>
<div class="col-md">
<div class="card-body" id="ted-comment">
<h6 class="card-title">Ted Evelyn Mosby</h6>
<p class="card-text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="card-columns">
<div class="card col-lg">
<div class="card-body comment-form">
<h5 class="card-title">Submit a Comment</h5>
<p class="text-muted">Your email address will not be published. Required fields are marked *</p>
<form class="form-fields">
<input type="text" id="name" name="name" placeholder="Name *" size="85px" required><br>
<input type="email" id="email" name="email" placeholder="Email *" size="85px" required><br>
<input type="text" id="website" name="website" placeholder="Website" size="85px"><br>
<input type="textarea" id="message" name="message" size="85px"><br>
<button type="button" name="submit-button" id="submit-button" class="btn btn-info px-5">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /card columns -->

<!-- sub-footer -->
<div class="container sub-footer text-muted">
<div class="row m-5">
<div class="col-sm">
<h6>POPULAR POSTS</h6>
<p>Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</p>
<p>14 Nov, 2012</p>
<hr>
<p>Scelerisque nisl consectetur et.</p>
<p>22 May, 2012</p>
<hr>
<p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce</p>
<p>15 July, 2012</p>
</div>
<div class="col-sm twitter">
<h6>TWITTER</h6>
<i class="fa fa-twitter" style="line-height: 2.25;" class="text-muted"> Praesent commodo cursus magna Morbi leo risus nulla consectetur. -<a href="..." class="twitter-time">21 hours ago</a></i>
<hr>
<i class="fa fa-twitter" style="line-height: 2;" class="text-muted"> Vestibulum id ligula porta euismod semper, auctor dolor fermentum. -<a href="..." class="twitter-time">2 days ago</a></i>
<hr>
<i class="fa fa-twitter" style="line-height: 2;" class="text-muted"> Donec ullamcorper nulla non metus auctor. -<a href="..." class="twitter-time">3 days ago</a></i>
</div>
<div class="col-sm about-me">
<h6>A LITTLE ABOUT ME</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p>Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.</p>
</div>
<div class="col-sm">
<h6>CONTACT FORM</h6>
<div>
<input type="text" style="background-color: rgb(56, 51, 51); border: none;"><br><br>
<input type="text" style="background-color: rgb(56, 51, 51); border: none;"><br><br>
<input type="textarea" style="background-color: rgb(56, 51, 51); border: none;" class="sub-footer-form">
<button type="button" name="submit-button" id="submit-button-footer" class="btn btn-info px-4 mt-3">Submit</button>
</div>
</div>
</div>
</div>
<!-- /sub-footer -->

<!-- footer -->
<div class="footer d-flex">
<p class="mx-5 pt-3">&#169; 2011 Ikaros. Theme by <a href="...">elemis</a>.</p>
<div class="social-media mr-5">
<a href="...">
<img src="images/rss.png" alt="RSS" width="30px" height="30px">
</a>
<a href="...">
<img src="images/facebook.png" alt="Facebook" width="30px" height="30px">
</a>
<a href="...">
<img src="images/twitter.png" alt="Twitter" width="30px" height="30px">
</a>
<a href="...">
<img src="images/dribbble.png" alt="Dribbble" width="30px" height="30px">
</a>
<a href="...">
<img src="images/pinterest.png" alt="Pinterest" width="30px" height="30px">
</a>
<a href="...">
<img src="images/linkedin.png" alt="LinkedIn" width="30px" height="30px">
</a>
</div>
</div>
<!-- /footer -->

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Binary file added images/blog-post.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.
Binary file added images/blog.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.
Binary file added images/calendar.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.
Binary file added images/dribbble.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.
Binary file added images/facebook.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.
Binary file added images/grey-block.jpg
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.
Binary file added images/linkedin.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.
Binary file added images/pinterest.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.
Binary file added images/rss.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.
Binary file added images/twitter.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.
Loading