ASSIGNMENT LAB 03

-
ASSIGNMENT LAB 03

For lab 3, we instructed to make a website based-on "Online Shopping". There are many online shopping nowadays in the entire world that we can search. People like to purchase in online shopping nowadays.

Surie's Online Shopping

Below, I included the code used in developed this website. As for my online shopping, I just developed the menu buttons that I liked to insert.

<html>
<head>
    <title>Surie' Online Shopping</title>
<style>
.btn-group button {
    background-color: #bfbfbf; /* Grey background */
    border: 1px solid grey; /* Grey border */
    color: black; /* Black text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: right; /* Float the buttons side by side */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #e6e6e6;
}
</style>
<style>
body {
    font-family: Arial;
}

* {
    box-sizing: border-box;
}

form.example input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
}

form.example button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #1a1a1a;
    color: grey;
    font-size: 17px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
}

form.example:after
</style>
</head>

<body>
    <div class="btn-group">
        <button>Products</button>
        <button>Services</button>
        <button>Sign In</button>
        <button>Register</button>
        <button>Notifications</button>
        <button>Cart</button>
        <button>Languages</button>
    </div>
    
    <align="left">
        <img src="LogoShopping.png" alt="logo" width="150" height="150">
</body>
</html>

Comments

Post a Comment