{"id":81,"date":"2026-03-27T13:46:08","date_gmt":"2026-03-27T13:46:08","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/r_najim\/?p=81"},"modified":"2026-03-27T13:46:09","modified_gmt":"2026-03-27T13:46:09","slug":"friday-march-27-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/r_najim\/2026\/03\/27\/friday-march-27-2026\/","title":{"rendered":"Friday, March, 27, 2026"},"content":{"rendered":"\n

Today This Free Friday I am working on a website<\/strong> project<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>VogueLine \u2013 Fashion Redefined<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\" \/>\n<\/head>\n<body>\n\n  <!-- NAVIGATION -->\n  <nav class=\"navbar\">\n    <div class=\"logo\">VogueLine<\/div>\n    <ul class=\"nav-links\">\n      <li><a href=\"#home\">Home<\/a><\/li>\n      <li><a href=\"#collection\">Collection<\/a><\/li>\n      <li><a href=\"#about\">About<\/a><\/li>\n    <\/ul>\n  <\/nav>\n\n  <!-- HERO SECTION -->\n  <header class=\"hero\" id=\"home\">\n    <div class=\"hero-content\">\n      <h1>Elevate Your Style<\/h1>\n      <p>Discover the latest trends crafted for bold, modern fashion lovers.<\/p>\n      <button id=\"shopBtn\">Shop Now<\/button>\n    <\/div>\n  <\/header>\n\n  <!-- COLLECTION -->\n  <section class=\"collection\" id=\"collection\">\n    <h2>New Collection<\/h2>\n    <div class=\"grid\">\n      <div class=\"item\">\n        <img src=\"https:\/\/via.placeholder.com\/300x400\" alt=\"Outfit 1\">\n        <h3>Urban Jacket<\/h3>\n        <p>$89<\/p>\n      <\/div>\n      <div class=\"item\">\n        <img src=\"https:\/\/via.placeholder.com\/300x400\" alt=\"Outfit 2\">\n        <h3>Classic Denim<\/h3>\n        <p>$69<\/p>\n      <\/div>\n      <div class=\"item\">\n        <img src=\"https:\/\/via.placeholder.com\/300x400\" alt=\"Outfit 3\">\n        <h3>Streetwear Hoodie<\/h3>\n        <p>$59<\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ABOUT -->\n  <section class=\"about\" id=\"about\">\n    <h2>About Us<\/h2>\n    <p>\n      VogueLine blends modern aesthetics with timeless craftsmanship.  \n      Our mission is to empower confidence through fashion.\n    <\/p>\n  <\/section>\n\n  <!-- FOOTER -->\n  <footer>\n    <p>\u00a9 <span id=\"year\"><\/span> VogueLine. All Rights Reserved.<\/p>\n  <\/footer>\n\n  <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    \n
  • This part of the is the Html of the website <\/strong><\/li>\n<\/ul>\n\n\n\n
    * {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: \"Poppins\", sans-serif;\n  background: #f7f7f7;\n  color: #222;\n}\n\n\/* NAVBAR *\/\n.navbar {\n  display: flex;\n  justify-content: space-between;\n  padding: 1.2rem 2rem;\n  background: #fff;\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  border-bottom: 1px solid #eee;\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n\n.nav-links {\n  display: flex;\n  gap: 1.5rem;\n  list-style: none;\n}\n\n.nav-links a {\n  text-decoration: none;\n  color: #333;\n  font-weight: 500;\n}\n\n.nav-links a:hover {\n  color: #000;\n}\n\n\/* HERO *\/\n.hero {\n  height: 90vh;\n  background: url(\"https:\/\/images.unsplash.com\/photo-1521335629791-ce4aec67dd47?auto=format&fit=crop&w=1200&q=80\")\n    center\/cover no-repeat;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: #fff;\n}\n\n.hero-content h1 {\n  font-size: 3rem;\n  margin-bottom: 1rem;\n}\n\n.hero-content p {\n  font-size: 1.2rem;\n  margin-bottom: 1.5rem;\n}\n\n.hero-content button {\n  padding: 0.8rem 2rem;\n  background: #000;\n  color: #fff;\n  border: none;\n  cursor: pointer;\n  font-size: 1rem;\n  transition: 0.3s;\n}\n\n.hero-content button:hover {\n  background: #444;\n}\n\n\/* COLLECTION *\/\n.collection {\n  padding: 3rem 2rem;\n  text-align: center;\n}\n\n.collection h2 {\n  font-size: 2rem;\n  margin-bottom: 2rem;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n}\n\n.item img {\n  width: 100%;\n  border-radius: 10px;\n}\n\n.item h3 {\n  margin-top: 0.8rem;\n  font-size: 1.2rem;\n}\n\n.item p {\n  color: #666;\n}\n\n\/* ABOUT *\/\n.about {\n  padding: 3rem 2rem;\n  text-align: center;\n  background: #fff;\n}\n\n.about h2 {\n  font-size: 2rem;\n  margin-bottom: 1rem;\n}\n\n.about p {\n  max-width: 600px;\n  margin: auto;\n  color: #555;\n}\n\n\/* FOOTER *\/\nfooter {\n  text-align: center;\n  padding: 1.5rem;\n  background: #111;\n  color: #fff;\n  margin-top: 2rem;\n}\n<\/code><\/pre>\n\n\n\n
      \n
    • This part of the is the Styles.css<\/strong> of the wesite<\/strong><\/li>\n<\/ul>\n\n\n\n
      \/\/ Scroll to collection on button click\ndocument.getElementById(\"shopBtn\").addEventListener(\"click\", () => {\n  document.getElementById(\"collection\").scrollIntoView({ behavior: \"smooth\" });\n});\n\n\/\/ Dynamic year\ndocument.getElementById(\"year\").textContent = new Date().getFullYear();\n<\/code><\/pre>\n\n\n\n
        \n
      • This part of the is the JS of the website<\/strong><\/li>\n<\/ul>\n\n\n\n
        <\/p>\n","protected":false},"excerpt":{"rendered":"
        Today This Free Friday I am working on a website project<\/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-81","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/posts\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"predecessor-version":[{"id":82,"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/posts\/81\/revisions\/82"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/r_najim\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}