Feature/ode 67 content container for blog

README.md

@@ -1 +1 @@
-# blog-fe
+# blog-fe

css/style.css

@@ -0,0 +1,221 @@
+@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+}
+
+a {
+    color: #111111;
+    text-decoration: none;
+}
+
+.container {
+    max-width: 960px;
+    margin: 0px auto;
+}
+
+.postContain {
+    position: relative;
+    padding: 35px 0px 21px 40px;
+    background: #fefefe;
+}
+
+.postContain::after {
+    content: "";
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: #6A6A6A;
+}
+
+.post {
+    margin-top: 30px;
+    display: flex;
+    flex-wrap: wrap;
+    box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.03);
+    padding: 10px;
+    border-radius: 10px;
+}
+
+.postImg img {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 7px;
+}
+
+.postImg {
+    width: 271px;
+    border-radius: 25px;
+}
+
+.postMain {
+    padding-left: 32px;
+    box-sizing: border-box;
+    flex-basis: 50%;
+    flex-grow: 1;
+}
+
+.postCategory {
+    margin-top: 0px;
+    padding: 5px 10px;
+    background: #262626;
+    display: inline-block;
+    color: #FBFBFB;
+    font-size: 11px;
+    margin-top: 10px;
+}
+
+.postTitle {
+    display: block;
+    margin-top: 13px;
+    font-size: 26px;
+    font-weight: 700;
+}
+
+.postDescription {
+    margin-top: 6px;
+    font-size: 17px;
+    color: #333333;
+    font-weight: 100;
+}
+
+.postInfoShare {
+    display: flex;
+    padding: 5px 0px;
+    margin-top: 10px;
+}
+
+.postInfo {
+    padding-right: 10px;
+    font-weight: 100;
+}
+
+.postInfo a {
+    font-weight: 700;
+}
+
+.postShare {
+    padding-left: 10px;
+    border-left: 1px solid #000000;
+    text-decoration: underline;
+    font-weight: 100;
+}
+
+.pagination {
+    margin-top: 30px;
+}
+
+.paginate {
+    display: flex;
+    list-style: none;
+}
+
+.paginate a {
+    display: block;
+    margin: 0px 5px;
+    font-size: 20px;
+}
+
+.paginateContain {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.arrowPaginate {
+    margin: 0px 10px;
+    cursor: pointer;
+    padding: 5px 8px;
+}
+
+.txtTitle {
+    color: #262626;
+    position: absolute;
+    left: -155px;
+    top: 10px;
+    font-size: 21px;
+}
+
+.txtTitle span {
+    letter-spacing: 0.15rem;
+}
+
+.arrowStories {
+    display: inline-block;
+    width: 25px;
+    height: 10px;
+}
+
+.arrowStories img {
+    width: 100%;
+    display: block;
+    transform: rotate(-90deg);
+}
+
+@media only screen and (max-width: 767px) {
+    .postContain {
+        padding: 0px 32px;
+        border: none;
+    }
+
+    .post {
+        padding: 24px 0px;
+        padding-bottom: 0px;
+        position: relative;
+    }
+
+    .post::before {
+        content: "";
+        width: 100%;
+        height: 1px;
+        background: #6A6A6A;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    .postMain {
+        width: 100%;
+    }
+
+    .postImg {
+        width: 100%;
+        position: relative;
+        padding-bottom: 100%;
+    }
+
+    .postImg img {
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        position: absolute;
+    }
+
+    .postMain {
+        padding: 16px 0px 24px 0px;
+    }
+
+    .txtTitle {
+        left: 50%;
+        top: -30px;
+        transform: translateX(-50%);
+    }
+
+    .arrowStories {
+        display: none;
+    }
+
+    .postContain::after {
+        display: none;
+    }
+}