Good morning,
A few days ago I was modifying a pen of a user in Codepen.io, when I had it to my liking (actually I only translated it) I saved it in my dashboard (I kept the copyright of the original creator).
Now I'm passing it to my text editor (using Atom) by copying and pasting the html content into codepen to an .html file in my Atom (and so on). I also copied the external stylesheets . (CSS and JS)
But when I open my .html file (in Chrome for example) I do not see certain css styles as the background, and there is a window that should be hidden ("Registry") and it is not.
I think the error lies in how I'm organizing and calling the style sheets and the JS in Atom. I'm a bit new in this, my domain of JS is almost nil.
I share the link to Codepen.io HERE
And that's how I got it in Atom:
jQuery(document).ready(function($) {
$(".dropdown-button").dropdown();
$('.modal').modal();
$(".signup-toggle").click(function() {
$(this).hide();
$(".signupForm").show(300);
$(".policy").css("visibility", "visible");
});
});.input-field label {
color: #999;
}
.input-field input[type=text]:focus+label, .input-field input[type=password]:focus+label {
color: #000;
}
.input-field input[type=text]:focus, .input-field input[type=password]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
.input-field input[type=text].valid, .input-field input[type=password].valid {
border-bottom: 1px solid #2196F3;
box-shadow: 0 1px 0 0 #2196F3;
}
.input-field input[type=text].invalid, .input-field input[type=password].invalid {
border-bottom: 1px solid #F44336;
box-shadow: 0 1px 0 0 #F44336;
}
.input-field .prefix.active {
color: #000;
}
/* Input : switch */
.switch {
margin-top: 7px;
}
.switch label .lever {
margin: 0 7px;
}
.switch label input[type="checkbox"]:checked+.lever {
background-color: #ADD0EB;
}
.switch label input[type="checkbox"]:checked+.lever::after {
background-color: #4FB0FD;
}
.login-body {
background-image: url('http://i.imgur.com/5Fx8xis.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.input-cart {
min-height: 400px;
border-top: 3px solid #2196F3;
margin-top: 80px;
margin-bottom: 100px;
}
.login {
margin-top: 25px;
border-right: 1px solid #ddd;
}
.policy {
visibility: hidden;
}
.signupForm {
display: none;
}
.signup {
margin-top: 25px;
}
.signup-toggle {
cursor: pointer;
margin-top: 140px;
}
.login h4, .signup h4 {
font-weight: 200;
}
.legal {
border-top: 1px solid #ddd;
}
.email label {
margin-left: 11px;
}
.policy {
font-size: 13px;
}
.main-title {
font-family: pacifico;
}<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Ingreso - ElTarjetero.co</title>
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="index.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet">
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" rel="stylesheet"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</head>
<body class="login-body">
<div class="row">
<div class="input-cart col s12 m10 push-m1 z-depth-2 grey lighten-5">
<div class="col s12 m5 login">
<h4 class="center">Ingreso</h4>
<br>
<form action="check.php" method="post" autocomplete="off">
<div class="row">
<div class="input-field">
<input type="text" id="user" name="username" class="validate" required="required" placeholder="Usuario o Correo">
<label for="user">
<i class="material-icons">person</i> </label>
</div>
</div>
<div class="row">
<div class="input-field">
<input type="password" id="pass" name="password" class="validate" required="required" placeholder="Contraseña">
<label for="pass">
<i class="material-icons">lock</i>
</label>
</div>
</div>
<div class="row">
<div class="switch col s6">
<label>
<input type="checkbox">
<span class="lever"></span>
Recuérdame
</label>
</div>
<div class="col s6">
<button type="submit" name="login" class="btn waves-effect waves-light blue right">Ingresar</button>
</div>
</div>
</form>
</div>
<!-- Signup form -->
<div class="col s12 m7 signup">
<div class="signupForm">
<h4 class="center">Registro</h4>
<br>
<form action="regCheck.php" name="signup" method="post" autocomplete="off">
<div class="row">
<div class="input-field col s12 m6">
<input type="text" id="name-picked" name="namepicked" class="validate" required="required" placeholder="Ingresa un nombre de usuario">
<label for="name-picked">
<i class="material-icons">person_add</i>
</label>
</div>
<div class="input-field col s12 m6">
<input type="password" id="pass-picked" name="passpicked" class="validate" required="required" placeholder="Contraseña">
<label for="pass-picked">
<i class="material-icons">lock</i> </label>
</div>
</div>
<div class="row">
<div class="input-field email">
<div class="col s12">
<input type="text" id="email" name="email" class="validate" required="required" placeholder="Ingrese su correo">
<label for="email">
<i class="material-icons">mail</i>
</label>
</div>
</div>
</div>
</form>
<div class="row">
<button type="submit" name="btn-signup" class="btn blue right waves-effect waves-light">Registrarme</button>
</div>
</div>
<div class="signup-toggle center">
<h4 class="center">No tienes una cuenta? <a href="#!">Regístrate</a></h4>
</div>
</div>
<div class="col s12">
<br>
<div class="legal center">
</div>
<div class="legal center">
<div class="col s12 m7 right">
<p class="grey-text policy center">Al registrarse, usted acepta nuestra <a href="#!">Política de Privacidad</a> y los <a href="#!">Términos de uso</a>, incluido el <a href="#!">Uso de cookies</a>.</p>
</div>
<div class="col s12 m5">
<p class="center grey-text" style="font-size: 14px;">Coding : <a href="http://fb.com/celyes17" class="main-title red-text" target="_blank">Celyes</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fixed-action-btn toolbar">
<a class="btn-floating btn-large amber black-text">
Más
</a>
<ul>
<li><a class="indigo center" href="#!">Facebook Login</a></li>
<li><a class="blue center" href="#!">Twitter Login</a></li>
<li><a class="red center" href="#!">Google + Login</a></li>
</ul>
</div>
</body>
</html>PS:
While inserting the fragment here in StackOverflow, the background appears and the "registration" window is already hidden.
I'm not sure if line # 21 inside html (referring to JS) should go there.
Thank you very much, I will be attentive to questions.
__
UPDATE
I think the flaw is in the way I insert "external resources" in my html I do not know how I should call them correctly ...
SOLVED:
I am ashamed of myself, but the solution was in an option (not visible) in the lower right part of the page, which gives the option to export in .zip, I downloaded the file and it has automatically organized the index.html by calling the .css and the .js
:)
PS: Thank you very much to @ Silvestre-Silva for your answer and clarification, your code works perfectly, I have taken your answer as correct