Skip to content

Commit

Permalink
Actualización
Browse files Browse the repository at this point in the history
  • Loading branch information
@pabloWIB
pabloWIB committed Jul 28, 2024
1 parent 21e84a5 commit e4ee67e
Show file tree
Hide file tree
Showing 14 changed files with 290 additions and 1,097 deletions.
87 changes: 74 additions & 13 deletions CSS/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,80 @@ header div > :nth-child(2) {
opacity: 100;
}

.formulario {
display: flex;
flex-flow: column wrap;
width: min(1200px, 85%);
margin: 0 auto;
margin-bottom: 1rem;
}
.formulario > :nth-child(1) {
text-align: center;
}
.formulario > :nth-child(1) h4 {
font-size: 20px;
}
.formulario > :nth-child(2) {
margin: 0 auto;
width: min(450px, 100%);
}
.formulario > :nth-child(2) form {
display: flex;
flex-flow: column nowrap;
gap: 1rem;
width: 100%;
}
.formulario > :nth-child(2) form .inputs-container {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 10px;
border-radius: 8px;
width: auto;
padding: 0rem 0.5rem;
border: 1px solid black;
}
.formulario > :nth-child(2) form .inputs-container:hover {
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}
.formulario > :nth-child(2) form .inputs-container > :nth-child(1) {
width: 100%;
max-width: 20px;
}
.formulario > :nth-child(2) form .inputs-container > :nth-child(1) img {
width: 100%;
}
.formulario > :nth-child(2) form .inputs-container input {
all: unset;
padding: 0.5rem 0rem;
border-radius: 0px 8px 8px 0px;
cursor: pointer;
font-size: 16px;
}
.formulario > :nth-child(2) form .inputs-container select {
all: unset;
cursor: pointer;
padding: 0.5rem 0rem;
color: #232323;
}
.formulario > :nth-child(2) form button {
all: unset;
cursor: pointer;
padding: 0.75rem 1rem;
background: #D70022;
transition: 0.3s;
border-radius: 7.5px;
color: white;
font-weight: 500;
font-size: 17px;
margin: 0 auto;
transition: 0.3s;
}
.formulario > :nth-child(2) form button:hover {
scale: 1.025;
transition: 0.3s;
}

body > :nth-child(1) {
background: rgb(255, 255, 255);
display: flex;
Expand Down Expand Up @@ -329,19 +403,6 @@ body > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(4) > :nth-chil
all: unset;
font-size: 27.5px;
}
body > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(4) {
width: 90%;
}
body > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(4) p {
all: unset;
font-size: 15px;
}
body > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(5) {
padding: 0.55rem 1.35rem;
}
body > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(5) > :nth-child(2) {
width: 30px;
}
}
.slider {
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion CSS/styles.css.map
View file

Large diffs are not rendered by default.

93 changes: 75 additions & 18 deletions CSS/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,81 @@ header {

// HEADER ANIMATION --

.formulario{
display: flex;
flex-flow: column wrap;
width: min(1200px, 85%);
margin: 0 auto;
margin-bottom: 1rem;
>:nth-child(1){
text-align: center;
h4{
font-size: 20px;
}
}
>:nth-child(2){
margin: 0 auto;
width: min(450px, 100%);
form{
display: flex;
flex-flow: column nowrap;
gap: 1rem;
width: 100%;
.inputs-container {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 10px;
border-radius: 8px;
width: auto;
padding: 0rem .5rem;
border: 1px solid black;
&:hover{
box-shadow: 0px 2px 2px rgba(black, .4);
}
>:nth-child(1){
width: 100%;
max-width: 20px;
img{
width: 100%;
}
}
input{
all: unset;
padding: .5rem 0rem;
border-radius: 0px 8px 8px 0px;
cursor: pointer;
font-size: 16px;
}
select{
all: unset;
cursor: pointer;
padding: .5rem 0rem;
color: #232323;
}
}
button{
all: unset;
cursor: pointer;
padding: .75rem 1rem;
background: $rojo;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: 7.5px;
color: white;
font-weight: 500;
font-size: 17px;
margin: 0 auto;
transition: .3s;
&:hover{
scale: 1.025;
transition: .3s;
}
}
}
}
}

// CREACIÓN DE BARRAS NAV 1 Y NAV 2

body {
Expand Down Expand Up @@ -176,7 +251,6 @@ body {
align-items: center;
gap: .5rem;
display: none;

a {
display: flex;
place-content: center;
Expand Down Expand Up @@ -323,7 +397,6 @@ body {
}
>:nth-child(4) {
padding: .55rem 1.35rem;

>:nth-child(2) {
width: 30px;
}
Expand Down Expand Up @@ -395,21 +468,6 @@ body {
font-size: 27.5px;
}
}
>:nth-child(4) {
width: 90%;

p {
all: unset;
font-size: 15px;
}
}
>:nth-child(5) {
padding: .55rem 1.35rem;

>:nth-child(2) {
width: 30px;
}
}
}
}
}
Expand Down Expand Up @@ -698,7 +756,6 @@ body {
body {
section {
padding-top: 5rem;

>:nth-child(1) {
width: 85%;
max-width: 1200px;
Expand Down
28 changes: 14 additions & 14 deletions index2.html → HTML/index2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/styles.css">
<link rel="icon" type="image/x-icon" href="IMG/Logo sanram-ai.svg">
<link rel="stylesheet" href="../CSS/normalize.css">
<link rel="stylesheet" href="../CSS/styles.css">
<link rel="icon" type="image/x-icon" href="../IMG/Logo sanram-ai.svg">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>SANRAM</title>
</head>
Expand Down Expand Up @@ -53,16 +53,16 @@
<div>
<div>
<div>
<a href="index.html">Productos</a>
<a href="../index.html">Productos</a>
</div>
<div>
<div>
<img src="IMG/Logo sanram-ai.svg" alt="Logo">
<img src="../IMG/Logo sanram-ai.svg" alt="Logo">
</div>
</div>
<div>
<a href="index.html">Inicio</a>
<a href="index.html">Productos</a>
<a href="../index.html">Inicio</a>
<a href="../index.html">Productos</a>
</div>
</div>
<div>
Expand Down Expand Up @@ -100,16 +100,16 @@ <h3>#LO MEJOR PARA MI FAMILIA</h3>
<div id="mainID2" class="slider2">
<div class="slides2">
<div class="slide2">
<img src="IMG/img2.jpg" alt="Image 1" />
<img src="../IMG/img2.jpg" alt="Image 1" />
</div>
<div class="slide2">
<img src="IMG/img3.jpg" alt="Image 2" />
<img src="../IMG/img3.jpg" alt="Image 2" />
</div>
<div class="slide2">
<img src="IMG/img4.jpg" alt="Image 3" />
<img src="../IMG/img4.jpg" alt="Image 3" />
</div>
<div class="slide2">
<img src="IMG/img1.png" alt="Image 4" />
<img src="../IMG/img1.png" alt="Image 4" />
</div>
</div>
<div class="dots2">
Expand All @@ -121,10 +121,10 @@ <h3>#LO MEJOR PARA MI FAMILIA</h3>
</div>
<a target="_blank" href="https://api.whatsapp.com/send/?phone=5214495433976&text&type=phone_number&app_absent=0">
<div>
<h5>Contactanos</h5>
<h5>Contáctanos</h5>
</div>
<div>
<img src="IMG/whiteWhatsapp.svg" alt="Whatsapp">
<img src="../IMG/whiteWhatsapp.svg" alt="Whatsapp">
</div>
</a>
</div>
Expand Down Expand Up @@ -204,6 +204,6 @@ <h2>Preguntas frecuentes</h2>
</ol>
</div>
</div>
<script src="JS/script2.js"></script>
<script src="../JS/script2.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions IMG/blackMail.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions IMG/blackPhone.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions IMG/map.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions IMG/shopping_cart_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions IMG/user.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion JS/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,6 @@ toggleAnimationN7();
function scrollValue3() {
var scroll = window.scrollY;
if (scroll < 10) {
mainID1.classList.remove('animationN1');
mainID3Get.classList.remove('animationN1');

sectionAnim1.classList.remove('cardAnimationAfter');
Expand Down
62 changes: 62 additions & 0 deletions JS/scriptFormulario.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
// FORMULARIO

document.getElementById('firstForm').addEventListener('submit', function(event){
event.preventDefault();

let name = document.getElementById('name').value.trim();
let cellphone = document.getElementById('cellphone').value.trim();
let city = document.getElementById('city').value.trim();
let postal = document.getElementById('postal').value.trim();

let info = 'Nombre y Apellido: ' + name +
'\nNúmero telefónico: ' + cellphone +
'\nCiudad: ' + city +
'\nIntereses de Compra: ' + postal;

const findErrorsDiv = document.getElementById('findErrorsDiv');
findErrorsDiv.innerHTML = '';

function createErrorMessage(message) {
const p = document.createElement('p');
p.textContent = message;
p.classList.add('error-p-show');
return p;
}

let hasErrors = false;

if (name === '') {
findErrorsDiv.appendChild(createErrorMessage('• Ingrese su nombre y apellidos'));
hasErrors = true;
}

if (cellphone === '') {
findErrorsDiv.appendChild(createErrorMessage('• Ingrese su número telefónico'));
hasErrors = true;
}

if (city === '') {
findErrorsDiv.appendChild(createErrorMessage('• Ingrese su ciudad'));
hasErrors = true;
}

if (postal === '') {
findErrorsDiv.appendChild(createErrorMessage('• Seleccione su interés de compra'));
hasErrors = true;
}

if (hasErrors) {
findErrorsDiv.classList.add('error-div-show');
findErrorsDiv.classList.remove('error-div-hide');
} else {
findErrorsDiv.classList.add('error-div-hide');
findErrorsDiv.classList.remove('error-div-show');

console.log(info);

let mailtoLink = 'https://mail.google.com/mail/u/0/?fs=1&tf=cm&source=mailto&to=sanram@gmail.com' + '&body=' + encodeURIComponent(info);
window.open(mailtoLink, '_blank');
}
});

// FORMULARIO ---
Loading

0 comments on commit e4ee67e

Please sign in to comment.