Switched to using bootstrap.

This commit is contained in:
Nicolás A. Ortega Froysa 2021-10-19 20:21:37 +02:00
parent 33c41229b3
commit 1b10f7f596
3 changed files with 276 additions and 62 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

View File

@ -3,42 +3,292 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="es" /> <meta http-equiv="Content-Language" content="es" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fundación San Pablo Andalucía CEU</title> <title>Fundación San Pablo Andalucía CEU</title>
<link rel="icon" href="imgs/favicon-16x16.png" type="image/png" /> <link rel="icon" href="imgs/favicon-16x16.png" type="image/png" />
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" ></script>
</head> </head>
<body> <body>
<header> <header class="container p-4">
<a href="index.html" ><img src="imgs/logo.jpg" alt="Logo CEU" title="Logo CEU" class="logo" /></a> <a href="index.html" >
<img src="imgs/logo.jpg"
width="40%"
class="float-start"
alt="Logo CEU"
title="Logo CEU" />
</a>
<div class="float-end" >
<p class="small" >954 48 80 00 / Correo / <b>CANAL</b> CEU</p>
<a href="#"
class="btn btn-outline-secondary text-uppercase" >
Automatrícula
</a>
</div>
</header> </header>
<nav> <nav class="container-fluid navbar navbar-expand bg-primary navbar-dark justify-content-center" >
<ul> <ul class="navbar-nav">
<li><a href="#" >Conócenos</a></li> <li class="nav-item" >
<li><a href="#" >Estudios</a></li> <a class="nav-link" href="#" >Conócenos</a>
<li><a href="#" >Alumno</a></li> </li>
<li><a href="#" >Internationalisation</a></li> <li class="nav-item" >
<li><a href="#" >Vida CEU</a></li> <a class="nav-link" href="#" >Estudios</a>
<li><a href="#" >Actualidad</a></li> </li>
<li><a href="#" >Investigación</a></li> <li class="nav-item" >
<li><a href="#" >Admisión</a></li> <a class="nav-link" href="#" >Alumno</a>
<li><a href="#" >Campus Virtuales</a></li> </li>
<li class="nav-item" >
<a class="nav-link" href="#" >Internationalisation</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" >Vida CEU</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" >Actualidad</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" >Investigación</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" >Admisión</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" >Campus Virtuales</a>
</li>
</ul> </ul>
</nav> </nav>
<main> <main class="container p-3" >
<div class="info-card" > <div class="row" >
<h2>Grados y Master</h2> <div class="card col-4">
<h3>CEU Cardenal Spínola</h3> <div class="card-body" >
<h4 class="card-title text-uppercase" >Grados y Master</h4>
<p class="card-text" >CEU Cardenal Spínola</p>
</div> </div>
<div class="info-card" >
<h2>Posgrados</h2>
<h3>Instituto de Posgrado</h3>
</div> </div>
<div class="info-card" > <div class="card col-4" style="33%" >
<h2>Formación Profesional</h2> <div class="card-body" >
<h3>Centro de Estudios Profesionales CEU</h3> <h4 class="card-title text-uppercase" >Posgrados</h4>
<p class="card-text" >Instituto de Posgrado</p>
</div>
</div>
<div class="card col-4" style="33%" >
<div class="card-body" >
<h4 class="card-title text-uppercase" >Formación Profesional</h4>
<p class="card-text" >Centro de Estudios Profesionales CEU</p>
</div>
</div>
</div>
<div class="row mx-auto text-center justify-content-center p-3 text-uppercase" >
<div class="col-2" >
<h4><a href="#" >Colegio</a></h4>
</div>
<div class="col-2" >
<h4><a href="#" >Vniversitas</a></h4>
</div>
<div class="col-2" >
<h4><a href="#" >Idiomas</a></h4>
</div>
<div class="col-2" >
<h4><a href="#" >Oposiciones</a></h4>
</div>
<div class="col-2" >
<h4><a href="#" >DECA</a></h4>
</div>
</div> </div>
</main> </main>
<footer> <div class="container-fluid bg-light text-dark" >
<div class="container p-3" >
<div class="row" >
<div class="col-12" >
<h2 class="text-secondary">Actualidad <b>CEU Andalucía</b></h2>
</div>
</div>
<div class="row" >
<div class="col-12" >
<h3><b>Noticias</b></h3>
</div>
<div class="card col-3" >
<div class="card-body" >
<h5 class="card-title" >Mi Artículo</h5>
</div>
</div>
<div class="card col-3" >
<div class="card-body" >
<h5 class="card-title" >Mi Artículo</h5>
</div>
</div>
<div class="card col-3" >
<div class="card-body" >
<h5 class="card-title" >Mi Artículo</h5>
</div>
</div>
<div class="card col-3" >
<div class="card-body" >
<h5 class="card-title" >Mi Artículo</h5>
</div>
</div>
<div class="card col-3" >
<div class="card-body" >
<h5 class="card-title" >Mi Artículo</h5>
</div>
</div>
</div>
<div class="row pt-3" >
<div class="col-12" >
<h3><b>Blogs</b></h3>
</div>
<div class="card col-4" >
<div class="card-header" >
<h5 class="card-title" >El Título de Mi Blog</h5>
</div>
<div class="card-body" >
<p>Fulanito Pérez</p>
</div>
</div>
<div class="card col-4" >
<div class="card-header" >
<h5 class="card-title" >El Título de Mi Blog</h5>
</div>
<div class="card-body" >
<p>Fulanito Pérez</p>
</div>
</div>
<div class="card col-4" >
<div class="card-header" >
<h5 class="card-title" >El Título de Mi Blog</h5>
</div>
<div class="card-body" >
<p>Fulanito Pérez</p>
</div>
</div>
<div class="card col-4" >
<div class="card-header" >
<h5 class="card-title" >El Título de Mi Blog</h5>
</div>
<div class="card-body" >
<p>Fulanito Pérez</p>
</div>
</div>
<div class="card col-4" >
<div class="card-header" >
<h5 class="card-title" >El Título de Mi Blog</h5>
</div>
<div class="card-body" >
<p>Fulanito Pérez</p>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid justify-content-center bg-dark text-white" >
<div class="container p-3" >
<img src="imgs/logo-footer.png"
width="50%"
class="mx-auto d-block"
alt="Footer logo."
title="Footer logo" />
<hr />
<div class="row small" >
<div class="col-6" >
<h4>Estudios</h4>
<div class="row" >
<div class="col-4" >
<ul>
<li class="text-secondary" >Grados y Máster Universitarios</li>
<ul>
<li>Educación</li>
<li>Derecho</li>
<li>Deporte</li>
</ul>
</ul>
</div>
<div class="col-4" >
<ul>
<li class="text-secondary" >Posgrados</li>
<ul>
<li>Educación</li>
<li>Empresa</li>
<li>Derecho</li>
<li>Deporte</li>
<li>Tech</li>
<li>Salud</li>
<li>Seguridad</li>
</ul>
</ul>
</div>
<div class="col-4" >
<ul>
<li class="text-secondary" >Ciclos Superiores</li>
<ul>
<li>Educación</li>
<li>Empresa</li>
<li>Deporte</li>
<li>Tech</li>
<li>Salud</li>
<li>A DISTANCIA</li>
</ul>
</ul>
</div>
</div>
<div class="row" >
<div class="col-4" >
<ul>
<li>Colegio</li>
<ul>
<li>Educación Infantil</li>
<li>Educación Primaria</li>
<li>ESO</li>
<li>Bachillerato CEU</li>
<li>Summer School</li>
</ul>
</ul>
</div>
<div class="col-4" >
<ul>
<li>Instituto de Idiomas</li>
<li>Instituto de Oposiciones</li>
<li>Vniversitas Senioribus</li>
</ul>
</div>
</div>
</div>
<div class="col-3" >
<h4>Información y Servicios</h4>
<ul>
<li class="text-secondary" >Acceso</li>
<ul>
<li>Grados Universitarios</li>
<li>Máster Universitario</li>
<li>Ciclos Superiores</li>
</ul>
<li class="text-secondary" >Becas y Ayudas</li>
<ul>
<li>Grados Universitarios</li>
<li>Ciclos Superiores</li>
</ul>
<li>Secretaría</li>
<li>Investigación</li>
<li>Antiguos Alumnos</li>
<li>Calidad e Innovación</li>
<li>Servicio de Orientación</li>
<li>Internacional e Idiomas</li>
<li>Alojamiento</li>
<li>Financiación</li>
</ul>
</div>
<div class="col-3" >
<h4>Conócenos</h4>
<ul>
<li>¿Quiénes somos?</li>
<li>¿Dónde estamos?</li>
<li>Proyecto Educativo</li>
<li>Organigrama</li>
<li>Instalaciones</li>
<li>Sala de Prensa</li>
</ul>
</div>
</div>
</div>
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -1,36 +0,0 @@
header img.logo {
width: 50%;
}
nav > ul {
list-style-type: none;
padding: 0 auto;
margin: 0;
overflow: hidden;
border-radius: 5px;
background-color: #33f;
}
nav > ul > li {
float: left;
display: inline;
padding: 5px 8px;
transition: background-color 0.25s;
}
nav > ul > li:hover {
background-color: #55f;
}
nav > ul > li > a {
color: #fff;
text-decoration: none;
display: block;
}
div.info-card {
width: 30%;
text-align: center;
display: inline;
float: left;
}