Skip to content

Instantly share code, notes, and snippets.

@ConxiCR

ConxiCR/index.html

Created November 14, 2020 09:02
Show Gist options
  • Save ConxiCR/0721aeff50c947c9310c7026137c3b4e to your computer and use it in GitHub Desktop.
Save ConxiCR/0721aeff50c947c9310c7026137c3b4e to your computer and use it in GitHub Desktop.
Download ZIP
RecercaFeina_homePage-bootstrap2
Raw
index.html
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recerca de feina</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!--FONT-FAMILY REDRESSED & SOURCE SANS PRO CSS i web-->
<link href="https://fonts.googleapis.com/css2?family=Redressed&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
<!--FONT AWESOME-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<!-- link als nostres estils CSS-->
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<!-- comença capcelera -->
<header class="mascara fixed-top mt-5 p-4" style="background-image:url(https://images.unsplash.com/photo-1595410831642-099c33554073?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ); background-repeat: no-repeat; background-size:cover; background-position: start;">
<div class="container-fluid">
<div class="row">
<div class="site-heading col-lg-10 col-md-9 sm-auto">
<h1 class="h1-responsive font-weight-bold text-wrap text-white mt-3">Recerca de feina i altres opcions</h1>
</div>
</div>
</div>
<!--inici navegació-->
<nav class="navbar navbar-expand-lg bg-primary navbar-dark fixed-top scrolling-navbar">
<!--navegador idiomes-->
<div class="dropdown droleft">
<button type="button" class="btn btn-primary mr-3 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">català</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="castella.html">castellà</a>
<a class="dropdown-item" href="angles.html">anglès</a>
</div>
</div>
<!--navegació menú-->
<a class="navbar-brand" href="index.html">Inici</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-white" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="primeraFeina.html">Primera feina</a>
</li>
<li class="nav-item">
<a class="nav-link" href="trenta.html">Busca'm als 30</a>
</li>
<li class="nav-item">
<a class="nav-link" href="quaranta.html">Busca'm als 40</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cinquanta.html">Busca'm als 50</a>
</li>
</ul>
</div>
</nav>
</header>
<!--finalitza caçcelera-->
<!--Inici buscador per fer preguntes-->
<div class="containerBuscador mb-3 ml-4">
<div class="row d-flex justify-content-center justify-item-center">
<div class="form1 d-flex flex-column flex-nowrap col-lg-10 col-md-10 col-mx-auto">
<h5>Resoldrem els teus dubtes i consultes:</h5>
<h6>A on? Com? Què? Qui?</h6>
</div>
<div class="form2 col-lg-6 col-md-6 col-mx-auto">
<form class="buscador d-flex p-2" action="#" method="POST" autocomplete="off">
<input type="text" placeholder="Preguntam" name="pregunta">
<button type="submit"><i class="fas fa-search text-white"></i></button>
</form>
</div>
</div>
</div>
<!--finaliza buscador-->
<!--inici slider opcions-->
<main class="mt-5 mb-5">
<div class="container d-flex flex-column mx-auto">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-auto">
<!-- contenedor principal -->
<ul class="nav">
<li class="nav-item-2 font-italic display-5">
<a class="nav-link" href="#" data-toggle="modal" data-target="#myModal"><h6>Obrir per a més informació</h6></a>
</li>
</ul>
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<!--indicadors-->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!--fotos-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="src="https://images.unsplash.com/photo-1573496130407-57329f01f769?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="recerca/inici primera feina" class="d-block w-100">
<div class="carousel-caption">
<a href="primeraFeina.html"><h3 class="display-5 bg-primary text-white">Primera feina</h3></a>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="recerca/canvi feina a partir dels trenta" class="d-block w-100">
<div class="carousel-caption">
<a href="trenta.html"><h3 class="display-5 bg-primary text-white">buscam als 30</h3></a>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1497048679117-1a29644559e3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="recerca/canvi feina a partir dels quaranta" class="d-block w-100">
<div class="carousel-caption">
<a href="quaranta.html"><h3 class="display-5 bg-primary text-white">buscam als 40</h3></a>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1573496782646-e8d943a4bdd1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="recerca/canvi feina a partir dels cinquanta" class="d-block w-100">
<div class="carousel-caption">
<a href="cinquanta.html"><h3 class="display-5 bg-primary text-white">buscam als 50</h3></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!--finalitza slider opcions-->
<!--Inici peu-->
<footer class="mt-5">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto">
<div class="jumbotron text-center">
<!--xarxes socials-->
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="https://twitter.com">twitter
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.instagram.com">instagram
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com">linkedin
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<!--copyright-->
<p class="copyright text-muted">Copyright &copy; Your Website 2020</p>
</div>
</div>
</div>
</div>
</footer>
<!--Inici composició Modal inclós al slider -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Informació sobre com utilitzar la web</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Per accedir a la informació complementaria ho podem fer pel menu principal o pels titols que hi han a sobre de les fotos
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Tanca</button>
</div>
</div>
</div>
</div>
<!--finalitza modal-->
<!-- jQuery, Popper.js, and Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="js/menu.js"></script>
</body>
</html>
Raw
script.js
//per fer ensenyar el menu desplegable al fer click
document.querySelector('.navbar-toggler').addEventListener('click',() => {
document.querySelector('.navbar-nav').classList.toggle('show');
/*document.querySelector('.dropdown-menu').classList.toggle('show');*/
});
//funció slider
$(document).ready(function(){
// Activate Carousel
$("#demo").carousel();
// Enable Carousel Indicators
$(".item1").click(function(){
$("#demo").carousel(0);
});
$(".item2").click(function(){
$("#demo").carousel(1);
});
$(".item3").click(function(){
$("#demo").carousel(2);
});
$(".item4").click(function(){
$("#demo").carousel(3);
});
});
Raw
style.css
*{
font-family:'Source Sans Pro', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
header.mascara h1{
font-family: 'Redressed', cursive, Verdana, sans-serif;
}
/*botó dropdown idioma*/
.dropdown .btn{
overflow: visible;
font-size: 90%;
}
.dropdown-menu{
min-width: 8em;
}
.dropdown-menu.show{
font-size: 80%;
}
.btn button:hover{
background-color: #16a085;
}
/*Menu navegador*/
ul.navbar-nav li a:hover {
background-color: #16a085;
}
/*buscador per fer preguntes*/
.form1{
margin-top: 14rem;
}
.buscador input[type=text] {
border: 1px solid grey;
width: 50%;
background: #f1f1f1;
text-align: center;
}
.buscador button {
width: 10%;
background:#3790e8;
border: 1px solid grey;
border-left: none; /* Prevent double borders */
cursor: pointer;
}
.buscador button:hover {
background: #16a085;
}
.buscador::after {
content: "";
clear: both;
}
.nav-item-2{
font-size: 2vw;
}
.carousel-inner h3{
font-family: 'Source Sans Pro SemiBold', sans-serif;
}
@media screen and (max-width: 1000px){
}
@media all and (max-width: 600px){
header.mascara h1{
font-size: 2em;
}
}
@media all and (max-width: 320px){
header.mascara h1{
font-size: 2em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment