<span class="dot"></span> <!--how can i center these dots and turn the one red? (in css of course)-->
Delete your button , replace it with an anchor within a div like
div a class = 'watch' href = https://www.youtube.com/watch?v=6u1Ps6ZlDxA> Watch Video /a-/div----------------------------------------------then place the span next then put a closing div to close out the div with class group!
then we gotta work some css magic which i will show you on css side!
class="dot"
apply id="dot" instead of class
<!--how to make the picture scale to fit?-->
I used an external image resizer and then from there sized it down. It does not distort nearly as much!
overall looks good just needs some formatting. I tried to highlight the worst offenders and loved the slick rick
<button onclick="window.location.href='https://www.youtube.com/watch?v=6u1Ps6ZlDxA';">
Lol slick rick
</article> <article class="card-four"> <img src="images/covid-christmas.jpg" width="320" height="250" alt="Street at Christmas"> <!--how to make the picture scale to fit?--> <a class="btn btn-Live"> Live </a> <a class="btn btn-Breaking"> Breaking</a> <a class="btn btn-UK"> UK</a> <p>'Plan C' rumors grow; Downing Street Christmas party cancelled; warning Scotland's R number could rise above 2| Covid latest</p> </article> </body> </html>
Formatting
<div class="group"> <br> <p>What is SilkTricky?</p> <h3>A NEW KIND OF BEAST</h3> <button onclick="window.location.href='https://www.youtube.com/watch?v=6u1Ps6ZlDxA';"> <!--linked this to a slick rick video for humour's sake. I used the same video for the links in card 4 as well just for conveniece--> Watch Video </button> </div>
formatting
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap" rel="stylesheet"> <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:wght@300&display=swap" rel="stylesheet"> <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=Roboto:wght@500&display=swap" rel="stylesheet"> </head>
Needs to be formatted
.dot { height: 10px; width: 10px; background-color: aqua; border-radius: 50%; display:inline-block; text-align: center; /*can anyone help me understand why these dots wont center? */ margin-bottom: 10px;
Change .dot margin-bottom:10px; to margin-top:20px;---------then copy and paste it and make one an id named dot
}
Make a class named watch----------------------------------- .watch{ background-color:aqua; padding:1.5px; font-size:1.2rem; }
/*Does anyone know how to get a black border around the letters here?*/
just as you did for the btn live, but are you trying to make a border or the text black? to make the text black its just color:black;
{background-color: rgb(43, 150, 226);}
Needs to be formatted
background-color: bisque
Missing semi colon
font-family: 'Source Code Pro', monospace; text-align: center; background-image: url(Images/salon-background.jpeg);
indent
<li>FULL FOIL: $188/$219 with cut</li> <li>/4 FOIL: $172/$203 with cut</li> <li>1/2 FOIL: $158/$189 with cut</li> <li>1/4 FOIL: $144/$175 with cut</li>
Indent each li item to show they are child of the ul element, also making it much easier to read.
<p> <h1>Cuts</h1> Range from 45 minutes to 90 minutes</p>
the opening p tag needs to be brought down to where it begins
<h1>Cuts</h1>
something smaller then the h1 would have been more appropriate for the following services
<nav> <a href="contact.html">Contact Us</a> </nav>|
No need for nav
<p>Content taken from https://www.hairpins.ca/ <a href="url">https://www.hairpins.ca/</a>
Nothing between anchor tags (a) so therefore nothing to click so your link is currently unreachable.
<p>Content taken from https://www.hairpins.ca/ <a href="url">https://www.hairpins.ca/</a>. Used for educational purposes only.</p>
You have nothing between the anchor tags therefore you have no clickable link on your actual site
<p>Content taken from https://www.hairpins.ca/ <a href="url">https://www.hairpins.ca/</a>. Used for educational purposes only.</p>
Also its easier to read if you start the p on new line showing that it is truly a child elements of the footer.
<p> If you're looking to make an appointment online, please do so here. <p>
Where is the link to make an appointment?
<ul> <li><a href="index.html">Home</a></li>
whitespace unrequired
</p>
What paragraph is this closing tag for?
<p>Hairpins Boutique Salon #4 - 224 6th Street Courtenay, BC V9N 1M1 </p> <!--this link needs to be more simple, I need to figure out how to name it--> Check us out on Google Maps <a href="url">https://www.google.com/maps/place/Hairpins+Boutique+Salon/@49.6904218,-124.9971279,15z/data=!4m5!3m4!1s0x0:0x859b2cfce3bc31ea!8m2!3d49.6904117!4d-124.9971261</a> <h1> contact </h1> <!--added email and telephone links here--> <p><a href="tel:2503387467">Tel: 250-338-7467</a></p> <a href="mailto: salon.hairpins@gmail.com">Email: salon.hairpins@gmail.com</a> </p> <!--added contact us link--> <p> Contact us today to book an appointment! <a href="contact.html">Contact Us</a> </p>
this would have been better off as an entire being instead of being split up multiple times
<h1>Location</h1>
I feel something smaller then an h1 would have been of better use here
<h1> Hours </h1>
I feel something smaller then an h1 would have been of better use here
<img class="the-hairpins-team.jpeg" src="Images/the-hairpins-team.jpeg" alt" a group photo of the hair pins salons 11 staff members ">
This is missing the proper close at the end. The backslash.
<nav><a href="services.html">Services</a></nav>
No need for nav ! youre totally fine with just the anchor :)
<figcaption> The Hairpins hairdressing salon in Courtenay, BC, Canada. </figcaption>
This should be one line
A bit much whitespace but besides that looks great!
<p> Contact us today to book an appointment! <nav> <a href="contact.html">Contact Us</a></nav>|
The p element is not closed, and thereis no need for the nav, nav is used for a large chunk of navigational links. Youre only using one in this part so no point.
h1{font-size:initial\ }
because of the slash nothing is happening here
#h1{ color: brown; }
using id selector without declaring or giving name to it.
h1 on its own is an identifier for all h1 elements
#h1 { background-color: dimgrey; }
Possibly because your using an id but without using a name for said id. No way to invoke it.
h1 on its own is an identifier for all h1 elements
<h2>Hairpins Boutique Salon</h2> <h2>#4 - 224 6th Street Courtenay, BC V9N 1M1</h2> </section> <h2> Check us out on Google Maps:</h2> <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"> Hairpin Salon</a> <br> <h2> <a href="250-338-7467"> Tel: 250-338-7467 </a></h2>
It would have made more sense to have this together then to have half of it inside of an unrelated section
<a href="index.html">https://www.hairpin.ca/.</a>
Linking to wrong site shouldnt be your own
Pretty good syntax wise, just excessive white space and needs a bit of formatting! good work besides that :)!
</head>
lots of unnecessary white space, It wont affect the overall look of the site but it makes reading and debugging difficult
<section>
For Code readability i would have put a blank line above this section just to be able to discern.
<br> <br> </section> <br>
Im not entirely sure what the idea here is
excessive whitespace couple syntax errors but great work otherwise!!
> <a href="index.html">https://www.hairpin.ca/.</a
This is linking to the wrong site, it should link to the hairpin website not your own
</h3>
This should be at the end of the h3 not on new line
</ul>
This should be on its own line for readability
<ul> <li>$47.00 = 45 Minute Clipper Cuts and Short Fine Hair</li> <li>$61.00 = 60 Minute Cut for Fine to Medium Hair</li> <li>$76.00 = 75 Minute Cut for Medium to Thick Hair</li> <li>$90.00 = 90 Minute Cut for<em>THICK THICK</em> Hair, you know who are :)</li
It would be best to not have spaces between the li elements
Syntax is good for most part, just excessive whitespace ! Great work !!
<h2> Contact us today to book an appointment!</h2>
Should be one line
/>
This should be put up were it belongs next to the 100
<img src="images/the-hairpins-salon.jpeg" alt="a photo of hairpin salon">
It could possibly be that you are not being specific enough with the photo path. Try right clicking on the image in vsc and clicking copy relative path.
dont forget to use body tags to enclose all of your stuff you want to be an actual viewable part of your website!
besides that looks great!!
<p> assignment A</p>
you dont need to put the title within p tags. you can just simply write whatever the title of your page is inbetween title tags.. EX title assigment A /title no need for p tags
</li></ul>
Besides this everything else looks great syntax wise.
I would put the ul on its own line and in line with the opening ul. Improves organization and readability .
<!DOCTYPE html> <html lang="en"
I really dont see any issues in your syntax! Great work!
<h1>Hello World</h1> <p>This is *Roberta Joehle* speaking.</p>
Everything looks great, Im not sure if this is a hard rule but it does look much more neat if you start the paragraph on the line below your header I also probably would have included the Comment F22 DGL 103 DLU1 – Roberta Joehle - Assignment A on a new line aswell<br /> overall great job!