-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (120 loc) · 5.19 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Landing Page</title>
</head>
<body>
<div class="container">
<header>
<div>
<div class="logo">
Woodchip Logs
</div>
<nav>
<ul class="links">
<li><a href="#product-section">Product</a></li>
<li><a href="#quote-section">Quote</a></li>
<li><a href="#action-section">Subscribe</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="hero-section">
<div class="hero-container">
<div class="hero-title">
<div class="hero-title-title">Awesome suppliers of sustainable woods</div>
<div class="hero-title-subtitle">Sourced from inhouse sustainable woodlots, with extreme care of quality and
cut. Finest grade timber for your finest grade builds.</div>
<div class="hero-title-btn">
<button class="hero-order-btn"> Order Now </button>
</div>
</div>
<div class="hero-image">
<img src="images/Sawmill.webp" alt="Woodchip Sawmill">
</div>
</div>
</section>
<section id="product-section">
<div class="product-container">
<div class="product-title">
Our Product Catalogue
</div>
<div class="products">
<div class="product-card" id="logs_0">
<div class="product-image"><img src="images/logs/Oak_Log.webp" alt="Oak Logs"></div>
<div class="product-info">Oak Logs</div>
</div>
<div class="product-card" id="logs_1">
<div class="product-image"><img src="images/logs/Spruce_Log.webp" alt="Spruce Logs"></div>
<div class="product-info">Spruce Logs</div>
</div>
<div class="product-card" id="logs_2">
<div class="product-image"><img src="images/logs/Birch_Log.webp" alt="Birch logs"></div>
<div class="product-info">Birch logs</div>
</div>
<div class="product-card" id="logs_3">
<div class="product-image"><img src="images/logs/Jungle_Log.webp" alt="Jungle Logs"></div>
<div class="product-info">Jungle Logs</div>
</div>
<div class="product-card" id="logs_4">
<div class="product-image"><img src="images/logs/Acacia_Log.webp" alt="Acacia Logs"></div>
<div class="product-info">Acacia Logs</div>
</div>
<div class="product-card" id="logs_5">
<div class="product-image"><img src="images/logs/Dark_Oak_Log.webp" alt="Dark Oak Logs"></div>
<div class="product-info">Dark Oak Logs</div>
</div>
<div class="product-card" id="logs_6">
<div class="product-image"><img src="images/logs/Crimson_Stem.webp" alt="Crimson Stem"></div>
<div class="product-info">Crimson Stem</div>
</div>
<div class="product-card" id="logs_7">
<div class="product-image"><img src="images/logs/Warped_Stem.webp" alt="Warped Stem"></div>
<div class="product-info">Warped Stem</div>
</div>
<div class="product-card" id="logs_8">
<div class="product-image"><img src="images/logs/Mangrove_Log.webp" alt="Mangrove Logs"></div>
<div class="product-info">Mangrove Logs</div>
</div>
<div class="product-card" id="logs_9">
<div class="product-image"><img src="images/logs/Block_of_Bamboo.webp" alt="Blocks of Bamboo"></div>
<div class="product-info">Blocks of Bamboo</div>
</div>
<div class="product-card" id="logs_10">
<div class="product-image"><img src="images/logs/Cherry_Log.webp" alt="Chery Logs"></div>
<div class="product-info">Chery Logs</div>
</div>
</div>
</div>
</section>
<section id="quote-section">
<div class="quote">Good timber does not grow with ease.<br>The stronger the wind, the stronger the trees.</div>
<div class="quote-attrib"> - J. Willard Marriott</div>
</section>
<section id="action-section">
<div class="action-card">
<div class="action-left">
<div class="action-title">Subscibe and Forget</div>
<div class="action-subtitle">Sign up for monthly delivery, save upto 10% from third delivery.</div>
</div>
<div class="action-right">
<button class="action-button">Subscribe</button>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-text">Copyright © <a class="footer-link" href="https://aarkimos.github.io">Aachman Mittal</a>
2023</div>
</footer>
</div>
</body>
</html>