Change main and name of element

OngDev · Nov 2, 2020 · f633164 · f633164
commit f633164
Show file tree

Hide file tree

Showing 12 changed files with 281 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# blog-fe
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,196 @@
+@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;
+}
+
+.post-contain {
+    position: relative;
+    padding: 35px 0px 21px 40px;
+    background: #fefefe;
+}
+
+.post-contain::after {
+    content: "";
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: #6a6a6a;
+}
+
+.post {
+    margin-top: 30px;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px;
+    border-radius: 10px;
+    transition: box-shadow 0.2s ease-in;
+}
+
+.post:hover {
+    box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.03);
+}
+
+.post-img img {
+    width: 100%;
+    object-fit: cover;
+    border-radius: 7px;
+}
+
+.post-img {
+    width: 271px;
+    border-radius: 25px;
+}
+
+.post-main {
+    padding-left: 32px;
+    box-sizing: border-box;
+    flex-basis: 50%;
+    flex-grow: 1;
+}
+
+.post-category {
+    margin-top: 0px;
+    padding: 5px 10px;
+    background: #262626;
+    display: inline-block;
+    color: #FBFBFB;
+    font-size: 11px;
+    margin-top: 10px;
+}
+
+.post-title {
+    display: block;
+    margin-top: 13px;
+    font-size: 26px;
+    font-weight: 700;
+}
+
+.post-description {
+    margin-top: 6px;
+    font-size: 17px;
+    color: #333333;
+    font-weight: 100;
+}
+
+.post-info-share {
+    display: flex;
+    padding: 5px 0px;
+    margin-top: 10px;
+}
+
+.post-info {
+    padding-right: 10px;
+    font-weight: 100;
+}
+
+.post-info a {
+    font-weight: 700;
+}
+
+.post-share {
+    padding-left: 10px;
+    border-left: 1px solid #000000;
+    text-decoration: underline;
+    font-weight: 100;
+}
+
+.txt-title {
+    color: #262626;
+    position: absolute;
+    left: -155px;
+    top: 10px;
+    font-size: 21px;
+}
+
+.txt-title span {
+    letter-spacing: 0.15rem;
+}
+
+.arrow-stories {
+    display: inline-block;
+    width: 25px;
+    height: 10px;
+}
+
+.arrow-stories img {
+    display: block;
+    position: absolute;
+    top: 2px;
+    right: 15px;
+}
+
+@media only screen and (max-width: 576px) {
+    .post-contain {
+        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;
+    }
+
+    .post-img {
+        width: 100%;
+        position: relative;
+        padding-bottom: 100%;
+    }
+
+    .post-img img {
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        position: absolute;
+    }
+
+    .post-main {
+        width: 100%;
+        padding: 16px 15px 24px 15px;
+    }
+
+    .txt-title {
+        left: 50%;
+        top: -30px;
+        transform: translateX(-50%);
+    }
+
+    .arrow-stories {
+        display: none;
+    }
+
+    .post-contain::after {
+        display: none;
+    }
+}
diff --git a/image/Arrow 1.png b/image/Arrow 1.png
diff --git a/image/Arrow 3.svg b/image/Arrow 3.svg
diff --git a/image/post_1.png b/image/post_1.png
diff --git a/image/post_2.png b/image/post_2.png
diff --git a/image/search.png b/image/search.png
diff --git a/image/slider_1.png b/image/slider_1.png
diff --git a/image/slider_2.png b/image/slider_2.png
diff --git a/image/slider_3.png b/image/slider_3.png
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ông Dev Blog</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div class="main">
+        <section class="post-section">
+            <div class="container post-contain">
+                <div class="txt-title">
+                    <span>All stories</span>
+                    <div class="arrow-stories">
+                        <img src="image/Arrow 3.svg" alt="Arrow down stories">
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,56 @@
+window.onload = function(){
+    const postContain = document.querySelector(".post-contain");
+    var data = [
+        {
+            image: "post_1.png",
+            category: "Chuyện của tôi",
+            title: "Click this card for redirect to full story",
+            sortDescription: "Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit.",
+            author: "Pikachu",
+            datePost: "07/07/2011"
+        },
+        {
+            image: "post_2.png",
+            category: "Chuyện của tôi",
+            title: "Click this card for redirect to full story",
+            sortDescription: "Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit.",
+            author: "Pikachu",
+            datePost: "07/07/2011"
+        },
+        {
+            image: "post_1.png",
+            category: "Chuyện của tôi",
+            title: "Click this card for redirect to full story",
+            sortDescription: "Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit.",
+            author: "Pikachu",
+            datePost: "07/07/2011"
+        },
+        {
+            image: "post_2.png",
+            category: "Chuyện của tôi",
+            title: "Click this card for redirect to full story",
+            sortDescription: "Lorem ipsum dolor sit amet consectetur adipiscing elit Lorem ipsum dolor sit amet consectetur adipiscing elit.",
+            author: "Pikachu",
+            datePost: "07/07/2011"
+        },
+    ];
+    var post = "";
+
+    data.forEach(element => {
+        post += '<div class="post">' +
+                   '<div class="post-img">' +
+                        '<img src="image/' + element.image +'" alt="Image of post">' +
+                    '</div>' +
+                    '<div class="post-main">' +
+                        '<a href="#" class="post-category">' + element.category +'</a>' +
+                        '<a href="#" class="post-title">' + element.title +'</a>' +
+                        '<div class="post-description">' + element.sortDescription +'</div>' +
+                        '<div class="post-info-share">' +
+                            '<p class="post-info">bởi <a href="#">' + element.author +'</a>, ' + element.datePost +'</p>' +
+                            '<a href="#" class="post-share">Share</a>' +
+                        '</div>' +
+                   '</div>' +
+                '</div>';
+    });
+    postContain.insertAdjacentHTML('beforeend', post);
+}