Skip to content

Sorry I didn't have time to finish #3

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

Sorry I didn't have time to finish #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c0e859
Sorry I didn't have time to finish
Nov 19, 2020
02c777c
update v2
Nov 20, 2020
a37636c
20201123
Nov 24, 2020
ee31f39
almost there
Nov 30, 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
269 changes: 269 additions & 0 deletions blogPost.html
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added images/Ikaros-designstyle-smoothie-u.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
Binary file added images/placeholder.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/placeholder_responsiveFull_993x350.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/placeholder_small_500x300.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/placeholder_smaller_250x150.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/placeholder_thumbnail_200x200.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/placeholder_thumbnail_50x50.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.
247 changes: 247 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
<!DOCTYPE html>
Copy link
Copy Markdown

@kburd kburd Nov 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor styling issues on this page with footer, card layout (-2)
Missing Navbar links (-3)

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="stylesheet" href="styles/index.css">
<title>Elu's Blog</title>
</head>

<body>
<div>
<header class="bg-dark">
<div>
<nav class="navbar nav-pills navbar-expand-sm navbar-light bg-dark">
<div>
<img src="images/Ikaros-designstyle-smoothie-u.png" alt="Ikaros Logo" style="width: 7%; height: 7%;">
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="navbar">
<ul class="navbar-nav ml-auto flex-nowrap p-4">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="blogPost.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</header>

<div class="container text-left mx-10">
<div class="row card-deck">
<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>
<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>
<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>
</div>

<div class="row card-deck">
<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>

<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>

<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>
</div>

<div class="row card-deck">
<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>
<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>

<div class="col-4 my-3">
<div class="card" style="width: 18rem;">
<img src="images/placeholder.png" class="card-img-top" alt="stockPhoto">
<div class="card-body">
<h1 class="card-title">Card title</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Date posted</small>
</div>
</div>
</div>
</div>
</div>
</div>

<hr>
<div style="padding-bottom: 3%;">
<button class="button">Older Posts</button>
</div>

<div class="container bottom-nav">
<div class="row bg-dark text-light">
<div class="col">
<h2 class="text-light"><strong>POPULAR POSTS</strong></h2>
<div>
<p class="footer-text">Vivamus sagittis lacus vel augue laoreet rutrum dolor auctor.</p>
<small>14 Nov, 2012</small>
</div>
<hr>
<div>
<p class="footer-text">Scelerisque nisl consectetur et.</p>
<small>22 May, 2012</small>
</div>
<hr>
<div>
<p class="footer-text">Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce</p>
<small>15 July, 2012</small>
</div>
</div>
<br>
<div class="col">
<h2 class="text-light"><strong>TWITTER</strong></h2>
<div>
<p class="footer-text">Praesent commodo cursus magna Morbi leo risus nulla consectetur. -21 hours ago</p>
</div>
<hr>
<div>
<p class="footer-text">Vestibulum id ligula porta euismod semper. auctor dolor fermentum. -2 days ago</p>
</div>
<hr>
<div>
<p class="footer-text">Donec ullamcorper nulla non metus auctor. -3 days ago</p>
</div>
</div>
<br>
<div class="col">
<h2 class="text-light"><strong>A LITTLE ABOUT ME</strong></h2>
<p class="footer-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium sit est, modi quibusdam, rem nam voluptatibus dolorum alias corporis, molestias necessitatibus explicabo enim quod sint nobis molestiae sed obcaecati error?</p>
<p class="footer-text">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<br>
<div class="mh-100">
<form>
<h2 class="text-light"><strong>CONTACT FORM</strong></h2>
<div class="form-group">
<input type="name" class="form-control bg-dark" id="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control bg-dark" id="email" placeholder="name@email.com">
</div>
<div class="form-group">
<textarea class="form-control bg-dark" id="contactMessage" rows="3" placeholder="Message"></textarea>
</div>
</form>
</div>
</div>
</div>


<div class="footer">
<span class="align-middle" style="margin-left: 1%">&copy; 2011 Ikaros. Theme by <a href="http://eluhachi.wixsite.com/seagreenmedia">Sea Green Media</a></span>
<span>
<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>
</span>
</div>
</body>

</html>
106 changes: 106 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
h1 {
font-size: larger;
}

h2 {
font-size: medium;
}

ul {
float: right;
position: fixed;
top: 0;
width: 100%;
}

li {
display: inline;
}

.button {
background-color: rgba(11, 124, 194, 0.817);
color: whitesmoke;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
margin-left: 16%;
padding: 15 25 15 25;
}


/* --------- Bottom Navigation -------- */

.bottom-nav {
background-color: rgb(52, 59, 63);
padding: 1% 2% 1% 1.125%;
}

.blog-bottom-nav {
background-color: rgb(52, 59, 63);
padding: 1% 2% 1% 1.125%;
position: relative;
}

.footer-text {
font-size: small;
}


/* -------------- Footer ------------- */

.footer {
background-color: rgb(33, 33, 33);
color: rgb(227, 227, 227);
height: 50px;
}

.fa {
padding: 8px;
padding-right: 25px;
font-size: 20px;
height: 35px;
width: 5px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
float: right;
}

.fa:hover {
opacity: 0.5;
}

.fa-rss {
background: #ff6600;
color: white;
}

.fa-facebook {
background: #3B5998;
color: white;
}

.fa-twitter {
background: #55ACEE;
color: white;
}

.fa-dribbble {
background: #ea4c89;
color: white;
}

.fa-pinterest {
background: #cb2027;
color: white;
}

.fa-linkedin {
background: #007bb5;
color: white;
}

.active {
background-color: rgb(33, 33, 33);
color: rgb(97, 151, 205)
}
Copy link
Copy Markdown

@kburd kburd Nov 24, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work on first page, fix the layout of the second page and you will be go to go! (75%)