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

LONDON_10 // SAIM KORKMAZ // HTML-CSS 1 #342

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

LONDON_10 // SAIM KORKMAZ // HTML-CSS 1 #342

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
109 changes: 109 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,112 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/


body{

max-width: 1200px;
margin: 0 auto;
}

/* header element */
header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
position: relative;
top: 0;
left: 0;
right: 0;

/* padding: 0 1.5rem;
max-width: 1200px;
margin: 0 auto; */
}

header h1,
header p {
margin: 5px;
}

header nav ul {
list-style: none; /* */
margin: 0;
padding: 0;
display: flex;
}

header nav ul li {
margin-right: 10px;
}

header nav ul li a {
color: #fff;
text-decoration: none;
}

/* main element */
.articles {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.articles:first-child {
border: 31px solid black;
}

article {
width: 30%;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
article:first-child {
border: 4px solid black;
}
h2 {
align-items: center;
}

article h3 {
margin-top: 0;
}

article a {
color: blue;
text-decoration: none;
font-weight: bold;
}

/* footer element */

footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

footer nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}

footer nav ul li {
display: inline-block;
margin-right: 10px;
}

footer nav ul li a {
color: #fff;
text-decoration: none;
}
67 changes: 65 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,70 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<h1><em>myBlog for Campers</em></h1>
<p>You can find everything about camping in my blog</p>
</header>
<main>
<section>
<h2 class="h2">Articles</h2> <!-- -->
<div class="articles">

<article>
<h3>Article 1 Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam
ab vel facere quisquam minus autem hic. Nam tempore voluptatibus
ducimus unde impedit, at, minus ab corporis cumque fugiat aliquid
sunt, asperiores vero! Unde accusantium omnis autem excepturi
blanditiis beatae maxime. Temporibus dolores quia consequatur,
numquam unde ex odio quae ipsa amet dolorem obcaecati modi, itaque
illum nesciunt, et quisquam magni. In voluptatum possimus a qui
sapiente ea, aperiam quos libero.
</p>
<a href="article1.html">Read more</a>
</article>
<article>
<h3>Article 2 Title</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed
quidem inventore molestias dolores, magni pariatur minus nostrum
minima placeat tempore consectetur veniam voluptatem doloribus
labore harum quibusdam velit possimus deserunt officiis aliquam
ipsa cum dolorum. Laudantium explicabo distinctio totam illum, nam
minima dolorum rerum assumenda veniam obcaecati aut iure ipsum.
</p>
<a href="article2.html">Read more</a>
</article>
<article>
<h3>Article 3 Title</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est quas
accusamus nesciunt dolorem perspiciatis cumque voluptate, quasi
officiis fuga voluptas. Officia fugiat explicabo praesentium
necessitatibus quae dolorum error illo hic?
</p>
<a href="article3.html">Read more</a>
</article>
</div>
</section>
</main>

<footer>
<footer>
<div class="container">
<h6>This website consist my own camping experience and you should read goverment and the area you want to camp's comminty rules. </h6>
<p>Copyright © 2022 My Website</p>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</footer>
</footer>
</body>
</html>