-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
177 lines (152 loc) · 7.52 KB
/
index.html
File metadata and controls
177 lines (152 loc) · 7.52 KB
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Site Plan</title>
<link type="text/css" rel="stylesheet" href="styles/site-plan.css">
</head>
<body>
<header>
<h1>[Braidi DESIGN] Site Plan</h1>
<h2>Zeir Braidi</h2>
<h2>WDD 130-[section]</h2>
<!-- In the header above, add the name or your site, your name and class number. For example if you are in section 3 you would put WDD 130.03 -->
</header>
<main>
<!-- ------------------------Steps 2-3------------------------------ -->
<hr>
<h2>Overview</h2>
<h3>Purpose</h3>
<p>Tired of searching the internet and not finding your own business? even when you already have a web domain? We are experts in SEO, web development and digital advertising. Working together everyone will know the brand of your business and what differentiates it, with an effective and aesthetic design and interface.</p>
<h3>Audience</h3>
<p>Small and medium business that want to grow faster in the digital environment</p> <!-- change this -->
<hr>
<h2>Branding</h2>
<h3>Website Logo</h3>
<!-- Replace this with some sort of logo for your site. A logo can be as simple as the name of your site in a nice font :) -->
<img class='logo' src="./images/Braidi WD-logos.jpeg" alt="Logo image">
<hr>
<h2>
Style Guide
</h2>
<!-- ------------------------Steps 4-8------------------------------ -->
<h3>
Color Palette
</h3>
<!-- The colors you choose for a website are one of the most important decisions you will make. Follow the instructions on the activity in iLearn then return and replace the color codes below with the hex color codes (the 6 digit numbers that show at the bottom of each color) for the colors you have chosen below. You should have at least 2 colors but do not have to fill in all 4 if you do not need them. -->
<!-- Copy and paste the URL to your finished palette below Make sure to paste it into both spots -->
Palette URL: <a href="https://coolors.co/0a0908-22333b-eae0d5-c6ac8f-5e503f" target="_blank">https://coolors.co/0a0908-22333b-eae0d5-c6ac8f-5e503f</a>
<table class="colors">
<tr><th>Primary</th><th>Secondary</th><th>Accent 1</th><th>Accent 2</th></tr>
<!-- Replace the numbers in the boxes below with your hex color codes. Then switch to the site-plan.css file and change your colors there as well. -->
<tr><td class="primary">[#22333b]</td><td class="secondary">[#5e503f]</td><td class="accent1">[#eae0d5]</td><td class="accent2"></td></tr>
</table>
<!-- ------------------------Step 9------------------------------ -->
<h3>
Typography
</h3>
<!-- Choose a font for your paragraphs (body copy) and headlines. What font(s) have you chosen? Why did you choose what you did? Make sure to review the list of web safe fonts at W3Schools.org as a starting point. Think also about which of your colors above you might use for background and font colors. -->
<h4>
Heading Font: ['Playfair Display'] <!-- change this -->
</h4>
<h4>
Paragraph Font: ['Serif'] <!-- change this -->
</h4>
<h3>
Normal paragraph example
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h3>
Colored paragraph example
</h3>
<p class="colored">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<!-- ------------------------Step 10------------------------------ -->
<h3>
Navigation
</h3>
<!-- Think about how you want your navigation bar to look. In the site-plan.css file change the colors to your colors to get the look you desire. -->
<nav>
<a href="#">Home</a>
<a href="#">about</a>
<a href="#">Contact</a>
</nav>
<hr>
<h2>
Site Map
</h2>
<div class="sitemap">
<div class="sm-home">
Home
</div>
<div class="sm-page2">
About <!-- change this -->
</div>
<div class="sm-page3">
Contact <!-- change this -->
</div>
<div class="top">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
<!-- --------Content Section -------------- -->
<hr>
<h2>
Content
</h2>
<h3>Home page</h3>
<p>
[Tired of searching the internet and not finding your own business? even when you already have a web domain? We are experts in SEO, web development and digital advertising. Working together everyone will know the brand of your business and what differentiates it, with an effective and aesthetic design and interface.(I'll insert a description next to the project's images.)
</p>
<p>Images for the Home page</p>
<img class="imgExample" src="images/lctqqh3t7kfnwpxljhl7.jpg.png" alt="image for homepage">
<img class="imgExample" src=
"images/Web-Development.jpg" alt="image for homepage">
</ul>
<h3>About</h3>
<p>
We are a company dedicated to providing online positioning to our clients based on the latest technologies that allow us to offer the best possible user experience, without neglecting aesthetics, functionality and positioning.
</p>
<p>Images for the Page 2</p>
<img class="imgExample" src="images/web-development-647_062317054646.jpg" alt="image for page">
<img class="imgExample" src="images/web-development-2021.jpg" alt="image for page">
</ul>
<h3>Contact</h3>
<p>
If you wish to receive more information, fill out the following form
</p>
<p>Images for the Page 3</p>
<img class="imgExample" src="images/shutterstock_394793860-1024x784.jpg" alt="image for page3">
<img class="imgExample" src="images/Web-Development-Company-USA.jpg" alt="image for page3">
</ul>
<hr>
<h2>
Wireframes
</h2>
<p>
Create three wireframes for your site. One for each page and list them here</p>
<h3>Home</h3>
<img class="wireframesB" src="images/Captura de Pantalla 2022-06-17 a la(s) 10.18.49 p.m..png" alt="home page wireframe">
<img class="wireframesB" src="images/Captura de Pantalla 2022-06-17 a la(s) 10.18.55 p.m..png" alt="home page wireframe">
<h3>About</h3>
<p>
Any additional details about page 2 that the wireframe does not make clear
</p>
<img class="wireframesB" src="images/Captura de Pantalla 2022-06-17 a la(s) 10.19.14 p.m..png" alt="page 2 wireframe">
<h3>Contact</h3>
<p>
Any additional details about page 3 that the wireframe does not make clear
</p>
<img class="wireframesB" src="images/Captura de Pantalla 2022-06-17 a la(s) 10.19.39 p.m..png" alt="page 3 wireframe">
</main>
</body>
</html>