diff --git a/Assignments/CB.EN.U4CYS22055/ui/css/style.css b/Assignments/CB.EN.U4CYS22055/ui/css/style.css
new file mode 100644
index 00000000..96a2ba8e
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/css/style.css
@@ -0,0 +1,643 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
+
+:root{
+    --main-color:#284990;
+    --black-color: #252525;
+    --border: 0.1rem solid rgba(255, 255, 255, 0.4);
+}
+
+*{
+    font-family: 'Poppins',sans-serif;
+    margin: 0;
+    padding: 0;
+    border: none;
+    box-sizing: border-box;
+    text-decoration: none;
+    text-transform: capitalize;
+    transition: .2s ease;
+    outline: none;
+}
+
+html{
+    font-size: 62.5%;
+    overflow-x: hidden;
+    
+    scroll-behavior: smooth;
+}
+
+body{
+    background-color: var(--main-color);
+
+}
+
+section{
+    padding: 3.5rem 7%;
+    scroll-margin-top: 9rem;
+}
+
+img{
+    width: 100%;
+    object-fit: contain;
+}
+
+a{
+    text-decoration: none;
+    color: var(--black-color);
+}
+
+.btn{
+    margin-top: 1rem;
+    display: inline-block;
+    padding: 2rem 3.75rem;
+    border-radius: 30px;
+    font-size: 1.7rem;
+    color: #fff;
+    background-color: var(--black-color);
+    cursor: pointer;
+}
+
+.btn:hover{
+    opacity: 0.8;
+}
+
+.heading{
+    color: #fff;
+    text-transform: uppercase;
+    font-size: 4rem;
+    margin-bottom: 3.5rem;
+    border-bottom: 0.1rem solid #fff;
+}
+
+.heading span{
+    text-transform: uppercase;
+    color: var(--black-color);
+}
+
+.box-container{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
+    gap: 1.5rem;
+}
+
+.box{
+    padding: 3rem;
+    background-color: #fff;
+    border-radius: 3rem 2rem;
+    min-height: 60rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-align: center;
+    border: var(--border);
+}
+
+.search-input{
+    font-size: 1.6rem;
+    color: var(--black-color);
+    padding: 1rem;
+    text-transform: none;
+    border-radius: 3rem;
+}
+
+::-webkit-scrollbar{
+    height: 0.5rem;
+    width: 1rem;
+    background-color: rgb(7, 126, 182);
+}
+
+::-webkit-scrollbar-track{
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb{
+    border-radius: 3rem;
+    background-color: greenyellow;
+}
+
+::-webkit-scrollbar-thumb:hover{
+    background-color: rgb(211, 255, 144);
+}
+
+/* ------------------------------------------HEADER SECTION */
+
+.header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    padding: 0 7%;
+    margin: 2rem 7%;
+    border-radius: 30rem;
+    box-shadow: 0px 0px 17px -2px rgba(0,0,0,0.75);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.header .search-form{
+    position: absolute;
+    top: 115%;
+    right: 7%;
+    background-color: #fff;
+    width: 50rem;
+    height: 5rem;
+    display: flex;
+    align-items: center;
+    border-radius: 3rem;
+    box-shadow: 0px 0px 25px 2px rgb(0 0 0 / 75%);
+    transform: scaleY(0);
+}
+
+.header .search-form.active{
+    transform: scaleY(1);
+}
+
+.header .search-form i{
+    cursor: pointer;
+    font-size: 2.2rem;
+    margin-right: 1.5rem;
+    color: var(--black-color);
+}
+.header .search-form input{
+    width: 100%;
+}
+
+.header .logo img{
+    height: 9rem;
+}
+
+.header .navbar a{
+    margin: 0 1rem;
+    font-size: 1.6rem;
+    color: var(--black-color);
+    border-bottom: 0.2rem solid transparent;
+}
+
+.header .navbar a.active,
+.header .navbar a:hover{
+    border-color: var(--main-color);
+    padding-bottom:.5rem ;
+}
+
+.header .buttons button{
+    cursor: pointer;
+    font-size: 2.5rem;
+    margin-left: 2rem;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.header .cart-items-container{
+    position: absolute;
+    top: 95%;
+    height: calc(100vh - 9rem);
+    width: 35rem;
+    background-color: #fff;
+    box-shadow: 0px 20px 14px 0px rgba(0 0 0 / 75%);
+    right: -100%;
+}
+
+.header .cart-items-container.active{
+    right: 3rem;
+}
+
+.header .cart-items-container .cart-item{
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 1.5rem;
+}
+
+.header .cart-items-container .cart-item:hover{
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
+}
+.header .cart-items-container .cart-item img{
+    height: 7rem;
+    width: auto;
+}
+.header .cart-items-container .cart-item .content h3{
+    font-size: 2rem;
+    color: var(--black-color);
+    padding: 0.5rem;
+}
+
+.header .cart-items-container .cart-item .content .price{
+    font-size: 1.5rem;
+    color: var(--black-color);
+}
+.header .cart-items-container .cart-item .fa-times{
+    position: absolute;
+    top: 1rem;
+    right: 1.5rem;
+    font-size: 2rem;
+    cursor: pointer;
+    color: var(--black-color);
+}
+.header .cart-items-container .btn{
+    width: 100%;
+    text-align: center;
+    border-radius: unset;
+}
+
+.header #menu-btn{
+    display: none;
+}
+/* ------------------------------------------HEADER SECTION */
+
+
+/* ------------------------------------------HOME SECTION */
+
+.home{
+    min-height: 100vh;
+    background: url(“./image/pizza-with-turkey-bacon-orange-and-cashew-nuts-2022-03-29-07-33-54-utc.jpg”) no-repeat;
+    background-size: cover;
+    background-position: center;
+    margin-top: -134px;
+    display: flex;
+    align-items: center;
+}
+
+.home .content{
+    max-width: 60rem;
+}
+
+.home .content h3{
+    font-size: 6rem;
+    color: #fff;
+}
+
+.home .content p{
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 1.8;
+    padding: 1rem 0;
+    color: #fff;
+}
+
+/* ------------------------------------------HOME SECTION */
+
+/* ------------------------------------------MENU SECTION */
+/* img .box-container ve .box  genel olarak düzenlendi */
+
+.menu .box-container .menu-category{
+    font-size: 1.2rem;
+    text-transform: uppercase;
+}
+
+.menu .box-container .box h3{
+    font-size: 3rem;
+    padding: 1rem 0;
+}
+
+.menu .box-container .box .price{
+    font-size: 2.5rem;
+    padding: 0.5rem 0;
+}
+
+.menu .box-container .box .price span{
+    text-decoration: line-through;
+    font-size: 1.5rem;
+}
+/* ------------------------------------------MENU SECTION */
+
+
+/* ------------------------------------------PRODUCTS SECTION */
+.products .box-container .box .box-head{
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    z-index: 10;
+}
+.products .box-container .box .box-head .title{
+    font-size: 1.4rem;
+}
+
+.products .box-container .box-head .name{
+    font-size: 4rem;
+    font-weight: bold;
+    text-align: start;
+    overflow-wrap: anywhere;
+}
+
+.products .box-container .box .box-bottom{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.products .box-container .box .box-bottom .info{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.products .box-container .box-bottom .info .price{
+    font-size: 3rem;
+}
+.products .box-container .box-bottom .info .amount{
+    font-size: 1.5rem;
+}
+
+.products .box-container  .box-bottom .product-btn a{
+    display: flex; 
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 6.5rem;
+    height: 6.5rem;
+    border: 0.2rem solid var(--main-color);
+}
+
+.products .box-container  .box-bottom .product-btn a i{
+    font-size: 1.6rem;
+    color: var(--main-color);
+}
+
+/* ------------------------------------------PRODUCTS SECTION */
+
+/* ------------------------------------------ABOUT US SECTION */
+.about .row .image{
+     flex: 1 1 45rem;
+}
+.about .row .image img{
+    height: 50rem;
+    object-fit: contain;
+}
+/* img  genel olarak düzenlendi */
+
+.about .row{
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 2rem;
+}
+
+.about .row .content{
+    flex: 1 1 45rem;
+}
+
+.about .row .content h3{
+    font-size: 3rem;
+    color: #fff;
+}
+
+.about .row .content p{
+    font-size: 1.6rem;
+    color: #ccc;
+    padding: 1rem 0;
+    line-height: 1.8;
+}
+/* ------------------------------------------ABOUT US SECTION */
+/* ------------------------------------------REVIEW SECTION */
+/* img .box-container ve .box  genel olarak düzenlendi */
+
+.review .box-container .box img{
+    height: 20rem;
+    object-fit: contain ;
+}
+.review .box-container .box p{
+    font-size: 1.5rem;
+    line-height: 1.8;
+    padding: 2rem 0;
+}
+
+.review .box-container .box .user{
+    height: 7rem;
+    object-fit: contain;
+}
+
+.review .box-container .box .h3{
+    padding: 1rem 0;
+    font-size: 2rem;
+    color: var(--main-color);
+}
+
+.review .box-container .box .stars{
+    font-size: 1.5rem;
+    color: gold;
+}
+/* ------------------------------------------REVIEW SECTION */
+
+/* ------------------------------------------CONTACT SECTION */
+.contact .row{
+    display: flex;
+    background-color: var(--black-color);
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.contact .row .map{
+    flex: 1 1 45px;
+    width: 100%;
+    object-fit: cover;
+}
+.contact .row form{
+    flex: 1 1 45px;
+    padding: 5rem 2rem;
+    text-align: center;
+}
+
+.contact .row form h3{
+    text-transform: uppercase;
+    font-size: 3.5rem;
+    color: #fff;
+}
+
+.contact .row form .inputBox{
+    display: flex;
+    align-items: center;
+    margin: 2rem 0;
+    border: var(--border);
+}
+
+.contact .row form .inputBox i{
+    color: #fff;
+    font-size: 2rem;
+    padding-left: 2rem;
+}
+
+.contact .row form .inputBox input{
+    width: 100%;
+    padding: 2rem;
+    font-size: 1.7rem;
+    color: #fff;
+    text-transform: none;
+    background-color: transparent;
+}
+
+.contact .row form .btn{
+    color: var(--main-color);
+    background-color: #fff;
+    font-weight: bold;
+}
+/* ------------------------------------------CONTACT SECTION */
+
+/* ------------------------------------------BLOG SECTION */
+.blog .box-container .box-full{
+    background-color: #fff;
+    border-radius: 3rem;
+}
+
+.blog .box-container .box-full .image{
+    height: 25rem;
+    overflow: hidden;
+    width: 100%;
+    border-top-left-radius: 3rem;
+    border-top-right-radius: 3rem;
+}
+
+.blog .box-container .box-full:hover .image img{
+    transform: scale(1.2);
+}
+
+.blog .box-container .box-full .content{
+    padding: 2rem;
+}
+
+.blog .box-container .box-full .content .title{
+    line-height: 1.5;
+    font-size: 2.5rem;
+}
+.blog .box-container .box-full .content span{
+    display: block;
+    padding-top: 1rem;
+    font-size: 1rem;
+}
+
+.blog .box-container .box-full .content p{
+    font-size: 1.6rem;
+    line-height: 1.8;
+    color: #ccc;
+    padding: 1rem 0;
+}
+/* ------------------------------------------BLOG SECTION */
+
+/* ------------------------------------------FOOTER SECTION */
+.footer {
+    background-color: var(--black-color);
+    text-align: center;
+}
+
+.footer .search{
+    display: flex;
+    justify-content: center;
+}
+
+.footer .search .search-input{
+    width: 30rem;
+}
+
+.footer .search .btn-primary{
+    background-color: var(--main-color);
+    padding: 1rem 2rem;
+    margin-left: 1rem;
+}
+
+.footer .share{
+    padding: 2rem 0;
+}
+
+.footer .share a{
+    color: #fff;
+    font-size: 2rem;
+    width: 5rem;
+    height: 5rem;
+    line-height: 5rem;
+    border: var(--border);
+    border-radius: 50%;
+    margin: 0.3rem;
+}
+
+
+.footer .share a:hover{
+    background-color: var(--main-color);
+}
+
+.footer .links{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.footer .links a{
+    background-color: var(--main-color);
+     padding: 0.7rem 2rem;
+     color: #fff;
+     border: var(--border);
+}
+
+.footer .links a:hover{
+    background-color: var(--black-color);
+    opacity: 0.7;
+    
+}
+
+.footer .credit{
+    font-size: 2rem;
+    color: #fff;
+    font-weight: 300;
+    padding-top: 1.5rem;
+}
+
+.footer .credit span{
+    color: var(--main-color);
+}
+/* ------------------------------------------FOOTER SECTION */
+
+/* ------------------------------------------RESPONSIVE SECTION */
+@media (max-width: 991px){
+    html{
+        font-size: 55%;
+    }
+    .header{
+        padding: 1.5rem 2rem;
+    }
+    .header .logo img{
+        height: 7rem;
+    }
+
+    section{
+        padding: 2rem;
+    }
+    .products .box-container .box .box-head .name{
+        font-size: 3.4rem;
+    }
+}
+
+@media (max-width: 768px){
+    .header #menu-btn{
+        display: inline-block;
+    }
+    .header .navbar{
+        position: absolute;
+        top: 100%;
+        background-color: #fff;
+        height: calc(100vh - 9rem);
+        width: 30rem;
+        box-shadow: 0px 20px 14px 0px rgb(0 0 0 / 75%);
+        right: -100%;
+    }
+    .header .navbar.active{
+        right: 3rem;
+    }
+    .header .navbar a{
+        color: var(--black-color);
+        display: block;
+        margin: 1.5rem;
+        padding: 0.5rem;
+        font-size: 2rem;
+    }
+}
+
+@media (max-width: 768px){
+    html{
+        font-size: 50%;
+    }
+}
+
+
+
+
+
+
+/* ------------------------------------------RESPONSIVE SECTION */
diff --git a/Assignments/CB.EN.U4CYS22055/ui/html/about.html b/Assignments/CB.EN.U4CYS22055/ui/html/about.html
new file mode 100644
index 00000000..946a7ef5
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/html/about.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
+    <title>About</title>
+</head>
+<body>
+
+    <!-------------------------------------------- HEADER SECTION -->
+    <header class="header" >
+        <a href="#" class="logo">
+            <img src="../image/pngegg.webp" alt="logo">
+        </a>
+        <nav class="navbar">   
+            <a href="../index.html" class="active">home</a>
+            <a href="../html/about.html">about</a>
+            <a href="../html/menu.html">menu</a>
+            <a href="../html/products.html">products</a>
+            <a href="../html/review.html">review</a>
+            <a href="../html/contact.html">contact</a>
+            <a href="../html/blog.html">blog</a>
+        </nav>
+        <div class="buttons">
+            
+            <button id="cart-btn">
+                <i class="fas fa-shopping-cart"></i>
+            </button>
+            <button id="menu-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+        <div class="search-form">
+            <input type="text" class="search-input" id="search-box" placeholder="Search">
+            <i class="fas fa-search"></i>
+        </div>
+        <div class="cart-items-container">
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (1).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 01</h3>
+                    <div class="price">$15.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (2).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 02</h3>
+                    <div class="price">$16.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (3).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 03</h3>
+                    <div class="price">$13.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (4).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 04</h3>
+                    <div class="price">$12.99 </div>
+                </div>
+            </div>
+            <a href="#" class="btn">check out </a>
+        </div>
+    </header>
+    <!-- -------------------------------------------HEADER SECTION -->
+        
+    <!-- -------------------------------------------ABOUT US SECTION -->
+    <section class="about" id="about">
+        <h1 class="heading">about <span>us</span> </h1>
+
+        <div class="row">
+            <div class="image">
+                <img src="../image/pngwing.com (7).png" alt="">
+            </div>
+            <div class="content">
+                <h3>What is the secret receipe of our burgers</h3>
+                <div class="paragraph">
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia officia id et, corrupti assumenda.</p>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia officia id et, corrupti assumenda.</p>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia officia id et, corrupti assumenda.</p>
+                </div>
+                    <a href="#" class="btn">Learn More</a>
+            </div>
+        </div>
+    </section>
+    <!-- -------------------------------------------ABOUT US SECTION -->
+    
+    <!-- -------------------------------------------FOOTER SECTION -->
+    <section class="footer">
+        <div class="credit">
+            created by <span>Ramraj S and Naren Adithya</span>
+        </div>
+    </section>
+    <!-- -------------------------------------------FOOTER SECTION -->
+
+<script src="../js/script.js"></script>
+
+</body>
+</html>
diff --git a/Assignments/CB.EN.U4CYS22055/ui/html/blog.html b/Assignments/CB.EN.U4CYS22055/ui/html/blog.html
new file mode 100644
index 00000000..23f1d940
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/html/blog.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"  />
+    <title>Blog</title>
+</head>
+<body>
+
+    <!-------------------------------------------- HEADER SECTION -->
+    <header class="header" >
+        <a href="#" class="logo">
+            <img src="../image/pngegg.webp" alt="logo">
+        </a>
+        <nav class="navbar">
+            <a href="../index.html" class="active">home</a>
+            <a href="../html/about.html">about</a>
+            <a href="../html/menu.html">menu</a>
+            <a href="../html/products.html">products</a>
+            <a href="../html/review.html">review</a>
+            <a href="../html/contact.html">contact</a>
+            <a href="../html/blog.html">blog</a>
+        </nav>
+        <div class="buttons">
+            
+            <button id="cart-btn">
+                <i class="fas fa-shopping-cart"></i>
+            </button>
+            <button id="menu-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+        <div class="search-form">
+            <input type="text" class="search-input" id="search-box" placeholder="Search">
+            <i class="fas fa-search"></i>
+        </div>
+        <div class="cart-items-container">
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (1).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 01</h3>
+                    <div class="price">$15.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (2).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 02</h3>
+                    <div class="price">$16.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (3).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 03</h3>
+                    <div class="price">$13.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (4).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 04</h3>
+                    <div class="price">$12.99 </div>
+                </div>
+            </div>
+            <a href="#" class="btn">check out </a>
+        </div>
+    </header>
+<!-- -------------------------------------------HEADER SECTION -->
+
+<!-- -------------------------------------------BLOG SECTION -->
+<section class="blog" id="blog">
+    <h1 class="heading">our <span>blog</span> </h1>
+    <div class="box-container">
+        <div class="box-full">
+            <div class="image">
+                <img src="../image/delicious-burger-on-wooden-board-2022-03-04-05-58-25-utc.jpg" alt="">
+            </div>
+            <div class="content">
+                <a href="#" class="title">how to make burgers</a>
+                <span>by admin </span>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos esse nesciunt cupiditate expedita.</p>
+                <a href="#" class="btn">read more</a>
+            </div>
+        </div>
+        <div class="box-full">
+            <div class="image">
+                <img src="../image/delicious-tasty-burgers-on-wooden-background-2021-08-26-15-25-13-utc.jpg" alt="">
+            </div>
+            <div class="content">
+                <a href="#" class="title">how to make burgers</a>
+                <span>by admin </span>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos esse nesciunt cupiditate expedita.</p>
+                <a href="#" class="btn">read more</a>
+            </div>
+        </div>
+        <div class="box-full">
+            <div class="image">
+                <img src="../image/handmade-burger-on-dark-background-delicious-blac-2021-10-21-02-27-27-utc.jpg" alt="">
+            </div>
+            <div class="content">
+                <a href="#" class="title">how to make burgers</a>
+                <span>by admin </span>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos esse nesciunt cupiditate expedita.</p>
+                <a href="#" class="btn">read more</a>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- -------------------------------------------BLOG SECTION -->
+
+<!-- -------------------------------------------FOOTER SECTION -->
+    <section class="footer">
+      
+        <div class="credit">
+            created by <span>Ramraj S and Naren Adithya</span>
+        </div>
+    </section>
+    <!-- -------------------------------------------FOOTER SECTION -->
+
+<script src="../js/script.js"></script>
+
+</body>
+</html>
diff --git a/Assignments/CB.EN.U4CYS22055/ui/html/contact.html b/Assignments/CB.EN.U4CYS22055/ui/html/contact.html
new file mode 100644
index 00000000..14e1daa7
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/html/contact.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
+    <title>Contact</title>
+</head>
+<body>
+
+    <!-------------------------------------------- HEADER SECTION -->
+    <header class="header" >
+        <a href="#" class="logo">
+            <img src="../image/pngegg.webp" alt="logo">
+        </a>
+        <nav class="navbar">
+            <a href="../index.html" class="active">home</a>
+            <a href="../html/about.html">about</a>
+            <a href="../html/menu.html">menu</a>
+            <a href="../html/products.html">products</a>
+            <a href="../html/review.html">review</a>
+            <a href="../html/contact.html">contact</a>
+            <a href="../html/blog.html">blog</a>
+        </nav>
+        <div class="buttons">
+            
+            <button id="cart-btn">
+                <i class="fas fa-shopping-cart"></i>
+            </button>
+            <button id="menu-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+        <div class="search-form">
+            <input type="text" class="search-input" id="search-box" placeholder="Search">
+            <i class="fas fa-search"></i>
+        </div>
+        <div class="cart-items-container">
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (1).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 01</h3>
+                    <div class="price">$15.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (2).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 02</h3>
+                    <div class="price">$16.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (3).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 03</h3>
+                    <div class="price">$13.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (4).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 04</h3>
+                    <div class="price">$12.99 </div>
+                </div>
+            </div>
+            <a href="#" class="btn">check out </a>
+        </div>
+    </header>
+<!-- -------------------------------------------HEADER SECTION -->
+
+<!-- -------------------------------------------CONTACT SECTION -->
+<section class="contact" id="contact">
+    <h1 class="heading">contact <span>us</span> </h1>
+    <div class="row">
+        <form>
+            <h3>get in touch</h3>
+            <div class="inputBox">
+                <i class="fas fa-user"></i>
+                <input type="text" placeholder="name">
+            </div>
+            <div class="inputBox">
+                <i class="fas fa-envelope"></i>
+                <input type="email" placeholder="email">
+            </div>
+            <div class="inputBox">
+                <i class="fas fa-phone"></i>
+                <input type="number" placeholder="number">
+            </div>
+            <input type="submit" class="btn" value="contact now">
+        </form>
+    </div>
+</section>
+<!-- -------------------------------------------CONTACT SECTION -->
+
+<!-- -------------------------------------------FOOTER SECTION -->
+    <section class="footer">
+   
+        <div class="credit">
+            created by <span>Ramraj S and Naren Adithya</span>
+        </div>
+    </section>
+    <!-- -------------------------------------------FOOTER SECTION -->
+
+<script src="../js/script.js"></script>
+
+</body>
+</html>
diff --git a/Assignments/CB.EN.U4CYS22055/ui/html/menu.html b/Assignments/CB.EN.U4CYS22055/ui/html/menu.html
new file mode 100644
index 00000000..ece70cf5
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/html/menu.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
+    <title>Our Menu</title>
+</head>
+<body>
+
+    <!-------------------------------------------- HEADER SECTION -->
+    <header class="header" >
+        <a href="#" class="logo">
+            <img src="../image/pngegg.webp" alt="logo">
+        </a>
+        <nav class="navbar">
+            <a href="../index.html" class="active">home</a>
+            <a href="../html/about.html">about</a>
+            <a href="../html/menu.html">menu</a>
+            <a href="../html/products.html">products</a>
+            <a href="../html/review.html">review</a>
+            <a href="../html/contact.html">contact</a>
+            <a href="../html/blog.html">blog</a>
+        </nav>
+        <div class="buttons">
+            <button id="cart-btn">
+                <i class="fas fa-shopping-cart"></i>
+            </button>
+            <button id="menu-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+        <div class="search-form">
+            <input type="text" class="search-input" id="search-box" placeholder="Search">
+            <i class="fas fa-search"></i>
+        </div>
+        <div class="cart-items-container">
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (1).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 01</h3>
+                    <div class="price">$15.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (2).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 02</h3>
+                    <div class="price">$16.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (3).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 03</h3>
+                    <div class="price">$13.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (4).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 04</h3>
+                    <div class="price">$12.99 </div>
+                </div>
+            </div>
+            <a href="#" class="btn">check out </a>
+        </div>
+    </header>
+    <!-- -------------------------------------------HEADER SECTION -->
+
+    <!-- -------------------------------------------MENU SECTION -->
+    <section class="menu" id="menu">
+        <h1 class="heading">our <span>menu</span></h1>
+        <div class="box-container">
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="../image/pngwing.com.png" alt="">
+                    <span class="menu-category">Pizza</span>
+                    <h3>6 Mini Pizzas</h3>
+                    <div class="price">$104.99 <span>$119.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="../image/pngwing.com (2).png" alt="">
+                    <span class="menu-category">Burger</span>
+                    <h3>5 Mini Burgers</h3>
+                    <div class="price">$99.99 <span>$105.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="../image/pngwing.com (1).png" alt="">
+                    <span class="menu-category">Pizza</span>
+                    <h3>2 Mixed Pizzas</h3>
+                    <div class="price">$49.99 <span>$59.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="../image/pngwing.com (3).png" alt="">
+                    <span class="menu-category">Burger</span>
+                    <h3>3 Meatball Burgers</h3>
+                    <div class="price">$79.99 <span>$99.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!---------------------------------------------MENU SECTION -->
+
+    <!---------------------------------------------FOOTER SECTION -->
+    <section class="footer">
+        <div class="credit">
+            created by <span>Ramraj S and Naren Adithya</span>
+        </div>
+    </section>
+    <!---------------------------------------------FOOTER SECTION -->
+
+<script src="../js/script.js"></script>
+</body>
+</html>
diff --git a/Assignments/CB.EN.U4CYS22055/ui/html/products.html b/Assignments/CB.EN.U4CYS22055/ui/html/products.html
new file mode 100644
index 00000000..c83d0313
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/html/products.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
+    <title>Our Products</title>
+</head>
+<body>
+
+    <!-------------------------------------------- HEADER SECTION -->
+    <header class="header" >
+        <a href="#" class="logo">
+            <img src="../image/pngegg.webp" alt="logo">
+        </a>
+        <nav class="navbar">
+            <a href="../index.html" class="active">home</a>
+            <a href="../html/about.html">about</a>
+            <a href="../html/menu.html">menu</a>
+            <a href="../html/products.html">products</a>
+            <a href="../html/review.html">review</a>
+            <a href="../html/contact.html">contact</a>
+            <a href="../html/blog.html">blog</a>
+        </nav>
+        <div class="buttons">
+  
+            <button id="cart-btn">
+                <i class="fas fa-shopping-cart"></i>
+            </button>
+            <button id="menu-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+        <div class="search-form">
+            <input type="text" class="search-input" id="search-box" placeholder="Search">
+            <i class="fas fa-search"></i>
+        </div>
+        <div class="cart-items-container">
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (1).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 01</h3>
+                    <div class="price">$15.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (2).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 02</h3>
+                    <div class="price">$16.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (3).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 03</h3>
+                    <div class="price">$13.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (4).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 04</h3>
+                    <div class="price">$12.99 </div>
+                </div>
+            </div>
+            <a href="#" class="btn">check out </a>
+        </div>
+    </header>
+    <!-- -------------------------------------------HEADER SECTION -->
+  <!-- -------------------------------------------PRODUCTS SECTION -->
+  <section class="products" id="products">
+    <h1 class="heading">our <span>products</span> </h1>
+    <div class="box-container">
+        <div class="box">
+            <div class="box-head">
+                <span class="title">mini burger</span>
+                <a href="#" class="name">Bacon Burger</a>
+            </div>
+            <div class="image">
+                <img src="../image/pngwing.com (6).png" alt="">
+            </div>
+            <div class="box-bottom">
+                <div class="info">
+                    <b class="price">$6.00</b>
+                    <span class="amount">110gr / 300 Cal</span>
+                </div>
+                <div class="product-btn">
+                    <a href="#">
+                        <i class="fas fa-plus"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-head">
+                <span class="title">cheese burger</span>
+                <a href="#" class="name">cheese Burger</a>
+            </div>
+            <div class="image">
+                <img src="../image/pngwing.com (4).png" alt="">
+            </div>
+            <div class="box-bottom">
+                <div class="info">
+                    <b class="price">$12.00</b>
+                    <span class="amount">140gr / 2500 Cal</span>
+                </div>
+                <div class="product-btn">
+                    <a href="#">
+                        <i class="fas fa-plus"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-head">
+                <span class="title">Double burger</span>
+                <a href="#" class="name">Double Burger</a>
+            </div>
+            <div class="image">
+                <img src="../image/pngwing.com (5).png" alt="">
+            </div>
+            <div class="box-bottom">
+                <div class="info">
+                    <b class="price">$24.00</b>
+                    <span class="amount">440gr / 600 Cal</span>
+                </div>
+                <div class="product-btn">
+                    <a href="#">
+                        <i class="fas fa-plus"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- -------------------------------------------PRODUCTS SECTION -->
+
+<!-- -------------------------------------------FOOTER SECTION -->
+    <section class="footer">
+        <div class="credit">
+            created by <span>Ramraj S and Naren Adithya</span> | all rights reserved!
+        </div>
+    </section>
+    <!-- -------------------------------------------FOOTER SECTION -->
+
+<script src="../js/script.js"></script>
+
+</body>
+</html>
diff --git a/Assignments/CB.EN.U4CYS22055/ui/html/review.html b/Assignments/CB.EN.U4CYS22055/ui/html/review.html
new file mode 100644
index 00000000..75e7880a
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/html/review.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
+    <title>Reviews</title>
+</head>
+<body>
+
+    <!-------------------------------------------- HEADER SECTION -->
+    <header class="header" >
+        <a href="#" class="logo">
+            <img src="../image/pngegg.webp" alt="logo">
+        </a>
+        <nav class="navbar">
+            <nav class="navbar">
+            <a href="../index.html" class="active">home</a>
+            <a href="../html/about.html">about</a>
+            <a href="../html/menu.html">menu</a>
+            <a href="../html/products.html">products</a>
+            <a href="../html/review.html">review</a>
+            <a href="../html/contact.html">contact</a>
+            <a href="../html/blog.html">blog</a>
+        </nav>
+        </nav>
+        <div class="buttons">
+            
+            <button id="cart-btn">
+                <i class="fas fa-shopping-cart"></i>
+            </button>
+            <button id="menu-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+        <div class="search-form">
+            <input type="text" class="search-input" id="search-box" placeholder="Search">
+            <i class="fas fa-search"></i>
+        </div>
+        <div class="cart-items-container">
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (1).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 01</h3>
+                    <div class="price">$15.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (2).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 02</h3>
+                    <div class="price">$16.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (3).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 03</h3>
+                    <div class="price">$13.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="../image/pngwing.com (4).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 04</h3>
+                    <div class="price">$12.99 </div>
+                </div>
+            </div>
+            <a href="#" class="btn">check out </a>
+        </div>
+    </header>
+<!-- -------------------------------------------HEADER SECTION -->
+<!-- -------------------------------------------REVIEW SECTION -->
+<section class="review" id="review">
+    <h1 class="heading">customer's <span>review</span> </h1>
+    <div class="box-container">
+        <div class="box">
+            <img src="../image/pngwing.com (8).png" alt="quote">
+            <p> Dicta totam suscipit vero praesentium excepturi facilis, fuga at architecto dolor tempora molestias quam dignissimos sit. Molestiae temporibus ratione quas placeat possimus!</p>
+            <img src="../image/pngwing.com (9).png" alt="customer-avatar" class="user">
+            <h3>Harry Potter</h3>
+            <div class="stars">
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star-half-alt"></i>
+            </div>
+        </div>
+        <div class="box">
+            <img src="../image/pngwing.com (8).png" alt="quote">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga at architecto dolor tempora molestias quam dignissimos sit. Molestiae temporibus ratione quas placeat possimus!</p>
+            <img src="../image/pngwing.com (10).png" alt="customer-avatar" class="user">
+            <h3>Serena Williams</h3>
+            <div class="stars">
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star-half-alt"></i>
+            </div>
+        </div>
+        <div class="box">
+            <img src="../image/pngwing.com (8).png" alt="quote">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta totam suscipit vero praesentium excepturi facilis, fuga at architecto dolor tempora molestias quam dignissimos possimus!</p>
+            <img src="../image/pngwing.com (11).png" alt="customer-avatar" class="user">
+            <h3>Hermione Granger</h3>
+            <div class="stars">
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star-half-alt"></i>
+            </div>
+        </div>
+    </div>
+</section> 
+<!-- -------------------------------------------REVIEW SECTION -->
+
+<!-- -------------------------------------------FOOTER SECTION -->
+    <section class="footer">
+        <div class="credit">
+            created by <span>Ramraj S and Naren Adithya</span>
+        </div>
+    </section>
+    <!-- -------------------------------------------FOOTER SECTION -->
+
+<script src="../js/script.js"></script>
+
+</body>
+</html>
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/delicious-burger-on-wooden-board-2022-03-04-05-58-25-utc.jpg b/Assignments/CB.EN.U4CYS22055/ui/image/delicious-burger-on-wooden-board-2022-03-04-05-58-25-utc.jpg
new file mode 100644
index 00000000..93ce9e7f
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/delicious-burger-on-wooden-board-2022-03-04-05-58-25-utc.jpg differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/delicious-tasty-burgers-on-wooden-background-2021-08-26-15-25-13-utc.jpg b/Assignments/CB.EN.U4CYS22055/ui/image/delicious-tasty-burgers-on-wooden-background-2021-08-26-15-25-13-utc.jpg
new file mode 100644
index 00000000..c5546ddb
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/delicious-tasty-burgers-on-wooden-background-2021-08-26-15-25-13-utc.jpg differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/handmade-burger-on-dark-background-delicious-blac-2021-10-21-02-27-27-utc.jpg b/Assignments/CB.EN.U4CYS22055/ui/image/handmade-burger-on-dark-background-delicious-blac-2021-10-21-02-27-27-utc.jpg
new file mode 100644
index 00000000..f78415b0
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/handmade-burger-on-dark-background-delicious-blac-2021-10-21-02-27-27-utc.jpg differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pizza-with-salami-italian-food-2022-01-10-22-56-05-utc.jpg b/Assignments/CB.EN.U4CYS22055/ui/image/pizza-with-salami-italian-food-2022-01-10-22-56-05-utc.jpg
new file mode 100644
index 00000000..ae71158f
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pizza-with-salami-italian-food-2022-01-10-22-56-05-utc.jpg differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pizza-with-turkey-bacon-orange-and-cashew-nuts-2022-03-29-07-33-54-utc.jpg b/Assignments/CB.EN.U4CYS22055/ui/image/pizza-with-turkey-bacon-orange-and-cashew-nuts-2022-03-29-07-33-54-utc.jpg
new file mode 100644
index 00000000..217b2d93
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pizza-with-turkey-bacon-orange-and-cashew-nuts-2022-03-29-07-33-54-utc.jpg differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngegg.webp b/Assignments/CB.EN.U4CYS22055/ui/image/pngegg.webp
new file mode 100644
index 00000000..0c63eb7f
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngegg.webp differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (1).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (1).png
new file mode 100644
index 00000000..5c426c68
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (1).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (10).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (10).png
new file mode 100644
index 00000000..5390701f
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (10).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (11).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (11).png
new file mode 100644
index 00000000..e01b5339
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (11).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (12).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (12).png
new file mode 100644
index 00000000..48eade5a
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (12).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (13).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (13).png
new file mode 100644
index 00000000..6e33b60f
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (13).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (14).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (14).png
new file mode 100644
index 00000000..0ad4af22
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (14).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (2).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (2).png
new file mode 100644
index 00000000..131c4ad3
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (2).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (3).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (3).png
new file mode 100644
index 00000000..913ad056
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (3).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (4).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (4).png
new file mode 100644
index 00000000..d79b7bc8
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (4).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (5).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (5).png
new file mode 100644
index 00000000..673c0636
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (5).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (6).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (6).png
new file mode 100644
index 00000000..3b9baefc
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (6).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (7).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (7).png
new file mode 100644
index 00000000..3f528772
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (7).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (8).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (8).png
new file mode 100644
index 00000000..2e260a05
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (8).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (9).png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (9).png
new file mode 100644
index 00000000..94cfa8ef
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com (9).png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com.png b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com.png
new file mode 100644
index 00000000..8e9c8a93
Binary files /dev/null and b/Assignments/CB.EN.U4CYS22055/ui/image/pngwing.com.png differ
diff --git a/Assignments/CB.EN.U4CYS22055/ui/index.html b/Assignments/CB.EN.U4CYS22055/ui/index.html
new file mode 100644
index 00000000..6131d45b
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/index.html
@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="./css/style.css">
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
+    <title>Restaurant Website</title>
+</head>
+<body>
+    <!-------------------------------------------- HEADER SECTION -->
+    <header class="header" >
+        <a href="#" class="logo">
+            <img src="./image/pngegg.webp" alt="logo">
+        </a>
+        <nav class="navbar">
+            <a href="./index.html" class="active">home</a>
+            <a href="./html/about.html">about</a>
+            <a href="./html/menu.html">menu</a>
+            <a href="./html/products.html">products</a>
+            <a href="./html/review.html">review</a>
+            <a href="./html/contact.html">contact</a>
+            <a href="./html/blog.html">blog</a>
+        </nav>
+        <div class="buttons">
+            
+            <button id="cart-btn">
+                <i class="fas fa-shopping-cart"></i>
+            </button>
+            <button id="menu-btn">
+                <i class="fas fa-bars"></i>
+            </button>
+        </div>
+
+        <div class="cart-items-container">
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="./image/pngwing.com (1).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 01</h3>
+                    <div class="price">$15.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="./image/pngwing.com (2).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 02</h3>
+                    <div class="price">$16.99 </div>
+                </div>
+            </div>
+            <div class="cart-item">
+                <i class="fas fa-times"></i>
+                <img src="./image/pngwing.com (3).png" alt="menu">
+                <div class="content">
+                    <h3>cart item 03</h3>
+                    <div class="price">$13.99 </div>
+                </div>
+            </div>
+            <a href="#" class="btn">check out </a>
+        </div>
+    </header>
+    <!---------------------------------------------HEADER SECTION -->
+
+    <!---------------------------------------------HOME SECTION -->
+    <section class="home" id="home">
+        <div class="content">
+        <h3>Fast Food Delivery</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt perferendis obcaecati iste voluptatum, quaerat nihil magnam numquam sint? </p>
+        <a href="#" class="btn">order now</a>
+        </div>
+    </section>
+    <!---------------------------------------------HOME SECTION -->
+    
+    <!---------------------------------------------MENU SECTION -->
+    <section class="menu" id="menu">
+        <h1 class="heading">our <span>menu</span></h1>
+        <div class="box-container">
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="./image/pngwing.com.png" alt="">
+                    <span class="menu-category">Pizza</span>
+                    <h3>6 Mini Pizzas</h3>
+                    <div class="price">$104.99 <span>$119.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="./image/pngwing.com (2).png" alt="">
+                    <span class="menu-category">Burger</span>
+                    <h3>5 Mini Burgers</h3>
+                    <div class="price">$99.99 <span>$105.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="./image/pngwing.com (1).png" alt="">
+                    <span class="menu-category">Pizza</span>
+                    <h3>2 Mixed Pizzas</h3>
+                    <div class="price">$49.99 <span>$59.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+            <div class="box">
+
+                <div class="box-head">
+                    <img src="./image/pngwing.com (3).png" alt="">
+                    <span class="menu-category">Burger</span>
+                    <h3>3 Meatball Burgers</h3>
+                    <div class="price">$79.99 <span>$99.99</span></div>
+                </div>
+                <div class="box-bottom">
+                    <a href="#" class="btn">add to cart</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!---------------------------------------------MENU SECTION -->
+
+
+    <!---------------------------------------------PRODUCTS SECTION -->
+    <section class="products" id="products">
+        <h1 class="heading">our <span>products</span> </h1>
+        <div class="box-container">
+            <div class="box">
+                <div class="box-head">
+                    <span class="title">mini burger</span>
+                    <a href="#" class="name">Bacon Burger</a>
+                </div>
+                <div class="image">
+                    <img src="./image/pngwing.com (6).png" alt="">
+                </div>
+                <div class="box-bottom">
+                    <div class="info">
+                        <b class="price">$6.00</b>
+                        <span class="amount">110gr / 300 Cal</span>
+                    </div>
+                    <div class="product-btn">
+                        <a href="#">
+                            <i class="fas fa-plus"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box-head">
+                    <span class="title">cheese burger</span>
+                    <a href="#" class="name">cheese Burger</a>
+                </div>
+                <div class="image">
+                    <img src="./image/pngwing.com (4).png" alt="">
+                </div>
+                <div class="box-bottom">
+                    <div class="info">
+                        <b class="price">$12.00</b>
+                        <span class="amount">140gr / 2500 Cal</span>
+                    </div>
+                    <div class="product-btn">
+                        <a href="#">
+                            <i class="fas fa-plus"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box-head">
+                    <span class="title">Double burger</span>
+                    <a href="#" class="name">Double Burger</a>
+                </div>
+                <div class="image">
+                    <img src="./image/pngwing.com (5).png" alt="">
+                </div>
+                <div class="box-bottom">
+                    <div class="info">
+                        <b class="price">$24.00</b>
+                        <span class="amount">440gr / 600 Cal</span>
+                    </div>
+                    <div class="product-btn">
+                        <a href="#">
+                            <i class="fas fa-plus"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!---------------------------------------------PRODUCTS SECTION -->
+        
+    <!---------------------------------------------ABOUT US SECTION -->
+    <section class="about" id="about">
+        <h1 class="heading">about <span>us</span> </h1>
+
+        <div class="row">
+            <div class="image">
+                <img src="./image/pngwing.com (7).png" alt="">
+            </div>
+            <div class="content">
+                <h3>What is the secret receipe of our burgers</h3>
+                <div class="paragraph">
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia officia id et, corrupti assumenda.</p>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia officia id et, corrupti assumenda.</p>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia officia id et, corrupti assumenda.</p>
+                </div>
+                    <a href="#" class="btn">Learn More</a>
+            </div>
+        </div>
+    </section>
+    <!---------------------------------------------ABOUT US SECTION -->
+    
+    <!---------------------------------------------REVIEW SECTION -->
+    <section class="review" id="review">
+        <h1 class="heading">customer's <span>review</span> </h1>
+        <div class="box-container">
+            <div class="box">
+                <img src="./image/pngwing.com (8).png" alt="quote">
+                <p> Dicta totam suscipit vero praesentium excepturi facilis, fuga at architecto dolor tempora molestias quam dignissimos sit. Molestiae temporibus ratione quas placeat possimus!</p>
+                <img src="./image/pngwing.com (9).png" alt="customer-avatar" class="user">
+                <h3>Harry Potter</h3>
+                <div class="stars">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star-half-alt"></i>
+                </div>
+            </div>
+            <div class="box">
+                <img src="./image/pngwing.com (8).png" alt="quote">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga at architecto dolor tempora molestias quam dignissimos sit. Molestiae temporibus ratione quas placeat possimus!</p>
+                <img src="./image/pngwing.com (10).png" alt="customer-avatar" class="user">
+                <h3>Serena Williams</h3>
+                <div class="stars">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star-half-alt"></i>
+                </div>
+            </div>
+            <div class="box">
+                <img src="./image/pngwing.com (8).png" alt="quote">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta totam suscipit vero praesentium excepturi facilis, fuga at architecto dolor tempora molestias quam dignissimos possimus!</p>
+                <img src="./image/pngwing.com (11).png" alt="customer-avatar" class="user">
+                <h3>Hermione Granger</h3>
+                <div class="stars">
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star"></i>
+                    <i class="fas fa-star-half-alt"></i>
+                </div>
+            </div>
+        </div>
+    </section> 
+    <!---------------------------------------------REVIEW SECTION -->
+    <!---------------------------------------------CONTACT SECTION -->
+    <section class="contact" id="contact">
+        <h1 class="heading">contact <span>us</span> </h1>
+        <div class="row">
+            <form>
+                <h3>get in touch</h3>
+                <div class="inputBox">
+                    <i class="fas fa-user"></i>
+                    <input type="text" placeholder="name">
+                </div>
+                <div class="inputBox">
+                    <i class="fas fa-envelope"></i>
+                    <input type="email" placeholder="email">
+                </div>
+                <div class="inputBox">
+                    <i class="fas fa-phone"></i>
+                    <input type="number" placeholder="number">
+                </div>
+                <input type="submit" class="btn" value="contact now">
+            </form>
+        </div>
+    </section>
+    <!---------------------------------------------CONTACT SECTION -->
+
+    <!---------------------------------------------BLOG SECTION -->
+    <section class="blog" id="blog">
+        <h1 class="heading">our <span>blog</span> </h1>
+        <div class="box-container">
+            <div class="box-full">
+                <div class="image">
+                    <img src="./image/delicious-burger-on-wooden-board-2022-03-04-05-58-25-utc.jpg" alt="">
+                </div>
+                <div class="content">
+                    <a href="#" class="title">how to make burgers</a>
+                    <span>by admin </span>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos esse nesciunt cupiditate expedita.</p>
+                    <a href="#" class="btn">read more</a>
+                </div>
+            </div>
+            <div class="box-full">
+                <div class="image">
+                    <img src="./image/delicious-tasty-burgers-on-wooden-background-2021-08-26-15-25-13-utc.jpg" alt="">
+                </div>
+                <div class="content">
+                    <a href="#" class="title">how to make burgers</a>
+                    <span>by admin </span>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos esse nesciunt cupiditate expedita.</p>
+                    <a href="#" class="btn">read more</a>
+                </div>
+            </div>
+            <div class="box-full">
+                <div class="image">
+                    <img src="./image/handmade-burger-on-dark-background-delicious-blac-2021-10-21-02-27-27-utc.jpg" alt="">
+                </div>
+                <div class="content">
+                    <a href="#" class="title">how to make burgers</a>
+                    <span>by admin </span>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos esse nesciunt cupiditate expedita.</p>
+                    <a href="#" class="btn">read more</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!---------------------------------------------BLOG SECTION -->
+    
+    <!---------------------------------------------FOOTER SECTION -->
+    <section class="footer">
+         
+        
+        <div class="links">
+            <a href="#home">home</a>
+            <a href="#about">about</a>
+            <a href="#menu">menu</a>
+            <a href="#products">products</a>
+            <a href="#review">review</a>
+            <a href="#contact">contact</a>
+            <a href="#blog">blog</a>
+        </div>
+        <div class="credit">
+            created by <span>Ramraj S and R.M. Naren Adithya</span>
+        </div>
+    </section>
+    <!---------------------------------------------FOOTER SECTION -->
+
+<script src="./js/script.js"></script>
+</body>
+</html>
diff --git a/Assignments/CB.EN.U4CYS22055/ui/js/script.js b/Assignments/CB.EN.U4CYS22055/ui/js/script.js
new file mode 100644
index 00000000..b095eef0
--- /dev/null
+++ b/Assignments/CB.EN.U4CYS22055/ui/js/script.js
@@ -0,0 +1,36 @@
+const searchForm = document.querySelector('.search-form');
+const searchBtn = document.querySelector('#search-btn');
+const cartItem = document.querySelector('.cart-items-container')
+const cartBtn = document.querySelector('#cart-btn')
+const navbar = document.querySelector('.navbar')
+const menuBtn = document.querySelector('#menu-btn')
+
+
+
+searchBtn.addEventListener('click', ()=>{
+    searchForm.classList.toggle('active');
+    document.addEventListener('click', (e)=>{
+        if(!e.composedPath().includes(searchBtn) && !e.composedPath().includes(searchForm) ){
+            searchForm.classList.remove('active');
+        }
+    })
+})
+
+cartBtn.addEventListener('click', ()=>{
+    cartItem.classList.toggle('active');
+    document.addEventListener('click', (e)=>{
+        if(!e.composedPath().includes(cartBtn) && !e.composedPath().includes(cartItem) ){
+            cartItem.classList.remove('active');
+        }
+    })
+})
+
+menuBtn.addEventListener('click', ()=>{
+    navbar.classList.toggle('active');
+    document.addEventListener('click', (e)=>{
+        if(!e.composedPath().includes(navbar) && !e.composedPath().includes(menuBtn) ){
+            navbar.classList.remove('active');
+        }
+    })
+})
+