mlearnbr · wemersonnino · Mar 1, 2020 · Mar 1, 2020 · Mar 1, 2020 · Mar 1, 2020
diff --git a/rodrigo-longuinhos/audio/Star_Wars_original_opening_crawl_1977.mp3 b/rodrigo-longuinhos/audio/Star_Wars_original_opening_crawl_1977.mp3
diff --git a/rodrigo-longuinhos/catalogo.html b/rodrigo-longuinhos/catalogo.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <!-- Metas -->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Star Wars - mLearn Frontend Challenge</title>
+    <meta name="description" content="Desafio de Frontend da mLearn">
+    <meta name="keywords" content="frontend,mobile first,layout responsivo,javascript,aplicativos híbridos">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="index, follow">
+    <!-- Fonts/links -->
+	<link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,300,700" rel="stylesheet" type="text/css">
+    <link rel="icon" href="img/favicon.png">
+    <!-- Scripts -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+</head>
+<body>
+    <header class="cabecalho">
+        <a href="index.html"><h1 class="logo"> Star Wars - mLearn Frontend Challenge ></h1></a>
+        <button class="btn-menu"><i class="fa fa-bars fa-lg"></i></button>
+        <nav class="menu">
+            <a class="btn-close"><i class="fa fa-times"></i></a>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="catalogo.html?id=1">Catálogo</a></li>
+                <li><a href="pesquisar.html">Pesquisar</a></li>
+                <li><a href="resultado.html">Resultado</a></li>
+                <li><a href="sobre.html">Sobre</a></li>
+            </ul>
+        </nav>
+    </header>
+    <div class="banner">
+        <div class="catalogo">
+            <h2>Catálogo</h2>
+            <form>
+                <input type="text" name="name" placeholder="name" disabled>
+                <input type="text" name="species" placeholder="species" disabled>
+                <input type="text" name="birth_year" placeholder="birth_year" disabled>
+                <button name="btNext" id="btNext" onclick=""> Próximo </button>
+            </form>
+
+            <!-- script para buscar a query string de interesse -->
+            <script>
+                var getUrlParameter = function getUrlParameter(sParam) {
+                     var sPageURL = window.location.search.substring(1),
+                         sURLVariables = sPageURL.split('&'),
+                         sParameterName,
+                         i;
+
+                     for (i = 0; i < sURLVariables.length; i++) {
+                         sParameterName = sURLVariables[i].split('=');
+
+                         if (sParameterName[0] === sParam) {
+                             return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
+                         }
+                     }
+                 };
+            </script>
+
+            <!-- script para carregar nos inputs os valores do json -->
+            <script>
+                var id = getUrlParameter('id');
+                var url = 'https://swapi.co/api/people/' + id;
+                    $.getJSON(url, function (cardStarWars) {
+                        console.log(cardStarWars.name);
+                        $("input:nth-child(1)").attr('value', cardStarWars.name);
+                        $("input:nth-child(2)").attr('value', cardStarWars.birth_year);
+                        $('input:nth-child(3)').attr('value',cardStarWars.species);                 
+                   })
+            </script>         
+
+            <!-- script que carrega próximo registro da api -->
+            <script>
+                $('#btNext').click(function() {
+                    var id = getUrlParameter('id');
+                    id++;
+                    window.location.href = 'catalogo.html?id=' + id;
+                    return false;
+                    })
+            </script> 
+
+
+        </div>
+        <div class="titulo">
+            <h3>All the Star Wars data you've ever wanted:
+                Planets, Spaceships, Vehicles, People, Films and Species
+                From all SEVEN Star Wars films
+                Now with The Force Awakens data!</h3>
+        </div>
+    </div> 
+    <footer class="rodape">
+        <div class="social-icons">
+            <a href="#"><i class="fa fa-facebook"></i></a>
+            <a href="#"><i class="fa fa-twitter"></i></a>
+            <a href="#"><i class="fa fa-google"></i></a>
+            <a href="#"><i class="fa fa-instagram"></i></a>
+            <a href="#"><i class="fa fa-envelope"></i></a>
+        </div>
+        <p class="copyright">Copyright Desafio mLearn 2020. Todos os direitos reservados</p>
+    </footer>   
+    <script>
+        $(".btn-menu").click(function(){
+            $(".menu").show();
+        })
+        $(".btn-close").click(function(){
+            $(".menu").hide();
+        })
+    </script>
+</body>
+</html>
diff --git a/rodrigo-longuinhos/css/bootstrap.min.css b/rodrigo-longuinhos/css/bootstrap.min.css
diff --git a/rodrigo-longuinhos/css/font-awesome.min.css b/rodrigo-longuinhos/css/font-awesome.min.css
diff --git a/rodrigo-longuinhos/css/starwars.css b/rodrigo-longuinhos/css/starwars.css
@@ -0,0 +1,147 @@
+/*=========== RESET ===========*/
+* {
+    margin: 0;
+    padding: 0;
+    font-size: 100%;
+    border: none;
+    outline: none;
+    font-weight: 300;
+    box-sizing: border-box;
+    font-family: 'Lato', sans-serif;
+}
+
+body {
+    margin: 0;
+    background-color: black;
+}
+
+.star {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    background-color: white;
+}
+
+/* Center it, set the color, size and hide the text */
+.intro {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    z-index: 1;
+    animation: intro 6s ease-out 1s;
+    color: rgb(75, 213, 238);
+    font-weight: 400;
+    font-size: 300%;
+    opacity: 0;
+}
+
+@keyframes intro {
+    0% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 1;
+    }
+    90% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Set the animation & hide the logo */
+.logo {
+    position: absolute;
+    top: 38%;
+    left: 25%;
+    z-index: 1;
+    margin: auto;
+    animation: logo 9s ease-out 9s;
+    opacity: 0;
+}
+
+.logo svg {
+    width: inherit;
+}
+
+/* Scale the logo down and maintain it centered */
+@keyframes logo {
+    0% {
+        width: 18em;
+        transform: scale(2.75);
+        opacity: 1;
+    }
+    50% {
+        opacity: 1;
+        width: 18em;
+    }
+    100% {
+        opacity: 0;
+        transform: scale(0.1);
+        width: 18em;
+    }
+}
+
+p {
+    color: #FFFF82;
+}
+
+/* Set the font, lean the board, position it */
+#board {
+    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
+    transform: perspective(300px) rotateX(25deg);
+    transform-origin: 50% 100%;
+    text-align: justify;
+    position: absolute;
+    margin-left: -9em;
+    font-weight: bold;
+    overflow: hidden;
+    font-size: 350%;
+    height: 50em;
+    width: 18em;
+    bottom: 0;
+    left: 50%;
+}
+
+#board:after {
+    position: absolute;
+    content: ' ';
+    bottom: 60%;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+
+/* Set the scrolling animation and position it */
+#content {
+    animation: scroll 100s linear 16s;
+    position: absolute;
+    top: 100%;
+}
+
+#title, #subtitle {
+    text-align: center;
+}
+
+@keyframes scroll {
+    0% {
+        top: 100%;
+    }
+    100% {
+        top: -170%;
+    }
+}
+
+/* Big Screens */
+@media only screen and (min-width:1200px) {
+    .logo {
+        position: absolute;
+        top: 40%;
+        left: 43%;
+        z-index: 1;
+        margin: auto;
+        animation: logo 9s ease-out 9s;
+        opacity: 0;
+    }
+}