12 Matching Annotations
- Nov 2022
-
github.com github.com
-
html{ font-size: 62.5%; } body{ font-family: sans-serif; } .upper{ width: 80%; margin: auto; text-align: left; } .text p{ font-size: 1.4rem; } h2{ font-size: 2.2rem; } h3{ font-size:1.6rem; } header{ padding: 0; margin: auto; background-color: grey; overflow: auto; } .upper{ background-color: black; } img{ padding: 5px; float: left; } ul{ list-style-type: none; overflow: auto; margin: 0; padding: 0; font-size: 1.6rem; float: left; } ul li{ padding: 20px; float: left; } .upper li a{ color:white; text-decoration: none; font-size: 2rem; line-height: 270%; } .intro{ background-color: #f5f5f5; overflow: auto; padding: 40px 10px; } .intro h2{ font-size: 2.5rem; } .intro aside{ float: right; width: 55%; } .intro article{ float: left; width: 40%; } .intro img{ width: 90%; } button{ color: white; background-color: #ff8b3d; padding: 10px; border:none; font-size: 1.6rem; font-weight: 600; border-radius: 5%; } .content{ overflow: auto; padding: 40px 0; } .content h2{ padding-left: 10px; } .content_box{ float: left; padding: 10px; width: calc(33.33% - 20px); } .box content{ width: 100%; height: 200px; background-color: gray; display:inline-block; } footer{ padding: 40px 0px; margin: auto; background-color: gray; overflow: auto; color: white; font-size: 1.4rem; } footer section{ float: left; padding: 10px; width: calc(30% - 20px); } .footer{ width: calc(50% - 20px); } .socials{ width: calc(20% - 20px); } footer dl{ list-style:none; } footer dt{ font-weight: 600; } footer dd{ margin: 0; padding-bottom: 10px; } footer ul{ list-style-type: none; overflow: auto; margin: 0; padding: 0; } footer li{ padding-bottom: 15px; } footer li a{ text-decoration: none; color: white; } .copyright{ display: block; width: 80%; text-align: center; margin: auto; border: none; padding: 40px; font-size: 1.2rem; }
the css coding is good but i think you might improve in some areas like reduce the coding a bit so that it will be easy to read and easy to make chances. but i really like the coding and the color and fonts used in it
-
-
github.com github.com
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Assignment F</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <header> <section> <div class="upper"> <img src="images/dgl-logo.png" alt="Digital Design + Development logo" width="100"/> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </section> </header> <main> <article class="text"> <h2>Loreum ipsum dolor sit amet</h2> <p> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <br /> <br /> <button>Find out how we can help you</button> </article> <div class="intro"> <img src="images/distance-and-inclass-students.png" alt="Students collaborating in-person on zoom call"/> </div> </div> </section> <section class="content"> <h2>Check out our recent projects</h2> <section class="content_box"> <span class="box-content"></span> <h3>Dignissim cras tincidunt</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Learn more</button> </section> <section class="content_box"> <span class="box-content"></span> <h3>Nulla pharetra diam</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Learn more</button> </section> <section class="content_box"> <span class="box-content"></span> <h3>Risus ultricies tristique</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Learn more</button> </section> </div> </section> </main> <footer> <section> <h3>Latest News</h3> <dl> <dt>October 1:</dt> <dd>Imperdiet dui</dd> <dt>September 15th:</dt> <dd>Pellentesque habitant</dd> <dt>September 10th:</dt> <dd>Magna etiam tempor</dd> </dl> </section> <section class="footer"> <h3>About us</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Get in touch</button> </section> <section class="socials"> <h3>Follow Us</h3> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Instagram</a></li> <li><a href="#">Youtube</a></li> </ul> </section> </div> </footer> <span class="copyright" >Copyright © 2022. All rights reserved North Island College DIGITAL Design + Development</span> </body> </html>
overall coding is very good and it is written in very structured form
-
-
github.com github.com
-
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); *{ box-sizing: border-box; } html{ font-size: 62.5%; } body{ margin: 0; font-family: 'Poppins', sans-serif; } h1, h2, h3, h4, h5, h1 { margin: 0; font-weight: 600; } p{ font-size: 1.4rem; } .wrapper{ width: 80%; margin: auto; } h2{ font-size: 2.2rem; } h3{ font-size:1.6rem; } header{ padding: 0; margin: auto; background-color: gray; overflow: auto; } header img{ padding: 5px; float: left; } header ul{ list-style-type: none; overflow: auto; margin: 0; padding: 0; font-size: 1.6rem; float: right; } header ul li{ padding: 20px; float: left; } header li a{ color:white; text-decoration: none; font-size: 2rem; line-height: 270%; } .intro{ background-color: #f5f5f5; overflow: auto; padding: 40px 10px; } .intro h2{ font-size: 2.5rem; } .intro aside{ float: right; width: 55%; } .intro article{ float: left; width: 40%; } .intro img{ width: 90%; } button{ color: white; background-color: #ff8b3d; padding: 10px; border:none; font-size: 1.6rem; font-weight: 600; border-radius: 5%; } .recent-projects{ overflow: auto; padding: 40px 0; } .recent-projects h2{ padding-left: 10px; } .recent-projects__item{ float: left; padding: 10px; width: calc(33.33% - 20px); } .item__span--grey-box{ width: 100%; height: 200px; background-color: gray; display:inline-block; } footer{ padding: 40px 0px; margin: auto; background-color: gray; overflow: auto; color: white; font-size: 1.4rem; } footer section{ float: left; padding: 10px; width: calc(30% - 20px); } .footer__about{ width: calc(50% - 20px); } .footer__socials{ width: calc(20% - 20px); } .footer__about p{ width: 75%; } footer dl{ list-style:none; } footer dt{ font-weight: 600; } footer dd{ margin: 0; padding-bottom: 10px; } footer ul{ list-style-type: none; overflow: auto; margin: 0; padding: 0; } footer li{ padding-bottom: 15px; } footer li a{ text-decoration: none; color: white; } .copyright{ display: block; width: 80%; text-align: center; margin: auto; border: none; padding: 40px; font-size: 1.2rem; }
the css code is very good and the website is very responsive i really liked the css coding style
-
-
github.com github.com
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Assignment F</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <!--Header containing logo image and navigation links--> <header> <div class="wrapper"> <img class="header__img" src="images/dgl-logo.png" alt="Digital Design + Development logo" width="100" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </header> <!--Main page content, including introductory information and recent projects snapshot--> <main> <section class="intro"> <div class="wrapper"> <article> <h2>Lorem ipsum dolor sit amet</h2> <p> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p> Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <br /> <br /> <button>Find out how we can help you</button> </article> <aside> <img class="pull-right" src="images/distance-and-inclass-students.png" alt="Students collaborating in-person and through a zoom call" /> </aside> </div> </section> <section class="recent-projects"> <div class="wrapper"> <h2>Check out our recent projects</h2> <section class="recent-projects__item"> <span class="item__span--grey-box"></span> <h3>Dignissim cras tincidunt</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Learn more</button> </section> <section class="recent-projects__item"> <span class="item__span--grey-box"></span> <h3>Nulla pharetra diam</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Learn more</button> </section> <section class="recent-projects__item"> <span class="item__span--grey-box"></span> <h3>Risus ultricies tristique</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Learn more</button> </section> </div> </section> </main> <footer> <div class="wrapper"> <section> <h3>Latest News</h3> <dl> <dt>October 1:</dt> <dd>Imperdiet dui</dd> <dt>September 15th:</dt> <dd>Pellentesque habitant</dd> <dt>September 10th:</dt> <dd>Magna etiam tempor</dd> </dl> </section> <section class="footer__about"> <h3>About us</h3> <p> Placerat duis ultricies lacus sed turpis. Etiam erat velit scelerisque in dictum non consectetur a erat. Venenatis a condimentum vitae sapien pellentesque habitant. </p> <button>Get in touch</button> </section> <section class="footer__socials"> <h3>Follow Us</h3> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Instagram</a></li> <li><a href="#">Youtube</a></li> </ul> </section> </div> </footer> <span class="copyright" >Copyright © 2022. All rights reserved North Island College DIGITAL Design + Development</span > </body> </html>
the code is very clean and there is also mention in comments like which part starts from where and it looks very good so that anyone can know which coding is for which thing
-
- Oct 2022
-
github.com github.com
-
the css part is done very great and they have right space in between the codes , like we can easily see the each tag and what is used in it. i also saw new thing like we can use h1,h2 tags combine and edit it together
-
-
github.com github.com
-
css code is very neat and simple not to many coding or complexity
-
-
github.com github.com
-
written in well readable form. not used many confusing tags. i can easily see the content and what is used to create the content.
-
-
github.com github.com
-
i loved it how you write the code its very clean and easy to read and every tag is used appropriate.
-
- Sep 2022
-
github.com github.com
-
h1 { color: #92003B; font-family: Times, Serif; }
the css is neat and clean and i didn't see any error in it , it's good one
-
-
github.com github.com
-
<li> by email at <a href="mailto:tsuarezsuarez@northislandcollege.ca?subject=Reaching%20Out&body=How%20are%20you"> tsuarezsuarez@northislandcollege.ca </a> </li> </ul>
i saw the code and its seems perfect however i didn't know about the hyperlink with the mail one because i don't know that we could use our mail also in hyperlink. so i got new thing to learn and the code is perfect and everything is easy to read.
-
-
github.com github.com
-
p {color: green;}
very nice one line css code there nothing wrong in it and also love the green color
-
-
github.com github.com
-
<h1>Hello World</h1> <p>This is Tatiana speaking.</p> <img src="images/greg-rosenke-GOWz0zTf_vY-unsplash.jpg" width="600" alt="greg-rosenke">
as far as i know this is the clear code and i haven't find any errors in it and it is easily readible and easy to understand. you have done the great work.
-