primeiro commit site

3 years ago · bc6d89e11f
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,199 @@
 body {
    color: #40514e;
    margin: 0;
    text-align: center;
    font-family: verdana, sans-serif;
    font-size: 20px;
 }
 h1 {
   margin: 50px auto 0 auto;
   font-size: 5.625rem;
   font-family: Verdana, sans-serif;
   color: #66BFBF;
   line-height:2;
 }
 h2 {
    color: #66BFBF;
    font-family: Verdana, sans-serif;
    font-size: 2.5rem;
    font-weight: normal;
    padding-bottom: 10px;
 }
 h3 {
    font-family: Verdana, sans-serif;
    font-size: 2.5rem;
    color: #11999E;
 }
 p {
    line-height: 2;
 }
 hr {
    border: dotted #eaf6f6 6px;
    border-bottom: none;
    width: 4%;
    margin-bottom: 100px auto;
 }
 a {
    color: #11999E;
 }
 .contact-message {
    width: 40%;
    margin: 50px auto 50px;
 }
 .top-container {
   background-color: #E4F9F5;
   position: relative;
   padding-top: 100px;
 }
 .middle-container {
    margin-top: 100px;
    margin-bottom: 100px;
 }
 .bottom-container {
    background-color: #66BFBF;
    padding: 50px 0 20px;
    /* width: 100%;
    padding-top: 100px; */
 }
 .skill-row {
    width: 50%;
    margin: 100px auto 100px auto;
    text-align: left;
    line-height: 2;
 }
 .pro {
    text-decoration: underline;
 }
 .intro {
    width: 30%;
    margin: auto;
 }
 a img {
    position: relative;
    bottom: 45px;
 }
 .top-cloud {
    position: absolute;
    right: 300px;
    top: 40px;
 }
 .bottom-cloud{
    position: absolute;
    left: 250px;
    bottom: 300px;;
 }
 table {
    width: 100%;
    margin-bottom: .5em;
    table-layout: fixed;
    text-align: center;
 }
 .footer-link {
    color: #11999E;
 }
 .experience {
    width: 25%;
    float: right;
    margin-left: 30px;
    clear: right;
 }
 .web-development {
    width: 25%;
    float: left;
    margin-right: 30px;
    clear: right;
 }
 .certificate {
    width: 25%;
    float: right;
    margin-right: 30px;
    clear: right;
 }
 .diplome {
    width: 25%;
    float: left;
    margin-right: 30px;
    clear: left;
 }
 .contact-me {
    border-radius: 8;
    /* color:#11cdd4; */
    margin-bottom: 100px;
 }
 .btn {
    background: #11cdd4;
    background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
    background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
    background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
    background-image: -o-linear-gradient(top, #11cdd4, #11999e);
    background-image: linear-gradient(to bottom, #11cdd4, #11999e);
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    text-shadow: 1px 1px 3px #666666;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
  }
  .btn:hover {
    background: #30e3cb;
    background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
    background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
    text-decoration: none;
  }
  .footer-link {
      color: #11999E;
      margin: 10px 20px;
      text-decoration: none;
  }
  .footer-link:hover {
      color: #eaf6f6;
  }
  .copyright {
      color: #eaf6f6;
      font-size: 0.75rem;
      padding: 20px 0;
  }
--- a/img/books.png
+++ b/img/books.png
--- a/img/cloud.png
+++ b/img/cloud.png
--- a/img/diploma-de-graduacao.png
+++ b/img/diploma-de-graduacao.png
--- a/img/diploma.png
+++ b/img/diploma.png
--- a/img/experiencia-de-trabalho.png
+++ b/img/experiencia-de-trabalho.png
--- a/img/mountain.png
+++ b/img/mountain.png
--- a/img/oceano.png
+++ b/img/oceano.png
--- a/img/profil.jpg
+++ b/img/profil.jpg
--- a/img/web-development-code.png
+++ b/img/web-development-code.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,99 @@
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
    <meta charset="UTF-8">
    <title>Hussyvel Ribeiro da Silva</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="img/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
 </head>
 <body>
  <header>
    <div class="top-container">
        <img class="top-cloud" src="img/cloud.png" alt="cloud-img">
        <h1>I'm Hussyvel</h1>
        <h2>a Software Engineer</h2>
        <img class="bottom-cloud" src="img/cloud.png" alt="cloud-img">
        <img src="img/oceano.png" alt="mountain">
    </div>
  </header>
    <br>
    <br>
    <br>
    <br>
    <div class="middle-container">
        <div class="profile">
          <img src="img/profil.jpg" alt="My profile">
          <h2>Hi, welcome!!!</h2>
          <p class="intro">I'm a software engineer 💻, develop with Reactjs, Nodejs and Ruby on Rails. I like coffee, sandwiches, video games, singing, football and others... </p>
        <a href="moreaboutme.html">Segunda página</a>
 	<a href="./subsite/index.html">Segundo site - subsite</a>
 	</div>
        <hr>
      <main>
        <div class="skill-row">
            <img class="experience" src="img/experiencia-de-trabalho.png" alt="experience">
            <h3>Professional Experience</h3>
            <p>Hi, my name is Hussyvel. Welcome to my profile. I have a generalist profile for programming languages, I have a Bachelor's Degree in Information Systems from FACIMP. I currently work with Nodejs, Java, javascript and Oracle plsql developer. My main tools are: Intellij and VSCode. I also develop with Reactjs and Ruby on Rails, I use Git for versioning, and my main operating system is Linux Ubuntu. I take online English courses like Duolingo, Seda College and LingQ. I read IT ebooks and study for various programming platforms like: Udemy, Freecodecamp, hackerrank, Alura and Github.</p>
          </div>
        </div>
        <hr>
      </main>
        <br>
        <br>
        <br>
        <br>
      <section>
        <section class="skills">
          <h2>My Skills</h2>
          <div class="skill-row">
            <img class="web-development" src="img/web-development-code.png" alt="web-development">
            <h3>Design & Development</h3>
            <p class="code-skill-description">I'm a Software Engineer, working with Ruby on Rails, React, Nodejs, Linux, Windows,<a href="https://github.com/hussyvel?tab=repositories">Github </a>, Git, PLSQL and others. I have some projects on github and <a href="https://www.youtube.com/channel/UCuwfPFXsuLuzwBxlnCMpRNw">youtube channel.</a></p>
        </div>
        <hr>
        <br>
        <br>
        <br>
        <br>
        <div class="skill-row">
            <img class="certificate" src="img/books.png" alt="books">
            <h3>Certificate</h3>
            <p class="">I like to take programming courses in technologies: Javascript, Nodejs, Reactjs, Typescript, Ruby On Rails among others. I also like to improve skills with Linux, Git, Github. With Postgresql, Mysql, PLSQL and SQL Server study database.</p>
        </div>
        <hr>
        <br>
        <br>
        <br>
        <br>
        <div class="skill-row">
            <img class="diplome" src="img/diploma-de-graduacao.png" alt="diplome">
            <h3>Diploma</h3>
            <p>Bachelor of Information Systems from FACIMP in 2014</p>
        </div>
        <hr>
      </section>
        <br>
        <br>
        <br>
        <br>
    <footer>
        <div class="contact-me">
          <h2>Get In Touch</h2>
          <h3>talk to me? no problems...</h3>
          <p class="contact-message">If you want to talk about work, opportunities or even conversations about technology and culture, <br> you can send me an email, or on social media.</p>
          <a class="btn" href="mailto:hussyribeiro@hotmail.com">CONTACT ME</a>
        </div>
      <div class="bottom-container">
        <a class="footer-link" href="https://www.linkedin.com/in/hussyvelribeiro/">Linkedin</a>
        <a class="footer-link" href="https://twitter.com/hussyvel">Twitter</a>
        <a class="footer-link" href="https://hussyvel.github.io/">Website</a>
        <a class="footer-link" href="http://api.whatsapp.com/send?1=pt_BR&phone=5599981522892">Whatsapp</a>
        <p class="copyright">© 2022 Hussyvel Ribeiro </p>
      </div>
      </div>
    </footer>
 </body>
 </html>
--- a/moreaboutme.html
+++ b/moreaboutme.html
@ -0,0 +1,72 @@
 <!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>About me </title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="img/favicon.ico">
 </head>
 <body>
    <header>
        <div class="top-container">
            <img class="top-cloud" src="img/cloud.png" alt="cloud-img">
            <h1>I'm Hussyvel</h1>
            <h2>a Software Engineer</h2>
            <img class="bottom-cloud" src="img/cloud.png" alt="cloud-img">
            <img src="img/oceano.png" alt="mountain">
        </div>
      </header>
      <main>
        <div class="skill-row">
            <img class="experience" src="img/experiencia-de-trabalho.png" alt="experience">
            <h3>Professional Experience</h3>
            <p>Durante minha experiência profissional recente, passei por algumas empresas que foram importantes para que eu me desenvolvesse ainda mais como profissional,
                aqui estão um pouco mais sobre meu trabalho nessas empresas:
            </p>
            <a href="index.html">Página principal</a>
          </div>
        </div>
      </main>
      <section>
        <section class="skills">
            <h2>Philips</h2>
            <div class="skill-row">
              <img class="web-development" src="img/web-development-code.png" alt="web-development">
              <h3>At Philips</h3>
              <p class="code-skill-description">        At Philips, I worked with code maintenance on frontend screens with Javascript. No backend used Java for analytics and business rules. As a database I used Oracle's PLSQL performing queries on the tables.At Philips, I worked with code maintenance on frontend screens with Javascript. No backend used Java for analytics and business rules. As a database I used Oracle's PLSQL performing queries on the tables.
                Skills: Java · PL/SQL · Networking · AngularJS · Software Development · Node.js · JavaScript · Oracle Database · Object-Oriented Programming (OOP) · Databases · Front-End Development · GitHub · Git · English · Inglês · TypeScript
                 <a href="https://github.com/hussyvel?tab=repositories">Github </a>, Git, PLSQL and others. I have some projects on github and <a href="https://www.youtube.com/channel/UCuwfPFXsuLuzwBxlnCMpRNw">youtube channel.</a></p>
          </div>
          <section class="skills">
            <h2>Mateus supermercados</h2>
            <div class="skill-row">
              <img class="web-development" src="img/web-development-code.png" alt="web-development">
              <h3>At Mateus supermercados</h3>
              <p class="code-skill-description">  
                I work with c ++ language and the QT framework for the development / creation of screens. Use the SQL Server database for queries and procedures such as: creating tables, making inner joins, selects and various changes. I also use the GIT version system: I do git commit, git add, git pull, git push among others. I also work as a business analyst, understanding the idea and the emergence of the problem and trying to solve it with programming and / or support.I work with c ++ language and the QT framework for the development / creation of screens. Use the SQL Server database for queries and procedures such as: creating tables, making inner joins, selects and various changes. I also use the GIT version system: I do git commit, git add, git pull, git push among others. I also work as a business analyst, understanding the idea and the emergence of the problem and trying to solve it with programming and / or support.
 Skills: C (Programming Language) · Software Development · Object-Oriented Programming (OOP) · Databases · Microsoft SQL Server · SQL
            <a href="https://github.com/hussyvel?tab=repositories">Github </a>, Git, PLSQL and others. I have some projects on github and <a href="https://www.youtube.com/channel/UCuwfPFXsuLuzwBxlnCMpRNw">youtube channel.</a></p>
          </div>
     </section>
     <footer>
        <div class="contact-me">
          <h2>Get In Touch</h2>
          <h3>talk to me? no problems...</h3>
          <p class="contact-message">If you want to talk about work, opportunities or even conversations about technology and culture, <br> you can send me an email, or on social media.</p>
          <a class="btn" href="mailto:hussyribeiro@hotmail.com">CONTACT ME</a>
        </div>
      <div class="bottom-container">
        <a class="footer-link" href="https://www.linkedin.com/in/hussyvelribeiro/">Linkedin</a>
        <a class="footer-link" href="https://twitter.com/hussyvel">Twitter</a>
        <a class="footer-link" href="https://hussyvel.github.io/">Website</a>
        <a class="footer-link" href="http://api.whatsapp.com/send?1=pt_BR&phone=5599981522892">Whatsapp</a>
        <p class="copyright">© 2022 Hussyvel Ribeiro </p>
      </div>
      </div>
    </footer>
 </body>
 </html>
--- a/subsite/css/style.css
+++ b/subsite/css/style.css
@ -0,0 +1,73 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 * {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
 }
 #menu-h {
    background-color:rgb(41, 41, 43);
 }
 #menu-h ul{
    max-width: 850px;
    list-style:none;
    padding: 0;
 }
 #menu-h ul li{
    display: inline;
 }
 #menu-h ul li a{
    color: #fff;
    text-decoration: none;
    display: inline-block;
    padding: 20px;
    transition: .6s;
 }
 #menu-h ul li a:hover{
    background-color:rgb(50, 112, 160);
 }
 #menu-h ul li:last-child a {
    float: right;
    background-color:rgb(50, 112, 160);
 }
 #about {
    max-width: 800px;
    padding: 60px;
 }
 #about h2{
    line-height: 5;
 }
 #form {
    max-width: 800px;
    line-height: 2;
 }
 #form form{
    margin-top: 50px;
 }
 #form h2{
    margin-top: 100px;
 }
 #intro{
    max-width: 800px;
    line-height: 3;
    margin-top: 50px;
 }
 #intro h2 {
    line-height: 80px;
 }
--- a/subsite/index.html
+++ b/subsite/index.html
@ -0,0 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu horizontal</title>
    <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
    <nav id="menu-h">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="./subpasta/pagina2.html">Sobre</a></li>
            <li><a href="./subpasta/pagina3.html">Contato</a></li>
 	    <li><a href="./webroot/index.html">Retornar ao primeiro site</a></li>
            <li><a href="#">entrar</a></li>
        </ul>
    </nav>
    <section id="intro">
        <h2>Introdução</h2>
        <p>Esta é uma página desenvolvida para um exercício. Nela criei um
            menu que vai para outras duas páginas que estão localizadas em uma
            subpasta do qual as chamei pela âncora.
        </p>
    </section>
 </body>
 </html>
--- a/subsite/subpasta/pagina2.html
+++ b/subsite/subpasta/pagina2.html
@ -0,0 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu horizontal</title>
    <link rel="stylesheet" href="/subsite/css/style.css">
 </head>
 <body>
    <nav id="menu-h">
        <ul>
            <li><a href="/subsite/index.html">Home</a></li>
            <li><a href="/subsite/subpasta/pagina2.html">Sobre</a></li>
            <li><a href="/subsite/subpasta/pagina3.html">Contato</a></li>
            <li><a href="#">entrar</a></li>
        </ul>
    </nav>
    <section id="about">
        <h2>Aboute me</h2>
        <p>Welcome to my profile.
        I have a Bachelor's Degree in Information Systems from FACIMP.
        I have 3 years experience as a programmer:
        </p>
        <br>
        <p>
            Ruby on Rails
            https://www.youtube.com/watch?v=V62AU2PT898
            https://github.com/hussyvel/to_do_list
            https://github.com/hussyvel/ruby
        </p>
        <br>
        <p>    
            Nodejs
            https://github.com/hussyvel/maratona-dev-hussyvel
            https://github.com/hussyvel/Javascript
        </p>
        <br>
        <p>    
            HTML5, CSS3, JavaScript
            https://github.com/hussyvel/Javascript
            https://github.com/hussyvel/logic;
            https://github.com/hussyvel/barbearia;
        </p>
        <br>
        <p>    
            Version Control: Git;
        </p>
        <br>
        <p>    
            S.O.: Linux Ubuntu and windows;
        </p>
    </section>
 </body>
 </html>
--- a/subsite/subpasta/pagina3.html
+++ b/subsite/subpasta/pagina3.html
@ -0,0 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu horizontal</title>
    <link rel="stylesheet" href="/subsite/css/style.css">
 </head>
 <body>
    <nav id="menu-h">
        <ul>
            <li><a href="/subsite/index.html">Home</a></li>
            <li><a href="/subsite/subpasta/pagina2.html">Sobre</a></li>
            <li><a href="/subsite/subpasta/pagina3.html">Contato</a></li>
            <li><a href="#">entrar</a></li>
        </ul>
    </nav>
        <address id="form">
            <h2>Deseja entrar em contato comigo?</h2>
            <div>
            <form action="/index.html">
                <label for="fname">First name:</label><br>
                <input type="text" id="fname" name="fname" value="Hussyvel"><br>
                <label for="lname">Last name:</label><br>
                <input type="text" id="lname" name="lname" value="Silva"><br>
                <label for="email">Enter your email:</label><br>
                <input type="email" id="email" name="hussyribeiro@hotmail.com">
                <input type="submit" value="Submit">
            </form>
            </div> 
        </address>
 </body>
 </html>