forked from Laboratoria-learning/freelancer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (167 loc) · 7.14 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!-- Agrega aquí la estructura HTML de tu sitio web -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freelancer</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Menú de Navegación/Navegation Bar -->
<nav>
<div class="container text-uppercase">
<a href="#" class="inline-block start-bootstrap"><strong>start bootstrap</strong></a>
<div class="nav-bar inline-block">
<ul>
<li class="inline-block">
<a href="#portfolio"><strong>portfolio</strong></a>
</li>
<li class="inline-block">
<a href="#about"><strong>about</strong></a>
</li>
<li class="inline-block">
<a href="#contact"><strong>contact</strong></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Sección Principal -->
<header id="principal-section">
<div class="container">
<img src="assets/images/profile.png" alt="Worker">
<span class="text-uppercase name"><strong>start bootstrap</strong></span>
<div class="star">
<hr class="inline-block">
<i class="fa fa-star fa-2x inline-block" aria-hidden="true"></i>
<hr class="inline-block">
</div>
<span class="specialties inline-block">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</header>
<!-- Sección Portafolio/Portfolio -->
<section id="portfolio">
<div class="container text-uppercase">
<h2><strong>portfolio</strong></h2>
<div class="star">
<hr class="inline-block">
<i class="fa fa-star fa-2x inline-block" aria-hidden="true"></i>
<hr class="inline-block">
</div>
<section class="row">
<!-- Figura 1 -->
<div class="figure inline-block box-1">
<!-- <img src="assets/images/portfolio/cabin.png" alt="Cabin"> -->
</div>
<!-- Figura 2 -->
<div class="figure inline-block box-2">
<!-- <img src="assets/images/portfolio/cake.png" alt="Cake"> -->
</div>
<!-- Figura 3 -->
<div class="figure inline-block box-3">
<!-- <img src="assets/images/portfolio/circus.png" alt="Circus"> -->
</div>
</section>
<section class="row">
<!-- Figura 4 -->
<div class="figure inline-block box-4">
<!-- <img src="assets/images/portfolio/game.png" alt="Game Control"> -->
</div>
<!-- Figura 5 -->
<div class="figure inline-block box-5">
<!-- <img src="assets/images/portfolio/safe.png" alt="Safe"> -->
</div>
<!-- Figura 6 -->
<div class="figure inline-block box-6">
<!-- <img src="assets/images/portfolio/submarine.png" alt="Submarine"> -->
</div>
</section>
</div>
</section>
<!-- Sección sobre información de Freelancer -->
<section id="about">
<div class="container">
<h2 class="text-uppercase"><strong>about</strong></h2>
<div class="star">
<hr class="inline-block">
<i class="fa fa-star fa-2x" aria-hidden="true"></i>
<hr class="inline-block">
</div>
<div id="paragraphs">
<p class="inline-block paragraph_1">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
<p class="inline-block paragraph_2">Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
</div>
<a class="inline-block" href="#principal-section"><i class="fa fa-download fa-lg" aria-hidden="true"></i> Download Theme</a>
</div>
</section>
<!-- Sección Contáctame -->
<section id="contact">
<div class="container">
<h2 class="text-uppercase"><strong>contact me</strong></h2>
<div class="star">
<hr class="inline-block">
<i class="fa fa-star fa-2x" aria-hidden="true"></i>
<hr class="inline-block">
</div>
<div id="info">
<form class="inline-block" action="index.html" method="post">
<div class="small-container">
<input class="inline-block" type="text" name="name" placeholder="Name">
</div>
<div class="small-container">
<input class="inline-block" type="text" name="email-address" value="" placeholder="Email Address">
</div>
<div class="small-container">
<input class="inline-block" type="text" name="phone number" value="" placeholder="Phone Number">
</div>
<div id="different-container">
<input class="inline-block" type="text" name="message" value="" placeholder="Message">
</div>
</form>
<button type="submit" name="button"><strong>Send</strong></button>
</div>
</div>
</section>
<!-- Pie de página -->
<footer>
<!-- Parte superior -->
<div id="footer-top">
<div class="inline-block box_1">
<h3 class="text-uppercase"><strong>location</strong></h3>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
</div>
<div class="inline-block box_2">
<h3 class="text-uppercase"><strong>around the web</strong></h3>
<ul>
<li class="inline-block">
<a href="#principal-section"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="inline-block">
<a href="#principal-section"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</li>
<li class="inline-block">
<a href="#principal-section"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="inline-block">
<a href="#principal-section"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li class="inline-block">
<a href="#principal-section"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div class="inline-block box_3">
<h3 class="text-uppercase"><strong>about freelancer</strong></h3>
<p>Freelance is a free to use, open source Bootstrap theme created by <a href="https://startbootstrap.com/">Start Bootstrap</a>.</p>
</div>
</div>
<!-- Parte inferior -->
<div id="footer-bottom">
<span>Copyright © Your Website 2017</span>
</div>
</footer>
</body>
</html>