diff --git a/img/Curiosita.JPG b/img/Curiosita.JPG new file mode 100644 index 0000000..9121e50 Binary files /dev/null and b/img/Curiosita.JPG differ diff --git a/img/Felicita1.JPG b/img/Felicita1.JPG new file mode 100644 index 0000000..e5424ab Binary files /dev/null and b/img/Felicita1.JPG differ diff --git a/img/Paura.JPG b/img/Paura.JPG new file mode 100644 index 0000000..b87e70e Binary files /dev/null and b/img/Paura.JPG differ diff --git a/img/Rabbia1.JPG b/img/Rabbia1.JPG new file mode 100644 index 0000000..6c9a6db Binary files /dev/null and b/img/Rabbia1.JPG differ diff --git a/img/footer.gif b/img/footer.gif new file mode 100644 index 0000000..7b5ca85 Binary files /dev/null and b/img/footer.gif differ diff --git a/index.html b/index.html index 00631d4..18f5c2c 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,63 @@ - - - - Titolo - - - - - - + + + + + LE MIE EMOZIONI + + + +
LE MIE EMOZIONI
+
+
+ Home + Sentimenti +
+
+

Definizione generale

+

+ I sentimenti sono disposizioni d'animo relativamente stabili, mentre le + emozioni tendono ad essere temporalmente circoscritte. Emozioni e + sentimenti sono oggetto di ampio dibattito in campo psicologico (https://it.wikipedia.org/wiki/Psicologia) e talvolta questi due termini vengono equivocati. Sebbene condividano + aspetti simili, vi è una marcata differenza di essi. +

+ +

Indice dei sentimenti:

+ +
+ +
+ + +
+ + +
+
+ + +
+
+
+
+ Bassanetti Brian +
+ diff --git a/script.js b/script.js index e69de29..43e6585 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,11 @@ +function Votazione() { + let child = document.createElement("p"); + if (document.getElementsByName("nome")[0].value !== "") { + child.innerHTML = `Ciao ${document.getElementsByName("nome")[0].value} sono contenta che il mio sito ti piaccia. Grazie per il tuo voto: ${document.getElementsByName("voti")[0].value}`; + } + document.getElementById("output").appendChild(child); +} + +function Cancella() { + document.getElementById("output").innerHTML = ""; +} \ No newline at end of file diff --git a/sentimenti.html b/sentimenti.html new file mode 100644 index 0000000..1a5ca6e --- /dev/null +++ b/sentimenti.html @@ -0,0 +1,87 @@ + + + + + + + LE MIE EMOZIONI + + + +
LE MIE EMOZIONI
+
+
+ Home + Sentimenti +
+
+
+

Felicità

+

+ La felicità è lo stato d'animo (sentimento) positivo di chi ritiene soddisfatti i propri desideri. + Esempio: Sono felice se mangio un gelato +

+
+ +
+
+
+

Paura

+

+ La paura è un'emozione primaria, intensamente spiacevole, che deriva in presenza di rischio o minaccia. + Esempio: Ho paura del luoghi scuri +

+
+ +
+
+
+

Rabbia

+

+ La rabbia è una risposta naturale a situazioni percepite come minacciose o ingiuste e può fungere da + segnale + che qualcosa non va e che è necessario un cambiamento. +

+
+ +
+
+
+

Curiosità

+

+ La curiosità è un istinto che nasce dal desiderio di sapere qualcosa, come funzionano le cose esplorando + e + investigando. +

+
+ +
+
+
+ + +
+ + +
+
+ + +
+
+ +
+
+
+ Bassanetti Brian +
+ + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..e08ab92 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,179 @@ +body { + background-color: rgb(47, 94, 95); + color: white; + font-family: Comic Sans MS; + font-size: 18pt; +} + +div { + box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; +} + +a { + color: blue; +} + +.titolo { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 55px; + text-align: center; + font-style: italic; + font-weight: bold; +} + +.footer { + text-align: center; + margin-top: 25px; +} + +.topnav { + overflow: hidden; + background-color: rgb(28, 57, 58); +} + +.topnav a { + float: left; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.topnav a:hover { + background-color: #ddd; + color: black; +} + +.topnav a.active { + background-color: #04AA6D; + color: white; +} + +.immagineFooter { + transform: scaleX(-1); + height: 55px; +} + +.griglia { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-column-gap: 25px; + grid-row-gap: 25px; + padding-top: 25px; + margin-bottom: 25px; +} + +.paura, +.curiosità { + text-align: right; +} + +.felicità, +.paura, +.rabbia, +.curiosità { + font-size: 25pt; + margin-left: 5%; + margin-right: 5%; + border-radius: 25px; + transition: transform .2s; +} + +.felicità:hover, +.paura:hover, +.rabbia:hover, +.curiosità:hover { + transform: scale(1.03); +} + +.felicità { + background-color: rgb(202, 202, 26); + grid-area: 1 / 1 / 2 / 2; +} + +.rabbia { + background-color: rgb(182, 8, 8); + grid-area: 2 / 1 / 3 / 2; +} + +.paura { + background-color: rgb(60, 15, 104); + grid-area: 1 / 2 / 2 / 3; +} + +.curiosità { + background-color: rgb(132, 199, 33); + grid-area: 2 / 2 / 3 / 3; +} + +.felicità>img, +.paura>img, +.rabbia>img, +.curiosità>img { + height: 250px; + transition: transform .2s; +} + +.felicità>img:hover, +.paura>img:hover, +.rabbia>img:hover, +.curiosità>img:hover { + transform: scale(1.03); +} + +.felicità>img, +.rabbia>img { + padding-left: 300px; + padding-bottom: 45px; +} + +.paura>img, +.curiosità>img { + padding-right: 300px; + padding-bottom: 45px; +} + +.voto { + text-align: center; +} + +button { + appearance: none; + background-color: #2ea44f; + border: 1px solid rgba(27, 31, 35, .15); + border-radius: 6px; + box-shadow: rgba(27, 31, 35, .1) 0 1px 0; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-block; + font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 14px; + font-weight: 600; + line-height: 20px; + padding: 6px 16px; + position: relative; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + vertical-align: middle; + white-space: nowrap; +} + +button:hover { + background-color: #2c974b; +} + +button:focus { + box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; + outline: none; +} + +button:active { + background-color: #298e46; + box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset; +} \ No newline at end of file