diff --git a/css/style.css b/css/style.css index 75e9841e..7b596bc1 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html index 67dfc7f5..7b704dfe 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,70 @@ - - +
+

myBlog for Campers

+

You can find everything about camping in my blog

+
+
+
+

Articles

+
+ +
+

Article 1 Title

+

+ 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. +

+ Read more +
+
+

Article 2 Title

+

+ 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. +

+ Read more +
+
+

Article 3 Title

+

+ 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? +

+ Read more +
+
+
+
+ +