Skip to content

1 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jmpgr wants to merge 6 commits into
base: main
Choose a base branch
from
Open

1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
df35d26
1
jmpgr Apr 20, 2021
ddcddc6
css
jmpgr Apr 20, 2021
acda5ee
2
jmpgr Apr 20, 2021
c46c896
3
jmpgr Apr 20, 2021
3016e68
23
jmpgr Apr 20, 2021
10567f5
Create 404.md
jmpgr Apr 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions 404.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
##**hola**
143 changes: 143 additions & 0 deletions css/supereuro.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
body{
color: red;
}
:root {
--colorNavbar: #5b9bd5;
--colorBorde: red;
}

#modalLogin .fa-money-bill-alt {
height: 43px;
line-height: 0.7;
}

.navegacion {
background-color: var(--colorNavbar);
font-size: 1.5rem;
}

#logo * {
color: white;
text-decoration: none;
}

.supereuro,
.destacado {
font-weight: bold;
}

#logo .fa-money-bill-alt,
#modalLogin .fa-money-bill-alt {
color: green;
background-color: rgb(200, 248, 160);
}

.navbar .fa-shopping-cart {
color: rgb(73, 56, 7);
}

body {
/* Para ver comportamiento de ancho de cabecera*/
min-width: 580px;
}

.cabecera {
/* afecta aqui para no romper la primera linea
margin: 3rem calc(-5rem + 10vw);
width: 520px;*/
width: 520px;
margin: 3rem auto;
font-size: 24px;
font-weight: 500;
}

.destacado {
font-size: 1.2em;
text-decoration: underline;
}

.reglaMain {
border-color: var(--colorNavbar);
width: 90%;
}

.familiaProducto {
font-size: 2rem;
margin-bottom: 1rem;
padding-left: 1rem;
}

.miniaturaProducto {
background-color: lightgray;
padding: 1.5rem;
}

/* Descomentar para que todas las miniaturas tengan la misma altura */
.miniaturaProducto {
height: 100%;
}
.miniaturaProducto img {
height: 12rem;
}

.card-body p {
padding-left: 1rem;
margin-top: 1rem;
font-size: 1.4rem;
}

.miniaturaProducto .card-text {
font-style: italic;
}

.precio {
font-size: 1.8rem !important;
font-weight: bold;
}

#modalLogin .modal-header {
background-color: #70ad47;
}

.modal-title {
font-size: 2rem;
}

.modal-footer button {
font-size: 1.4rem;
margin: 0 2rem !important;
}

.form-control {
border-color: var(--colorBorde);
border-width: 3px;
}

/* Usadas en pagina de producto */
.productoMain {
margin-top: 3rem;
}

.descripcionMain {
font-size: 1.4rem;
font-weight: 600;
}

.descripcionMain .row {
margin-bottom: 2rem;
}

.nombreProducto {
font-size: 3rem;
}

.cantidad label {
font-size: 1rem;
font-weight: 500;
}

#cantidad {
width: 5rem;
font-size: 1.4rem;
}

201 changes: 201 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<!doctype html>
<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="Ejercicio HTML con Bootstrap">
<meta name="author" content="Proto de HTML and Bootstrap contributors">
<title>Super Euro - Jamón</title>

<!-- Font Awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css"
integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">

<!-- Custom styles for this template -->
<link href="css/supereuro.css" rel="stylesheet">


</head>

<body>
<h1>HOLA</h1>
<header>
<nav class="navbar navbar-expand-md navbar-dark navegacion">
<span id="logo">
<a href="supereuro.html">
<span class="supereuro pr-1 d-none d-md-inline">Super&lt;Euro&gt;</span>
<i class="far fa-money-bill-alt fa-lg"></i>
</a>
</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSuperEuro"
aria-controls="navbarSuperEuro" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSuperEuro">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-shopping-cart fa-lg"></i>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#modalLogin">Log in</a>
</li>
</ul>
</div>
</nav>
</header>

<main role="main">
<div class="container">
<div class="row productoMain">
<div class="col-4">
<div>
<img class="img-fluid" src="img/jamon.jpg" alt="Jamón" />
</div>
</div>
<div class="col-8 descripcionMain">
<div class="row">
<div class="col-12 nombreProducto">Paletilla</div>
</div>
<div class="row descripcion">
<div class="col-auto">Descripción:</div>
<div class="col">Una fabulosa paletilla de jamón…
<br /> … que sigue vendiéndotelo …
<br /> … en varias líneas.
</div>
</div>
<div class="form-group row cantidad">
<label for="cantidad" class="col-auto col-form-label">Cantidad</label>
<div class="col-auto">
<input type="number" class="form-control" id="cantidad" value="1">
</div>
</div>
<div class="row">
<div class="col-12">Precio:
<span class="precio">300€</span>
</div>
</div>
</div>
</div>
</div>

<div class="py-5">
<div class="container">
<hr class="reglaMain">
</hr>
<div class="familiaProducto">Otros compraron:</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 order-md-first">
<div class="card shadow-sm miniaturaProducto bordeMiniatura">
<a href="#">
<div>
<img class="img-fluid" src="img/huevos.jpg" alt="Huevos" />
</div>
</a>
<div class="card-body p-0">
<p class="precio">5€</p>
<p class="card-text">docena</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 order-first">
<div class="card shadow-sm miniaturaProducto bordeMiniatura">
<a href="#">
<div>
<img class="img-fluid" src="img/jamon.jpg" alt="Jamón" />
</div>
</a>
<div class="card-body p-0">
<p class="card-text">
<span class="precio">300€</span>
<br />
paletilla
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card miniaturaProducto">
<a href="#">
<div>
<img class="img-fluid" src="img/lechuga.jpg" alt="Lechuga" />
</div>
</a>
<div class="card-body p-0">
<p class="precio">1€</p>
<p class="card-text">kilo</p>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title w-100 text-center" id="modalLoginLabel">
<div class="float-left">
<i class="far fa-money-bill-alt fa-2x"></i>
</div>
<div class="d-inline mx-auto text-white">Log in</div>
</div>
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>-->
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="usuario" class="col-sm-3 col-form-label">Usuario</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="usuario" placeholder='"Nombre"'>
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-3 col-form-label">Contraseña</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword" placeholder="******">
</div>
</div>
<div class="form-group row">
<label for="recordar" class="col-sm-3 col-form-label">Recordarme</label>
<div class="col-sm-1">
<input type="checkbox" class="form-control" id="recordar" placeholder='"Nombre"'>
</div>
</div>
</form>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-success">Entrar</button>
</div>
</div>
</div>
</div>
</main>

<footer class="text-muted">
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"
integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp"
crossorigin="anonymous"></script>
</body>

</html>