-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (99 loc) · 4.38 KB
/
index.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
<!--
~ The <!DOCTYPE> Element ~
Tells the Web Browser what version of HTML the document contains.
-->
<!DOCTYPE html>
<!--
~ The <html> Element ~
This is the root element of an HTML document.
-->
<html>
<!--
~ The <head> Element ~
Contains any resources and metadata needed before
loading the <body> e.g.:
- title
- styles
- links to external files
- metatdata
- etc.
-->
<head>
<title>My Website</title>
<!-- My CSS Stylesheet -->
<link rel="stylesheet" href="./assets/style.min.css">
</head>
<!--
~ The <body> Element ~
Contains the content of the document. This is rendered
by the Web Browser and displayed in the Window
-->
<body>
<!-- Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<ul class="nav-menu">
<li><a href="./index.html">Home</a></li>
<li><a href="./portfolio.html">Portfolio</a></li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./cv.html">About</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
<h1>My Favourite Cosmetics Websites</h1>
<p>When writing HTML use the <img/> tag to display images!</p>
<p>
Rituals is the first brand in the world to combine Home & Body Cosmetics. Each product, over 550 in total, is inspired by an ancient Eastern tradition.
</p>
<h2>Special feature introduction</h2>
<h3>Product details page</h3>
<p>
This function is in the product detail page. When the user browses the page, the product image will move down with the user's browsing, and interact with the product raw material image at the location of the product ingredients. At the same time, at the bottom of the details page, the web page displays all products of the same series, and you can enter the respective details page by clicking on the product.
</p>
<h3>Initial page</h3>
<p>
This is the intial page of the website.<br/>
</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Contact
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Contact Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="https://formspree.io/f/mvoveepo" method="POST">
<div class="modal-body">
<p>First Name:</p>
<input type="text" name="firstName" />
<p>Last Name:</p>
<input type="text" name="lastName" />
<p>Email:</p>
<input type="email" name="email" placeholder="jo.bloggs@example.com"/>
<p>Message:</p>
<textarea name="message" rows="10" cols="30"></textarea>
<p>Query Type:</p>
<input type="radio" name="queryType" value="general" /> General
<input type="radio" name="queryType" value="technical" /> Technical
<input type="radio" name="queryType" value="personal" /> Personal
<p>Interests:</p>
<input type="checkbox" name="interests" value="photography" />Photography<br/>
<input type="checkbox" name="interests" value="graphics" />Graphics<br/>
<input type="checkbox" name="interests" value="webdesign" />Web Design<br/>
<br/><br/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>