Finalizado as páginas da área de conhecimento

AlexeyFrens · Nov 17, 2023 · 2644951 · 2644951
1 parent e0f385d
commit 2644951
Show file tree

Hide file tree

Showing 14 changed files with 158 additions and 27 deletions.
diff --git a/1work-art.html b/1work-art.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="pt">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Portfólio</title>
+  <link rel="shortcut icon" href="image/feather-solid.svg" type="image/x-icon" />
+  <link rel="stylesheet" href="css/work-human.css" />
+  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+  <script src="/js/index.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+</head>
+
+<body class="background-body">
+  <section class="section-content">
+
+    <a class="home" href="index.html"><img src="image/home.svg" alt=""></a>
+
+    <h1 class="title">Criação de obra Pop Art</h1>
+    <h2 class="subtitle">Atividade de Artes</h2>
+
+    <p class="textin">Nesse trabalho era preciso fazer uma arte utilizando o método Pop Art, essa arte deveria criticar
+      algo relacionado ao cotidiano, precisavamos também fazer um jingle. Gostei bastante dessa atividade já que eu
+      gostei da arte criada por nós.
+    </p>
+
+    <div id="carouselExample" class="carousel slide">
+      <div class="carousel-inner">
+        <div class="carousel-item active">
+          <img src="/image/ti1.PNG" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="image/ti2.PNG" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="image/ti3.PNG" class="d-block w-100" alt="...">
+        </div>
+      </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+      </button>
+    </div>
+
+    <h3 class="other-title">Jingle</h3>
+
+    <audio class="audiooo" src="/image/Recording_135.mp3" controls></audio>
+  </section>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+  integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
+  </script>
+
+</html>
diff --git a/1work-hyper.html b/1work-hyper.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="pt">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Portfólio</title>
+  <link rel="shortcut icon" href="image/feather-solid.svg" type="image/x-icon" />
+  <link rel="stylesheet" href="css/work-human.css" />
+  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+  <script src="/js/index.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+</head>
+
+<body class="background-body">
+  <section class="section-content">
+
+    <a class="home" href="index.html"><img src="image/home.svg" alt=""></a>
+
+    <h1 class="title">Projeto</h1>
+    <h2 class="subtitle">Hyper Powered</h2>
+
+    <p class="textin">
+      Esse é com certeza o maior projeto que eu estou trabalhando em minha vida inteira. Simplesmente
+      iremos criar uma empresa com diversos serviços que permitem a facilidade do acesso dos usuários à questões
+      importantes hoje em dia. <br><br>
+
+      Serviços: <br>
+      Wolke - Um serviço de Desktop as a Service e Cloud Gamming, onde o usuário pode acessar um computador bem poderoso
+      de qualquer lugar e com qualquer dispositivo (TV, celular, computador mais fraco, etc); <br><br>
+      Hospedagem - Um serviço que vamos realizar a hospedagem do site do usuário com bastante facilidade e com seu
+      próprio DNS que fornecemos; <br><br>
+      VPN - Um serviço que permite que o usuário consiga uma melhor privacidade, obtendo um IP de outro PC em outra
+      localidade do mundo, permitindo também que esse usuário acesse conteúdos censurados de governos totalitários. <br><br>
+
+      Trailer: <br><br>
+      <iframe width="800" height="440" src="https://www.youtube.com/embed/E9VS6P0f4wU?si=xhMcNca6VgPWyUDW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><br><br>
+
+      Site:
+
+      <a href="https://wolke.hyperpowered.net/" target="_blank"><img class="wolke-img" src="image/wolke.png" alt="Logo da empresa Wolke"></a>
+    </p>
+
+    <div id="carouselExample" class="carousel slide">
+      <div class="carousel-inner">
+        <div class="carousel-item active">
+          <img src="/image/wolke1.png" class="d-block w-100" alt="...">
+        </div>
+        <div class="carousel-item">
+          <img src="image/wolke2.PNG" class="d-block w-100" alt="...">
+        </div>
+      </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+      </button>
+    </div>
+  </section>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+  integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
+  </script>
+
+</html>
diff --git a/1work-ti.html b/1work-ti.html
@@ -18,30 +18,24 @@
 
     <a class="home" href="index.html"><img src="image/home.svg" alt=""></a>
 
-    <h1 class="title">PORTFÓLIO</h1>
-    <h2 class="subtitle">Atividade Integrada de Humanas</h2>
+    <h1 class="title">Clone da Netflix</h1>
+    <h2 class="subtitle">Atividade Integrada de TI</h2>
 
-    <p class="textin">Nesse trabalho era preciso fazer um portfólio das aulas de humanas, escolhendo as aulas que eu mais gostei,
-      colocando imagens e explicando o por que eu gostei. Achei que esse foi um dos melhores trabalhos que eu fiz nessa
-      área pelo fato de eu ter demorado bastante para realizá-la.
+    <p class="textin">Nesse trabalho era preciso fazer um aplicativo que utiliza-se basicamente banco de dados, também
+      tinha alguns critérios como ser seguro contra SQL Injection, Phishing, etc. Gostei bastante desse trabalho, pois
+      fizemos um clone da Netflix e eu gostei muito do resultado, dava até para assistir alguns trailers.
     </p>
 
     <div id="carouselExample" class="carousel slide">
       <div class="carousel-inner">
         <div class="carousel-item active">
-          <img src="/image/human.PNG" class="d-block w-100" alt="...">
+          <img src="/image/ti1.PNG" class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
-          <img src="image/human2.PNG" class="d-block w-100" alt="...">
+          <img src="image/ti2.PNG" class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
-          <img src="image/human3.PNG" class="d-block w-100" alt="...">
-        </div>
-        <div class="carousel-item">
-          <img src="image/human4.PNG" class="d-block w-100" alt="...">
-        </div>
-        <div class="carousel-item">
-          <img src="image/human5.PNG" class="d-block w-100" alt="...">
+          <img src="image/ti3.PNG" class="d-block w-100" alt="...">
         </div>
       </div>
       <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">

diff --git a/css/index.css b/css/index.css
@@ -289,13 +289,6 @@ body {
   text-align: center;
 }
 
-.final{
-  width: 900px;
-  padding-top: 50px;
-  padding-bottom: 40px;
-  text-align: center;
-}
-
 .palavras-finais{
   color: #fff;
   font-family: 'Poppins', sans-serif;

diff --git a/css/work-human.css b/css/work-human.css
@@ -54,6 +54,19 @@ body {
   width: 900px;
 }
 
+.other-title{
+  margin-top: 20px;
+  text-align: center;
+  width: 800px;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 10px;
+}
+
+.audiooo{
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
 p, h1{
   margin-left: 50px;
   margin-right: 50px;
@@ -67,4 +80,9 @@ h2{
   margin-top: 20px;
   margin-bottom: 20px;
   color: #fff;
+}
+
+.wolke-img{
+  width: 100px;
+  margin-left: 10px;
 }
diff --git a/image/Recording_135.mp3 b/image/Recording_135.mp3
diff --git a/image/ti1.PNG b/image/ti1.PNG
diff --git a/image/ti2.PNG b/image/ti2.PNG
diff --git a/image/ti3.PNG b/image/ti3.PNG
diff --git a/image/wolke.png b/image/wolke.png
diff --git a/image/wolke1.png b/image/wolke1.png
diff --git a/image/wolke2.PNG b/image/wolke2.PNG
diff --git a/index.html b/index.html
@@ -64,12 +64,12 @@ <h1 class="next-information">Informações pessoais</h1>
         <div class="content-human">
           <img class="img-human" src="/image/arte.jpg" alt="" />
           <p class="human">Criação de uma obra em pop art</p>
-          <a href="1work-human.html" class="img-next">►</a>
+          <a href="1work-art.html" class="img-next">►</a>
         </div>
         <div class="content-human">
           <img class="img-proj" src="/image/hyperwhite.png" alt="" />
           <p class="human">Projeto - Hyper Powered</p>
-          <a href="1work-human.html" class="img-next">►</a>
+          <a href="1work-hyper.html" class="img-next">►</a>
         </div>
       </div>
       <div class="info">
@@ -193,9 +193,6 @@ <h1 class="portfolio-title">Um pouco mais sobre mim</h1>
           </div>
         </div>
       </div>
-      <div class="final">
-        <p class="palavras-finais">Obrigado por visualizar meu site!!!</p>
-      </div>
     </div>
   </section>
 </body>

diff --git a/js/index.js b/js/index.js
@@ -15,11 +15,11 @@ $(document).ready(function () {
         $("#botao-config").css("background-color", coresGerais);
         $("#botao-config").css("border", "2px solid " + coresGerais);
         $(".title").css("color", coresGerais);
+        $(".other-title").css("color", coresGerais);
         $(".subtitle").css("color", coresGerais);
         $(".home").css("background-color", coresGerais);
     }
     if (coresTexto) {
         $("#botao-config").css("color", coresTexto);
-        $(".palavras-finais").css("color", coresTexto);
     }
 });