Cris-Rocha-portfolio/index.html at main · Cris-Rocha/Cris-Rocha-portfolio · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Cris Personal Portifolio</title>
    <!-- <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" /> -->
   <!--Google fonts-->
    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300;400&display=swap" rel="stylesheet">
   <!-- End of Google fonts-->
   <!--Bootstrap Icons-->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <!--Bootstrap Icons-->
      <link rel="stylesheet" href="./style.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <!-- Add your HTML markup here -->
    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
    <header>
      <div class="interface">
        <div class="logo">
          <a href="#">
            <img src="Images/CR-Logo1.png" alt=" CR logo image" width="150em"> <!--logo image-->
          </a>
        </div> <!--logo-->
        <nav class="menu-desktop">
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="#specialities">Specialities</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
          </ul>
            </nav> <!--Menu Desktop-->
          <div class="btn-contact">
            <a href="#contact">
              <button>Contact</button>
            </a>
          </div><!--btn contact-->
          <div class="btn-open-menu">
            <i class="bi bi-list"></i>
          </div><!--btn-open-menu-->
          <div class="menu-mobile">
            <div class="btn-close">
              <i class="bi bi-x-lg"></i>
            </div><!--btn-close-->
        <nav> <!--nav desktop-->
          <ul>
            <li><a href="">Home</a></li>
            <li><a href="#specialities">Specialities</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav> <!--nav Desktop-->
          </div><!--menu-mobile-->
          <div class="overlay-menu"></div><!--overlay-menu-->
      </div> <!--Interface-->
    </header>
    <main>
      <section class="top-website">
        <div class="interface">
          <div class="flex">
            <div class="txt-top-site">
              <h1> Cris Cris Cris Cris <span>.</span></h1>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aliquid modi facilis optio ducimus cumque molestias enim minima accusamus? A sed voluptatum quaerat cum itaque recusandae non eos quibusdam repellendus.</p>

            <div class="btn-contact">
            <a href="#contact">
              <button>Contact</button>
            </a>
            </div></div> <!-- txt-top-site-->
            <div class="img-top-site" >
              <img id="profile-photo" src="Images/Profile-photo.jpeg" alt="Cris Photo" >
            </div><!--img-top-site-->
          </div> <!--Flex-->
        </div><!--Interface-->
      </section><!--website top -->

      <section class="specialities" id="specialities">
        <div class="interface">
          <h2 class="title">MY <span >SPECIALITIES.</span></h2>
          <div class="flex">
              <div class="specialities-box">
                <i class="bi bi-braces-asterisk"></i>
                <h3>Websites </h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi ea aperiam magnam, facilis odit quam quisquam aspernatur vitae quia ipsum qui mollitia, hic adipisci necessitatibus expedita non cumque rem ducimus.</p>
              </a>
              </div><!--specialities-box-->

              <div class="specialities-box">
                <i class="bi bi-palette"></i>
                <h3>Mandalas</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi ea aperiam magnam, facilis odit quam quisquam aspernatur vitae quia ipsum qui mollitia, hic adipisci necessitatibus expedita non cumque rem ducimus.</p>

            </div><!--specialities-box-->

            <div class="specialities-box">
             <i class="bi bi-lamp"></i>
              <h3>Lampshades</h3>
              <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi ea aperiam magnam, facilis odit quam quisquam aspernatur vitae quia ipsum qui mollitia, hic adipisci necessitatibus expedita non cumque rem ducimus.</p>

            </div><!--specialities-box-->
          </div><!--Flex-->
        </div> <!--Interface-->
      </section><!--specialities-->

      <section class="about" id="about">
        <div class="interface">
          <div class="flex">
            <div class="img-about">
              <img src="Images/Cris-about-me.jpeg" alt="Cris photo">
            </div><!--img-about-->
            <div class="txt-about">
              <h2>Glad to meet you,<br>
                <span> I am Cris Rocha.</span></h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt, maiores inventore in illum animi, eius nemo consectetur odit commodi molestias doloremque expedita, facere maxime! Voluptates incidunt voluptatem veritatis laborum eos!</p>
                <p>Loremipsum dolor sit amet consectetur adipisicing elit. Labore quidem nemo tempore est sapiente minima dolore voluptatibus, esse voluptates voluptatem eaque quos, tenetur ducimus omnis, consequuntur architecto! Suscipit, reiciendis illo!</p>
            <div class="btn-social">
              <a href="https://www.instagram.com/madeoflove.art/"><button><i class="bi bi-instagram"></i></button></a>
              <a href="https://github.com/Cris-Rocha"><button><i class="bi bi-github"></i></button></a>
              <a href="https://www.linkedin.com/in/cris-t-rocha/"><button><i class="bi bi-linkedin"></i></button></a>
            </div> <!-- btn-social -->
              </div><!--about-->
          </div> <!--flex-->
        </div><!--interface-->
      </section><!--about-->

      <section class="portfolio" id="portfolio">
        <div class="interface">
           <h2 class="title">MY <span >PORTFOLIO.</span></h2>
          <div class="flex">
            <div class="img-port" style="background-image: url(Images/Apple-project.jpg);">
            <div class="overlay">Apple Project</div></div>
            <div class="img-port" style="background-image: url(Images/cris-rocha_github_io__Cris-Rocha-portfolio_.jpeg);">
            <div class="overlay">Made of Love Art Project</div></div>
            <div class="img-port" style="background-image: url(Images/Apple-project.jpg);">
            <div class="overlay">Third project</div></div>
          </div><!--flex-->
        </div><!--interface-->
      </section><!--portfolio-->

      <section class="form" id="contact">
        <div class="interface">
          <h2 class="title">Contact <span>Me.</span></h2>
          <form action="">
            <input type="text" name="name" id="name" placeholder=" Your Full Name:" required>
            <input type="email" name="email" id="email" placeholder=" Your e-mail:" required>
            <input type="text" name="surname" id="surname" placeholder=" Your Number contact:">
            <textarea name="text" id="text" cols="30" rows="10" placeholder=" Your message:" required></textarea>
            <div class="btn-submit"><input type="submit" name="submit" id="submit"></div>

          </form>
        </div>
      </section><!--form-->

    </main>
    <footer>
      <div class="interface">
        <div class="line-footer border">
          <div class="flex">
            <div class="logo-footer">
              <img src="Images/CrisRocha-logo2-footer.png" alt="footer logo" width="150px">
            </div><!--logo-footer-->
            <div class="line-footer">
              <p id="cris-email"><i class="bi bi-envelope-heart"> </i> <a  href="mailto:cris-t-rocha@hotmail.com">  cris-t-rocha@hotmail.com</a></p>
            </div><!--line-footer-->
            <div class="btn-social">
                <a href="https://www.instagram.com/madeoflove.art/"><button><i class="bi bi-instagram"></i></button></a>
                <a href="https://github.com/Cris-Rocha"><button><i class="bi bi-github"></i></button></a>
                <a href="https://www.linkedin.com/in/cris-t-rocha/"><button><i class="bi bi-linkedin"></i></button></a>
              </div> <!-- btn-social -->
            </div><!--flex-->
        </div><!--line-footer-->
        <div class="line-footer">
          <div class="copyright">
            <p>
              Copyright © 2023 Cris Rocha. Todos los derechos reservados.
              <br>
              Esta página e fruto do desenvolvimento de HTML e CSS atraves do bootcamp de MigraCode ES.
            </p>
          </div> <!--copyright-->
        </div><!--line-footer-->
      </div><!--interface-->
    </footer>
  </body>

</html>