2023-12-01 18:57:08 +04:00
< html lang = "ru" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Товар - Маркетплейс< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< script type = "module" src = "./node_modules/bootstrap/dist/js/bootstrap.min.js" > < / script >
< link href = "./node_modules/bootstrap/dist/css/bootstrap.min.css" rel = "stylesheet" / >
< link href = "./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel = "stylesheet" / >
2023-12-01 18:59:00 +04:00
< link rel = "stylesheet" href = "css/style.css" >
<!-- - https://stackoverflow.com/questions/9456289/how - to - make - a - div - visible - and - invisible - with - javascript - -->
2023-12-01 18:57:08 +04:00
< / head >
< body >
< header class = "border-bottom ps-5 pe-5 sticky-top" style = "background-color: #6376D7;" >
< nav class = "navbar navbar-expand-lg" >
< div class = "container-fluid" >
< button class = "btn btn-main d-block d-sm-block d-md-none"
type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
< / button >
< a class = "navbar-brand fs-3" href = "/index.html" style = "color: #ffffff;" > Маркетплейс< / a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarSupportedContent" >
< ul class = "navbar-nav me-auto mb-2 mb-lg-0" >
< li class = "nav-item" >
< a href = "/catalog.html" type = "button" class = "btn btn-main fs-5" > Каталог< / a >
< / li >
< / ul >
< form class = "d-flex form-horizontal" >
< input class = "form-control me-2" type = "search" placeholder = "Поиск..." aria-label = "Search" style = "width: 40vw;" >
< button class = "btn btn-main me-2 fs-5" type = "submit" > Поиск< / button >
< / form >
< a href = "/login.html" class = "nav-link link-light" >
< span class = "fs-5" style = "color: #ffffff;" > Войти< / span >
< / a >
< / div >
< / div >
< / nav >
< / header >
< main class = "container-fluid d-flex justify-content-center mt-5 mb-5" >
< div class = "offcanvas offcanvas-start" data-bs-backdrop = "static" tabindex = "-1" id = "staticBackdrop" aria-labelledby = "staticBackdropLabel"
style="max-width: 65%; background: #D1D9FF ">
< div class = "offcanvas-header" >
< button type = "button" class = "btn-close" data-bs-dismiss = "offcanvas" aria-label = "Закрыть" > < / button >
< / div >
< div class = "offcanvas-body me-3 d-flex flex-column" >
< button type = "button" class = "btn btn-main mt-3 me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Товар< / button >
< button type = "button" class = "btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Характеристики< / button >
< button type = "button" class = "btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Магазины< / button >
< button type = "button" class = "btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Отзывы< / button >
< button type = "button" class = "btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Вопросы< / button >
< / div >
< / div >
< div class = "product-menu box me-3 d-flex flex-column" >
< button type = "button" class = "pr-menu-btn btn btn-main mt-3 me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Товар< / button >
< button type = "button" class = "pr-menu-btn btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Характеристики< / button >
< button type = "button" class = "pr-menu-btn btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Магазины< / button >
< button type = "button" class = "pr-menu-btn btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Отзывы< / button >
< button type = "button" class = "pr-menu-btn btn btn-main me-3 ms-3 mb-3" style = "font-size: 20; height: 60px" > Вопросы< / button >
< / div >
< div id = "product-box" class = "box d-flex flex-column flex-wrap" >
< div id = "product-name" class = "ms-4 mt-4" >
< p style = "font-size: 28px;" > Видеокарта ASUS NVIDIA DUAL-RTX4070-O12G< / p >
< / div >
< div id = "mid-product-box" class = "d-flex flex-wrap" >
< div class = "d-flex ms-4 mt-4 me-3" >
< div class = "d-sm-flex d-md-flex d-flex flex-column me-3" >
< img src = "/content/product/600012638453b0.jpg" class = "picmin box mb-3" > < / img >
< img src = "/content/product/600012638453b1.jpg" class = "picmin box mb-3" > < / img >
< img src = "/content/product/600012638453b2.jpg" class = "picmin box mb-3" > < / img >
< img src = "/content/product/600012638453b3.jpg" class = "picmin box mb-3" > < / img >
< / div >
< div id = "pictures-preview" >
< img src = "/content/product/600012638453b0.jpg" class = "picture-preview box" > < / img >
< / div >
< / div >
< div id = "order-box" class = "box ms-auto me-auto mt-4 d-flex flex-column" >
< div class = "mt-3" >
< p class = "text-center" > Завтра или позже < / p >
< p class = "mt-3 ms-5 text-left fs-3" > 76 164 ₽ < / p >
< / div >
< div class = "mt-3 ms-5 me-5" >
< p class = "text-left fs-5 mb-0" > Доставка — 0 ₽< / p >
< p class = "fs-6" > c 16 ноября < / p >
< / div >
< div class = "mt-0 ms-5 me-5" >
< p class = "text-left fs-5 mb-0" > Самовывоз — 0 ₽< / p >
< p class = "fs-6" > c 15 ноября < / p >
< / div >
< button type = "button" class = "btn btn-main ms-5 me-5 mt-auto mb-3" style = "font-size: 20; height: 60px" > Купить< / button >
< p class = "mb-3 text-center" > В < a href = "#" > в 3 магазинах< / a > < / p >
< / div >
< / div >
< div id = "product-box-description" style = "min-height: 400px;" >
< p style = "font-size: 28px;" class = "ms-5 mt-3" > Краткое описание товара:< / p >
< p class = "ms-5 me-5" > Видеокарта ASUS Dual GeForce RTX 4070 OC Edition 12GB GDDR6X – с < / p >
< / div >
< / div >
< / main >
< footer class = "container-fluid py-5" style = "background-color: #6376D7;" >
< div class = "row" >
< div class = "col-2 offset-1" >
< ul class = "nav flex-column" >
< li class = "nav-item mb-2" > < a href = "#" class = "nav-link p-0 link-light " > Контакты< / a > < / li >
< li class = "nav-item mb-2" > < a href = "./termsofuse.html" class = "nav-link p-0 link-light" > Пользовательское соглашение< / a > < / li >
< li class = "nav-item mb-2" > < a href = "#" class = "nav-link p-0 link-light" > ЧаВо< / a > < / li >
< li class = "nav-item mb-2" > < a href = "#" class = "nav-link p-0 link-light" > О < / a > < / li >
< / ul >
< / div >
< div class = "col-6 offset-3" style = "text-align: center; color: #ffffff;" >
< p > © Маркетплейс,< br / > 2023 < br / > В с е < / p >
< / div >
< / div >
< / footer >
< / body >
< / html >
