Struttura del progetto:
File
/index.html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hitchckok</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;600&family=Limelight&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/stile.css">
</head>
<body>
<nav>
<div class="contenitore d-flex align-items-center justify-content-between">
<img src="img/conte.svg" class="nav-brand">
<ul>
<li>
<a href="#links">Link</a>
</li>
<li>
<a href="#biografia">Bio</a>
</li>
<li>
<a href="#gallery">Galleria</a>
</li>
<li>
<a href="#films">Film</a>
</li>
</ul>
</div>
</nav>
<header id="home" class="copertina">
<div class="contenitore">
<div class="riga align-items-center">
<div class="col-33 col-tablet-100 text-tablet-center">
<img src="img/hitch-quadrata.jpg" alt="Hitchckock durante le riprese degli uccelli" class="img-fluid rotondo">
</div>
<div class="col-66 col-tablet-100 text-tablet-center">
<h1>Alfred Hitchcock</h1>
<h4>Un maestro del cinema</h4>
</div>
</div>
</div>
</header>
<!-- Sezione LINKS -->
<section id="links">
<div class="contenitore">
<div class="riga text-center my-2 align-items-center riga-tablet-2">
<div class="col mb-2">
<h3>Hitch</h3>
<h5>Su Wikipedia</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ex, voluptatum. Voluptatibus iusto quasi qui totam
necessitatibus nesciunt quidem sapiente!</p>
<a href="https://it.wikipedia.org/wiki/Alfred_Hitchcock" class="bottone bottone-rosso">Vai alla pagina</a>
</div>
<div class="col mb-2">
<h3>Hitch</h3>
<h5>Su Internet Movie Database</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ex, voluptatum. Voluptatibus iusto quasi qui totam
necessitatibus nesciunt quidem sapiente!</p>
<a href="https://www.imdb.com/name/nm0000033/" class="bottone bottone-rosso btn-rounded">Vai alla pagina</a>
</div>
<div class="col mb-2">
<h3>Hitch</h3>
<h5>Su My Movies</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ex, voluptatum. Voluptatibus iusto quasi qui totam
necessitatibus nesciunt quidem sapiente!</p>
<a href="https://www.mymovies.it/biografia/?r=414" class="bottone bottone-rosso">Vai alla pagina</a>
</div>
<div class="col mb-2">
<h3>Hitch</h3>
<h5>su hitchcockmania.it</h5>
<p>Il maestro del bivido...</p>
<a href="https://www.hitchcockmania.it/" class="bottone bottone-rosso">Vai alla pagina</a>
</div>
</div>
</div>
</section>
<!-- Sezione Bio -->
<section id="biografia" class="bg-grigio-chiaro">
<div class="contenitore">
<h2>Biografia</h2>
<div class="riga">
<div class="col-66 col-tablet-100">
<p>"Dicono che odio gli attori. Forse perche tempo fa girava la voce
che io li considerassi degli animali. Ma come si puo odiare Jimmy
Stewart.. o Jack Warner?!". Piuttosto, Alfred Hitchcock detestava
i poliziotti dopo che da bambino era stato costretto dal padre a
passare una notte in cella per punizione. Ovviamente, con la
complicita di uno di questi "inaffidabili" tutori della legge che
spesso nel suo cinema non esiteranno a mettere dentro un
innocente, tipo Henry Fonda ne <b>Il ladro</b> (1956).<br />
Nato a Leytonstone, Londra, il 13 agosto 1899, dopo gli studi
presso un college di gesuiti, s'iscrive alla School of Engineering
and Navigation per diventare un ingegnere. Ma ai calcoli tecnici
preferisce l'attivita di impaginatore presso l'ufficio
pubblicitario di un grande magazzino londinese. Si avvicina al
mondo del cinema nel 1920 come disegnatore di titoli dei film
prodotti dalla Famous Players-Lasky, futura Paramount. Dopo aver
lavorato anche come montatore e sceneggiatore, nel 1925 realizza
il suo primo film <b>The pleasure garden</b>, anche se il suo
debutto ufficiale nella regia e con <b>Il pensionante</b> del
1926. Sempre nello stesso anno sposa Alma Reville, sceneggiatrice
e aiuto regista di molti suoi film, dalla quale avra una figlia,
Patricia. Nel 1934 gira <b>L'uomo che sapeva troppo</b>, da cui
ventidue anni dopo realizza un remake affidando la parte del
protagonista al suo amato James Stewart. Per
<b>La signora scompare</b> (1938) riceve il premio come miglior
regista dall'Associazione dei Critici Cinematografici di New York
e dopo questo successo il produttore David O. Selznick gli offre
un contratto e lo persuade a trasferirsi ad Hollywood.
<b>Rebecca</b> (1940), sua prima regia americana, si guadagna un
Oscar come miglior film mentre lui si avvia a diventare
l'indiscusso "mago del brivido". Intanto ha preso l'abitudine di
fare delle piccole apparizioni nei suoi film e questo 'vizio
scaramantico' resta negli anni una costante del suo cinema. Come
passante che attraversa la strada subito dopo i titoli di testa,
riesce ad intrufolarsi anche in <b>Nodo alla gola</b> (o 'Cocktail
per un cadavere', 1948), film che rispetta un'unita di tempo e di
luogo attraverso l'uso di una straordinaria tecnica di piani
sequenza. Oppure si fa vedere solo in fotografia mentre Ray
Milland (<b>Il delitto perfetto</b> 1954) cerca di sbarazzarsi di
una moglie bella ed elegante come Grace Kelly, una delle sue
attrici preferite. Dimostra una vera predilezione per quelle dai
capelli biondi. Come quelli platino di Eva Marie Saint (<b>Intrigo internazionale</b>, 1959), quelli
raccolti di Tippi Hedren (<b>Gli uccelli</b>,1963) o quelli di una Ingrid Bergman in fin di vita accarezzati
da Cary Grant in <b>Notorius - L'amante perduta</b> (1946). Anche
se terrorizzare gli spettatori sembra impresa facile, dopo gli
anni '60, grazie soprattutto ai critici francesi e a Francois
Truffaut, oltre che del brivido viene celebrato come un grande
maestro del cinema capace di sconvolgere qualsiasi regola
narrativa, come quando fa morire Janet Leigh dopo soli 40 minuti
dall'inizio di <b>Psyco</b> (1960).<br />
Compare ancora di sfuggita in <b>Complotto di famiglia</b> (1976),
ultimo film che dirige prima della sua scomparsa avvenuta a Bel
Air (Los Angeles) il 29 aprile 1980. Un'ultima incursione, dopo
tante in bianco e nero o a colori, che a un certo punto della sua
carriera si e preoccupato di inserire all'inizio di un film per
evitare che gli spettatori, troppo ansiosi di giocare a
riconoscerlo, si perderessero il meglio di una storia.</p>
</div>
<div class="col-33 col-tablet-100">
<img src="img/05-Alfred-Hitchcock.jpg" class="img-fluid" alt="Hitchkock sul set">
</div>
</div>
</div>
</section>
<!-- Sezione GALLERIA -->
<section id="gallery" class="galleria">
<div class="contenitore">
<div class="riga">
<div class="col">
<a href="img/3-10-1.jpg">
<div class="img-cont img-cont-4by3" style="background-image: url(img/3-10-1.jpg);"></div>
</a>
</div>
<div class="col">
<a href="img/35917fa94956fbd6fec5b445002fff57.jpg">
<div class="img-cont img-cont-4by3" style="background-image: url(img/35917fa94956fbd6fec5b445002fff57.jpg);"></div>
</a>
</div>
<div class="col">
<a href="img/anglo_2000x1125_alfredhitchcock.jpg">
<div class="img-cont img-cont-4by3" style="background-image: url(img/anglo_2000x1125_alfredhitchcock.jpg);"></div>
</a>
</div>
<div class="col">
<a href="img/Caccia-al-ladro-Cinematographe.it_.jpg">
<div class="img-cont img-cont-4by3" style="background-image: url(img/Caccia-al-ladro-Cinematographe.it_.jpg);"></div>
</a>
</div>
</div>
</div>
</section>
<!-- Sezione FILMOGRAFIA -->
<section id="films">
<div class="contenitore">
</div>
</section>
</body>
</html>
/css/stile.css
/*==============
GENERALE
================*/
* {
box-sizing: border-box;
margin:0;
}
html {
font-size: 20px;
}
/*==============
TIPOGRAFIA
================*/
body {
font-family: 'Josefin Sans', sans-serif;
font-size: 1rem;
color: #222222;
line-height: 1.4;
padding-top: 60px;
}
h1,h2,h3 {
font-family: 'Limelight', cursive;
}
h4,h5,h6 {
font-weight: 600;
font-variant: small-caps;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1.1;
}
h1 {
font-size: 4.5rem;
}
h2 {
font-size: 3.5rem;
}
h3 {
font-size: 2.5rem;
}
h4 {
font-size: 1.8rem;
}
h5 {
font-size:1.4rem;
}
h6 {
font-size: 1.1rem;
}
a {
color: #660000;
font-weight: 600;
text-decoration: none;
}
a:hover {
color: #dd0000;
text-decoration: underline;
}
p {
margin-bottom: 1.6rem;
}
section {
padding-top: 60px;
}
/*==============
CONTAINER
================*/
.contenitore {
width: 90%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1200px) {
.contenitore {
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.justify-content-between {
justify-content: space-between;
}
.rotondo {
border-radius: 50%;;
}
.full-screen {
min-height: calc(100vh - 60px);
}
.text-center {
text-align: center;
}
@media (max-width:996px) {
.text-tablet-center {
text-align: center;
}
}
/*========================
BARRA DI NAVIGAZIONE
==========================*/
nav {
background-color: black;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
nav ul > li > a {
display: block;
padding: 0.8rem 2rem;
color: #eeeeee;
text-transform: uppercase;
}
nav ul > li > a:hover {
color: #222222;
background-color: #cccccc;
text-decoration: none;
}
.nav-brand {
height: 40px;
}
/*========================
COPERTINA
==========================*/
.copertina {
background-color: #333;
color: white;
padding-top: 4rem;
padding-bottom: 4rem;
}
/*========================
GRIGLIA
==========================*/
.img-fluid {
max-width: 100%;
height: auto;
}
.riga {
display: flex;
flex-flow: row wrap;
margin-left: -15px;
margin-right: -15px;
}
.col-33, .col-66, .col {
padding-left: 15px;
padding-right: 15px;
}
.col-33 {
flex: 1 1 33.33%;
max-width: 33.33%;
}
.col-66 {
flex: 1 1 66.66%;
max-width: 66.66%;
}
.col {
flex: 1 1 1px;
}
@media (max-width:996px) {
.col-66.col-tablet-100, .col-33.col-tablet-100, .col.col-tablet-100 {
flex: 1 1 100%;
min-width: 100%;
}
.riga-tablet-2 .col {
flex: 1 1 50%;
max-width: 50%;
}
}
/*=======================
MARGINI
========================*/
.m-0 {
margin: 0;
}
.m-auto {
margin: auto;
}
.mt-2, .my-2 {
margin-top:2rem;
}
.mb-2, .my-2 {
margin-bottom: 2rem;
}
.ml-2, .mx-2 {
margin-left: 2rem;
}
.mr-2, .mx-2 {
margin-right: 2rem;
}
/*========================
BOTTONI
==========================*/
.bottone {
border:2px solid transparent;
border-radius:0;
display: inline-block;
cursor: pointer;
font-weight: 700;
padding: 0.75rem 1.5rem;
}
.bottone:hover {
text-decoration: none;
}
.bottone-rosso {
background-color: #660000;
border-color: #660000;
color: white;
}
.bottone-rosso:hover {
background-color: white;
color: #660000;
}
.btn-rounded {
border-radius: 2rem;
}
/*========================
COLORI
==========================*/
.bg-grigio-chiaro {
background-color: #cccccc;
}
/*========================
GALLERY
==========================*/
.img-cont-1by1 {
padding-bottom: 100%;
}
.img-cont-4by3 {
padding-bottom: 75%;
}
.img-cont {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: all 0.5s;
}
.galleria a {
display: block;
overflow: hidden;
}
.galleria a:hover .img-cont {
opacity: 0.7;
transform: scale(1.1);
}