├── assets
    ├── arrow.png
    ├── htlm.png
    ├── css_icon.png
    ├── js_icon.png
    ├── php_icon.png
    ├── profile.png
    ├── tv_icon.png
    ├── vector.png
    ├── alura_logo.png
    ├── react_icon.png
    ├── signature.png
    ├── skate_icon.png
    ├── ufpr_logo.png
    ├── ufrj_logo.png
    ├── camera_icon.png
    ├── contact_image.png
    ├── decod_print.png
    ├── forca2_print.png
    ├── forca_print.png
    ├── guitar_icon.png
    ├── nodejs_icon.png
    ├── forkspoon_icon.png
    ├── headphones_icon.png
    └── secretcode_print.png
├── validacion.js
├── index.html
└── style.css


/assets/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/arrow.png


--------------------------------------------------------------------------------
/assets/htlm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/htlm.png


--------------------------------------------------------------------------------
/assets/css_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/css_icon.png


--------------------------------------------------------------------------------
/assets/js_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/js_icon.png


--------------------------------------------------------------------------------
/assets/php_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/php_icon.png


--------------------------------------------------------------------------------
/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/profile.png


--------------------------------------------------------------------------------
/assets/tv_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/tv_icon.png


--------------------------------------------------------------------------------
/assets/vector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/vector.png


--------------------------------------------------------------------------------
/assets/alura_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/alura_logo.png


--------------------------------------------------------------------------------
/assets/react_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/react_icon.png


--------------------------------------------------------------------------------
/assets/signature.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/signature.png


--------------------------------------------------------------------------------
/assets/skate_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/skate_icon.png


--------------------------------------------------------------------------------
/assets/ufpr_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/ufpr_logo.png


--------------------------------------------------------------------------------
/assets/ufrj_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/ufrj_logo.png


--------------------------------------------------------------------------------
/assets/camera_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/camera_icon.png


--------------------------------------------------------------------------------
/assets/contact_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/contact_image.png


--------------------------------------------------------------------------------
/assets/decod_print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/decod_print.png


--------------------------------------------------------------------------------
/assets/forca2_print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/forca2_print.png


--------------------------------------------------------------------------------
/assets/forca_print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/forca_print.png


--------------------------------------------------------------------------------
/assets/guitar_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/guitar_icon.png


--------------------------------------------------------------------------------
/assets/nodejs_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/nodejs_icon.png


--------------------------------------------------------------------------------
/assets/forkspoon_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/forkspoon_icon.png


--------------------------------------------------------------------------------
/assets/headphones_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/headphones_icon.png


--------------------------------------------------------------------------------
/assets/secretcode_print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aluralatamprofes/portafolio_solucion_G4/HEAD/assets/secretcode_print.png


--------------------------------------------------------------------------------
/validacion.js:
--------------------------------------------------------------------------------
 1 | function validarDatos(){
 2 |     window.event.preventDefault()
 3 |      
 4 |     if (document.form.nombre.value=="" ) {
 5 |         alert("Campo nombre es obligatorio")  
 6 |         document.form.nombre.focus()
 7 |     
 8 |     }else if (document.form.email.value=="") {
 9 |         alert("Campo e-mail es obligatorio")
10 |         document.form.email.focus() 
11 | 
12 |     }else if (document.form.asunto.value=="" ) {
13 |         alert("Campo Asunto es obligatorio")
14 |         document.form.asunto.focus() 
15 | 
16 |     }else if (document.form.mensaje.value=="" || document.form.mensaje.value.length <= 50 ){
17 |         alert("Campo Mensaje es obligatorio y debe contener máximo 50 carateres") 
18 |         document.form.mensaje.focus()
19 |       
20 |     } else if (document.form.email.value.indexOf('@')==-1 ||
21 |     document.form.email.value.indexOf('.')==-1 ) {
22 |         alert("e-mail inválido")
23 |     }
24 |    
25 | }
26 |     document.querySelector('form').addEventListener('submit',validarDatos)
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
 11 |     <title> Mi Portafolio</title>
 12 | </head>
 13 | <body>
 14 |     <div class="todo">
 15 | 
 16 |         <section class="menu">
 17 |             <header>
 18 |                 <img src="assets\vector.png">
 19 |                 <h3 class="menu-title">Fulana de Tal</h3>
 20 |             </header>
 21 |             <nav>
 22 |                 <ul class="menu-list">
 23 |                     <li class="menu-list-item"><a href="#sobre-mi">Sobre mi</a></li>
 24 |                     <li class="menu-list-item"><a href="#skills">Skills</a></li>
 25 |                     <li class="menu-list-item"><a href="#hobbies">Hobbies</a></li>
 26 |                     <li class="menu-list-item"><a href="#formacion">Formación</a></li>
 27 |                     <li class="menu-list-item"><a href="#xp">Proyectos</a></li>
 28 |                     <li class="menu-list-item"><a href="#contacto">Contacto@fulana.com</a></li>
 29 |                 </ul>
 30 |                 <li class="menu-list-item-c"><a href="#contacto">contacto@fulana.com</a></li>
 31 |             </nav>
 32 |         </section>
 33 | 
 34 |         <section class="title">
 35 |             <div class="title-div">
 36 |                 <img class="profile" src="assets\profile.png">
 37 |                 <div class="title-container">
 38 |                     <h2>Hola, mi nombre es Fulana de Tal y construyo paginas web</h2>
 39 |                     <h3>Soy formada en .... lorem ipsum sit amet consectetur y actualmente estoy participando del proyecto Oracle ONE en Alura Latam.</h3>
 40 |                     <ul>
 41 |                         <li><a href="">Github <img src="assets\arrow.png"> </a></li>
 42 |                         <li><a href="">Linkedin <img src="assets\arrow.png"></a></li>
 43 |                         <li><a href="">Instagram <img src="assets\arrow.png"></a></li>
 44 |                         <li><a href="">Currículo <img src="assets\arrow.png"></a></li>
 45 |                     </ul>
 46 |                 </div>
 47 |             </div>
 48 |         </section>
 49 |         
 50 |         <section class="about" id="sobre-mi">
 51 |             <div class="about-container">
 52 |                 <h3>Sobre mi</h3>
 53 |                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit velit, volutpat semper dignissim dictum, imperdiet ut lacus. Quisque gravida ex a mattis pretium. Suspendisse potenti. Ut semper sagittis ligula et lacinia.  </p>
 54 |                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit velit, volutpat semper dignissim dictum, imperdiet ut lacus. Quisque gravida ex a mattis pretium. Suspendisse potenti. Ut semper sagittis ligula et lacinia. Aenean sit amet felis venenatis, egestas metus vitae, aliquet metus.</p>
 55 |                 <img src="assets\signature.png">
 56 |             </div>
 57 |         </section>
 58 | 
 59 |         <section class="skills" id="skills">
 60 |             <h3 class="section-title">Skills</h3>
 61 |                 <div class="skills-line">
 62 |                     <div class="skills-box">
 63 |                         <ul>
 64 |                             <li><img src="assets\htlm.png"></li>
 65 |                             <li> HTML 5</li>
 66 |                         </ul>
 67 |                     </div>
 68 | 
 69 |                     <div class="skills-box">
 70 |                         <ul>
 71 |                             <li> <img src="assets\js_icon.png" alt=""></li>
 72 |                             <li>Javascript</li>
 73 |                         </ul>
 74 |                     </div>
 75 | 
 76 |                     <div class="skills-box">
 77 |                         <ul>
 78 |                             <li> <img src="assets\php_icon.png" alt=""></li>
 79 |                             <li>PHP</li>
 80 |                         </ul>
 81 |                     </div>
 82 | 
 83 |                     <div class="skills-box">
 84 |                         <ul>
 85 |                             <li><img src="assets\nodejs_icon.png" alt=""></li>
 86 |                             <li>Node JS</li>
 87 |                         </ul>
 88 |                     </div>
 89 | 
 90 |                     <div class="skills-box">
 91 |                         <ul>
 92 |                             <li> <img src="assets\react_icon.png" alt=""> </li>
 93 |                             <li>React</li>
 94 |                         </ul>
 95 |                     </div>
 96 | 
 97 |                     <div class="skills-box">
 98 |                         <ul>
 99 |                             <li> <img src="assets\css_icon.png" alt=""> </li>
100 |                             <li>CSS</li>
101 |                         </ul>
102 |                     </div>
103 |             </div>
104 |         </section>
105 | 
106 |         <section class="hobbies-section" id="hobbies">
107 |             <h3 class="section-title">Hobbies</h3>
108 |                 <div class="hobbies-line">
109 |                     <div class="hobbies-box">
110 |                         <ul>
111 |                             <li><img src="assets\skate_icon.png"></li>
112 |                             <li class="hobbies-name"> Patinaje</li>
113 |                         </ul>
114 |                     </div>
115 | 
116 |                     <div class="hobbies-box">
117 |                         <ul>
118 |                             <li> <img src="assets\guitar_icon.png" alt=""></li>
119 |                             <li class="hobbies-name">Tocar bajo</li>
120 |                         </ul>
121 |                     </div>
122 | 
123 |                     <div class="hobbies-box">
124 |                         <ul>
125 |                             <li> <img src="assets\headphones_icon.png" alt=""></li>
126 |                             <li class="hobbies-name">Oir música</li>
127 |                         </ul>
128 |                     </div>
129 | 
130 |                     <div class="hobbies-box">
131 |                         <ul>
132 |                             <li><img src="assets\tv_icon.png" alt=""></li>
133 |                             <li class="hobbies-name">Ver séries</li>
134 |                         </ul>
135 |                     </div>
136 | 
137 |                     <div class="hobbies-box">
138 |                         <ul>
139 |                             <li> <img src="assets\forkspoon_icon.png" alt=""> </li>
140 |                             <li class="hobbies-name">Cocinar</li>
141 |                         </ul>
142 |                     </div>
143 | 
144 |                     <div class="hobbies-box">
145 |                         <ul>
146 |                             <li> <img src="assets\camera_icon.png" alt=""> </li>
147 |                             <li class="hobbies-name">Tomar fotos</li>
148 |                         </ul>
149 |                     </div>
150 |             </div>
151 |         </section>
152 | 
153 |         <section class="academic" id="formacion">
154 |             <h2 class="section-title" >Formación académica</h2>
155 |             <div class="courses">
156 |                 <div class="courses-box">
157 |                     <ul>
158 |                         <li class="course-img"><img src="assets\ufpr_logo.png"></li>
159 |                         <li class="course-title"><h4>Análisis de datos</h4></li>
160 |                         <li class="course-subtitle"><p>2018 - UFPR</p></li>
161 |                     </ul>
162 |                 </div>
163 |                 <div class="courses-box">
164 |                     <ul>
165 |                         <li class="course-img"><img src="assets\alura_logo.png"></li>
166 |                         <li class="course-title"><h4>Formación en UX Design</h4></li>
167 |                         <li class="course-subtitle"><p>2019 - Alura</p></li>
168 |                     </ul>
169 |                 </div>
170 |                 <div class="courses-box">
171 |                     <ul>
172 |                         <li class="course-img"><img src="assets\ufrj_logo.png"></li>
173 |                         <li class="course-title"><h4>Posgrado en diseño</h4></li>
174 |                         <li class="course-subtitle"><p>En curso - UFRJ</p></li>
175 |                     </ul>
176 |                 </div>
177 |             </div>
178 |         </section>
179 | 
180 |         <section class="experience" id="xp">
181 |             <h2 class="section-title" >Experiência Profissional</h2>
182 |             <div class="experiencia-box">
183 |                 <img src="assets\decod_print.png">
184 |                 <div class="info-container">
185 |                     <h2>Encriptador de texto</h2>
186 |                     <h3>Challenge Alura Codificador </h3>
187 |                         <div class="experience-description">
188 |                                 <span class="experience-repo"><a href="https://github.com/alura-challenges/challenge-one-encriptador-latam"><button>Repositório</button></a></span>
189 |                                 <span class="experience-demo"><a href=""><button>Ver demo</button></a></span>
190 |                         </div>
191 |                 </div>
192 |             </div>  
193 | 
194 |             <div class="experiencia-box">
195 |                 <img src="assets\forca_print.png">
196 |                 <div class="info-container">
197 |                     <h2>Juego creado con HTML y JavaScript</h2>
198 |                     <h3>Challenge Oracle </h3>
199 |                         <div class="experience-description">
200 |                                 <span class="experience-repo"><a href="https://github.com/alura-challenges/challenge-one-juego-ahorcado"><button>Repositório</button></a></span>
201 |                                 <span class="experience-demo"><a href=""><button>Ver demo</button></a></span>
202 |                         </div>
203 |                 </div>
204 |             </div>  
205 | 
206 |             <div class="experiencia-box">
207 |                 <img src="assets\secretcode_print.png">
208 |                 <div class="info-container">
209 |                     <h2>Encriptador de texto</h2>
210 |                     <h3>Challenge Oracle </h3>
211 |                         <div class="experience-description">
212 |                                 <span class="experience-repo"><a href="https://github.com/alura-challenges/challenge-one-encriptador-latam"><button>Repositório</button></a></span>
213 |                                 <span class="experience-demo"><a href=""><button>Ver demo</button></a></span>
214 |                         </div>
215 |                 </div>
216 |             </div>  
217 | 
218 |             <div class="experiencia-box">
219 |                 <img src="assets\forca2_print.png">
220 |                 <div class="info-container">
221 |                 <h2>Juego creado con HTML, CSS y JavaScript</h2>
222 |                     <h3>Challenge Oracle </h3>
223 |                         <div class="experience-description">
224 |                                 <span class="experience-repo"><a href="https://github.com/alura-challenges/challenge-one-juego-ahorcado"><button>Repositório</button></a></span>
225 |                                 <span class="experience-demo"><a href=""><button>Ver demo</button></a></span>
226 |                         </div>
227 |                 </div>
228 |             </div>  
229 |         </section>
230 |         
231 |         <section class="formcontato" id="contacto">
232 |                 <div  class="contact">
233 |                     <div class="esquerda">
234 |                         <img class="contact-img" src="assets\contact_image.png">
235 |                     </div>
236 |                     <div class="contact-text">
237 |                         <h2 class="contact-title">Contacto</h2>
238 |                         <h3 class="contact-subtext">¿Quieres contactarme?</h3>
239 |                         <h3 class="contact-subtext">Complete el siguiente formulario y me pondré en contacto con usted lo antes posible. </h3>
240 |                         <form class="form" name="form">
241 |                             <input type="text" name="nombre" placeholder="Nombre">
242 |                             <input type="email" name="email" placeholder="E-mail">
243 |                             <input type="text" name="asunto" placeholder="Assunto">
244 |                             <textarea rows="5" cols="40" id="mensagem" name="mensaje" placeholder="Mensaje"></textarea>
245 |                             <button type="submit">Enviar mensaje</button>
246 |                         </form>
247 |                     </div>
248 |                 </div>
249 |         </section>
250 | 
251 |         <section class="footer">
252 |                 <div class="rodape">
253 |                     <p>Desarrollado por Fulana de Tal</p>
254 |                     <p>2022</p>
255 |                 </div>
256 |         </section>
257 |     </div>
258 | <script src="validacion.js"></script>
259 | </body>
260 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /*CSS Reset / Normalize*/
  2 | 
  3 | 
  4 | body {
  5 |     box-sizing: border-box;
  6 |     background-color: #F5F5F5;
  7 |     cursor: pointer;
  8 |     font-family: 'Raleway';
  9 |     margin: 0;
 10 |     padding: 0;
 11 |     line-height: 1;
 12 |     width: 100vw;
 13 | }
 14 | 
 15 | ol,
 16 | ul,
 17 | li {
 18 |     list-style: none;
 19 | }
 20 | 
 21 | a {
 22 |     text-decoration: none;
 23 |     color: black;
 24 | }
 25 | 
 26 | textarea:focus,
 27 | input:focus,
 28 | select:focus {
 29 |     box-shadow: 0 0 0 0;
 30 |     border: 0 none;
 31 |     outline: 0;
 32 | }
 33 | 
 34 | 
 35 | /*Mobile First*/
 36 | .todo {
 37 |     margin: 0 16px 0 16px;
 38 |     display: flex;
 39 |     flex-direction: column;
 40 |     overflow: hidden;
 41 | }
 42 | 
 43 | /*Sessão Menu*/
 44 | 
 45 | section.menu {
 46 |     display: flex;
 47 |     justify-content: space-between;
 48 |     align-items: center;
 49 |     align-content: flex-end;
 50 |     height: 10vh;
 51 | }
 52 | 
 53 | section header {
 54 |     display: flex;
 55 |     align-items: center;
 56 |     justify-content: space-between;
 57 |     font-family: 'Raleway';
 58 |     font-weight: 700;
 59 |     font-size: 16px;
 60 |     color: #464646;
 61 | }
 62 | 
 63 | /*Sessão Title*/
 64 | 
 65 | section header h3.menu-title {
 66 |     margin-left: 8px;
 67 | }
 68 | 
 69 | section.menu nav ul.menu-list {
 70 |     display: none;
 71 | }
 72 | 
 73 | section.menu nav li {
 74 |     font-size: 14px;
 75 |     font-weight: 400;
 76 | 
 77 | }
 78 | 
 79 | section.title div.title-div div.title-container h2 {
 80 |     font-size: 22px;
 81 |     font-weight: 700;
 82 |     line-height: 26px;
 83 | }
 84 | 
 85 | section.title div.title-div div.title-container h3 {
 86 |     font-style: normal;
 87 |     font-weight: 400;
 88 |     font-size: 14px;
 89 |     line-height: 16px;
 90 | }
 91 | 
 92 | section.title div.title-div div.title-container ul {
 93 |     display: flex;
 94 |     justify-content: space-evenly;
 95 |     align-items: center;
 96 |     padding: 0;
 97 |     font-size: 14px;
 98 | }
 99 | 
100 | section.title img.profile {
101 |     width: 20%;
102 | }
103 | 
104 | .section-title {
105 |     font-weight: 700;
106 |     font-size: 22px;
107 |     line-height: 26px;
108 |     text-align: center;
109 | }
110 | 
111 | /*Sessão About*/
112 | 
113 | section.about {
114 |     background-color: #EAF2FD;
115 | }
116 | 
117 | 
118 | section.about div.about-container p {
119 |     font-weight: 400;
120 |     font-size: 14px;
121 |     line-height: 16px;
122 | }
123 | 
124 | section.about div.about-container img {
125 |     margin: 16px;
126 | }
127 | 
128 | /*Sessão Skill*/
129 | 
130 | section.skills div.skills-line {
131 |     display: flex;
132 |     flex-wrap: wrap;
133 |     width: 100vw;
134 |     justify-content: space-between;
135 | }
136 | 
137 | section.skills div.skills-line div.skills-box {
138 |     display: flex;
139 |     flex-direction: column;
140 |     justify-content: flex-end;
141 |     align-items: flex-start;
142 |     padding: 16px;
143 |     background-color: #fbfbfb;
144 |     margin: 22px 0 22px 0;
145 |     width: 156px;
146 |     height: 118px;
147 | }
148 | 
149 | section.skills div.skills-line div.skills-box ul {
150 |     margin: 0;
151 |     padding: 0;
152 | 
153 | }
154 | 
155 | /*Sessão Hobbies*/
156 | 
157 | section.hobbies-section div.hobbies-line {
158 |     display: flex;
159 |     flex-wrap: wrap;
160 |     width: 100vw;
161 |     justify-content: space-between;
162 | }
163 | 
164 | section.hobbies-section div.hobbies-line div.hobbies-box {
165 |     display: flex;
166 |     flex-direction: column;
167 |     justify-content: flex-end;
168 |     align-items: flex-start;
169 |     padding: 16px;
170 |     background-color: #fbfbfb;
171 |     margin: 15px 0 22px 0;
172 |     width: 156px;
173 |     height: 118px;
174 | }
175 | 
176 | section.hobbies-section div.hobbies-line div.hobbies-box ul {
177 |     margin: 0;
178 |     padding: 0;
179 | 
180 | }
181 | 
182 | /* Experiência Acadêmica*/
183 | 
184 | section.academic {
185 |     background-color: #EAF2FD;
186 | }
187 | 
188 | section.academic div.courses {
189 |     margin: 0 auto;
190 |     text-align: center;
191 | 
192 | }
193 | 
194 | section.academic div.courses ul {
195 | 
196 |     margin: 0;
197 |     padding: 0;
198 | 
199 | }
200 | 
201 | section.academic div.courses ul li {
202 |     padding: 0;
203 |     margin: 32px;
204 | }
205 | 
206 | section.academic div.courses ul li img:nth-child(1) {
207 |     margin-top: 18px;
208 | 
209 | }
210 | 
211 | section.academic div.courses ul li.course-img {
212 |     background-color: white;
213 | }
214 | 
215 | section.academic div.courses ul li.course-title h4 {
216 |     font-weight: 700;
217 |     font-size: 16px;
218 |     margin-bottom: -25px;
219 |     text-align: start;
220 | }
221 | 
222 | section.academic div.courses ul li.course-subtitle {
223 |     font-weight: 500;
224 |     font-size: 14px;
225 |     text-align: start;
226 | }
227 | 
228 | /* experiência*/
229 | 
230 | section.experience {
231 |     margin-top: 13px;
232 | }
233 | 
234 | section.experience div.experiencia-box {
235 |     margin: 0 32px 64px 32px;
236 | }
237 | 
238 | section.experience div.experiencia-box img {
239 |     margin-bottom: 16px;
240 | }
241 | 
242 | section.experience div.experiencia-box h2 {
243 |     font-weight: 700;
244 |     font-size: 16px;
245 | }
246 | 
247 | section.experience div.experiencia-box h3 {
248 |     font-weight: 500;
249 |     font-size: 14px;
250 | }
251 | 
252 | section.experience div.experiencia-box div.experience-description {
253 |     display: flex;
254 | }
255 | 
256 | section.experience div.experiencia-box span.experience-repo button {
257 |     display: flex;
258 |     flex-direction: row;
259 |     justify-content: center;
260 |     align-items: center;
261 |     padding: 12px 16px;
262 |     border: 1px solid #2A7AE4;
263 |     color: #2A7AE4;
264 |     box-sizing: border-box;
265 | }
266 | 
267 | section.experience div.experiencia-box span.experience-demo button {
268 |     display: flex;
269 |     flex-direction: row;
270 |     justify-content: center;
271 |     align-items: center;
272 |     padding: 12px 16px;
273 |     margin-left: 16px;
274 |     border: 1px solid #2A7AE4;
275 |     background: #2A7AE4;
276 |     color: white;
277 | }
278 | 
279 | section.experience img {
280 |     width: 100%;
281 | }
282 | 
283 | 
284 | /*Contato*/
285 | 
286 | section.formcontato {
287 |     background-color: #EAF2FD;
288 |     padding: 16px;
289 | }
290 | 
291 | section.formcontato div.esquerda img.contact-img {
292 |     display: none;
293 | }
294 | 
295 | section.formcontato div.contact div.contact-text h3.contact-subtext {
296 |     font-weight: 500;
297 |     font-size: 16px;
298 |     padding: 10px;
299 |     margin: 0;
300 | }
301 | 
302 | section.formcontato div.contact div.contact-text h2.contact-title {
303 |     font-weight: 700;
304 |     font-size: 22px;
305 |     padding: 10px;
306 | 
307 | }
308 | 
309 | section.formcontato form {
310 |     display: flex;
311 |     flex-direction: column;
312 |     align-items: flex-start;
313 |     padding: 10px;
314 |     margin: 0;
315 | }
316 | 
317 | section.formcontato form input {
318 |     border: transparent;
319 |     flex-grow: 1;
320 |     margin: 10px 0px;
321 |     height: 56px;
322 |     width: 80vw;
323 | }
324 | 
325 | form input::placeholder {
326 |     color: #464646;
327 |     font-family: 'Raleway';
328 | }
329 | 
330 | section.formcontato form input:focus {
331 |     border-bottom: solid 2px #2A7AE4;
332 | }
333 | 
334 | section.formcontato form textarea {
335 |     border: transparent;
336 |     flex-grow: 1;
337 |     margin: 10px 0px;
338 |     height: 96px;
339 |     width: 80vw;
340 | }
341 | 
342 | section.formcontato form textarea:focus {
343 |     border-bottom: solid 2px #2A7AE4;
344 | }
345 | 
346 | textarea::placeholder {
347 |     color: #464646;
348 |     font-family: 'Raleway'
349 | }
350 | 
351 | 
352 | form.form button {
353 |     border: transparent;
354 |     display: flex;
355 |     flex-direction: row;
356 |     justify-content: center;
357 |     align-items: center;
358 |     padding: 12px 16px;
359 |     background-color: #2A7AE4;
360 |     color: white;
361 |     margin: 32px 0;
362 | }
363 | 
364 | /*footeer*/
365 | 
366 | section.footer {
367 |     height: 10vh;
368 |     background-color: white;
369 | }
370 | 
371 | section.footer div.rodape {
372 |     font-weight: 500;
373 |     font-size: 16px;
374 |     line-height: 19px;
375 |     text-align: center;
376 | 
377 | }
378 | 
379 | @media (min-width: 700px) {
380 | 
381 |     .todo {
382 |         margin: 32px 32px;
383 |     }
384 | 
385 |     /*title*/
386 |     section.title {
387 |         margin-bottom: 32px;
388 |     }
389 | 
390 |     div.title-div {
391 |         justify-content: space-around;
392 |         align-content: flex-start;
393 |         display: flex;
394 |         flex-direction: row-reverse;
395 |     }
396 | 
397 |     div.title-container {
398 |         width: 524px;
399 | 
400 |     }
401 | 
402 |     section.title img.profile {
403 |         width: 157px;
404 |         margin-left: 32px;
405 |     }
406 | 
407 |     /*Skills*/
408 | 
409 |     section.skills div.skills-line {
410 |         width: 100%;
411 | 
412 |     }
413 | 
414 |     section.skills div.skills-line div.skills-box {
415 |         margin: 22px 12px 10px 0px;
416 |         width: 180px;
417 |         height: 118px;
418 |     }
419 | 
420 |     /*Hobbies*/
421 | 
422 |     section.hobbies-section div.hobbies-line {
423 |         width: 100%;
424 |     }
425 | 
426 |     section.hobbies-section div.hobbies-line div.hobbies-box {
427 |         margin: 22px 15px 10px 0px;
428 |         width: 180px;
429 |         height: 108px;
430 |     }
431 | 
432 |     /*experiências acadêmicas*/
433 | 
434 |     section.academic div.courses {
435 |         display: flex;
436 |         justify-content: space-around;
437 |     }
438 | 
439 |     section.academic div.courses-box {
440 |         width: 18rem;
441 |     }
442 | 
443 |     section.academic div.courses ul li.course-img img {
444 |         width: 50%;
445 |     }
446 | 
447 |     /*expeirência profissional*/
448 | 
449 |     section.experience div.experiencia-box {
450 |         display: flex;
451 |         flex-direction: column;
452 |     }
453 | 
454 |     section.experience div.experiencia-box img {
455 |         width: 100%;
456 |     }
457 | 
458 | }
459 | 
460 | @media (min-width: 1000px) {
461 | 
462 |     /*main*/
463 | 
464 |     .section-title {
465 |         font-size: 32px;
466 |     }
467 | 
468 |     /*Menu*/
469 | 
470 |     section.menu nav ul.menu-list {
471 |         display: flex;
472 |         justify-content: space-between;
473 |         font-size: 16px;
474 |         width: 600px;
475 |     }
476 | 
477 |     section.title div.title-div div.title-container h2 {
478 |         font-size: 52px;
479 |         font-weight: 700;
480 |         line-height: 50px;
481 |     }
482 | 
483 |     section.menu nav li.menu-list-item-c {
484 |         display: none;
485 |     }
486 | 
487 |     div.title-container {
488 |         width: 751px;
489 | 
490 |     }
491 | 
492 |     section.title img.profile {
493 |         width: 368px;
494 | 
495 |     }
496 | 
497 |     section.title div.title-div div.title-container ul {
498 |         display: flex;
499 |         margin-left: -65px;
500 |         align-items: center;
501 |         padding: 0px;
502 |         font-size: 16px;
503 |     }
504 | 
505 |     section.title div.title-div div.title-container h3 {
506 |         font-size: 17px;
507 |         line-height: 23px;
508 |     }
509 | 
510 |     /*Sessão sobre*/
511 | 
512 |     section.about {
513 |         padding: 62px 50px;
514 |     }
515 | 
516 |     div.about-container {
517 | 
518 |         height: 255px;
519 |     }
520 | 
521 |     /*Skills*/
522 | 
523 |     section.skills div.skills-line {
524 |         width: 100%;
525 | 
526 |     }
527 | 
528 |     section.skills div.skills-line div.skills-box {
529 |         margin: 22px 15px 22px 0px;
530 |         width: 108px;
531 |         height: 118px;
532 |     }
533 | 
534 |     /*Hobbies*/
535 | 
536 |     section.hobbies-section div.hobbies-line {
537 |         width: 100%;
538 |     }
539 | 
540 |     section.hobbies-section div.hobbies-line div.hobbies-box {
541 |         margin: 22px 15px 22px 0px;
542 |         width: 108px;
543 |         height: 108px;
544 |     }
545 | 
546 |     /*Formação Acadêmica*/
547 | 
548 |     section.academic div.courses-box {
549 |         width: 380px;
550 | 
551 |     }
552 | 
553 |     section.academic div.courses ul li.course-img img {
554 |         width: 70%;
555 |     }
556 | 
557 |     section.academic div.courses ul li.course-img {
558 |         padding: 30px 30px;
559 |     }
560 | 
561 |     section.academic {
562 |         margin-top: 82px;
563 |     }
564 | 
565 |     /*Experiência Profissional*/
566 | 
567 |     section.experience div.experiencia-box {
568 |         display: flex;
569 |         flex-direction: row;
570 |         justify-content: center;
571 |     }
572 | 
573 |     section.experience div.experiencia-box:nth-child(2) {
574 |         margin-top: 50px;
575 |     }
576 | 
577 |     section.experience div.experiencia-box:nth-child(3) {
578 |         flex-direction: row-reverse;
579 |     }
580 | 
581 |     section.experience div.experiencia-box:nth-child(5) {
582 |         flex-direction: row-reverse;
583 |     }
584 | 
585 |     section.experience div.info-container {
586 |         margin: 0 5%;
587 |     }
588 | 
589 |     section.experience div.experiencia-box img {
590 |         width: 50%;
591 |     }
592 | 
593 |     /*Contato*/
594 | 
595 |     section.formcontato div.contact {
596 |         display: flex;
597 |         justify-content: center;
598 |     }
599 | 
600 |     section.formcontato div.contact-text {
601 |         display: flex;
602 |         flex-direction: column;
603 |         margin-left: 2%;
604 |         margin-top: -2%;
605 |     }
606 | 
607 |     section.formcontato div.esquerda img.contact-img {
608 |         display: block;
609 |         width: 464px;
610 |         height: 570px;
611 |     }
612 | 
613 |     section.formcontato form input {
614 |         width: 100%;
615 |     }
616 | 
617 |     section.formcontato form textarea {
618 |         width: 100%;
619 |     }
620 | 
621 |     /*Footer*/
622 | 
623 |     section.footer div.rodape {
624 |         line-height: 10px;
625 |         font-size: 16px;
626 |         font-weight: 500;
627 |         text-align: center;
628 |         padding: 1%;
629 |     }
630 | }
631 | 
632 | @media (min-width: 1440px) {
633 | 
634 |     div.about-container {
635 | 
636 |         height: 255px;
637 |     }
638 | 
639 |     section.skills div.skills-line {
640 |         justify-content: center;
641 |     }
642 | 
643 |     section.skills div.skills-line div.skills-box {
644 |         margin: 22px 15px 22px 0px;
645 |         width: 156px;
646 |         height: 118px;
647 |     }
648 | 
649 |     section.hobbies-section div.hobbies-line {
650 |         justify-content: center;
651 |     }
652 | 
653 |     section.hobbies-section div.hobbies-line div.hobbies-box {
654 |         margin: 22px 15px 22px 0px;
655 |         width: 156px;
656 |         height: 118px;
657 |     }
658 | 
659 |     section.formcontato {
660 |         padding: 64px 172px;
661 |     }
662 | }


--------------------------------------------------------------------------------