forked from Laboratoria-learning/freelancer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (140 loc) · 6.63 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
<!-- Agrega aquí la estructura HTML de tu sitio web -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Freelancer</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navigation" role="navigation">
<div class="container">
<a href="#" class="navigation__brand text-uppercase">start bootstrap</a>
<ul class="navigation__menu">
<li class="navigation__list-item"><a href="#" class="text-uppercase navigation__link">portafolio</a></li>
<li class="navigation__list-item"><a href="#" class="text-uppercase navigation__link">about</a></li>
<li class="navigation__list-item"><a href="#" class="text-uppercase navigation__link">contact</a></li>
</ul>
</div>
</nav>
<header class="header">
<div class="container">
<figure class="header__image">
<img src="assets/images/profile.png" alt="Profile" class="header__image--profile">
</figure>
<h1 class="text-uppercase header__title m-0">start bootstrap</h1>
<div class="line__start">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<span class="header__description">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</header>
<main class="main">
<section class="main__portfolio">
<div class="container">
<h2 class="m-0 main__subtitle text-uppercase text-color-black">portfolio</h2>
<div class="line__start line__start--black">
<i class="fa fa-star text-color-black" aria-hidden="true"></i>
</div>
<figure class="main__portfolio-image">
<img src="assets/images/portfolio/cabin.png" alt="Cabin">
</figure>
<figure class="main__portfolio-image">
<img src="assets/images/portfolio/cake.png" alt="Cake">
</figure>
<figure class="main__portfolio-image">
<img src="assets/images/portfolio/circus.png" alt="Circus">
</figure>
<figure class="main__portfolio-image">
<img src="assets/images/portfolio/game.png" alt="Game">
</figure>
<figure class="main__portfolio-image">
<img src="assets/images/portfolio/safe.png" alt="Safe">
</figure>
<figure class="main__portfolio-image">
<img src="assets/images/portfolio/submarine.png" alt="Submarine">
</figure>
</div>
</section>
<section class="main__about">
<div class="container">
<h2 class="m-0 main__subtitle text-uppercase">about</h2>
<div class="line__start">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<div class="main__about--element">
<p class="main__about__description main__about__description1">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="main__about__description main__about__description2">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 href="#" class="btn btn--white"><i class="fa fa-download" aria-hidden="true"></i>
Download Theme</a>
</div>
</section>
<section class="main_contact-me">
<div class="container">
<h2 class="m-0 main__subtitle text-uppercase text-color-black">Contact me</h2>
<div class="line__start line__start--black">
<i class="fa fa-star text-color-black" aria-hidden="true"></i>
</div>
<form class="form">
<div class="form__container">
<div class="form__container--element">
<input type="text" class="form__element form__input" placeholder="Name">
</div>
<div class="form__container--element">
<input type="text" class="form__element form__input" placeholder="Email Address">
</div>
<div class="form__container--element">
<input type="text" class="form__element form__input" placeholder="Phone Number">
</div>
<div class="form__container--element">
<textarea name="name" class="form__element form__textarea" rows="8" cols="50" placeholder="Message"></textarea>
</div>
<button type="button" name="button" class="btn btn--green">Send</button>
</div>
</form>
</div>
</section>
</main>
<footer class="footer">
<section class="container">
<div class="footer__element footer__location">
<h2 class="text-uppercase footer__subtitle">location</h3>
<p>3481 Melrose Place <br>Beverly Hills, CA 90210</p>
</div>
<div class="footer__element footer__araound-web">
<h2 class="text-uppercase footer__subtitle">Around the web</h3>
<ul class="red-social">
<li class="circle red-social--facebook">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="circle red-social--google">
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
<li class="circle red-social--twitter">
<i class="fa fa-twitter" aria-hidden="true"><a href="#"></a></i>
</li>
<li class="circle red-social--linkedin">
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li class="circle red-social--dribbble">
<a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div class="footer__element footer__about">
<h2 class="text-uppercase footer__subtitle">about freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by <span><a href="#">Start Bootstrap</a></span.</p>
</div>
</section>
<div class="container">
<p>Copyright © Your Website 2017</p>
</div>
</footer>
</body>
</html>