diff --git a/README.md b/README.md new file mode 100644 index 0000000..d39d477 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# blog-fe diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..161ec73 --- /dev/null +++ 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 new file mode 100644 index 0000000..0828a2e Binary files /dev/null and b/image/Arrow 1.png differ diff --git a/image/Arrow 3.svg b/image/Arrow 3.svg new file mode 100644 index 0000000..9978f25 --- /dev/null +++ b/image/Arrow 3.svg @@ -0,0 +1,3 @@ + + + diff --git a/image/post_1.png b/image/post_1.png new file mode 100644 index 0000000..86c996c Binary files /dev/null and b/image/post_1.png differ diff --git a/image/post_2.png b/image/post_2.png new file mode 100644 index 0000000..4a4e4d4 Binary files /dev/null and b/image/post_2.png differ diff --git a/image/search.png b/image/search.png new file mode 100644 index 0000000..9e2089b Binary files /dev/null and b/image/search.png differ diff --git a/image/slider_1.png b/image/slider_1.png new file mode 100644 index 0000000..9a29fd4 Binary files /dev/null and b/image/slider_1.png differ diff --git a/image/slider_2.png b/image/slider_2.png new file mode 100644 index 0000000..519b015 Binary files /dev/null and b/image/slider_2.png differ diff --git a/image/slider_3.png b/image/slider_3.png new file mode 100644 index 0000000..47188d6 Binary files /dev/null and b/image/slider_3.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e3aebac --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + Ông Dev Blog + + + + +
+
+
+
+ All stories +
+ Arrow down stories +
+
+
+
+
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..52aa4f3 --- /dev/null +++ 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 += '
' + + '
' + + 'Image of post' + + '
' + + '
' + + '' + element.category +'' + + '' + element.title +'' + + '
' + element.sortDescription +'
' + + '
' + + '

bởi ' + element.author +', ' + element.datePost +'

' + + 'Share' + + '
' + + '
' + + '
'; + }); + postContain.insertAdjacentHTML('beforeend', post); +} \ No newline at end of file