Skip to content

SLMcIntyre JS CSS Mockup Lab #12

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

SLMcIntyre JS CSS Mockup Lab #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
20ac805
1st draft of blog mockup -added header, cards, and footer
SLMcIntyre Nov 17, 2020
1739a70
added catergory comments to css stylesheet
SLMcIntyre Nov 17, 2020
2fe7810
changed background color of header, footer, and secondary content
SLMcIntyre Nov 17, 2020
5e39a52
changed background color of card image placeholder
SLMcIntyre Nov 18, 2020
045d54a
added contact form to secondary-content
SLMcIntyre Nov 18, 2020
8c40b65
added submit and older posts buttons
SLMcIntyre Nov 18, 2020
4ba7839
added dotted lines to cards and fixed social media icons
SLMcIntyre Nov 22, 2020
573fac4
added formatting for calendar and speech bubble icons at card bottom
SLMcIntyre Nov 22, 2020
2d842d3
corrected formatted for icons at card bottom and applied to all of th…
SLMcIntyre Nov 22, 2020
d553e63
added text & formatting in footer, corrected colors of card img place…
SLMcIntyre Nov 23, 2020
590e774
added blogpost page text
SLMcIntyre Nov 23, 2020
70a1c6f
updated margins
SLMcIntyre Nov 23, 2020
ec4d06c
corrected margins & forms on blog post page
SLMcIntyre Nov 24, 2020
8626b21
updated formatting of article header and comment section
SLMcIntyre Nov 25, 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
340 changes: 340 additions & 0 deletions blog-post.html
View file
Open in desktop

Large diffs are not rendered by default.

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
Binary file added images/calendar-17-grey-icon.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-17-lightgrey-icon.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/speech-bubble-grey.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/speech-bubbles.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-icon-16px-lightgrey.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-icon-lightgrey.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.
374 changes: 374 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,374 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jkaros</title>
<link rel="stylesheet" href="styles/styles.css">
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap" rel="stylesheet">

</head>
<body>
<header>
<!--navbar -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Jkaros</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 justify-content-end"></ul>
<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>
</ul>
</div>
</nav>

<!-- /navbar -->
</header>
<main>
<div class= "main-content">

<!-- cards -->

<div class="card-deck">
<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x197/7f7f7f.png" alt="card image cap">
<div class="card-body">
<h4 class="card-title">Ullamcorper Nibh Parturient</h4>
<p class="card-text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis Mollis, porttitor logula, eget lacinia odio sem nec elit.</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 15
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x220/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Condimentum Ultricies Ullamcorper</h4>
<p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 21
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x190/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Nibh Fusce Parturient Tristique</h4>
<p class="card-text">Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.
</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 23
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x220/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Nullam Mattis Sit Tellus</h4>
<p class="card-text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus auctor. Cras mattis consectetur puruamet fermentum.</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 13
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x190/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Porta Condimentum Tellus</h4>
<p class="card-text">Nulla vitae libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 11
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x200/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Consectetur Ligula Etiam</h4>
<p class="card-text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit.</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 13
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x197/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Tortor Pharetra Fermentum</h4>
<p class="card-text">Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam ultricies vehicula ut id elit. Fusce cursus commodo.</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 17
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x229/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Ligula Inceptos Cursus Sit</h4>
<p class="card-text">Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla consectetur. Donec sed odio duiamet fermentum. Donec Ullamcorper nulla non metus auctor fringilla.</p>
<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>
<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 11
</div>
</div>
</div>
</div>

<div class="col-md-6 col-lg-4">
<div class="card mb-3">
<img class="card-img-top" src="http://dummyimage.com/306x220/7f7f7f.png" alt="">
<div class="card-body">
<h4 class="card-title">Ornare Elit Cursus Tellus</h4>
<p class="card-text">Donec sed odio dui. Praesent commodo cursus magna, vel consectetur. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur eros.</p>

<div class = "hr">
</div>
<div class = "hr2">
</div>
</div>

<div class="card__info">
<div class = "text-muted">
<img src= "images/calendar-17-grey-icon.png" alt = ""> 25 december, 2011
</div>
<div>
<img src= "images/speech-bubble-grey.png" alt = ""> 49
</div>
</div>
</div>
</div>
</div>
<div class = "hr">
</div>
<div class = "hr2">
</div>
<button type="a href="#" class="button">Older Posts</a></button>

<!-- /cards -->
</div>

<!-- Footer -->
<footer>
<div class = "footer-content">
<div class="row">
<div class="col">
<h6>POPULAR POSTS</h6>
<p class="footer-content-text">Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</p>
<div class = "text-muted">
14 Nov, 2012
<div class = "footer-hr">
</div>
<div class = "footer-hr2">
</div>
</div>

<p class="footer-content-text">Scelerisque nisl consectetur et.</p>
<div class = "text-muted">
22 May, 2012
<div class = "footer-hr">
</div>
<div class = "footer-hr2">
</div>
</div>

<p class="footer-content-text">Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce</p>
<div class = "text-muted">
15 July, 2012
</div>



</div>

<div class="col">
<h6>TWITTER</h6>
<p class="footer-content-text">
<span class ="twitter-icon"><img src= "images/twitter-icon-16px-lightgrey.png" alt = ""></span>Praesent commodo cursus magna Morbi leo risus nulla consectetur. - <span class= "post-timeframe">21 hours ago</span></p>
<div class = "text-muted">
<div class = "footer-hr">
</div>
<div class = "footer-hr2">
</div>
</div>

<p class="footer-content-text">
<span class ="twitter-icon"><img src= "images/twitter-icon-16px-lightgrey.png" alt = ""></span>Vestibulum id ligula porta euismod semper. auctor dolor fermentum. - <span class= "post-timeframe"> 2 days ago</span></p>
<div class = "text-muted">
<div class = "footer-hr">
</div>
<div class = "footer-hr2">
</div>
</div>

<p class="footer-content-text">
<span class ="twitter-icon"><img src= "images/twitter-icon-16px-lightgrey.png" alt = ""></span>Donec Ullamcorper nulla non metus auctor. - <span class= "post-timeframe"> 3 days ago</span></p>



</div>

<div class="col">
<h6>A LITTLE ABOUT ME </h6>
<p class="footer-content-text"> 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 class="footer-content-text">Donec id elit non porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel.</p>

</div>

<div class="col">
<form action="index.html" method="post" class="form"></form>
<h6>CONTACT FORM</h6>
<div class="input-container">
<input type="text" name="input1" id="input1" required >
</div>
<div class="input-container">
<input type="text" name="input2" id="input2" required >
</div>
<div class="input-container">
<textarea id="text" name="input3" rows= "5" cols= "23"></textarea>
</div>
<button type="submit">Submit</button>
</form>


</div>
</div>
</div>

<div class= "footer-bottom">
<small class="text-muted">&copy;2011 Ikaros. Theme by <a href = "#">elemis.</a> </small>

<!--Social Media Icons-->
<div class = "social-media">
<a href="#" class="fa fa-rss"></a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-linkedin"></a>
</div>
</div>
</footer>
<!-- End 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 src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</main>
</body>
</html>
Loading