Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

my blog #114

Closed
Kev-One wants to merge 1 commit into from
Closed

my blog #114

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
129 changes: 129 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,132 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

*{
padding: 0;
margin: 0;
}

body{
font-family: 'Roboto Slab';
}

a, p, h1, h2, h3, h4, h5, h6 {
color:#333
}

h1, h2, h3, h4, h4, h5, h6 {
padding:10px 20px 10px 20px;
}
.container {
max-width:80%;
max-height: 100%;
margin:auto;
border-left: 1px solid #333;
border-right: 1px solid #333;
}

header {
background-color: #333;
}

header nav {
display: flex;
justify-content:center;
align-items:center;
padding: 20px;
}

header nav a {
padding: 75px;
color: white;
text-decoration: none;
}

header nav a:hover {
color: cyan;
text-decoration: underline overline;
}

section{
padding: 60px;
}

main {
float: left;
width: 70%;
}

main p {
font-size:1.1rem
line-height: 1.6rem;
padding:0px 20px 0px 5px;
}

aside {
float: right;
width: 25%;
}
aside ul li {
font-size:1.1rem;
line-height:1.6rem;
list-style:none;
padding: 3px 0px 3px 0px
}

aside ul{
padding: 0px 20px 0px 20px;
}

aside p {
font-size: 1.1rem;
line-height:1.6rem;
padding: 20px 0px 59px 0px;

}

article:first-child {
color:red;
}

footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #333;
width: 100%;
}

footer p{
color: white;
font-size: 20px;
padding: 8px 60px 15px 100px;
}

footer a {
color: white;
padding: 0px 40px 0px 20px;
}

footer a:hover {
color: cyan;
}

hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

@media(max-wdth: 700px) {
main {
float: none;
width: 100%
}
aside {
float: none;
width: 100%;
padding: 20px;
}
}
60 changes: 60 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,65 @@
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<div class="container">
<header>
<nav>
<a href="index">HOME</a>
<a href="about">ABOUT</a>
<a href="contact">CONTACT</a>
</nav>
</header>

<main>
<section>
<article class="first">
<h1>My Blog</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum repellendus enim dolorum deleniti? Aperiam delectus officia libero? Eveniet rerum nemo, a ipsam rem necessitatibus sint quas voluptatibus debitis libero quidem?</p>
</article>
</section>
<hr>

<section>
<article class="second">
<h1>My Blog</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum repellendus enim dolorum deleniti? Aperiam delectus officia libero? Eveniet rerum nemo, a ipsam rem necessitatibus sint quas voluptatibus debitis libero quidem?</p>
</article>
</section>
<hr>

<section>
<article class="third">
<h1>My Blog</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum repellendus enim dolorum deleniti? Aperiam delectus officia libero? Eveniet rerum nemo, a ipsam rem necessitatibus sint quas voluptatibus debitis libero quidem?</p>
</article>
</section>
<hr>
</main>

<aside>
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, error. Est iure placeat deserunt voluptates.</p>
<hr>
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Blog Post 3</a></li>
<li><a href="#">Blog Post 2</a></li>
<li><a href="#">Blog Post 1</a></li>
</ul>
</aside>

<footer>
<section>
<p>Go to Page:</p>
<a href="Page-2.html">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</section>
<p style="padding:0px 10px 25px 10px">Coyright&copy; 2020 MyFirstBlog.com</p>
</footer>


</div>
</body>
</html>