-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (70 loc) · 4.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech-no</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body class="overflow-x-hidden">
<header>
<!-- navbarcode -->
<div class="nav flex justify-around items-center w-screen h-[5rem] border-b-2 border-black">
<div class="logo">
<h1 class="text-3xl font-bold"> Tech-No</h1>
</div>
<div class="links">
<a href="#" class="mx-3 font-medium ">Home</a>
<a href="#" class="mx-3 font-medium">About</a>
<a href="#" class="mx-3 font-medium">Contact</a>
<a href="#" class="mx-3 font-medium">Order</a>
<a href="#" class="mx-3 font-medium">OurSupplies</a>
</div>
</div>
</header>
<main>
<!-- backimagecode -->
<div class="backimg">
<img src="bacimg.png" alt=""
class="flex m-auto w-[80vw] h-[40rem] border-2 border-black mt-10 rounded-lg mb-10">
</div>
<!-- headingcode -->
<div class="boxes flex">
<div class="green bg-[#5CFFA0] w-[30vw] h-[30rem]">
</div>
<div class="white bg-white w-[70rem] h-[30rem] flex justify-around items-center p-10">
<h1 class="text-6xl font-bold ">Gear for getting better at your side gig</h1>
</div>
</div>
<!-- photo and information code -->
<div class="tech flex justify-around mt-10">
<div class="box1 w-[40vw] h-[35rem] p-10 border-2 border-black rounded-2xl grid">
<h1 class="text-3xl text-black font-bold">Building & Prototyping: CanaKit Raspberry Pi 3 Complete Starter Kit</h1>
<h1 class="text-lg mt-5 text-black font-semibold">t’s a lot easier to create hardware prototypes when you have a legitimate starting base. The Raspberry Pi 3, a mini Linux computer, can operate as a starting point and brain of a variety of gadgets. We recommend the CanaKit Raspberry Pi 3 Complete Starter Kit to get going on building anything from a gaming console to a smart-home speaker. The included Raspberry Pi 3 Model B computer has software and general input/output pins for running added lights, sensors, or switches. The kit is also packed with everything you need to begin a project including cables, a power supply, a microSD card, and a case for convenience.</h1>
<button class="mt-5 p-2 w-[8rem] h-[3rem] bg-black text-white rounded-2xl">ReadMore</button>
</div>
<div class="box1 w-[40vw] h-[35rem] bg-[#5CFFA0] flex justify-center items-center p-10 rounded-2xl">
<img src="Rasp.jpg" alt="" class="w-[30vw] h-[25rem] rounded-md">
</div>
</div>
<!-- another photo and information code -->
<div class="tech flex justify-around mt-10">
<div class="box1 w-[40vw] h-[35rem] bg-[#5CFFA0] flex justify-center items-center p-10 rounded-2xl">
<img src="lap.jpg" alt="" class="w-[30vw] h-[25rem] rounded-md">
</div>
<div class="box1 w-[40vw] h-[35rem] p-10 border-2 border-black rounded-2xl grid">
<h1 class="text-3xl text-black font-bold">Video and Photo Editing: Dell XPS 15 Laptop</h1>
<h1 class="text-lg mt-5 text-black font-semibold">The ports and connections on the Dell XPS 15 Laptop accommodate all types of gear used for capturing and transferring video. In addition to having a huge 4K display, it has a powerful processor and graphics card. This means you’ll spend less time waiting around as large files load and render faster.
One reason that it’s our top pick for video and photo editing laptops is because its keyboard is comfortable enough to use during long editing sessions. The XPS’s trackpad is responsive and its touchscreen is intuitive—two features which contribute to the ease of making precise edits.</h1>
<button class="mt-5 p-2 w-[8rem] h-[3rem] bg-black text-white rounded-2xl">ReadMore</button>
</div>
</div>
<div class="footer w-screen h-[20rem] border-2 border-black mt-10 mb-10 grid">
<img src="insurance-footer-background.png" alt="" class="mt-10 m-auto h-[10rem] w-[80vw] rounded-lg">
<h1 class="text-center mt-10 font-semibold">Follow Tech-No for More Updates fo Technology</h1>
</div>
</main>
</body>
</html>