Proyecto_Web/index.html at main · diegodev-01/Proyecto_Web · GitHub

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
<!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>Edie homepage</title>
  <link rel="stylesheet" href="./assets(edie-homepage-master)/normalize/normalize.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@800&family=Montserrat:wght@500;600;700&family=Poppins:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <div class= "container_class">
    <b>  <a href="#" class = "Edie" > Edie </a> </b>

              <nav  class=" cabecera">
                <ul>
                      <li><a href="">Home</a></li>
                      <li><a href="">Services</a></li>
                      <li><a href="">Our Works</a></li>
                      <li><a href="">Clients</a></li>
                      <li><a href="">Contact</a></li>
                  </ul>
                </nav>

                </div>
      </header>
  <main>
    <div class="wrapper">
      <section class="section1">
        <div class="part1">
          <p class="p1 azul" >Unhappy with your website?</p>
          <h1 class="titulos1">We create beautiful <br> and fast web services</h1>
        </div>
        <img class="imagen1" src="assets(edie-homepage-master)/heroImage.jpg" alt="Image of a informative meeting" />
        <div class="box1">
          <h1 class="titulos1">Story, emotion <br> and purpose</h1>
          <p class="p1">We help transform your ideas into real world applications that will outperform your toughest competition and help you achieve your strategic goals in short period of time.</p>
        </div>
        <div class="form1">
            <p>Want us to contact you?</p>
            <form>
                <input class="email-main" type="email" placeholder="Email" required/>
                <input class="submit-main" type="submit" value="Join" />
            </form>
        </div>
      </section>
      <section class="section2">
        <h1 class="titulos2" >We offer high <br> demand services</h1>
        <div class="container">
          <div class="box2">
            <div class="icono1 color1">
              <img src="./assets(edie-homepage-master)/icono1.svg" alt="icono de lapiz">
            </div>
            <h2>UI/UX Design</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, nihil dolorem.</p>
            <button><a href="">Get started</a></button>
          </div>
          <div class="box2 shadow">
            <div class="icono1 color2 rota1">
              <img class="rotado icon1" src="./assets(edie-homepage-master)/icono2.svg" alt="icon of greater than">
              <img class="rotado1"src="./assets(edie-homepage-master)/icono2.svg" alt="icon of less than and greater than">
            </div>
            <h2>Front End</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, nihil dolorem.</p>
            <button class="bot1"><a href="">Get started</a></button>
          </div>
          <div class="box2">
            <div class="icono1 color3">
              <img src="./assets(edie-homepage-master)/icono3.svg" alt="icon of files">
            </div>
            <h2>Back End</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, nihil dolorem.</p>
            <button><a href="">Get started</a></button>
          </div>
        </div>
      </section>
      <section class="section3">
        <h1 class="titulos2" >Good design means <br> good business</h1>
        <div class="container2">
          <div class="box3 v1">
            <img src="./assets(edie-homepage-master)/onboard.png" alt="image of onboard application">
            <p>UX/UI design</p>
            <h4>Onboard application</h4>
          </div>
          <div class="box3 v2">
            <img src="./assets(edie-homepage-master)/smarthome.jpg" alt="image of Smart home dashboard">
            <p>Full stack application</p>
            <h4>Smart home dashboard</h4>
          </div>
          <div class="box3 v3">
            <img src="./assets(edie-homepage-master)/juice-product.png" alt="image of juice product homepage">
            <p>Front End application</p>
            <h4>Juice product homepage</h4>
          </div>
          <div class="box3 v4">
            <img src="./assets(edie-homepage-master)/booking.png" alt="image of juice product homepage">
            <p>Mobile application</p>
            <h4>Booking system</h4>
          </div>
          <p><a href="">see more →</a></p>
        </div>
      </section>
      <section class="section4">
        <div class="cuadro">
          <p class="rojo">Meet the team</p>
          <h1 class="titulos2" >We are chilled <br> and a laidback <br> team</h1>
          <p class="p1">Lorem ipsum dolor sit amet, <br> consectetur adipiscing elit.</p>
        </div>
        <div class="imagenes">
          <img class="pic b" src="./assets(edie-homepage-master)/person3.png" alt="imagen de una chica">
          <img class="pic a" src="./assets(edie-homepage-master)/person1.png" alt="imagen de un joven">
          <img class="pic c" src="./assets(edie-homepage-master)/person2.png" alt="imagen de un hombre con lentes">
        </div>
      </section>
      <section class="section5">
        <h1 class="titulos2" >“Fast and outstanding resutls. Edie understands <br> their customer’s needs. They have a young and <br> talented team.”</h1>
        <div class="cita">
          <img src="./assets(edie-homepage-master)/person4.png" alt="imagen de un joven con camisa">
          <div class="parrafo1">
            <p class="nombre">Carlos Tran</p>
            <p class="oficio">The Decorate Gatsby</p>
          </div>
        </div>
      </section>
    </div>
    </main>
    <footer>
      <div class="links">
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">Our Works</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <div class="socials">
        <h1 class="logo">Edie</h1>
        <div class="social">
            <img src="./assets(edie-homepage-master)/twitter.svg" alt="">
            <img src="./assets(edie-homepage-master)/instagram.svg" alt="">
            <img src="./assets(edie-homepage-master)/linkedin.svg" alt="">
        </div>
      </div>
      <div class="contacto">
          <p>Want us to contact you?</p>
          <div>
               <input type="email" placeholder="Email" required/>
               <button type="submit">Join</button>
          </div>
      </div>
    </footer>
  </body>
</html>