Skip to content

Commit b473de8

Browse files
ma-foyezma-foyez
committed
html first assignment almost completed
0 parents  commit b473de8

15 files changed

+552
-0
lines changed

‎README.md

40 Bytes

html-assignment

‎about.html

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="author" content="M.A Foyez" />
8+
<meta name="keyword" content="shopping, E-commerce, business site" />
9+
<meta
10+
name="description"
11+
content="This is simple shopping site build with html & some basic css"
12+
/>
13+
<title>Shopping || About</title>
14+
<link rel="stylesheet" href="./assets/css/style.css" />
15+
</head>
16+
<body>
17+
<!--start header section-->
18+
<header>
19+
<nav class="nav-section">
20+
<div class="brand-logo">
21+
<a href="index.html">
22+
<img src="./assets/Images/logo.png" alt="Brand Logo" />
23+
</a>
24+
</div>
25+
<div class="header-nav">
26+
<ul>
27+
<li><a href="index.html">Home</a></li>
28+
<li><a href="about.html">About Us</a></li>
29+
<li><a href="contact.html">Contact Us</a></li>
30+
<li><a href="gallery.html">Gallery</a></li>
31+
</ul>
32+
</div>
33+
</nav>
34+
</header>
35+
<!--end header section-->
36+
37+
<!--start about section-->
38+
<section class="about-container">
39+
<h2 class="about-title" align="center">Our Address</h2>
40+
<h3>History</h3>
41+
<p>
42+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
43+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
44+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
45+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
46+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
47+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
48+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
49+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
50+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
51+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
52+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
53+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
54+
</p>
55+
<p>
56+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
57+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
58+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
59+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
60+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
61+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
62+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
63+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
64+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
65+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
66+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
67+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
68+
</p>
69+
<p>
70+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
71+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
72+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
73+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
74+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
75+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
76+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
77+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
78+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
79+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
80+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
81+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
82+
</p>
83+
<p>
84+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
85+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
86+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
87+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
88+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
89+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
90+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
91+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
92+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
93+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
94+
explicabo, voluptatem porro, aut at blanditiis esse quasi harum debitis
95+
asperiores qui? Itaque ipsa eius quae autem iste accusantium aut porro.
96+
</p>
97+
</section>
98+
<!--end about section-->
99+
100+
<!--start footer section-->
101+
<footer class="footer-section">
102+
<h2 class="footer-title">Top Links</h2>
103+
<ol type="1">
104+
<li><a href="index.html">Home</a></li>
105+
<li><a href="about.html">About Us</a></li>
106+
<li><a href="contact.html">Contact Us</a></li>
107+
<li><a href="gallery.html">Gallery</a></li>
108+
</ol>
109+
<p align="center">&copy; Copyright 2018. All Rights Reserved.</p>
110+
</footer>
111+
<!--end footer section-->
112+
</body>
113+
</html>

‎assets/Images/Bronx Colors LipColor - LC314-deshibazaarbd.jpg

41.4 KB
Loading

‎assets/Images/Bronx Colors Magnetic Urban Brushes - UBRSET02-deshibazaarbd.jpg

75.8 KB
Loading

‎assets/Images/Bronx Colors Metallic Cream Eyeshadow - MCE05-deshibazaarbd.jpg

57.4 KB
Loading

‎assets/Images/Bronx Colors Metallic Cream Eyeshadow - MCE16-deshibazaarbd.jpg

54.7 KB
Loading

‎assets/Images/Bronx Colors Studioline HD TV Foundation - HDTV02-deshibazaarbd.jpg

50.9 KB
Loading

‎assets/Images/ecom-bg.jpg

295 KB
Loading

‎assets/Images/logo.png

49 KB
Loading

‎assets/Images/video.png

638 KB
Loading

‎assets/css/style.css

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
body {
2+
background-color: #c7c7c7;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
.nav-section {
7+
display: flex;
8+
justify-content: space-between;
9+
align-items: center;
10+
}
11+
.brand-logo img {
12+
width: 200px;
13+
margin-left: 10px;
14+
}
15+
.header-nav {
16+
float: right;
17+
padding-right: 10px;
18+
}
19+
.header-nav ul {
20+
list-style: none;
21+
display: inline-flex;
22+
}
23+
.header-nav ul li a {
24+
padding: 5px;
25+
font-size: 20px;
26+
}
27+
28+
.product-container,
29+
.gallery-container {
30+
padding: 15px;
31+
}
32+
.img-gallery {
33+
text-align: center;
34+
}
35+
.img-gallery img {
36+
margin: 10px;
37+
}
38+
.product-title,
39+
.address-title,
40+
.about-title {
41+
font-size: 40px;
42+
font-weight: bold;
43+
color: rgb(0, 102, 143);
44+
}
45+
.footer-section {
46+
background-color: black;
47+
color: #ffff;
48+
padding: 10px 25px;
49+
}
50+
51+
.footer-title {
52+
font-size: 32px;
53+
}
54+
.footer-section ol li a {
55+
color: #ffff;
56+
font-size: 20px;
57+
padding: 5px;
58+
text-decoration: none;
59+
}
60+
61+
.contact-from label {
62+
font-size: 20px;
63+
padding-bottom: 10px;
64+
}
65+
.contact-from {
66+
width: 50%;
67+
margin: 20px;
68+
padding: 20px;
69+
}
70+
.contact-from input,
71+
textarea {
72+
width: 100%;
73+
}
74+
.contact-from input {
75+
line-height: 35px;
76+
}
77+
.contact-from .submit-btn {
78+
background-color: rgb(0, 133, 122);
79+
padding: 5px;
80+
font-size: 22px;
81+
color: #ffff;
82+
}
83+
.about-container {
84+
padding: 25px;
85+
}
86+
.about-container p {
87+
text-align: justify;
88+
font-size: 18px;
89+
}

‎assets/video/simple_video.mp4

41 MB
Binary file not shown.

‎contact.html

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="author" content="M.A Foyez" />
8+
<meta name="keyword" content="shopping, E-commerce, business site" />
9+
<meta
10+
name="description"
11+
content="This is simple shopping site build with html & some basic css"
12+
/>
13+
<title>Shopping || Contact</title>
14+
<link rel="stylesheet" href="./assets/css/style.css" />
15+
</head>
16+
<body>
17+
<!--start header section-->
18+
<header>
19+
<nav class="nav-section">
20+
<div class="brand-logo">
21+
<a href="index.html">
22+
<img src="./assets/Images/logo.png" alt="Brand Logo" />
23+
</a>
24+
</div>
25+
<div class="header-nav">
26+
<ul>
27+
<li><a href="index.html">Home</a></li>
28+
<li><a href="about.html">About Us</a></li>
29+
<li><a href="contact.html">Contact Us</a></li>
30+
<li><a href="gallery.html">Gallery</a></li>
31+
</ul>
32+
</div>
33+
</nav>
34+
</header>
35+
<!--end header section-->
36+
37+
<!--start contact form section-->
38+
<section class="contact-from">
39+
<fieldset>
40+
<legend>Contact US</legend>
41+
<form action="">
42+
<label for="name">Your name</label> <br />
43+
<input
44+
type="text"
45+
id="name"
46+
name="name"
47+
placeholder="Please Enter your name"
48+
required
49+
/>
50+
<br /><br />
51+
52+
<label for="email">Your Email</label> <br />
53+
<input
54+
type="email"
55+
id="email"
56+
name="email"
57+
placeholder="Please Enter your Email"
58+
required
59+
/>
60+
<br /><br />
61+
62+
<label for="subject">Subject</label> <br />
63+
<input
64+
type="text"
65+
id="subject"
66+
name="subject"
67+
placeholder="Please Enter your message Subject"
68+
required
69+
/>
70+
<br /><br />
71+
72+
<label for="message">Message</label> <br />
73+
<textarea
74+
id="message"
75+
name="message"
76+
id=""
77+
rows="5"
78+
placeholder="Please Enter your message"
79+
required
80+
></textarea>
81+
<br /><br />
82+
83+
<input class="submit-btn" type="submit" value="Send" />
84+
</form>
85+
</fieldset>
86+
</section>
87+
<!--end contact form section-->
88+
89+
<!--start address section-->
90+
<section align="center">
91+
<h2 class="address-title">Our Address</h2>
92+
<div style="font-size: 24px">
93+
<p>North Chalakshya</p>
94+
<p>Karnaphuli</p>
95+
<p>Chittagong, Bangladesh.</p>
96+
</div>
97+
</section>
98+
<!--end address section-->
99+
<!--start footer section-->
100+
<footer class="footer-section">
101+
<h2 class="footer-title">Top Links</h2>
102+
<ol type="1">
103+
<li><a href="index.html">Home</a></li>
104+
<li><a href="about.html">About Us</a></li>
105+
<li><a href="contact.html">Contact Us</a></li>
106+
<li><a href="gallery.html">Gallery</a></li>
107+
</ol>
108+
<p align="center">&copy; Copyright 2018. All Rights Reserved.</p>
109+
</footer>
110+
<!--end footer section-->
111+
</body>
112+
</html>

0 commit comments

Comments
 (0)