Scribd Logo
Upload

Welcome to Scribd!

  • 10 views

    singleProductView HTML

    Uploaded by

    raviduramesh11

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    singleProductView HTML

    Uploaded by

    raviduramesh11
    10 views3 pages

    Original Title

    singleProductView.html

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    10 views3 pages

    singleProductView HTML

    Uploaded by

    raviduramesh11

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 3

    <!

    DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Product</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <link rel="stylesheet" href="style.css"/>
    <link rel="icon" href="assets/logo.png" />

    </head>

    <body>

    <!-- Navbar -->


    <nav class="navbar navbar-expand-lg">
    <div class="container">
    <a class="navbar-brand" href="#">

    <img src="assets/logo.png" alt="logo" height="40"/>


    Mobile Zone
    </a>
    <button class="navbar-toggler color1" 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 ms-auto mb-2 mb-lg-0">
    <li class="nav-item">
    <a class="nav-link text-secondary" aria-current="page"
    href="#">Single Product</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="cart.html">Cart</a>
    </li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button"
    data-bs-toggle="dropdown"
    aria-expanded="false">
    User
    </a>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Profile</a></li>
    <li><a class="dropdown-item" href="#">Orders</a></li>
    <li>
    <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">Something else
    here</a></li>
    </ul>
    </li>
    </ul>
    <form class="d-flex" role="search">
    <input class="form-control me-2" type="search"
    placeholder="Search" aria-label="Search">
    <button class="btn color1" type="submit">Search</button>
    </form>
    </div>
    </div>
    </nav>
    <!-- Navbar -->
    <!-- body Section -->

    <div class="container mt-5">


    <div class="row">

    <div class="col-md-6">
    <img src="assets/img/v3.jpg" alt="Single Product" class="img-fluid
    rounded shadow" />
    </div>
    <div class="col-md-6">
    <h1 class="display-5">HONER Magic V3 5G</h1>
    <p class="lead">The Slimmer The Stronger</p>
    <p class="text-muted">category : Mobile Phone</p>
    <p class="color2">LKR. 430,000.00</p>

    <div class="d-flex align-items-center my-4">

    <div class="input-group me-3" style="width: 120px;">


    <button class="btn btn-outline-secondary">-</button>
    <input type="text" class="form-control text-center" value="1"
    disabled>
    <button class="btn btn-outline-secondary">+</button>
    </div>

    <a href="#" class="btn color1">Add to Cart</a>


    </div>
    <div>
    <h5>Product Details</h5>
    <ul>
    <li>Inner screen: 7.92 inches | Outer screen: 6.43 inches</li>
    <li>Snapdragon 8 Gen 3 chipset</li>
    <li>5150 mAh battery</li>
    <li>1Tb Storage, 16Gb RAM</li>
    </ul>
    </div>
    </div>
    </div>

    <div class="row mt-5 color3 p-5 rounded similar-products">


    <h3 class="text-white mb-4">Similar Product</h3>
    <div class="col-md-3 mb-4">
    <div class="card h-100">
    <img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
    <div class="card-body"></div>
    <h5>Iphone 16 Pro Max</h5>
    <p>LKR. 650,000.00</p>
    <a href="#" class="btn color1 w-100">Buy Now</a>
    </div>
    </div>

    <div class="col-md-3 mb-4">


    <div class="card h-100">
    <img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
    <div class="card-body"></div>
    <h5>samsung Z Foold 2</h5>
    <p>LKR. 550,000.00</p>
    <a href="#" class="btn color1 w-100">Buy Now</a>
    </div>
    </div>
    <div class="col-md-3 mb-4">
    <div class="card h-100">
    <img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
    <div class="card-body"></div>
    <h5>Xiomi 14 Ultra</h5>
    <p>LKR. 350,000.00</p>
    <a href="#" class="btn color1 w-100">Buy Now</a>
    </div>
    </div>
    <div class="col-md-3 mb-4">
    <div class="card h-100">
    <img src="assets/img/1.jpg" class="card-img-top" alt="Similar Product">
    <div class="card-body"></div>
    <h5>Pixel 9 Pro </h5>
    <p>LKR. 470,000.00</p>
    <a href="#" class="btn color1 w-100">Buy Now</a>
    </div>
    </div>
    </div>

    </div>
    <!-- body Section -->

    <footer class="footer text-center py-2 mt-5">


    <p class="text-white">&copy; 2024 Mobile Zone. All Right Reserved</p>
    </footer>

    <script src="bootstrap.bundle.js"></script>
    </body>

    </html>

    You might also like