html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Grocery store </title>
<!--- code for font awesome cdn--->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--- code for font awesome cdn--->
<!--- code for linking css file--->
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<!--- code for linking css file--->
<!--- header section--->
<header class="header">
<a href="#" class="logo"><i class="fa fa-shopping-basket"></i>grocery</a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#features">features</a>
<a href="#products">products</a>
<a href="#cateogries">cateogaries</a>
<a href="#blogs">blogs</a>
<a href="#reviews">review</a>
</nav>
<div class="icons>
<div class="fa fa-bars" id="menu-btn"></div></div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
:root{
--green: green;
--gray: #808080;
--light-color: #666;
--black: black;
--box-shadow: 0 .1rem 1rem rgba(0,0,0.1);
--border: 2rem solid rgba(0,0,0.1);
--outline: .1rem solid rgba(0,0,0.1);
}
*
{
font-family: 'poppins', sans-sarif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
Let shoppingCart = document.querySelector('.shoppingCart');
document.querySelector('#cart-btn').onclick = () =>
{
shopping-Cart.classList.toggle('active');
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run