-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (145 loc) · 5.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Este es el nombre que tendrá nuestra página al momento de abrirse en la web-->
<title>Freelancer</title>
<!--Estos son los links de donde se estan tomando los elementos de los iconos y fonts-->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Aquí se está enlazando el archivo de Css con el html-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!--Esta es la sección de menu del sitio-->
<div class="head">
<div class="menu">
<ul class="menus">
<li class="apartado">PORTFOLIO</li>
<li class="apartado">ABOUT</li>
<li class="apartado" >CONTACT</li>
</ul>
</div>
<div class="namePage">
<h1 class="name">START BOOTSTRAP</h1>
</div>
</div>
<!--Esta es la segunda sección del sitio el cuál contiene 3 elementos -->
<div class="hero">
<img src="assets/images/profile.png" class="image-hero"alt="user">
<p class="tittle-hero">STAR BOOTSTRAP</p>
<hr class="star-verde"></hr>
<p class="text-hero">Web Developer - Graphic Artist - User Experience Designer</p>
</div>
<!--Esta es la sección donde se encuentran 6 elementos en imagenes -->
<div class="portafolio">
<div class="containerPortafolio">
<div class="text-portafolio">
<h1 class="textPortafolio">PORTFOLIO</h1>
</div>
<div class="lineStar">
<hr class="star"></hr>
</div>
<div class="imagenesPortafolio">
<img src="assets/images/cabin.png" class="imagenPortafolio"alt="">
</div>
<div class="imagenesPortafolio">
<img src="assets/images/cake.png" class="imagenPortafolio"alt="">
</div>
<div class="imagenesPortafolio">
<img src="assets/images/circus.png" class="imagenPortafolio"alt="">
</div>
<div class="imagenesPortafolio">
<img src="assets/images/game.png" class="imagenPortafolio"alt="">
</div>
<div class="imagenesPortafolio">
<img src="assets/images/safe.png" class="imagenPortafolio"alt="">
</div>
<div class="imagenesPortafolio">
<img src="assets/images/submarine.png" class="imagenPortafolio"alt="">
</div>
</div>
</div>
<!--Esta es la sección donde se encuentra un poco de información acerca del sitio, contiene imagen, parrafos,un titulo y un botón -->
<div class="nosotros">
<div class="containerAbout">
<p class="acerca">ABOUT</p>
<div class="lineStar">
<hr class="star-verde"></hr>
</div>
<div class="containerParraf">
<div class="parraf">
<p class="textAbout">Freelancer is a free bootstrap Theme
cread by Star Boostrap. The download includes
complete source files
including HTML, CSS, and JavaScript as well as optional LESS
stylesheets for easy customization.
</p>
</div>
<div class="parraf">
<p class="textAbout">Whether you´re a student looking to
showcase your work, a professional lookingto attrack clients, or a
graphic artist looking to share your projects,
this template is the perfect starting point!</p>
</div>
<button class="boton">
<p class="textBoton"><i class="fa fa-download" aria-hidden="true"></i> Download Theme</p>
</button>
</div>
</div>
</div>
<!--Esta es la sección del formulario donde el usuraio introduce sus datos -->
<div class="contact">
<p class="textContact">CONTACT ME</p>
<div class="lineStar">
<hr class="star"></hr>
</div>
<form action="/my-handling-form-page" method="post">
<div>
<input type="text" id="name" class="form-control" placeholder="Name" />
</div>
<div>
<input type="email" id="mail" class="form-control" placeholder="Email Adress" />
</div>
<div>
<input type="text" id="PhoneNumber" class="form-control" placeholder="Phone number">
</div>
<div>
<input type="text" id="msg" class="form-control" placeholder="Message" >
</div>
<div class="button2">
<button class="boton2">Send</button>
</div>
</form>
</div>
<!--Esta es la sección del footer donde se encuentran diversos elementos como los son titulos, parrafos,iconos de redes sociales -->
<div class="footer">
<div class="containerFooter">
<div class="infoGeneral">
<h3 class="titleFooter">LOCATION</h3>
<p class="textFooter">3481 Melrose Place
Bervely Hilss,CA 90210</p>
</div>
<div class="infoGeneral">
<h3 class="titleFooter">AROUND THE WEB</h3>
<p class="redess">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-dribbble" aria-hidden="true"></i>
</p>
</div>
<div class="infoGeneral">
<h3 class="titleFooter">ABOUT FREELANCER</h3>
<p class="textFooter">Freelance is a free to use, open source
Boostrap theme created by Start Boostrap
</p>
</div>
<div class="finalFooter">
<p class="derechos">Copyright © Your Website 2017</p>
</div>
</div>
</div>
</body>
</html>