top: 830px;
main position: relative;
76 Matching Annotations
- Nov 2022
-
github.com github.com
-
-
top: 780px;
main: relative;
-
:
for pseudo classes you need :: so,
.rowAboutUs::after
:works aswell, but not good practice
-
top: 395px;
main position: relative; and you wouldn't need this.
-
top: 425px;
if you give main a position of relative, you wouldn't need this.
-
buttonStyle
give it a hover state, and assign the cursor: pointer; to that
-
height: 255px;
images has an auto adjusting height, based on width. dont give an image a height if you want to keep its dimensions.
-
absolute
parent elements should be position: relative;
-
padding: 0px 25px;
give the a padding instead of the li so it allows a larger clickable link, its better for accessibility
-
padding-right: 50px;
margin-right: 50px; is better in this case.
padding makes the element bigger, margin makes the space between elements bigger.
-
clearfix
need to add clear:both;
-
float: right;
float the ul, so you can float the logo aswell.
-
margin-left: 5%; margin-right: 5%;
creates white space, try margin: auto;
-
-
github.com github.com
-
height: 150px;
parent containers take on the height of their children, think of it as an automatically adjusting height depending on its childs height.
Parents height scales to the childs height childs width scales to the parents width
-
@media only screen and (max-width: 1100px) { header { height: fit-content; padding-bottom: 20px; }
you did this but no button hovers. TISK TISK!
-
line-height: 1.8rem; padding: 10px 0; }
take off the padding on the li and give it to the a tag so you can hover less over the word to select the link, makes it better for accessibility.
-
:
pseudo class selectors should use :: so .article-container::after
I don't know why, its just the way they want it lol
-
.hero button { margin-top: 40px; }
all buttons have the same style, I recommend creating a specific button class to style all of the buttons, and button:hovers;
-
-
github.com github.com
-
<h3>Latest News</h3>
should be an h2, if you wanted it smaller like an h3, do .prefooter h2 { font-size: size;}
-
<h3>Follow Us</h3>
should be an h2
-
<h3>About Us</h3>
should be an h2
-
<p> Copyright © 2022. All rights reserved North Island College DIGITAL Design + Development </p>
you could turn this into a <small> not needed, but an option.
-
<div class="news"> <h3>Latest News</h3> <ul> <li> <h4>October 1:</h4> <p>Morbi sed tortor quam.</p> </li> <li> <h4>September 15th:</h4> <p>Nam suscipit ultrices maximus.</p> </li> <li> <h4>September 10th:</h4> <p>Curabitur purus nulla.</p> </li> </ul> </div>
this should be a link, you can create an active link with href="#'
-
height="350"
don't give images heights, they keep perspective with the width
-
<img src="images/distance-and-inclass-students.png" alt="Classroom of distance and in-class students" width="600" height="350" /> <h1>Lorem ipsum dolor sit amet</h1> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam architecto aperiam esse numquam dignissimos, odit eveniet nemo dicta reprehenderit. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis maxime doloremque est nam ad quibusdam omnis accusantium. </p> <button type="button">Find out how we can help you</button>
you can add this into the header, this is what would be considered the hero image. you should also wrap this in a <figure> with the text inside a <figcaption>
-
<img src="images/dgl-logo.png" alt="DIGITAL Design + Development logo" width="150" height="150" />
add this inside the <nav> give it a class and then give the ul a float: right; img.class float: left;
-
-
github.com github.com
-
<div class="label">Check out our recent projects</div>
This should be an <h2> I mean, I guess it doesn't need to be, but I would lol
-
<img class="imgStudents" src="images/distance-and-inclass-students.png" alt="inclass and distance students">
wrap this in a <figure> with a <figcaption> for the text
-
<div class="headerStyle"> <img class="imgLogo clearfix " src="images/dgl-logo.png" alt="Digital Design Development logo" />
you should add this into the <nav> you just need to give it an opposing float.
so the >ul< as a float: right; img.logo float: left;
-
<h4>Follow Us</h4> <p>Facebook</p> <p>Instagram</p> <p>Youtube</p>
this should be a list, and links
-
<p><b>October 1:</b><br>Mauris eu sagittis neque</p> <p><b>September 15th:</b><br>eu mollis lectus</p> <p><b>September 10th:</b><br>Morbi pharetra neque</p>
this should be a list, and links
-
<h4>Latest News</h4>
your headers need to go in order. h1, h2, h3, h4, h5, then h6. so you can go: h2 h3 h4 h3 h4 h3 h2 as an example.
-
- Oct 2022
-
github.com github.com
-
<main>
The content looks good, well explained with good images. But I recommend changing the width of the <main> to something smaller, around 60% of the total page width, so that your paragraphs aren't super long. Additionally. I would also recommend giving the body the background image, and leaving the <main> with a flat color so it isn't as distracting to read.
-
-
github.com github.com
-
.country{ background-image:linear-gradient(356deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%); color: blue; }
the country in the example doesn't have a background, however, adding your own personal flare isn't a bad thing either!
-
;;
;; makes the next lines of code unreadable.
-
.card-one {
should be .card-one { keep "{" on the same line
-
.card-one img { border-radius: 50%;}
hard to read, clean the lines up
-
-
github.com github.com
-
<br><h1>A NEW KING OF BEAST </h1>
create a new line for block elements
-
<article
clean up the indentation for easier readability
-
<p>
no closing tag
-
<samp class="highlight">live</samp> <small class="color"><b>Breaking</b></small> <samp class="country">UK</samp>
<samp> is used to highlight code, it may be better to use a simple <span>
-
-
github.com github.com
-
textlight.css
this isn't imported in the index.html doc
-
-
github.com github.com
-
<!--Fonts below are for card three--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Serif:ital,wght@1,300&family=Lexend+Deca:wght@400;500&display=swap" rel="stylesheet"> <!--Fonts below are for card four--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
redundant, in longer pages of code it will slow down your page. Just use one <link>
-
<p class="card-four-red">live</p> <p class="card-four-yellow">Breaking</p> <p class="card-four-blue">UK</p>
recommend using a <span>
-
<p class="card-three-p3">Watch Video</p>
you can keep this as a paragraph tag, but it may be better to turn it into a <span>
-
<p class="card-three-p1">What is SILKTRICKY?</p> <p class="card-three-p2">A NEW KIND OF BEAST</p>
make these <h2>
-
-
github.com github.com
-
border-radius: 40px;
good practice for circles is to use 50%
-
display: inline-block;
remove indent
-
.card-four-red{ display: inline-block; background-color: crimson; color: white; width: 40px; } .card-four-yellow{ display: inline-block; background-color: gold; color: black; font-weight: 700; width: 80px; } .card-four-blue{ display: inline-block; color: blue; }
common elements inside each one, recommend adding each of the same styling inside its own class/section and make each different things the same. EX: card-four span {display: inline-block, padding: 10px;}
-
width: 80px; height: 8px;
avoid absolute units if possible
-
transform: translateX(-50%);
remove the indent
-
-
github.com github.com
-
contact.html assignment c 6 days ago index.html assignment c 6 days ago services.html assignment c 6 days ago style.css assignment c 6 days ago
There are things that need to be adjusted, somethings don't make sense. Don't feel discouraged, things will make more sense as you continue!
-
-
github.com github.com
-
{
add this on the same line as the element you're selecting. Its easier to view.
-
h1 { font-size: 3rem; }
duplicate
-
html {font-size: 62.5% ;} body {font-size: 1.6rem; text-align: center; padding: 40px; background-color:palegreen;}
recommended to add body, html and * at the top of your CSS
-
-
github.com github.com
-
<p> <h2>* * 48 Hour Cancellation Required * *</h2></p>
just use a header tag, dont nest a header tag inside a paragraph tag.
-
<p> FULL FOIL: $188/$219 with cut<p></p> <p> 3/4 FOIL: $172/$203 with cut</p> <p>1/2 FOIL: $158/$189 with cut</p> <p>1/4 FOIL: $144/$175 with cut</p>
don't make each list item a paragraph, add a list tag
-
<p>
delete
-
<p>
no closing tag
-
<h2><li>Colours</li></h2>
no ul oppenning, the title shouldn't be added as a part of the list.
-
250-338-7467
add a tel+ link
-
<h1><u>Our Services</u></h1> <h2><li> Below is a list of services we proudly offer.</li></h2> <p> At Hairpins, we care about the environment and recognize the impact we all have on it. We are continually making strides to reduce where we can and have only aligned ourselves with companies and products we believe in.<p></p> <br> <p> We are proud to be a CERTIFIED GREEN CIRCLE SALON and through that partnership are able to divert 95% of our salon waste from landfills. Get in touch if you have any questions or want to learn more about the programs and charities we are focusing our efforts on.</p> <h3><li>Cuts</li></h3> <p>Range from 45 minutes to 90 minutes</p>
<ul> is a parent tag of <li> you need to add a <ul> Additionally, in this situation I would recomment not using a list, instead just use the header and paragraph tags.
-
-
github.com github.com
-
We are incredibly proud of our diverse team of stylists who greet each client with a smile. We prioritize inclusivity, community, and sustainability, and make sure that everyone who walks through our door feels welcome.<br><br>
needs a tag
-
-
github.com github.com
-
ctus
space
-
<head>
need to add a comment <!-- DGL 103 DLU1 - Sukhdeep Singh - Assignment C -->
-
<a href="Contact us today to book an appointment!">
this doesn't link to anything. you need to make it <a href="contact.html"> This is also duplicate code.
-
Tel:<a href="(250) 338-7467 ">(250) 338-7467 </a> <br><br> Email: <a href=" salon.hairpins@gmail.com "> salon.hairpins@gmail.com </a><br><br>
needs to have a tag. <a href="tel:+2503387467">to add a telephone, <a href="mailto:salon.hairpins@gmail.com"> to add email
-
<p> Monday ~ Closed</p> <p>Tuesday 9:00am ~ 5:00pm</p> <p> Wednesday 9:00am ~ 8:00pm</p> <p> Thursday 9:00am ~ 8:00pm</p> <p>Friday 9:00am ~ 5:00pm</p> <p>Saturday 9:00am ~ 4:00pm</p> Sunday ~ Closed
Recommended to make it an <ul>. If you were to use a <p> only use one for the entire section, and add <br> inbetween each item. Not efficient to do this however.
-
Hairpins Boutique Salon #4 - 224 6th Street Courtenay, BC V9N 1M1 Check us out on Google Maps <a href="https://www.google.com/maps/place/Hairpins+Boutique+Salon/@49.6904218,-124.9971279,15z/data=!4m2!3m1!1s0x0:0x859b2cfce3bc31ea?sa=X&ved=2ahUKEwiYi_2Ex6T6AhXNMjQIHYkoCUUQ_BJ6BAhSEAc)">https://www.google.com/maps/place/Hairpins+Boutique+Salon/@49.6904218,-124.9971279,15z/data=!4m2!3m1!1s0x0:0x859b2cfce3bc31ea?sa=X&ved=2ahUKEwiYi_2Ex6T6AhXNMjQIHYkoCUUQ_BJ6BAhSEAc)</a>
needs to have a tag
-
Sunday ~ Closed
needs to have a tag
-
Questions, comments, ready for a new do? We look forward to hearing from you! If you're looking to make an appointment online, please do so here.
needs to have a tag.
-
-
github.com github.com
-
Clean code that is easy to read, no needed edits just some suggestions that you can ignore.
-
<p>We require 48 hours' notice for any cancellations. If you are a “no show”, you will be required to pay for your missed service in full in order to rebook. If you cancel with less than 48 hours' notice, you will be required to pay for 1/2 of the service you canceled in order to rebook. We understand that last-minute things happen! We will address each situation on a case-by-case basis. Please communicate with us and we will try our best to help. We appreciate your understanding.</p>
could make this a <small> if you wanted. I think?
-
-
github.com github.com
-
<a href="https://www.google.com/maps/place/Hairpins+Boutique+Salon/@49.6904218,-124.9971279,15z/data=!4m2!3m1!1s0x0:0x859b2cfce3bc31ea?sa=X&ved=2ahUKEwiYi_2Ex6T6AhXNMjQIHYkoCUUQ_BJ6BAhSEAc">Check us out on Google Maps</a></p>
Google has an embedded maps you can add, google maps>click on the share button>click on the embed a map tab and copy the code.
-
- Sep 2022
-
github.com github.com
-
</html>
I don't see a list. Overall good, just one thing that needs adjusting, and one thing that needs to be added!
-
<article><h1>Assignment B</h1>
Best to have these on two separate lines, keeps it cleaner.
-