{"id":177,"date":"2026-10-16T14:09:01","date_gmt":"2026-10-16T14:09:01","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_mehraban\/?p=177"},"modified":"2026-10-16T14:09:01","modified_gmt":"2026-10-16T14:09:01","slug":"free-friday-assigment-10-16-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_mehraban\/2026\/10\/16\/free-friday-assigment-10-16-2026\/","title":{"rendered":"free friday assigment 10\/16\/2026"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">today i made a website like called it garage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">down here you can see how the index.html look like <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  &lt;title>Car Garage Ltd&lt;\/title>\n  &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n  &lt;header class=\"topbar\">\n    &lt;a class=\"logo\" href=\"#\">\u2699 CAR&lt;br>&lt;span>\u3000GARAGE&lt;\/span>&lt;\/a>\n\n    &lt;nav>\n      &lt;a href=\"#\">Home&lt;\/a>\n      &lt;a href=\"#\">News&lt;\/a>\n      &lt;a href=\"#services\">Services&lt;\/a>\n      &lt;a href=\"#\">Repairs&lt;\/a>\n      &lt;a href=\"#\">Prices&lt;\/a>\n      &lt;a href=\"#\">Gallery&lt;\/a>\n      &lt;a href=\"#about\">About us&lt;\/a>\n      &lt;a href=\"#contact\">Contact us&lt;\/a>\n    &lt;\/nav>\n\n    &lt;a class=\"quote\" href=\"#contact\">Get a quote&lt;\/a>\n  &lt;\/header>\n\n  &lt;section class=\"services\" id=\"services\">\n    &lt;article>&lt;span>\ud83d\udee1\ufe0f&lt;\/span>&lt;small>TESTING STATION&lt;\/small>&lt;strong>MOT&lt;\/strong>&lt;\/article>\n    &lt;article>&lt;span>\ud83d\udd27&lt;\/span>&lt;small>CARS &amp; VANS&lt;\/small>&lt;strong>REPAIRS&lt;\/strong>&lt;\/article>\n    &lt;article>&lt;span>\ud83e\uddf0&lt;\/span>&lt;small>CARS &amp; VANS&lt;\/small>&lt;strong>SERVICING&lt;\/strong>&lt;\/article>\n    &lt;article>&lt;span>\u2699\ufe0f&lt;\/span>&lt;small>ECU, DPF, EGR, ABS&lt;\/small>&lt;strong>REMAPPING&lt;\/strong>&lt;\/article>\n    &lt;article>&lt;span>\u25c9&lt;\/span>&lt;small>SUPPLIED &amp; FITTED&lt;\/small>&lt;strong>TYRES&lt;\/strong>&lt;\/article>\n  &lt;\/section>\n\n  &lt;main class=\"about\" id=\"about\">\n    &lt;div class=\"about-copy\">\n      &lt;span class=\"label\">WHO WE ARE&lt;\/span>\n      &lt;h1>CAR GARAGE LTD&lt;\/h1>\n      &lt;p>\n        With more than 20 years of experience in the field of mechanical and\n        remapping services, we know our industry inside out. There\u2019s no challenge\n        too big or too small, and we dedicate our utmost energy to every customer.\n      &lt;\/p>\n      &lt;p>\n        we can fix your car so easy and we can help you any way we can and anything wrong with the car is we can fix, your very welcome.\n      &lt;\/p>\n    &lt;\/div>\n    &lt;div class=\"car-image\" role=\"img\" aria-label=\"White car\">&lt;\/div>\n  &lt;\/main>\n\n  &lt;footer id=\"contact\">\n    &lt;p>Need a repair or service?&lt;\/p>\n    &lt;a href=\"tel:+15551234567\">Call us:0000000000&lt;\/a>\n  &lt;\/footer>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">after index.html i will paste style.css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  color: #202a35;\n  font-family: Arial, sans-serif;\n}\n\n.topbar {\n  min-height: 42px;\n  padding: 5px 5%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  background: #145321;\n  color: white;\n}\n\n.logo {\n  color: white;\n  font-size: 11px;\n  font-weight: bold;\n  line-height: 12px;\n  text-decoration: none;\n}\n\n.logo span {\n  font-weight: normal;\n}\n\nnav {\n  display: flex;\n  gap: 17px;\n}\n\nnav a,\n.quote {\n  color: white;\n  font-size: 8px;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n\n.quote {\n  padding: 9px 13px;\n  border: 1px solid #8cae91;\n}\n\n.services {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  background: #09172e;\n  color: white;\n}\n\n.services article {\n  min-height: 115px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-right: 1px solid #1d2b40;\n}\n\n.services article span {\n  margin-bottom: 8px;\n  font-size: 24px;\n}\n\n.services small {\n  color: #aab4c1;\n  font-size: 7px;\n}\n\n.services strong {\n  margin-top: 4px;\n  font-size: 10px;\n}\n\n.about {\n  min-height: 300px;\n  padding: 55px 14%;\n  display: flex;\n  align-items: center;\n  gap: 35px;\n  overflow: hidden;\n  background: #f7f7f7;\n}\n\n.about-copy {\n  max-width: 330px;\n  z-index: 1;\n}\n\n.label {\n  padding: 4px 12px;\n  background: #145321;\n  color: white;\n  font-size: 8px;\n}\n\nh1 {\n  margin: 14px 0 10px;\n  font-size: 19px;\n}\n\n.about p {\n  color: #737b82;\n  font-size: 10px;\n  line-height: 1.6;\n}\n\n.car-image {\n  flex: 1;\n  min-width: 280px;\n  height: 190px;\n  background: url(\"https:\/\/images.unsplash.com\/photo-1555215695-3004980ad54e?auto=format&amp;fit=crop&amp;w=900&amp;q=85\")\n    center \/ contain no-repeat;\n}\n\nfooter {\n  padding: 20px 14%;\n  display: flex;\n  justify-content: space-between;\n  background: #09172e;\n  color: white;\n  font-size: 13px;\n}\n\nfooter a {\n  color: white;\n}\n\n@media (max-width: 700px) {\n  .topbar {\n    flex-wrap: wrap;\n  }\n\n  nav {\n    order: 3;\n    width: 100%;\n    justify-content: space-between;\n    gap: 6px;\n  }\n\n  nav a {\n    font-size: 7px;\n  }\n\n  .services {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .about {\n    padding: 40px 8%;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .car-image {\n    width: 100%;\n    min-width: 0;\n  }\n\n  footer {\n    padding: 20px 8%;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">here i am gonna put picture of website to how it look like. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/10\/image-5-1024x500.png\" alt=\"\" class=\"wp-image-178\" srcset=\"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/10\/image-5-1024x500.png 1024w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/10\/image-5-300x147.png 300w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/10\/image-5-767x375.png 767w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/10\/image-5-1536x751.png 1536w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/10\/image-5.png 1911w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">that was picture how it look like. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>today i made a website like called it garage. down here you can see how the index.html look like after [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-177","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/comments?post=177"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":179,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/177\/revisions\/179"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/media?parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/categories?post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/tags?post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}