{"id":167,"date":"2026-10-02T15:09:49","date_gmt":"2026-10-02T15:09:49","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_mehraban\/?p=167"},"modified":"2026-10-02T15:09:49","modified_gmt":"2026-10-02T15:09:49","slug":"free-friday-assigment-2","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_mehraban\/2026\/10\/02\/free-friday-assigment-2\/","title":{"rendered":"Free friday assigment"},"content":{"rendered":"\n

Hello, Hope you doing good<\/p>\n\n\n\n

So i made website called Outfit Shop i will paste all the code so you be able to see it <\/p>\n\n\n\n

so down here you can see the index.html<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Outfit Store<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<header>\n    <div class=\"logo\">Outfit Store<\/div>\n    <nav>\n        <a href=\"#home\">Home<\/a>\n        <a href=\"#shop\">Shop<\/a>\n        <a href=\"#about\">About<\/a>\n        <a href=\"#contact\">Contact<\/a>\n    <\/nav>\n<\/header>\n\n<section id=\"home\" class=\"hero\">\n    <div class=\"hero-content\">\n        <h1>Fresh Fits. Every Day.<\/h1>\n        <p>Discover streetwear, casual, and premium outfits tailored to your style.<\/p>\n        <a href=\"#shop\" class=\"btn\">Shop Now<\/a>\n    <\/div>\n<\/section>\n\n<section id=\"shop\" class=\"section\">\n    <h2>New Arrivals<\/h2>\n    <div class=\"product-grid\">\n        <div class=\"product-card\">\n            <img src=\"https:\/\/encrypted-tbn2.gstatic.com\/shopping?q=tbn:ANd9GcQTK5AuaYLmHBeHCskfL2PAJ2QGmV88zInyjaiCjKzycL3_KEMjeSCpRPUcwY98-64gIxQ9g4MWu-eohkxq7gkstZmd7LX7k2mop7HXM2b8F-ht2cr_WGg3tXE5fMlqE9mPoeqIvL8&usqp=CAc\" alt=\"Hoodie\">\n            <h3>Casual Hoodie<\/h3>\n            <p class=\"price\">$350.00<\/p>\n            <button class=\"btn-secondary\">Add to Cart<\/button>\n        <\/div>\n        <div class=\"product-card\">\n            <img src=\"https:\/\/encrypted-tbn1.gstatic.com\/shopping?q=tbn:ANd9GcTFJtbvEYIgjH3yCmPkORtHYE6Bd6N3fktRdVn8tpcx5JS8QAt339CWMN0n5rpwXq4sk3d4oEU-5Ag13kjzsK1dSeL0qBVjXj5HLfS2qm9UTQNtjMkDqKvsIqu1cqF7ufGlsup5x9tw2WE&usqp=CAc\" alt=\"Jacket\">\n            <h3>Air Jordan 4 <\/h3>\n            <p class=\"price\">$250.00<\/p>\n            <button class=\"btn-secondary\">Add to Cart<\/button>\n        <\/div>\n        <div class=\"product-card\">\n            <img src=\"https:\/\/images.stockx.com\/images\/Nike-Tech-Fleece-Windrunner-Full-Zip-Hoodie-Gym-Red-Black.jpg?fit=fill&bg=FFFFFF&w=480&h=320&q=60&dpr=1&trim=color&updated_at=1769542560\" alt=\"Nike Tech\">\n            <h3><\/h3>Nike Tech Red\/Black\n            <p class=\"price\">$120.00<\/p>\n            <button class=\"btn-secondary\">Add to Cart<\/button>\n        <\/div>\n        <div class=\"product-card\">\n            <img src=\"https:\/\/encrypted-tbn2.gstatic.com\/shopping?q=tbn:ANd9GcSL9Hp0jNP6CErAeoGC4uvc5XCPW1XgzT_vvBOYOrhE_4UeHqZlL7hvv4xp9B2SEmNzLqesMzJ5d9rZp6gXvXS2mhq2IBtXLx5A9isljBTKWrR9-4qtQeP3iWjERm2cCW7O34U8Ew&usqp=CAc\" alt=\"Jeans\">\n            <h3>Denim Jeans<\/h3>\n            <p class=\"price\">$200.00<\/p>\n            <button class=\"btn-secondary\">Add to Cart<\/button>\n        <\/div>\n        <div class=\"product-card\">\n            <img src=\"https:\/\/m.media-amazon.com\/images\/I\/516RIaVK98L._AC_SX679_.jpg\" alt=\"T-Shirt\">\n            <h3><\/h3>Atlas for men\n            <p class=\"price\">$55.00<\/p>\n            <button class=\"btn-secondary\">Add to Cart<\/button>\n        <\/div>\n        <div class=\"product-card\">\n            <img src=\"https:\/\/s.yimg.com\/lo\/mysterio\/api\/53c20cae94c20c5f9c0c197585feb2cd95b8fcf85e499f309936d4363fc08725\/lightyear_networkapi\/resizefill_w930_h1240%3Bquality_80%3Bformat_webp\/https%3A%2F%2Fmedia.zenfs.com%2Fen%2Fonefootball_articles_802%2F6ccadf5416fcb9fa36604842dbf59b42.jpg\" alt=\"Shirt\">\n            <h3><\/h3>Adidas\n            <p class=\"price\">$50.00<\/p>\n            <button class=\"btn-secondary\">Add to Cart<\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n<section id=\"about\" class=\"section section-alt\">\n    <h2>About Us<\/h2>\n    <p>\n        We are here to you guys and sale yall the perfect outfit for good price we have any thing you want most wellcom.\n        \n    <\/p>\n<\/section>\n\n<section id=\"contact\" class=\"section\">\n    <h2>Contact<\/h2>\n    <div class=\"contact-grid\">\n        <form class=\"contact-form\">\n            <label>Name<\/label>\n            <input type=\"text\" placeholder=\"Your name\">\n\n            <label>Email<\/label>\n            <input type=\"email\" placeholder=\"you@example.com\">\n\n            <label>Message<\/label>\n            <textarea rows=\"4\" placeholder=\"Tell us what you\u2019re looking for...\"><\/textarea>\n\n            <button class=\"btn\">Send Message<\/button>\n        <\/form>\n        <div class=\"contact-info\">\n            <h3>Store Info<\/h3>\n            <p>Email: random@outfitstore.com<\/p>\n            <p>Phone: no number<\/p>\n            <p>Location: New york city<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<footer>\n    <p>\u00a9 2026 Outfit Store. All rights reserved.<\/p>\n<\/footer>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Here you can see style .css<\/p>\n\n\n\n
* {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n}\n\nbody {\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    background: #050608;\n    color: #f5f5f5;\n}\n\n\nheader {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background: rgba(5, 6, 8, 0.95);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 40px;\n    border-bottom: 1px solid #222;\n}\n\n.logo {\n    font-weight: 700;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n}\n\nnav a {\n    margin-left: 20px;\n    text-decoration: none;\n    color: #f5f5f5;\n    font-size: 0.95rem;\n    text-transform: uppercase;\n}\n\nnav a:hover {\n    color: #ffcc66;\n}\n\n\n.hero {\n    min-height: 70vh;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    padding: 40px;\n    background: radial-gradient(circle at top left, #ffcc66 0, #050608 45%);\n}\n\n.hero-content {\n    max-width: 480px;\n}\n\n.hero h1 {\n    font-size: 2.8rem;\n    margin-bottom: 12px;\n}\n\n.hero p {\n    margin-bottom: 20px;\n    color: #ddd;\n}\n\n\n.btn,\n.btn-secondary {\n    display: inline-block;\n    padding: 10px 22px;\n    border-radius: 999px;\n    border: none;\n    cursor: pointer;\n    font-size: 0.95rem;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n}\n\n.btn {\n    background: #ffcc66;\n    color: #111;\n}\n\n.btn:hover {\n    background: #ffd98c;\n}\n\n.btn-secondary {\n    background: transparent;\n    border: 1px solid #ffcc66;\n    color: #ffcc66;\n}\n\n.btn-secondary:hover {\n    background: #ffcc66;\n    color: #111;\n}\n\n\n.section {\n    padding: 50px 40px;\n}\n\n.section h2 {\n    font-size: 1.8rem;\n    margin-bottom: 24px;\n}\n\n.section-alt {\n    background: #0b0c10;\n}\n\n\n.product-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n    gap: 24px;\n}\n\n.product-card {\n    background: #0f1015;\n    border-radius: 16px;\n    padding: 16px;\n    border: 1px solid #222;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.product-card img {\n    width: 100%;\n    border-radius: 12px;\n    object-fit: cover;\n}\n\n.product-card h3 {\n    font-size: 1.1rem;\n}\n\n.price {\n    color: #ffcc66;\n    font-weight: 600;\n}\n\n\n.contact-grid {\n    display: grid;\n    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);\n    gap: 32px;\n}\n\n.contact-form {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n.contact-form input,\n.contact-form textarea {\n    background: #0f1015;\n    border: 1px solid #333;\n    border-radius: 8px;\n    padding: 8px 10px;\n    color: #f5f5f5;\n}\n\n.contact-form input:focus,\n.contact-form textarea:focus {\n    outline: 1px solid #ffcc66;\n}\n\n.contact-info p {\n    margin-bottom: 8px;\n    color: #ccc;\n}\n\n\nfooter {\n    text-align: center;\n    padding: 20px;\n    border-top: 1px solid #222;\n    font-size: 0.85rem;\n    color: #aaa;\n}\n\n\n@media (max-width: 768px) {\n    header {\n        padding: 12px 20px;\n    }\n\n    .hero {\n        padding: 30px 20px;\n        min-height: 60vh;\n    }\n\n    .section {\n        padding: 40px 20px;\n    }\n\n    .contact-grid {\n        grid-template-columns: 1fr;\n    }\n}\n<\/code><\/pre>\n\n\n\n
and here you see how it looks like <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
and also copilot help me with that little bit <\/p>\n","protected":false},"excerpt":{"rendered":"
Hello, Hope you doing good So i made website called Outfit Shop i will paste all the code so you […]<\/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-167","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/167","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=167"}],"version-history":[{"count":2,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/167\/revisions\/172"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}