Paper-Manu Ponce #68
Open
Paper-Manu Ponce #68
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
CheezItMan
reviewed
Jun 23, 2021
There was a problem hiding this comment.
Not bad Manu, the homepage looks ok. A couple of suggestions:
- You can use an HTML Validator to find errors in your HTML
- You can also use a CSS Validator for the CSS as well.
- It can help to make a
bodya grid container to layout of the site.
| <h1 class="title-name">ABOUT</h1> | ||
|
|
||
| <section class="iframe-container-about"> | ||
| <iframe title="vimeo-player" src="https://player.vimeo.com/video/305818185" width="640" height="360" frameborder="0" allowfullscreen></iframe> |
There was a problem hiding this comment.
Generally we use css instead of frameborder.
| <div class="card"> | ||
| <h2>Makakū</h2> | ||
| <h5>Seattle,WA, March 1, 2021</h5> | ||
| <div class="blog-img" width="20" height="30"> |
There was a problem hiding this comment.
You shouldn't use width and height for styling and instead use CSS.
| <div class="blog-img" width="20" height="30">Ko`olau Mountains | ||
| <img src="https://onlyinhawaii.org/wp-content/uploads/2013/03/Hoomaluhia-Botanical-Garden-Koolau-mountain-range-300x191.jpg" | ||
| alt="Italian Trulli"> | ||
| </footer> |
There was a problem hiding this comment.
You still have open tags (the tag for instance) inside the footer which are still open when the browser hits this close tag.
| height: 315px; /* think about making these max-width instead - might give you some more responsiveness */ | ||
|
|
||
| /* position: absolute; positions out of the flow, but according to the nearest parent */ | ||
| top: 7; right: 0; /* confuse it i guess */ |
There was a problem hiding this comment.
You need to specify a unit here.
Suggested change
| top: 7; right: 0; /* confuse it i guess */ | |
| top: 7px; right: 0px; /* confuse it i guess */ |
|
|
||
| /* position: absolute; positions out of the flow, but according to the nearest parent */ | ||
| top: 7; right: 0; /* confuse it i guess */ | ||
| bottom: 5; left: 0; |
There was a problem hiding this comment.
Suggested change
| bottom: 5; left: 0; | |
| bottom: 5px; left: 0px; |
| text-align: center; | ||
| background-color: rgba(146, 153, 153, 0.651); | ||
| width: 800px; | ||
| padding: 200x; |
There was a problem hiding this comment.
Suggested change
| padding: 200x; | |
| padding: 200px; |
| text-align: center; | ||
| background-color: rgba(146, 153, 153, 0.651); | ||
| width: 800px; | ||
| padding: 200x; |
There was a problem hiding this comment.
Suggested change
| padding: 200x; | |
| padding: 200px; |
Comment on lines
+143
to
+144
| top: 5; right: 0; /* confuse it i guess */ | ||
| bottom: 5; left: 0; |
There was a problem hiding this comment.
Suggested change
| top: 5; right: 0; /* confuse it i guess */ | |
| bottom: 5; left: 0; | |
| top: 5px; right: 0px; /* confuse it i guess */ | |
| bottom: 5px; left: 0px; |
|
Gotcha. Duly noted. Thank you Chris.
Best,
Manu
…On Tue, Jun 22, 2021 at 8:10 PM Chris M ***@***.***> wrote:
***@***.**** commented on this pull request.
Not bad Manu, the homepage looks ok. A couple of suggestions:
1. You can use an HTML Validator <https://validator.w3.org/> to find
errors in your HTML
2. You can also use a CSS Validator
<https://jigsaw.w3.org/css-validator/> for the CSS as well.
3. It can help to make a body a grid container to layout of the site.
------------------------------
In about.html
<#68 (comment)>
:
> + </section>
+
+ <section class="nav-link-wrapper">
+ <a href="index.html">Blog</a>
+ </section>
+ </section>
+
+
+ </nav>
+ </header>
+
+ <section class="box-body">
+ <h1 class="title-name">ABOUT</h1>
+
+ <section class="iframe-container-about">
+ <iframe title="vimeo-player" src="https://player.vimeo.com/video/305818185" width="640" height="360" frameborder="0" allowfullscreen></iframe>
Generally we use css instead of frameborder.
------------------------------
In hobby-blog.html
<#68 (comment)>
:
> + </section>
+ </nav>
+ </header>
+
+ <section class="box-body">
+ <h1 class="title-name">Blog</h1>
+ </section>
+
+ <div class="blog-title">
+ <h2>Makakū</h2>
+ </div>
+
+ <div class="card">
+ <h2>Makakū</h2>
+ <h5>Seattle,WA, March 1, 2021</h5>
+ <div class="blog-img" width="20" height="30">
You shouldn't use width and height for styling and instead use CSS.
------------------------------
In hobby-blog.html
<#68 (comment)>
:
> + alt="Italian Trulli">
+ <footer>
+ <p>In my current season, I feel this is my mountain I need to continue to climb and overcome.</p>
+ </footer>
+
+ <div class="blog-title">
+ <h2>Mauna Nui Ko`u</h2>
+ </div>
+
+ <div class="card">
+ <h2>My Great Mountain</h2>
+ <h5>Seattle,WA, April 1, 2021</h5>
+ <div class="blog-img" width="20" height="30">Ko`olau Mountains
+ <img src="https://onlyinhawaii.org/wp-content/uploads/2013/03/Hoomaluhia-Botanical-Garden-Koolau-mountain-range-300x191.jpg"
+ alt="Italian Trulli">
+ </footer>
You still have open tags (the tag for instance) inside the footer which
are still open when the browser hits this close tag.
------------------------------
In styles/styles-sheet.css
<#68 (comment)>
:
> + font-kerning: normal;
+ /* margin-bottom: 0px;
+ margin-top: 200px; */
+ text-align: center;
+ /* text-shadow:1px 1px #cfcfcf; */
+ padding-left: 50px;
+
+
+}
+
+.iframe-container-about {
+ width: 560px; /* you have to have a size or this method doesn't work */
+ height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
+
+ /* position: absolute; positions out of the flow, but according to the nearest parent */
+ top: 7; right: 0; /* confuse it i guess */
You need to specify a unit here.
⬇️ Suggested change
- top: 7; right: 0; /* confuse it i guess */
+ top: 7px; right: 0px; /* confuse it i guess */
------------------------------
In styles/styles-sheet.css
<#68 (comment)>
:
> + /* margin-bottom: 0px;
+ margin-top: 200px; */
+ text-align: center;
+ /* text-shadow:1px 1px #cfcfcf; */
+ padding-left: 50px;
+
+
+}
+
+.iframe-container-about {
+ width: 560px; /* you have to have a size or this method doesn't work */
+ height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
+
+ /* position: absolute; positions out of the flow, but according to the nearest parent */
+ top: 7; right: 0; /* confuse it i guess */
+ bottom: 5; left: 0;
⬇️ Suggested change
- bottom: 5; left: 0;
+ bottom: 5px; left: 0px;
------------------------------
In styles/styles-sheet.css
<#68 (comment)>
:
> + /* position: absolute; positions out of the flow, but according to the nearest parent */
+ top: 7; right: 0; /* confuse it i guess */
+ bottom: 5; left: 0;
+ margin: auto; /* make em equal */
+}
+
+.vimeo-player {
+ margin-top: 5%;
+}
+
+.about-description {
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+ background-color: rgba(146, 153, 153, 0.651);
+ width: 800px;
+ padding: 200x;
⬇️ Suggested change
- padding: 200x;
+ padding: 200px;
------------------------------
In styles/styles-sheet.css
<#68 (comment)>
:
> + padding-top: 1%;
+ padding-left: 1%;
+ padding-right: 1%;
+ padding-bottom: 1%;
+ margin: auto;
+ margin-top: 100px;
+ margin-left: 21%;
+ border-radius: 25px;
+}
+
+.portfolio-description {
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+ background-color: rgba(146, 153, 153, 0.651);
+ width: 800px;
+ padding: 200x;
⬇️ Suggested change
- padding: 200x;
+ padding: 200px;
------------------------------
In styles/styles-sheet.css
<#68 (comment)>
:
> + top: 5; right: 0; /* confuse it i guess */
+ bottom: 5; left: 0;
⬇️ Suggested change
- top: 5; right: 0; /* confuse it i guess */
- bottom: 5; left: 0;
+ top: 5px; right: 0px; /* confuse it i guess */
+ bottom: 5px; left: 0px;
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#68 (review)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AQ6AUFBALG5A5GHRKCOLRDDTUFGAVANCNFSM47A2GMXA>
.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.