-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcontact.html
120 lines (101 loc) · 3.38 KB
/
contact.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link type="text/css" href="browserreset.css" rel="stylesheet"/>
<link type="text/css" href="styles.css" rel="stylesheet"/>
<script src="https://kit.fontawesome.com/2d2cadd290.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header -->
<!-- Top Navigation Bar -->
<div id="banner">
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li><a href="my-aphrodite.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="brands.html">brands</a></li>
<li><a href="newsletter.html">newsletter</a></li>
<li class="dropdown">
<a href="url" class= "dropbtn">shop</a>
<ul class="dropdown-content">
<li><a href="shop-clothing.html">clothing</a></li>
<li><a href="shop-clothing.html">make-up</a></li>
<li><a href="shop-shoes.html">shoes</a></li>
<li><a href="shop-accesories.html">accesories</a></li>
</ul>
</li>
<li><a href="contact.html">contact</a></li>
<li><i id="modal-btn" class="fas fa-shopping-cart"></i></li>
<li><i class="fas fa-search"></i></li>
</ul>
</nav>
<div id='body_div'>
</div>
<!-- Font of The Title & Top Navigation Bar-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@1,300&family=Parisienne&family=Poiret+One&display=swap" rel="stylesheet">
<!-- Banner Section -->
<div class='banner'>
<div class='banner-background'></div>
<div class='banner-content'>
<h1>My Aphrodite</h1>
</div>
</div>
</head>
<h2>For women who honor their inner goddess</h2>
<!-- ABOUT -->
<p class=paragraph-about>We are a company looking to empower women. We want to inspire them to express their
divine feminity by providing products of the best quality that they can enjoy & have fun with.</p>
<p class=paragraph-about>We hope you feel inspired to find, explore & share your inner goddess journey with us.</p>
<footer>
<!-- FOOTER ICONS -->
<div style="font-size: 30px">
<i class="fab fa-instagram-square"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-twitter-square"></i>
</div>
<!-- FOOTER LINKS -->
<nav id='nav_bar2'>
<ul class='nav_links2'>
<li><a href="url">terms</a></li>
<li><a href="url">privacy</a></li>
<li><a href="url">sitemap</a></li>
<li><a href="url">accessibility</a></li>
<li><a href="url">© 2021 my aphrodite</a></li>
</ul>
</nav>
</footer>
<!-- MODAL FORM -->
<div class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<p class="paragraph">Oh, hello. Please sign in to access your cart.</p>
<form>
<div class="form-control">
<label for="email">Email</label>
<input name="email" type="text">
</div>
<div class="form-control">
<label for="password">Password</label>
<input name="password" type="password">
</div>
<div>
<button class="button">sign in</button>
</div>
<div>
<button class="button">create an account</button>
</div>
</form>
</div>
</div>
<script src="javascript.js"></script>
</body>
</html>
<!--
1. Add a modal in html and css
2. hide the modal with css
3. use javascript to show the modal when you click the icon
4. use javascript to close the modal when you click close
-->