-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (134 loc) · 7.71 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!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>freelancer-website</title>
<script src="/index.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/x-icon" href="/img/favicon/favicon.ico">
<script src="https://kit.fontawesome.com/bf364dafc4.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<a class="logo" href="/" title="logo" aria-label="link to homepage">SeifDesign</a>
<div class="wrapper__Navbar">
<div class="wrapper__Links">
<a class="Inter" title="Support" aria-label="link to support page" style="margin-right: 2vw" href="#">Support </a>
<div class="separator" style="min-width: 3vw;"></div>
<a class="Inter" href="#" title="Services" aria-label="link to services page"> Services</a>
</div>
<div class="separator" style="min-width: 5vw;"></div>
<button class="dropdown__Account" aria-label="open account menu" type="menu" style="margin: 0; padding: 0;">
<a href="#" title="Account menu" aria-label="account dropdown menu">Account </a>
<div class="wrapper__Icon"></div>
<i id="caret-down-icon" class="fa-solid fa-caret-down fa-2xs"></i>
</button>
</div>
<button class="button__Hamburger" title="hamburger-menu" aria-label="open mobile menu" type="menu" ><i class="fa-solid fa-bars fa-xl"></i></button>
</header>
<main >
<section class="wrapper__Home">
<div class="wrapper__Frame__Home">
<article class="wrapper__article__Home">
<h1 class="Hind-Bold header__Home">
ORGANIZE YOUR
DAILY TASKS
</h1>
<p class="Hind-Regular" style="font-size: 24px;">
Create your tasks in a snap using<br />
fantastic free features
</p>
<a class="button__Common Hind-Bold" title="Get started" aria-label="get started with tasks">Get Started</a>
</article>
<div class="wrapper__Image__Home" >
<img src="./img/man-on-the-chair.png" alt="man on a chair with laptop, legs crossed" />
<div id="image__shadow"></div>
</div>
</div>
<div class="wrapper__Cards">
<div class="wrapper__Card__Characteristics">
<div class="wrapper__Icon"><img src="./img/circle-purple.png" alt="purple circles icon" srcset=""></div>
<span style="color:#7526BA; font-weight: bold; font-size: 18px; padding: 0px 5px;">Easy To Use</span>
</div>
<div class="wrapper__Card__Characteristics">
<div class="wrapper__Icon"><img src="./img/circle-blue.png" alt="green pie chart icon" srcset=""></div>
<span style="color: #2c75c9; font-weight: bold; font-size: 18px; ">Super Efficient</span>
</div>
<div class="wrapper__Card__Characteristics">
<div class="wrapper__Icon"><img src="./img/squares.png" alt="purple squares icon" srcset=""></div>
<div style="text-align: center; color:#7526BA; font-weight: bold; font-size: 18px;">
Use It Wherever <br />
You Want
</div>
</div>
</section>
<section class="wrapper__Page">
<div id="shadow__Top"></div>
<div class="wrapper__Frame__Page ">
<div class="wrapper__article__Page">
<h2 class="Hind-Bold header__Page" >
Revolutionizes The<br />
Way You Work
</h2>
<p class="Hind-Regular" style="font-size: 18px; font-weight: 400; line-height: 28px;">
Manage And Monitor Everything From A Single Application<br />
And Take It Everywhere. Now It's Time To Get Results!
</p>
<a class="button__Common Hind-Bold" href="#" title="Learn more" aria-label="learn more about the app">Learn More</a>
</div>
<div class="wrapper__Image__Page">
<img src="./img/dashboard.png" alt="icon of dashboard with magnifying glass" />
</div>
</div>
<div class="wrapper__Frame__Page reverse__column ">
<div class="wrapper__Image__Page" >
<img src="./img/screen.png" alt="icon of computer display with icon outside" />
</div>
<article class="wrapper__article__Page">
<h2 class=" header__Page" >
Smart System And <br /> Simple Interface
</h2>
<p class="Hind-Regular" style="font-size: 18px; line-height: 28px;">
A System That Can Track And Help You Along The Way Is<br />
Combined With An Impeccably Simple Interface .
</p>
<a class="button__Common Hind-Bold" href="#" title="Learn more" aria-label="learn more about the interface">Learn More</a>
</article>
</div>
<div class="wrapper__Comment">
<h2 class="Hind-Bold header__Page" style="align-self: center;">
What Our Customers Think?
</h2>
<div class="wrapper__Frame__Page__Comment">
<div class="wrapper__Image__Page">
<img src="./img/people_in_circles.png" alt="user avatar" />
</div>
<div class="wrapper__article__Comment">
<div class="wrapper__Comment__Id">
<h3 class="Hind-Medium" style="font-size: 25px; font-weight: 500;">Ilaria Chiaro</h3>
<h4 class="Hind-Medium" style="font-size: 15px; font-weight: 500; color: #393FCE; ">Web Designer</h4>
</div>
<p class="Hind-Regular paragraph__Comment" style="font-size: 18px; line-height: 28px;">
Something Never Seen Before An Ease Of Use Beyond Imagination, Everything <br />
Organized In The Right Way Practically Nothing Out Of Place. Great Even For Beginners<br />
Given The Fact That Everything Is Explained Quite Simply.
</p>
<a class="button__Common Hind-Bold" href="#" title="Learn more" aria-label="learn more about the customer comments">Learn More</a>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<a class="wrapper__Footer__Item Inter" href="#" aria-label="link to contacts" title="Contact us" style="opacity: 0.8;">Contact us</a>
<a class="wrapper__Footer__Item Poppins" href="/index.html" aria-label="link to homepage" title="Homepage" style="font-weight: 600; opacity: 0.8">SeifDesign</a>
<div class="wrapper__Footer__Item" style="opacity: 0.8;">
<a class="wrapper__Icon" href="https://www.facebook.com" title="Facebook" aria-label="link to facebook "><i class="fa-brands fa-solid fa-facebook-f fa-lg"></i></a>
<a class="wrapper__Icon" href="https://www.instagram.com" title="Instagram" aria-label="link to instagram "><i class="fa-brands fa-solid fa-instagram fa-lg"></i></a>
<a class="wrapper__Icon" href="https://www.twitter.com" title="Twitter" aria-label="link to twitter"><i class="fa-brands fa-solid fa-twitter fa-lg"></i></a>
</div>
</footer>
</body>
</html>