Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ecommerce project #17

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
link to the website on Netllify https://lucky-bombolone-3e6315.netlify.app/

# isa7-css-ecommerce-project
## CSS Assignment - 10 points
- Instructions (you can design an ecommerce website the you like but make sure it has the following)
Expand Down
28 changes: 28 additions & 0 deletions contact.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/products/product-style.css">
</head>
<body>
<main class="contact__form">
<h2 class="contact__form-hd">Sign Up</h2>

<form id="contact__form">
<label for="name">Name:</label><br>
<input type="text" id="name" name="surname" value="name" required><br>

<label for="email">Email:</label><br>
<input required type="email" id="email" name="email" value="email"><br>

<label for="text">Write here</label><br>
<textarea name="text" id="textarea" cols="40" rows="15" required></textarea>
<br>
<button type="submit">Send</button>
</form>
</main>
</body>
</html>
12 changes: 12 additions & 0 deletions iframe.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img width="100%" height="100%" src="/pictures/amy-shamblen-qdPnQuGeuwU-unsplash.jpg" alt="">
</body>
</html>
124 changes: 124 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>❤️Minimalist Jewellery</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<header id="theTop">
<marquee behavior="" direction="">Up To 30% off Specisall V-Day Offer!! </marquee>
<div class="header__links">
<div class="header__logo logo">Lovely Minimal</div>
<div class="header__btns">
<a href="/products/signIn.html" target="main-frame"><button onClick="document.getElementById('main__iframe').scrollIntoView();" type="button">Sign In</button></a>

<a class="header__signup-link link" href="/products/signUp.html" target="main-frame"><button type="button" onClick="document.getElementById('main__iframe').scrollIntoView();">Sign up</button></a>
</div>
</div>

<div class="header__cart-user">

<a class="link" href="/products/cart.html" target="main-frame"><button
onClick="document.getElementById('main__iframe').scrollIntoView();">Cart</button> </a>

<a class="link" href="/products/user-acount.html" target="main-frame"><button onClick="document.getElementById('main__iframe').scrollIntoView();">user</button></a>

<!--<button class="header__search-btn">Search</button>
<label for="searchbar"
><input class="header__search" placeholder="Search" name="searchbar" type="search"/>
</label>-->

</div>

</header>

<main>
<section class="main__top">

<div class="main__images">
<div class="main__top-img img1"></div>

<div class="main__top-img img2">

<h1 class="main__msg h1"> Valentine's day offer</h1>
<p class="main__msg p">Only High quality Jewellery</p></div>
<div class="main__top-img img3"></div>
</div>
</section>
<section class="main__products">
<h1 class="main__products-header">Products</h1>

<section class="products">
<a href="products/ring.html" target="main-frame" onclick=""><img class="product ring"width="300px" height="250px" src="/pictures/ring2.jpg" alt="diamond ring">Diamond Ring</a>


<a href="products/earings.html" target="main-frame"><img class="product earings" width="300px" height="250px" src="/pictures/earings.jpg" alt="diamond earings">Diamond Earings</a>

<a href="products/chain.html" target="main-frame"><img class="product chain" width="300px" height="250px" src="/pictures/chain.jpg" alt="gold chain">18 Karat gold chain</a>

<a href="products/jwelerySet.html" target="main-frame"><img class="product jl-set" width="300px" height="250px" src="/pictures/set.jpg" alt="jewlery set">
Minimalist gold set</a>

<!--<div class="aside__btns">
<span><button class="chat__btn">Chat with us</button>
</span>
<span><button class="fdback__btn">Give us a feedback</button>
</span>
</div>-->
Comment on lines +77 to +83
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean up unused code

</section>
<section class="main__iframe">
<iframe scrolling="no" id="main__iframe" src="iframe.html" frameborder="0" name="main-frame"></iframe>
</section>

</main>
<div class="arrow">
<a href="#theTop" id="top"><i class="fa-solid fa-arrow-up"></i></a></div>
<footer>
<div class="footer-menue">
<ul class="footer-list">
<li class="footer-list-item"><a href="/products/user-acount.html" target="main-frame">Account</a></li>
<li class="footer-list-item"><a href="/products/cart.html" target="main-frame">Cart</a></li>
<li class="footer-list-item"><a href="/products/signIn.html" target="main-frame">Sign in</a></li>
<li class="footer-list-item"><a href="/products/signUp.html" target="main-frame">Sign up</a></li>
<li class="footer-list-item"><a href="/contact.html" target="main-frame">Contact</a></li>
</ul>
Comment on lines +94 to +100
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Give bottom margin to cart and user, especially for mobile.

</div>
<div class="footer-address-info">

<address><i class="fa-solid fa-location-dot"></i> Sundsvall,Sweden</address>
<br>
<tel><i class="fa-solid fa-phone"></i>+4054644994</tel>
<email><i class="fa-solid fa-envelope"></i> [email protected]</email>
</div>
<div class="footer-about">
<h4>about us</h4>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tenetur molestias saepe, nulla </p>
<br>
<div class="footer-soc-icons">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-twitter"></i>
</div>
</div>

</footer>
</body>
</html>
Binary file added pictures/amy-shamblen-qdPnQuGeuwU-unsplash.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pictures/chain.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pictures/earings.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pictures/model.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pictures/ring.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pictures/ring2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pictures/set.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions products/cart.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🛒Shopping Cart</title>
<link rel="stylesheet" href="/products/product-style.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="cart__container">
<h2 class="cart__hd">shopping cart</h2>

<table class="cart__table">
<tr>
<th>product name</th>
<th>amount</th>
<th>price</th>
</tr>
<tr>
<td>Diamond ring</td>
<td>1</td>
<td>$1349</td>
</tr>
<tr>
<td>Gift package</td>
<td>1</td>
<td>$5</td>
</tr>
<tr>
<td colspan="2" class="tr__border">Total</td>
<td>$1354</td>
</tr>
</table>

<button class="checkout__btn">Check Out</button>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions products/chain.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diamond ring</title>
<link rel="stylesheet" href="/products/product-style.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<main>
<div class="flex__container">
<div class="ring__img p__right">
<img class="p__img" src="/pictures/chain.jpg" alt="18 karat gold chain">
</div>
<div class="p__left">
<span class="ring__name p__name"> <h1>18 karat gold chain</h1></span>
<span class="ring__price p__price"><h2><del>$2549</del> <br> Now $2349</h2></span>
<input class="p__amnt" type="number" value="1" >
<button type="button" class="buy__btn">Add to cart</button>

</div>
</div>
<div class="p__dsc">
<h1 class="p__dsc-h">How to take care of your Jewellery</h1>
<p class="p__dsc-p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aperiam, tempore nulla facere, consequuntur quia quas qui modi aliquid beatae magnam fuga cupiditate similique. Expedita, cumque. Corporis</p>

</div>

</main>
</body>

</html>
46 changes: 46 additions & 0 deletions products/earings.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diamond ring</title>
<link rel="stylesheet" href="/products/product-style.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<main>
<div class="flex__container">
<div class="ring__img p__right">
<img class="p__img" src="/pictures/earings.jpg" alt="Diamon earings">
</div>
<div class="p__left">
<span class="ring__name p__name"> <h1> Blue Diamond earings</h1></span>
<span class="ring__price p__price"><h2><del>$2049</del> <br> Now $1849</h2></span>
<input class="p__amnt" type="number" value="1" >
<button type="button" class="buy__btn">Add to cart</button>

</div>
</div>
<div class="p__dsc">
<h1 class="p__dsc-h">How to take care of your Jewellery</h1>
<p class="p__dsc-p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aperiam, tempore nulla facere, consequuntur quia quas qui modi aliquid beatae magnam fuga cupiditate similique. Expedita, cumque. Corporis</p>

</div>

</main>
</body>

</html>
45 changes: 45 additions & 0 deletions products/jwelerySet.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/products/product-style.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<main>
<div class="flex__container">
<div class="p__right">
<img class="p__img" src="/pictures/set.jpg" alt="minimalist jewellery set">
</div>
<div class="p__left">
<span class="p__name"> <h1>minimalist jewellery set</h1></span>
<span class="ring__price p__price"><h2><del>$2049</del> <br> Now $1849</h2></span>
<input class="p__amnt" type="number" value="1" >
<button type="button" class="buy__btn">Add to cart</button>

</div>
</div>
<div class="p__dsc">
<h1 class="p__dsc-h">How to take care of your Jewellery</h1>
<p class="p__dsc-p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aperiam, tempore nulla facere, consequuntur quia quas qui modi aliquid beatae magnam fuga cupiditate similique. Expedita, cumque. Corporis</p>

</div>

</main>
</body>

</html>
Loading