Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/ode 67 content container for blog #32

Closed
wants to merge 13 commits into from
Closed

Feature/ode 67 content container for blog #32

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
458b875
Content container for blog
nguyenvl179 May 29, 2020
f1ba070
Edit content container
nguyenvl179 Jun 13, 2020
00551b8
Edit content container
nguyenvl179 Jul 20, 2020
8e0994c
Fix name of element
nguyenvl179 Jul 29, 2020
d53e185
Commit
nguyenvl159 Aug 27, 2020
f3417f4
Commit
nguyenvl159 Aug 28, 2020
287408d
Create README.md
nguyenvl179 Aug 28, 2020
2ec0850
Commit
nguyenvl159 Aug 28, 2020
69fa3ee
Merge branch 'feature/ODE-67-content-container-for-blog' of https://g…
nguyenvl159 Aug 28, 2020
6b8d171
Change some feature
nguyenvl159 Sep 9, 2020
c093b9c
Fix color using lower-case, change reponsive mobile.
nguyenvl159 Sep 23, 2020
a7a4796
Change name of class
nguyenvl159 Nov 2, 2020
f09d5a2
Change main tag
nguyenvl159 Nov 23, 2020
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
77 changes: 45 additions & 32 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,44 +40,57 @@ <h1>Featured Posts</h1>
Should we feature some popular posts here, make it a slider?
</div>
<div id="posts">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should name the id for this div "posts-container"

<h1>Posts</h1>
</div>
<div id="about">
<h1>About</h1>
</div>
</div>
<div id="footer">
<div class="posts-container footer">
<div class="social-icon">
<h3 class="title">Social</h3>
<ul class="list-unstyled icon">
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></i></a></li>
<li><a href=""><i class="fa fa-youtube-play"></i></a></li>
</ul>
<div class="posts-contain">
<div class="imgBox">
<img src="resources/images/dummyimage2.jpg" alt="">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you not going to use "alt" attribute, remove it.

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

FYI: https://www.w3schools.com/tags/att_img_alt.asp

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I fixed.

</div>
<div class="posts-content">
<p class="category"><b>Lam Dev</b></p>
<a href=""><h2 class="title">Title Name</h2></a>
<div class="posts-info">
<div class="post-time"><i class="fa fa-clock-o"></i>15/04/2018</div>
<div class="post-author"><i class="fa fa-user"></i>Admin</div>
</div>
<p class="main-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolor magnam consequuntur reprehenderit non temporibus quo magni officia. Expedita reprehenderit eveniet ipsam similique officiis quaerat fugiat debitis possimus fuga ratione?</p>
</div>
</div>
<div class="categories">
<h3 class="title">Categories</h3>
<div class="contain-box">
<a href="#" class="box">Custom</a>
<a href="#" class="box">Me</a>
<a href="#" class="box">Contact</a>
<a href="#" class="box">Custom</a>
<a href="#" class="box">Me</a>
<a href="#" class="box">Contact</a>
<div class="posts-contain">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Class and Id name should be noun.
In this case, consider its name be "post".

<div class="imgBox">
<img src="resources/images/dummyimage2.jpg" alt="">
</div>
<div class="posts-content">
<p class="category"><b>Lam Dev</b></p>
<a href=""><h2 class="title">Title Name</h2></a>
<div class="posts-info">
<div class="post-time"><i class="fa fa-clock-o"></i>15/04/2018</div>
<div class="post-author"><i class="fa fa-user"></i>Admin</div>
</div>
<p class="main-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolor magnam consequuntur reprehenderit non temporibus quo magni officia. Expedita reprehenderit eveniet ipsam similique officiis quaerat fugiat debitis possimus fuga ratione?</p>
</div>
</div>
<div class="subscribe">
<h3 class="title">Subscribe Me</h3>
<div class="contain-form">
<form action="">
<input type="text" name="email" placeholder="Enter your email">
<input type="submit" value="Subscribe">
</form>
<div class="posts-contain">
<div class="imgBox">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong naming convention: https://www.dropbox.com/scl/fi/k4a5rv4kcgt234z6no0ih/_-Coding-Convention.paper?dl=0&rlkey=ka3xx7whfsjq61scx8smcesya

<img src="resources/images/dummyimage2.jpg" alt="">
</div>
<div class="posts-content">
<p class="category"><b>Lam Dev</b></p>
<a href=""><h2 class="title">Title Name</h2></a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bữa nào đẹp trời, Title Name, toàn bộ nội dung của posts-info và main-content sẽ được thay thế bằng nội dung thật nên Nguyên xem cách sử dụng dummy data thay cho việc viết code cứng trên HTML thế này nha.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok ok, @nganvn .

<div class="posts-info">
<div class="post-time"><i class="fa fa-clock-o"></i>15/04/2018</div>
<div class="post-author"><i class="fa fa-user"></i>Admin</div>
</div>
<p class="main-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolor magnam consequuntur reprehenderit non temporibus quo magni officia. Expedita reprehenderit eveniet ipsam similique officiis quaerat fugiat debitis possimus fuga ratione?</p>
</div>
</div>
</div>
<div id="about">
<h1>About</h1>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
Including sign-in via email, categories (tags of posts), and other social media contacts of
the author.
</div>
</body>

Expand Down
64 changes: 61 additions & 3 deletions resources/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
a {
text-decoration: none;
}

/* Cover */
#cover {
Expand Down Expand Up @@ -125,10 +128,59 @@

/* Posts */
#posts {
height: 340px;
background-color: greenyellow;
text-align: center;
padding: 0vh 7vh;
padding: 1vh 7vh;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should leave an empty line between elements

.posts-contain:not(:last-of-type) {
margin-bottom: 20px;
}
.posts-contain {
display: flex;
padding: 20px;
box-shadow: 2px 2px 15px 0px #11111191;
Copy link
Contributor

@ngvuthanhnhan ngvuthanhnhan Jun 26, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hex code is not going to work if we use Microsoft Edge to open the website.
If you want to use opacity on color, using rgba(). Find similar error and fix.
If you are not using anything related to opacity, using hex code is fine, no need to fix.

FYI: https://caniuse.com/#search=%23

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I fixed.

border-left: 5px solid #367c7c;
flex-wrap: wrap;
}
.posts-contain .imgBox {
width: 30%;
}
.posts-contain .posts-content {
text-align: left;
margin-left: 20px;
width: 60%;
}
.posts-contain .imgBox img {
width: 100%;
display: block;
}
.posts-content .title {
margin: 10px 0px;
color: #111111;
}
.posts-content .category {
color: #ff2828;
text-transform: uppercase;
}
.posts-content .posts-info {
display: flex;
color: #8e8b8b;
margin-bottom: 10px;
}
.posts-content .posts-info i {
margin-right: 5px;
}
.posts-content .post-author {
padding-left: 10px;
border-left: 2px solid #8e8b8b;
}
.posts-content .post-time {
padding-right: 10px;
}
.posts-content .post-author, .posts-content .post-time {
font-size: 12px;
}
.posts-content .main-content {
margin-bottom: 10px;
}

/* About */
Expand All @@ -141,6 +193,7 @@

/* Footer */
#footer {
<<<<<<< HEAD
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix these conflicts :(((((

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I fixed.

padding: 30px 0px;
}
#footer a {
Expand Down Expand Up @@ -233,4 +286,9 @@ form {
}
.box:hover {
background: #449999;
=======
height: 256px;
background-color: azure;
text-align: center;
>>>>>>> d51cf63... Edit content container
}
13 changes: 12 additions & 1 deletion resources/css/responsive.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
#feature-posts,
#posts,
#about {
padding: 0vh 10vh;
padding: 3vh 10vh;
}
}

Expand Down Expand Up @@ -97,7 +97,11 @@
}
}

<<<<<<< HEAD
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And these :(((((

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok

@media screen and (max-width: 1024px){
=======
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as Ngoc's comment about these remaining traces of fixing conflicts.
Re-read your entire code and fix similar error as this.

@media screen and (min-width: 0px) and (max-width: 900px){
>>>>>>> d51cf63... Edit content container
/* Footer */
#footer {
padding-left: 10px;
Expand All @@ -110,4 +114,11 @@
margin-top: 20px;
width: 100%;
}
.posts-contain .posts-content {
width: 100%;
margin: 20px 0px 0px 0px;
}
.posts-contain .imgBox {
width: 100%;
}
}