Skip to content

Commit ffdd762

Browse files
Bhaskarsahu23Bhaskarsahu23
committed
initial commin
0 parents  commit ffdd762

22 files changed

+990
-0
lines changed

‎images/9.png

1.17 MB
Loading

‎images/Group 100.png

503 Bytes
Loading

‎images/Group 101.png

467 Bytes
Loading

‎images/Group 102.png

555 Bytes
Loading

‎images/Group 103.png

558 Bytes
Loading

‎images/Group 104.png

471 Bytes
Loading

‎images/Group 97.png

654 Bytes
Loading

‎images/Group 98.png

620 Bytes
Loading

‎images/Group 99.png

477 Bytes
Loading

‎images/IMAGE HERE (2).png

511 Bytes
Loading

‎images/IMAGE HERE.png

441 KB
Loading

‎images/Logo.png

965 Bytes
Loading

‎images/Rectangle Copy.png

155 KB
Loading

‎images/Rectangle.png

115 KB
Loading

‎images/Rectangle_12.png

107 Bytes
Loading

‎images/Rectangle_38-2 (1).png

272 KB
Loading

‎index.html

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
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+
<title>Developer Landing Page</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<!-- Header Starts -->
12+
<header>
13+
<!-- Navigation Bar Starts -->
14+
<nav>
15+
<!-- Navigation items Starts -->
16+
<a class="nav-item">Home</a>
17+
<a class="nav-item">APIs</a>
18+
<a class="nav-item">Blogs</a>
19+
<a class="nav-item">Forums</a>
20+
<a class="nav-item">LogIn</a>
21+
<a class="nav-item nav-item-active">Sign Up</a>
22+
<svg
23+
class="nav-item nav-item-active-1"
24+
width="13"
25+
height="13"
26+
viewBox="0 0 13 13"
27+
fill="none"
28+
xmlns="http://www.w3.org/2000/svg"
29+
>
30+
<path
31+
fill-rule="evenodd"
32+
clip-rule="evenodd"
33+
d="M8.85903 8.24401L11.816 11.321L11.815 11.322C11.991 11.4877 12.0614 11.7369 11.9982 11.9703C11.9349 12.2036 11.7483 12.3831 11.5127 12.4372C11.2771 12.4914 11.0308 12.4113 10.872 12.229L7.89103 9.12901C7.04998 9.72236 6.04531 10.0397 5.01603 10.037C2.66419 10.0372 0.627975 8.40344 0.118589 6.10743C-0.390797 3.81142 0.763438 1.46979 2.89472 0.475412C5.02599 -0.518963 7.56198 0.100953 8.99418 1.96641C10.4264 3.83187 10.3702 6.44192 8.85903 8.24401ZM8.44412 3.59725C7.86941 2.21135 6.51636 1.3082 5.01603 1.30901C2.9693 1.31231 1.31123 2.97128 1.30903 5.01801C1.30903 6.51834 2.21291 7.8709 3.59912 8.44487C4.98532 9.01883 6.58078 8.70114 7.64139 7.63996C8.702 6.57878 9.01883 4.98314 8.44412 3.59725Z"
34+
fill="white"
35+
/>
36+
</svg>
37+
</nav>
38+
39+
<!-- LOGO -->
40+
<div>
41+
<img class="logo" src="./images/Logo.png" alt="logo" />
42+
</div>
43+
44+
<div class="header-container">
45+
<!-- Text -->
46+
<div class="header-text">
47+
<img src="./images/Rectangle_12.png" alt="rectacngle" />
48+
<h2>
49+
Lorem ipsum dolor sit amet, <br />consectetur adipiscing
50+
elit.
51+
</h2>
52+
<p>
53+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
54+
</p>
55+
</div>
56+
57+
<!-- Image -->
58+
<div>
59+
<img
60+
class="header-image"
61+
src="./images/IMAGE HERE.png"
62+
alt="image"
63+
/>
64+
</div>
65+
</div>
66+
</header>
67+
<!-- Companies -->
68+
<div class="companies">
69+
<a href="#" class="company-items">Company One</a>
70+
<a href="#" class="company-items">Company Two</a>
71+
<a href="#" class="company-items">Company Three</a>
72+
</div>
73+
74+
<!-- API Section -->
75+
<div class="api">
76+
<h1 class="api-heading">
77+
APIs <br />
78+
by category
79+
</h1>
80+
<!-- Cards -->
81+
<div class="cards">
82+
<!-- Card 01 -->
83+
<div class="card card-active">
84+
<img
85+
class="card-logo"
86+
src="./images/Group 97.png"
87+
alt="logo"
88+
/>
89+
<h3 class="card-head card-head-active">
90+
Identity & <br />
91+
Security
92+
</h3>
93+
<p class="card-body">
94+
Lorem ipsum dolor sit amt, <br />
95+
consectetur adipiscing.
96+
</p>
97+
</div>
98+
<!-- Card 02 -->
99+
<div class="card">
100+
<img
101+
class="card-logo"
102+
src="./images/Group 98.png"
103+
alt="logo"
104+
/>
105+
<h3 class="card-head">
106+
Data & <br />
107+
Analytics
108+
</h3>
109+
<p class="card-body">
110+
Lorem ipsum dolor sit amt, <br />
111+
consectetur adipiscing.
112+
</p>
113+
</div>
114+
<!-- Card 03 -->
115+
<div class="card">
116+
<img
117+
class="card-logo"
118+
src="./images/Group 99.png"
119+
alt="logo"
120+
/>
121+
<h3 class="card-head">Commercial</h3>
122+
<p class="card-body">
123+
Lorem ipsum dolor sit amt, <br />
124+
consectetur adipiscing.
125+
</p>
126+
</div>
127+
<!-- Card 04 -->
128+
<div class="card">
129+
<img
130+
class="card-logo"
131+
src="./images/Group 100.png"
132+
alt="logo"
133+
/>
134+
<h3 class="card-head">
135+
Offers & <br />
136+
Benefits
137+
</h3>
138+
<p class="card-body">
139+
Lorem ipsum dolor sit amt, <br />
140+
consectetur adipiscing.
141+
</p>
142+
</div>
143+
<!-- Card 05 -->
144+
<div class="card">
145+
<img
146+
class="card-logo"
147+
src="./images/Group 101.png"
148+
alt="logo"
149+
/>
150+
<h3 class="card-head">
151+
Payment <br />
152+
Methods
153+
</h3>
154+
<p class="card-body">
155+
Lorem ipsum dolor sit amt, <br />
156+
consectetur adipiscing.
157+
</p>
158+
</div>
159+
</div>
160+
</div>
161+
162+
<!-- Blog section -->
163+
164+
<div class="blog-heading">
165+
<h1>
166+
Latest <br />
167+
blog article
168+
</h1>
169+
</div>
170+
<!-- Blogs -->
171+
<div class="blog-cards">
172+
<!-- Blog card 01 -->
173+
<div class="blog-card">
174+
<div class="blog-image">
175+
<img src="./images/Rectangle.png" alt="" />
176+
</div>
177+
<div class="blog-content">
178+
<h6>06 Aug 2019</h6>
179+
<h3>
180+
Custom-made <br />
181+
loyalty programme
182+
</h3>
183+
<small
184+
>Lorem ipsum dolor sit amet <br />consectetur
185+
adipisicing elit. <br />
186+
consectetur adipisicing elit. <br />Lorem ipsum dolor
187+
sit amet</small
188+
>
189+
<div class="blog-bottom">
190+
<img
191+
class="blog-card-bottom-image"
192+
src="./images/IMAGE HERE (2).png"
193+
alt=""
194+
/>
195+
<p class="blog-author">Bobby Wagner</p>
196+
</div>
197+
</div>
198+
</div>
199+
200+
<!-- Blog card 02 -->
201+
202+
<div class="blog-card">
203+
<div class="blog-image">
204+
<img src="./images/Rectangle Copy.png" alt="" />
205+
</div>
206+
<div class="blog-content">
207+
<h6>08 Aug 2019</h6>
208+
<h3>
209+
You can <br />
210+
travel with ease
211+
</h3>
212+
<small
213+
>Lorem ipsum dolor sit amet <br />consectetur
214+
adipisicing elit. <br />
215+
consectetur adipisicing elit. <br />Lorem ipsum dolor
216+
sit amet</small
217+
>
218+
<div class="blog-bottom">
219+
<img
220+
class="blog-card-bottom-image"
221+
src="./images/IMAGE HERE (2).png"
222+
alt=""
223+
/>
224+
<p class="blog-author">Gloria Graham</p>
225+
</div>
226+
</div>
227+
</div>
228+
</div>
229+
230+
<!-- FAQ SECTION -->
231+
<div class="faq-section">
232+
<div class="faq-content">
233+
<h2>
234+
Have <br />
235+
a question
236+
</h2>
237+
<h4>
238+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
239+
Similique mollitia <br />nam animi exercitationem et eum
240+
enim nulla veritatis,
241+
</h4>
242+
<h4>Do you have any question about anythings ?</h4>
243+
244+
<button>Contact Us</button>
245+
</div>
246+
<div class="faq-image">
247+
<img src="./images/Rectangle_38-2 (1).png" alt="" />
248+
</div>
249+
</div>
250+
251+
<!-- Download -->
252+
<div class="download-section">
253+
<div class="download-content">
254+
<h1>Download <span> Now</span></h1>
255+
</div>
256+
<div class="download-email">
257+
<form>
258+
<input placeholder="Enter your email address" />
259+
<button type="button">Download</button>
260+
</form>
261+
</div>
262+
</div>
263+
264+
<!-- Download -->
265+
<div class="footer-section">
266+
<div class="footer-left">
267+
<img class="footer-logo" src="./images/Logo.png" alt="" />
268+
<ul class="list">
269+
<li class="list-items">@lopem ipsum</li>
270+
<li class="list-items">Home</li>
271+
<li class="list-items">APIs</li>
272+
<li class="list-items">Blogs</li>
273+
<li class="list-items">Forums</li>
274+
</ul>
275+
</div>
276+
277+
<div class="footer-right">
278+
<div class="footer-right">
279+
<img
280+
class="footer-logos"
281+
src="./images/Group 102.png"
282+
alt=""
283+
/>
284+
<img
285+
class="footer-logos"
286+
src="./images/Group 103.png"
287+
alt=""
288+
/>
289+
<img
290+
class="footer-logos"
291+
src="./images/Group 104.png"
292+
alt=""
293+
/>
294+
</div>
295+
<ul class="logos-list">
296+
<li class="list-items">FAQ</li>
297+
<li class="list-items">Business</li>
298+
<li class="list-items">Help</li>
299+
</ul>
300+
</div>
301+
</div>
302+
</body>
303+
</html>

‎readme.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Project-09 HTML & CSS Full Stack Javascript Web Development Course
2+
3+
![image](https://img.shields.io/badge/iNeuron-Full--Stack%20JavaScript%20Web%20Development%20Course-blue)
4+
![image](https://img.shields.io/badge/Hitesh%20Choudhry-LOC-brightgreen)
5+
![image](https://img.shields.io/badge/HTML-CSS-orange)
6+
![image](https://img.shields.io/badge/Project-09-blue)
7+
8+
![image](https://img.shields.io/badge/BHASKAR-SAHU-blue)
9+
10+
[<img src= "https://img.shields.io/badge/projcet live link-10b?style=for-the-badge&logo=&logoColor=white" />](https://fsjs-ineuron-project-09-html-css.netlify.app/)
11+
12+
## About
13+
14+
This project is created using HTML and CSS. I have used CSS flex-box to make this project and this project is responsive.
15+
16+
## ⚙️ What did I learn by making this project?
17+
18+
- learn more about flex-box while creating this project.
19+
- learn about media query.
20+
21+
## ⌛ Time taken to finish this project?
22+
23+
This project took me around 5 and half hour to finish.
24+
25+
## 📷 Screenshots
26+
27+
![image](./screenshot/screenshot.png)
28+
29+
![image](./screenshot/screenshot-2.png)
30+
31+
![image](./screenshot/screenshot-3.png)
32+
33+
[<img src= "https://img.shields.io/badge/PROJCET LINK-1DA55F?style=for-the-badge&logo=&logoColor=white" />](https://fsjs-ineuron-project-09-html-css.netlify.app/)

‎screenshot/screenshot-2.png

1.74 MB
Loading

‎screenshot/screenshot-3.png

1.4 MB
Loading

‎screenshot/screenshot.png

2.73 MB
Loading

0 commit comments

Comments
 (0)