Restyling grafica pagina ricerca

css/landing-page.css

@@ -5,8 +5,8 @@
  */
 
 body {
-  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  background-color: #e9e9e9;
+    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background-color: #e9e9e9;
 }
 
 h1,
@@ -15,249 +15,254 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
+    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 700;
 }
 
 header.masthead {
-  position: relative;
-  background-color: #343a40;
-  background: url("../img/bg-masthead.jpg") no-repeat center center;
-  background-size: cover;
-  padding-top: 8rem;
-  padding-bottom: 8rem;
+    position: relative;
+    background-color: #343a40;
+    background: url("../img/bg-masthead.jpg") no-repeat center center;
+    background-size: cover;
+    padding-top: 8rem;
+    padding-bottom: 8rem;
 }
 
 header.masthead .overlay {
-  position: absolute;
-  background-color: #212529;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0.1;
+    position: absolute;
+    background-color: #212529;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.1;
 }
 
 header.masthead h1 {
-  font-size: 2rem;
+    font-size: 2rem;
 }
 
 @media (min-width: 768px) {
-  header.masthead {
-    padding-top: 12rem;
-    padding-bottom: 12rem;
-  }
-  header.masthead h1 {
-    font-size: 3rem;
-  }
+    header.masthead {
+        padding-top: 12rem;
+        padding-bottom: 12rem;
+    }
+    header.masthead h1 {
+        font-size: 3rem;
+    }
 }
 
 .showcase .showcase-text {
-  padding: 3rem;
+    padding: 3rem;
 }
 
 .showcase .showcase-img {
-  min-height: 30rem;
-  background-size: cover;
+    min-height: 30rem;
+    background-size: cover;
 }
 
 @media (min-width: 768px) {
-  .showcase .showcase-text {
-    padding: 7rem;
-  }
+    .showcase .showcase-text {
+        padding: 7rem;
+    }
 }
 
 .features-icons {
-  padding-top: 7rem;
-  padding-bottom: 7rem;
-  background-color: #bac9d0;
+    background-color: #bac9d0;
 }
 
 .features-icons .features-icons-item {
-  background-color: rgba(255, 255, 255, 0.5);
-  padding:2%;
+    background-color: rgba(255, 255, 255, 0.5);
+    padding: 2%;
 }
 
 .features-icons .features-icons-item .features-icons-icon {
-  height: 7rem;
+    height: 7rem;
 }
 
 .features-icons .features-icons-item .features-icons-icon i {
-  font-size: 4.5rem;
+    font-size: 4.5rem;
 }
 
 .features-icons .features-icons-item:hover .features-icons-icon i {
-  font-size: 5rem;
-}
-
-.testimonials {
-  padding-top: 7rem;
-  padding-bottom: 7rem;
+    font-size: 5rem;
 }
 
 .testimonials .testimonial-item {
-  max-width: 18rem;
+    max-width: 18rem;
 }
 
 .testimonials .testimonial-item img {
-  width: 10rem;
-  height: 10rem;
-  box-shadow: 0px 5px 5px 0px #adb5bd;
+    width: 10rem;
+    height: 10rem;
+    box-shadow: 0px 5px 5px 0px #adb5bd;
 }
 
 .call-to-action {
-  position: relative;
-  background-color: #343a40;
-  background: url("../img/bg-masthead.jpg") no-repeat center center;
-  background-size: cover;
-  padding-top: 7rem;
-  padding-bottom: 7rem;
+    position: relative;
+    background-color: #343a40;
+    background: url("../img/bg-masthead.jpg") no-repeat center center;
+    background-size: cover;
+    padding-top: 7rem;
+    padding-bottom: 7rem;
 }
 
 .call-to-action .overlay {
-  position: absolute;
-  background-color: #212529;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0.3;
+    position: absolute;
+    background-color: #212529;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.3;
 }
 
 footer.footer {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
 }
 
 #search {
-	background-color: black;
-	padding: 8rem 0;
-	background: url(../img/bg-masthead.jpg) no-repeat center center;
+    background-color: black;
+    background: url(../img/bg-masthead.jpg) no-repeat center center;
     background-size: cover;
 }
 
 #search-options {
-	width:60%;
-	margin-left: auto;
-	margin-right:auto;
-	padding: 4rem;
-	background-color: #3f4149;
-	color: #fff;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: stretch;
-  justify-content: space-evenly;
+    position: relative;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media (min-width: 768px) {
+    #search-options {
+        width: 50%;
+    }
 }
 
 .drop-down-content > select > option {
-	background-color: #000;
-} 
+    background-color: #000;
+}
+
+.form-select-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+}
 
 .form-select {
-	border-style: hidden;
-	display:block;
-	float:left;
-	background-color: transparent;
-	margin-right: 2rem;
-	color: #fff;
-	font-size: 18px;
-	margin-top: 0.5rem;
+    background-color: transparent;
+    border: 0;
+    border-bottom: 2px solid white;
+    margin-right: 2rem;
+    color: #fff;
+    font-size: 18px;
+    text-align: center;
+}
+
+.form-select option {
+  color: black;
 }
 
 .form-control {
-	padding: 1.2em;
-	font-size: 24px;
+    font-size: 24px;
+    border-color: white;
+}
+
+.form-control + .input-group-append .btn {
+    border-width: 3px;
+    border-color: white;
 }
 
 #input-range {
-	color: #fff;
-	padding-top: 0.5rem;
-	font-size: 18px;
+    color: #fff;
+    padding-top: 0.5rem;
+    font-size: 18px;
 }
 
 #myRange {
-	width: 20%;
+    width: 20%;
 }
 
 .slider {
-  -webkit-appearance: none;
-  width: 100%;
-  height: 10px;
-  border-radius: 5px;
-  background: #d3d3d3;
-  outline: none;
-  opacity: 0.7;
-  -webkit-transition: .2s;
-  transition: opacity .2s;
+    -webkit-appearance: none;
+    width: 100%;
+    height: 10px;
+    border-radius: 5px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: 0.2s;
+    transition: opacity 0.2s;
 }
 
 .slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: red;
-  cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: red;
+    cursor: pointer;
 }
 
 .search-image {
-	width: 30px;
+    width: 30px;
 }
 
 .btn-outline-secondary {
-	background-color: #fff;
-	border-radius: 0;
-	border-color: #fff;
+    background-color: #fff;
+    border-radius: 0;
+    border-color: #fff;
 }
 
 .btn-icon {
-	height:24px;
+    height: 24px;
 }
 
 .btn-icon-btn {
-	background-color:#e7e7e7;
-	border-color: transparent;
-	border-radius: .25rem;
-	border: 1px solid transparent;
-    padding: .375rem .75rem;
+    background-color: #e7e7e7;
+    border-color: transparent;
+    border-radius: 0.25rem;
+    border: 1px solid transparent;
+    padding: 0.375rem 0.75rem;
     font-size: 1rem;
     line-height: 1.5;
 }
 
 #results-cont {
-	width:100%;
-	margin-left: auto;
-	margin-right:auto;
-	padding: 2%;
-	background-color: #e9e9e9;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 2%;
+    background-color: #e9e9e9;
 }
 
 #res-check {
-	width:100%;
-	margin-left: auto;
-	margin-right:auto;
-	background-color: #e9e9e9;
-	padding-top: 5%;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #e9e9e9;
+    padding-top: 5%;
 }
 
 #res-table {
-	background-color: #fff;
+    background-color: #fff;
 }
 
 article {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 .card-header {
-	background-color:#6c757d;
-	color: #fff;
+    background-color: #6c757d;
+    color: #fff;
 }
 
 .row-itinerari {
     padding-top: 50px;
-	padding-bottom: 50px;
+    padding-bottom: 50px;
 }
 
 .wrap-bg-img-itinerari {
@@ -269,7 +274,7 @@ article {
 }
 
 .row-itinerari .card-body {
-	text-align:center;
+    text-align: center;
     background-color: #a71b24;
     height: 90px;
 }
@@ -281,8 +286,8 @@ article {
 }
 
 .card-title {
-	color: #fff;
-	line-height:50px;
+    color: #fff;
+    line-height: 50px;
 }
 
 .bg-img-itinerari {
@@ -298,18 +303,18 @@ article {
 }
 
 #percorso {
-	padding: 1% 5%;
+    padding: 1% 5%;
 }
 
 .ico-img {
-	margin-left: auto;
-	margin-right: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 #search_fp {
-  width:70%;
-  margin-left:auto;
-  margin-right:auto;
+    width: 70%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 header.masthead {
@@ -318,117 +323,117 @@ header.masthead {
 }
 
 .more {
-	background-color: #a71b24;
-	color: #fff;
-	padding:2rem;
-	font-size:20px;
+    background-color: #a71b24;
+    color: #fff;
+    padding: 2rem;
+    font-size: 20px;
 }
 
 .slideshow {
-	padding: 2rem;
-	min-height: 30rem;
-	
+    padding: 2rem;
+    min-height: 30rem;
 }
 
 .slideshow-img {
-	background-size: 35rem;
+    background-size: 35rem;
     height: 35rem;
     background-repeat: no-repeat;
-	background-position: center;
+    background-position: center;
 }
 
 .slideshow-text p {
-	font-size: 16px;
+    font-size: 16px;
     padding: 10%;
 }
 
 .ang {
-	position: absolute;
-	background-color: #a71b24;
-	color: #fff;
-	font-size: 60px;
-	border-radius: 50%;
-	width: 70px;
-	height:70px;
-	text-align: center;
-	line-height:70px;
+    position: absolute;
+    background-color: #a71b24;
+    color: #fff;
+    font-size: 60px;
+    border-radius: 50%;
+    width: 70px;
+    height: 70px;
+    text-align: center;
+    line-height: 70px;
 }
 
 .btn-text {
-  font-size: 8px;
-  text-transform: uppercase;
+    font-size: 10px;
+    text-transform: uppercase;
+    margin-bottom: 0;
 }
 
 .img-logo {
-	max-height:30px;
-	width:auto;
+    max-height: 30px;
+    width: auto;
 }
 
 #wb_Shape1 {
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: #fff;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #fff;
 }
 
 .tab-content a:link {
-  color: #000;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #000;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 .tab-content a:visited {
-  color: #000;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #000;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 .tab-content a:hover {
-  color: #007bff;
-  background-color: transparent;
-  text-decoration: underline;
+    color: #007bff;
+    background-color: transparent;
+    text-decoration: underline;
 }
 
 .tab-content h2 a:link {
-  color: #fff;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #fff;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 .tab-content h2 a:visited {
-  color: #fff;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #fff;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 .tab-content h2 a:hover {
-  color: #007bff;
-  background-color: transparent;
-  text-decoration: underline;
+    color: #007bff;
+    background-color: transparent;
+    text-decoration: underline;
 }
 
 table a:link {
-  color: #000;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #000;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 table a:visited {
-  color: #000;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #000;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 table a:hover {
-  color: #007bff;
-  background-color: transparent;
-  text-decoration: underline;
+    color: #007bff;
+    background-color: transparent;
+    text-decoration: underline;
 }
 
 .loader {
@@ -439,116 +444,120 @@ table a:hover {
     height: 120px;
     animation: spin 2s linear infinite;
     display: none;
- }
+}
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
-.show-loader{
-display:block;
+.show-loader {
+    display: block;
 }
 
 .modal {
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
-  padding-top: 100px; /* Location of the box */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0, 0, 0); /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
 }
 
 /* Modal Content */
 .modal-content {
-  background-color: #fefefe;
-  margin: auto;
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
 }
 
 #info_link {
-  width:100%;
+    width: 100%;
 }
 
 #info_ico {
-  width:100%;
+    width: 100%;
 }
 
 #info_obj {
-  width:100%;
+    width: 100%;
 }
 
 /* The Close Button */
 .close {
-  color: #aaaaaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer;
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
 }
 
 .tab {
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
-  padding-top: 100px; /* Location of the box */
-  padding-bottom: 100px;
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: #e9e9e9;
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    padding-bottom: 100px;
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: #e9e9e9;
 }
 
 .tab-content {
-  background-color: #fff;
-  margin: auto;
-  width: 80%;
+    background-color: #fff;
+    margin: auto;
+    width: 80%;
 }
 
 #tab_container {
-  padding: 20px;  
+    padding: 20px;
 }
 
 .tab-content h2 {
-  padding:20px;
-  background-color: #3f4149;
-  color: #fff;
+    padding: 20px;
+    background-color: #3f4149;
+    color: #fff;
 }
 
 /* The Back Button */
 .back {
-  color: #000;
-  float: left;
-  font-size: 20px;
-  font-weight: bold;
-  width:100%;
-  background-color: #e9e9e9;
+    color: #000;
+    float: left;
+    font-size: 20px;
+    font-weight: bold;
+    width: 100%;
+    background-color: #e9e9e9;
 }
 
 .back:hover,
 .back:focus {
-  color: #000;
-  text-decoration: none;
-  cursor: pointer;
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
 }
 
 #myInput {
-  width: 80%;
+    width: 80%;
     margin-left: auto;
     margin-right: auto;
     background-color: #e9e9e9;
@@ -559,108 +568,118 @@ display:block;
 }
 
 #copy_btn {
-  width:20%;
-  margin-left:auto;
-  margin-right:auto;
+    width: 20%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 #wb_intro {
-  padding: 2em 12em;
-  text-align: justify;
-  font-size: 20px;
-  font-weight: 300;
+    max-width: 900px;
+    margin: 0 auto;
+    font-size: 20px;
+    font-weight: 300;
 }
 
-#wb_intro h2{
-  text-align:center;
+#wb_intro h2 {
+    text-align: center;
+    font-size: 2.375rem;
+    font-weight: 400;
+    margin-bottom: 0.9375rem;
 }
 
 .results {
-  display: none;
-  margin-left:auto;
-  margin-right:auto;
-  width:80%;
-  min-height:150px;
-  border: 1px solid;
-  background-color: #fff;
+    display: none;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 150px;
+    border: 1px solid;
+    background-color: #fff;
+    border-radius: 6px;
+    overflow: hidden;
+    margin-bottom: 35px;
+}
+@media (min-width: 768px) {
+    .results {
+        width: 80%;
+    }
 }
 
 .section_title {
-  background-color: #3f4149;
-  color: #fff;
-  margin-left:auto;
-  margin-right:auto;
-  padding:1%;
-  font-weight:600;
+    background-color: #3f4149;
+    color: #fff;
+    padding-top: 7px;
+    padding-bottom: 10px;
+    font-weight: 600;
 }
 
 .num_res {
-  text-align:right;
+    text-align: right;
 }
 
 .res {
-  border-bottom: 1px solid #000;
-  padding:1%;
-  font-size: 12px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 14px;
+}
+
+.res:not(:last-child) {
+    border-bottom: 1px solid #000;
 }
 
 .res_list {
-  margin-left:0px;
-  margin-right: 0px;
-  padding: 1% 0%;
-  max-height: 400px;
-  overflow: scroll;
+    max-height: 400px;
+    overflow: auto;
 }
 
 .res a:link {
-  color: #000;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #000;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 .res a:visited {
-  color: #000;
-  background-color: transparent;
-  text-decoration: none;
-  font-weight: bold;
+    color: #000;
+    background-color: transparent;
+    text-decoration: none;
+    font-weight: bold;
 }
 
 .res a:hover {
-  color: #007bff;
-  background-color: transparent;
-  text-decoration: underline;
+    color: #C41C22;
+    background-color: transparent;
+    text-decoration: underline;
 }
 
 .res button {
-  color: #30383f9e;
-  font-size: 12px;
+    color: #30383f9e;
+    font-size: 12px;
 }
 
 .btn-menu {
-  color: #a7a7a7;
-  text-transform: uppercase;
+    color: #a7a7a7;
+    text-transform: uppercase;
 }
 
 .btn-menu:hover {
-  color: #fff;
+    color: #fff;
 }
 
 .navbar-nav .active {
-  color: #fff;
+    color: #fff;
 }
 
 .sharp {
-  background-color: #b6192447;
+    background-color: #b6192447;
 }
 
 #advSearch {
-  text-align: right;
-    width: 100%;
-    margin-top: -10px;
-    margin-bottom: 10px;
+    text-align: right;
+    margin-top: -5px;
+    margin-bottom: 5px;
+    font-size: 17px;
 }
 
 #advSearch a {
-  color: #fff;
+    color: #fff;
 }

index.html

@@ -27,7 +27,6 @@
   <script src="js/particles.js"></script>
 
   <header class="sticky-top">
-    <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-light bg-white">
       <div class="container-fluid">
         <div class="navbar-brand">
@@ -96,7 +95,7 @@
     </section>
 
     <!-- Icons Grid -->
-    <section class="features-icons bg-white text-center">
+    <section class="section features-icons bg-white text-center">
       <div class="container">
         <div class="row sm:mb-5">
           <div onclick="location.href='ricerca.html';" style="cursor: pointer;" class="col-sm-4 index-btn mb-3 sm:mb-0">
@@ -180,7 +179,7 @@
     </section>
 
     <!-- Testimonials -->
-    <section class="testimonials text-center bg-light">
+    <section class="section-small testimonials text-center bg-light">
       <div class="container">
         <div class="d-lg-flex align-items-center justify-content-between">
           <div class="mb-5 pr-lg-5">
@@ -223,10 +222,10 @@
     </section>
   </main>
 
-  <footer class="footer">
+  <footer id="footer" class="footer">
     <div class="container">
       <div class="row">
-        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
+        <div class="col-lg-7 h-100 text-center text-lg-left my-auto">
           <ul class="list-inline mb-2">
             <li class="list-inline-item">
               <a href="#">About</a>
@@ -244,23 +243,38 @@
               <a href="#">Privacy Policy</a>
             </li>
           </ul>
-          <p class="small mb-4 mb-lg-0">&copy; Restore. All Rights Reserved.</p>
+          <p class="small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
         </div>
-        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
-          <ul class="list-inline mb-0">
+        <div class="col-lg-5 h-100 text-center my-auto">
+          <ul class="partner-list list-inline mb-0">
             <li class="list-inline-item mr-3">
               <a href="#">
-                <i class="fab fa-facebook fa-2x fa-fw"></i>
+                <img class="img-logo" src="img/CNR.png" />
               </a>
             </li>
             <li class="list-inline-item mr-3">
               <a href="#">
-                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
+                <img class="img-logo" src="img/RegioneToscana.jpg" />
+              </a>
+            </li>
+            <li class="list-inline-item mr-3">
+              <a href="#">
+                <img class="img-logo" src="img/European-Union.png" />
+              </a>
+            </li>
+            <li class="list-inline-item mr-3">
+              <a href="#">
+                <img class="img-logo" src="img/RepubblicaItaliana.png" />
+              </a>
+            </li>
+            <li class="list-inline-item mr-3">
+              <a href="#">
+                <img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
               </a>
             </li>
             <li class="list-inline-item">
               <a href="#">
-                <i class="fab fa-instagram fa-2x fa-fw"></i>
+                <img class="img-logo" src="img/GiovaniSi.png" />
               </a>
             </li>
           </ul>

js/search.js

@@ -263,10 +263,10 @@ $(document).ready(function () {
 				object += /*INIZIO DIV*/ '<div class="row res"><div class="col-8">' + graph_name + '<br />' +
 				'<a href=' + value['subject']['value'] + ' target="_blank">' + value['label']['value'] + '</a><br />' +
 				'<i>' + mmoType + ' ' + mmoId + '</i></div>' +
-				'<div class="col">' + object_button + '</div>' +
-				'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button></div>' +
-				/*DA QUI HYPERLINK ->*/'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button></div>' +
-				/*DA QUI LOD ->*/'<div class="col"><a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>'; 
+				'<div class="col d-flex align-items-start justify-content-end">' + object_button +
+				'<button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
+				/*DA QUI HYPERLINK ->*/'<button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
+				/*DA QUI LOD ->*/'<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';
 
 				i++;
 
@@ -389,10 +389,10 @@ $(document).ready(function () {
 				'In: ' + graph_name + ';<br />' +
 				'<a href=' + value['subject']['value'] + ' target="_blank">' + value['label']['value'] + id + 
 				'</a>;<br /><i>' + tipo + '</i><br /></div>' + 
-				'<div class="col">' + infObject_button + '</div>' +
-				'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button></div>' +
-				/*DA QUI HYPERLINK ->*/'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button></div>' +
-				/*DA QUI LOD ->*/'<div class="col"><a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>'; 
+				'<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
+				'<button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
+				/*DA QUI HYPERLINK ->*/'<button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
+				/*DA QUI LOD ->*/'<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';
 
 				i++;
 
@@ -429,11 +429,11 @@ $(document).ready(function () {
 
 				person += /*INIZIO DIV*/ '<div class="row res"><div class="col-8">' + graph_name + '<br />' +
 				'<a href=' + value['subject']['value'] + ' target="_blank">' + value['name']['value'] + '</a></div>' +
-				'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="persona btn btn-default" alt="persona" title="' + 
-				value['name']['value'] + '"><i class="fa fa-user"></i><p class="btn-text">Scheda Persona</p></button></div>' +
-				'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button></div>' +
-				/*DA QUI HYPERLINK ->*/'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button></div>' +
-				/*DA QUI LOD ->*/'<div class="col"><a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>'; 
+				'<div class="col d-flex align-items-start justify-content-end"><button type="button" id="' + value['subject']['value'] + '" class="persona btn btn-default" alt="persona" title="' +
+				value['name']['value'] + '"><i class="fa fa-user"></i><p class="btn-text">Scheda Persona</p></button>' +
+				'<button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
+				/*DA QUI HYPERLINK ->*/'<button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
+				/*DA QUI LOD ->*/'<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';
 
 				i++;
 
@@ -470,11 +470,11 @@ $(document).ready(function () {
 
 				place += /*INIZIO DIV*/ '<div class="row res"><div class="col-8">' + graph_name + '<br />' +
 				'<a href=' + value['subject']['value'] + ' target="_blank">' + value['label']['value'] + '</a></div>' +
-				'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="luogo btn btn-default" alt="luogo" title="' + 
-				value['label']['value'] + '"><i class="fa fa-map"></i><p class="btn-text">Scheda Luogo</p></button></div>' +
-				'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button></div>' +
-				/*DA QUI HYPERLINK ->*/'<div class="col"><button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button></div>' +
-				/*DA QUI LOD ->*/'<div class="col"><a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>'; 
+				'<div class="col d-flex align-items-start justify-content-end"><button type="button" id="' + value['subject']['value'] + '" class="luogo btn btn-default" alt="luogo" title="' +
+				value['label']['value'] + '"><i class="fa fa-map"></i><p class="btn-text">Scheda Luogo</p></button>' +
+				'<button type="button" id="' + value['subject']['value'] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
+				/*DA QUI HYPERLINK ->*/'<button type="button" id="' + value['subject']['value'] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
+				/*DA QUI LOD ->*/'<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + value['subject']['value'] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>'; 
 
 				i++;
 

ricerca.html

@@ -1,226 +1,278 @@
 <!doctype html>
 <html>
+
 <head>
-<meta charset="utf-8">
-<title>MOCKY - Il mockup di RESTORE</title>
-<link href="Untitled1.css" rel="stylesheet">
-<link href="index.css" rel="stylesheet">
-<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
-<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
-<link href="css/landing-page.css" rel="stylesheet">
-<link href="css/datafilter.css" rel="stylesheet">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
-<script src="js\search.js"></script>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="description" content="">
+	<meta name="author" content="">
+
+	<title>Restore</title>
+
+	<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+	<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
+	<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
+	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
+
+	<link href="css/landing-page.css" rel="stylesheet">
+	<link href="css/styles.min.css" rel="stylesheet">
 
+	<script src="js/search.js"></script>
 </head>
-<body>
 
-	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-	  <div class="container-fluid">
-	    <img src="img/Logo.png" style="width:100px;">
-	    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-	      <span class="navbar-toggler-icon"></span>
-	    </button>
-	    <div class="navbar-nav" style="margin-left:auto;">
-	        <a class="button-link" href="index.html"><button class="btn btn-menu" type="button">Home</button></a>
-	        <a class="button-link" href="http://restore.ovi.cnr.it/"><button class="btn btn-menu" type="button">Progetto</button></a>
-	        <a class="button-link" href="ricerca.html"><button class="btn btn-menu" type="button">Ricerca</button></a>
-	        <a class="button-link" href="#"><button class="btn btn-menu" type="button">Indici</button></a>
-	        <a class="button-link" href="#"><button class="btn btn-menu" type="button">Percorsi</button></a>
-	        <a class="button-link" href="standard.html"><button class="btn btn-menu" type="button">Standard</button></a>
-	        <div class="dropdown">
-	          <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql
-	          </button>
-	          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-	            <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
-	            <a class="dropdown-item" href="sparql.html">Query</a>
-	          </div>
-	        </div>
-	        <a class="button-link" href="download.html"><button class="btn btn-menu" type="button">Download</button></a>
-	        <div class="dropdown">
-	          <button class="btn btn-menu dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni
-	          </button>
-	          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-	            <a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/">CKAN</a>
-	            <a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/">LOD</a>
-	          </div>
-	        </div>
-	      </div>
-	  </div>
-	</nav>
-
-<section id="search" class="masthead text-center">
-    <div id="search-options" class="container">	
-    	<div id="advSearch"><a href="ricerca_avanzata.html">Ricerca avanzata</a></div>
-    	<div class="input-group mb-3">
-			<input type="text" name="TextArea1" id="TextArea1" class="form-control" placeholder="Enter search terms" aria-label="Enter search terms" aria-describedby="button-addon2">	
-			<div id="wb_ClipArt1">
-				<button class="btn-outline-secondary" type="button" id="ClipArt1" style="height:100%;">
-					<img class="search-image" src="img/search.png">
+<body>
+	<header class="sticky-top">
+		<nav class="navbar navbar-expand-lg navbar-light bg-white">
+			<div class="container-fluid">
+				<div class="navbar-brand">
+					<img src="img/Logo.png" width="100" alt="Restore" />
+				</div>
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
 				</button>
+				<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
+					<ul class="navbar-nav">
+						<li class="nav-item">
+							<a class="nav-link" href="index.html">Home</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="http://restore.ovi.cnr.it/">Progetto</a>
+						</li>
+						<li class="nav-item active">
+							<a class="nav-link" href="#">Ricerca</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Indici</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="#">Percorsi</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="standard.html">Standard</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sparql</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it:8890/sparql/">Endpoint Sparql</a>
+								<a class="dropdown-item" href="sparql.html">Query</a>
+							</div>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link" href="download.html">Download</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Collegamenti esterni</a>
+							<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
+								<a class="dropdown-item" href="http://ckan.restore.ovi.cnr.it/" target="_blank">CKAN</a>
+								<a class="dropdown-item" href="http://dev.restore.ovi.cnr.it/lodlive/" target="_blank">LOD</a>
+							</div>
+						</li>
+					</ul>
+				</div>
 			</div>
-		</div>
+		</nav>
+	</header>
 
-		<div class="drop-down-content">
-			<select id ="graph_selector" class="form-select" aria-label="Default select example">  
-				  <option selected value="">Tutte le Collezioni</option> 
-			</select>
-		</div>
-		<!---<div class="drop-down-content">
-			<select id ="entity_selector" class="form-select" aria-label="Default select example">
-			  <option selected value="">Tutte le Categorie</option>
-			</select>
-		</div>-->
-	</div>
-</section>
-
-<div style ="padding:1em" id="wb_Image1">
-  <div id="wb_intro">
-      <h2>Inizia la tua ricerca</h2>
-	   <p>Per iniziare, inserite una parola o un gruppo di parole nella barra di ricerca e cliccate il pulsante di avvio della ricerca. Se siete interessati solo alle risorse afferenti a una singola collezione (Archivio di Stato di Prato, Museo di Palazzo Pretorio, ecc.) potete selezionare la collezione dal menù a tendina dove di default sono selezionate "Tutte le collezioni". I risultati appariranno suddivisi in quattro blocchi, che corrispondono alla tipologia di risorsa: Oggetti Fisici, Contenuti, Persone e Luoghi. Se nessuna risorsa corrisponde ai criteri di ricerca apparirà un messaggio di errore che inviterà a cambiare i criteri di ricerca. </p>
-     <p>Verranno restituite tutte le corrispondenze della parola cercata, insieme al loro contesto, costituito dalla collezione di appartenenza e dal tipo di entità che la risorsa rappresenta. Per ogni risultato sono disponibili dei pulsanti che permettono di approfondire l'informazione sulla risorsa. 
-	   </p>
-  </div>
-</div>
-<div class="loader" id="loader">
-</div>
-
-<!-- Modal -->
-<div id="myModal" class="modal">
-
-</div>
-
-<!-- Scheda -->
-<div id="myTab" class="tab">
-
-</div>
-
-<!-- Oggetti fisici -->
-<div class="table results">
-	<div class="row section_title">
-		<div class="col">Oggetti <br />
-		Cerca in nomi delle risorse e loro identificatori</div>
-		<div class="col num_res"><p><span id="n_mmo"></span> Risultati</p></div>
-	</div>
-	<div class="row res_list">
-		<div class="col" id="Man-Made_Object">
-		</div>
-	</div>
-</div>
-
-
-<!-- Oggetti informativi -->
-<div class="table results">
-	<div class="row section_title">
-		<div class="col">Contenuti <br />
-		Cerca all'interno dei testi collegati alle risorse</div>
-		<div class="col num_res"><p><span id="n_io"></span> Risultati</p></div>
-	</div>
-	<div class="row res_list">
-		<div class="col" id="Information_Object">
-		</div>
-	</div>
-</div>
-
-
-<!-- Persone -->
-<div class="table results">
-	<div class="row section_title">
-		<div class="col">Protagonisti <br />
-		Cerca in nomi delle persone</div>
-		<div class="col num_res"><p><span id="n_ps"></span> Risultati</p></div>
-	</div>
-	<div class="row res_list">
-		<div class="col" id="Person">
-		</div>
-	</div>
-</div>
-
-<!-- Luoghi -->
-<div class="table results">
-	<div class="row section_title">
-		<div class="col">Luoghi <br />
-		Cerca tra i nomi associati ai luoghi (Toponimi)</div>
-		<div class="col num_res"><p><span id="n_pl"></span> Risultati</p></div>
-	</div>
-	<div class="row res_list">
-		<div class="col" id="Place">
+	<main>
+		<section id="search" class="masthead">
+			<div class="overlay"></div>
+			<div id="search-options" class="container">
+				<div id="advSearch">
+					<a href="ricerca_avanzata.html">Ricerca avanzata</a>
+				</div>
+				<div>
+					<div class="input-group">
+						<input type="text" name="TextArea1" id="TextArea1" class="form-control" placeholder="Enter search terms" aria-label="Enter search terms" aria-describedby="ClipArt1">
+						<div class="input-group-append">
+							<button class="btn btn-theme-primary" type="button" id="ClipArt1">
+								<span class="fas fa-search"></span>
+							</button>
+						</div>
+					</div>
+
+					<div class="form-select-container">
+						<div>
+							<label for="graph_selector" class="sr-only">Example select</label>
+							<select id="graph_selector" class="form-select">
+								<option selected value="">Tutte le Collezioni</option>
+							</select>
+						</div>
+
+						<!-- <div>
+							<label for="entity_selector" class="sr-only">Tutte le Categorie</label>
+							<select id="entity_selector" class="form-select">
+								<option selected value="">Tutte le Categorie</option>
+							</select>
+						</div> -->
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section id="wb_Image1">
+			<div class="container">
+				<div id="wb_intro" class="section-small">
+					<h2>Inizia la tua ricerca</h2>
+					<p>Per iniziare, inserite una parola o un gruppo di parole nella barra di ricerca e cliccate il pulsante di avvio della ricerca. Se siete interessati solo alle risorse afferenti a una singola collezione (Archivio di Stato di Prato, Museo di Palazzo Pretorio, ecc.) potete selezionare la collezione dal menù a tendina dove di default sono selezionate "Tutte le collezioni". I risultati appariranno suddivisi in quattro blocchi, che corrispondono alla tipologia di risorsa: Oggetti Fisici, Contenuti, Persone e Luoghi. Se nessuna risorsa corrisponde ai criteri di ricerca apparirà un messaggio di errore che inviterà a cambiare i criteri di ricerca. </p>
+					<p>Verranno restituite tutte le corrispondenze della parola cercata, insieme al loro contesto, costituito dalla collezione di appartenenza e dal tipo di entità che la risorsa rappresenta. Per ogni risultato sono disponibili dei pulsanti che permettono di approfondire l'informazione sulla risorsa.
+					</p>
+				</div>
+			</div>
+		</section>
+
+		<section class="section-small">
+			<div class="container-fluid">
+				<div class="loader" id="loader"></div>
+
+				<!-- Scheda -->
+				<div id="myTab" class="tab"></div>
+
+				<!-- Oggetti fisici -->
+				<div class="table results container-fluid">
+					<div class="row section_title">
+						<div class="col">
+							Oggetti <br /> Cerca in nomi delle risorse e loro identificatori
+						</div>
+						<div class="col num_res">
+							<p><span id="n_mmo"></span> Risultati</p>
+						</div>
+					</div>
+					<div class="row res_list">
+						<div class="container-fluid" id="Man-Made_Object">
+
+						</div>
+					</div>
+				</div>
+
+				<!-- Oggetti informativi -->
+				<div class="table results container-fluid">
+					<div class="row section_title">
+						<div class="col">Contenuti <br />
+							Cerca all'interno dei testi collegati alle risorse</div>
+						<div class="col num_res">
+							<p><span id="n_io"></span> Risultati</p>
+						</div>
+					</div>
+					<div class="row res_list">
+						<div class="col" id="Information_Object">
+						</div>
+					</div>
+				</div>
+
+				<!-- Persone -->
+				<div class="table results container-fluid">
+					<div class="row section_title">
+						<div class="col">Protagonisti <br />
+							Cerca in nomi delle persone</div>
+						<div class="col num_res">
+							<p><span id="n_ps"></span> Risultati</p>
+						</div>
+					</div>
+					<div class="row res_list">
+						<div class="col" id="Person">
+						</div>
+					</div>
+				</div>
+
+				<!-- Luoghi -->
+				<div class="table results container-fluid">
+					<div class="row section_title">
+						<div class="col">Luoghi <br />
+							Cerca tra i nomi associati ai luoghi (Toponimi)</div>
+						<div class="col num_res">
+							<p><span id="n_pl"></span> Risultati</p>
+						</div>
+					</div>
+					<div class="row res_list">
+						<div class="col" id="Place">
+						</div>
+					</div>
+				</div>
+
+				<div id="wb_Text1" style="position:fixed;">
+					<span id="wb_uid0"></span><span id="wb_uid1"><br></span>
+				</div>
+
+				<table id="wb_Shape1" class="table table-hover"></table>
+			</div>
+		</section>
+	</main>
+
+
+
+	<!-- Modal -->
+	<div id="myModal" class="modal"></div>
+
+
+
+	<footer id="footer" class="footer">
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-7 h-100 text-center text-lg-left my-auto">
+					<ul class="list-inline mb-2">
+						<li class="list-inline-item">
+							<a href="#">About</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Contact</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Terms of Use</a>
+						</li>
+						<li class="list-inline-item">&sdot;</li>
+						<li class="list-inline-item">
+							<a href="#">Privacy Policy</a>
+						</li>
+					</ul>
+					<p class="small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
+				</div>
+				<div class="col-lg-5 h-100 text-center my-auto">
+					<ul class="partner-list list-inline mb-0">
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/CNR.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RegioneToscana.jpg" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/European-Union.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/RepubblicaItaliana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item mr-3">
+							<a href="#">
+								<img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
+							</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="#">
+								<img class="img-logo" src="img/GiovaniSi.png" />
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
 		</div>
-	</div>
-</div>
-
-<div id="wb_Text1" style="position:fixed;">
-<span id="wb_uid0"></span><span id="wb_uid1"><br></span></div>
-<table id="wb_Shape1" class="table table-hover"> 
-</table>
-
-
-<div id="footer">
-    <footer class="footer bg-dark">
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
-          <ul class="list-inline mb-2">
-            <li class="list-inline-item">
-              <a href="#">About</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Contact</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Terms of Use</a>
-            </li>
-            <li class="list-inline-item">&sdot;</li>
-            <li class="list-inline-item">
-              <a href="#">Privacy Policy</a>
-            </li>
-          </ul>
-          <p class="text-muted small mb-4 mb-lg-0">&copy; RESTORE 2021. All Rights Reserved.</p>
-        </div>
-        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
-          <ul class="list-inline mb-0">
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/CNR.png" />
-              </a>
-            </li>
-            <li class="list-inline-item mr-3">
-              <a href="#">
-                <img class="img-logo" src="img/RegioneToscana.jpg" />
-              </a>
-            </li>
-            <li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/European-Union.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/RepubblicaItaliana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/POR-FSE-Regione-Toscana.png" />
-              </a>
-            </li>
-			<li class="list-inline-item">
-              <a href="#">
-                <img class="img-logo" src="img/GiovaniSi.png" />
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </footer>
-</div>
-<!-- Bootstrap core JavaScript -->
-  <script src="vendor/jquery/jquery.min.js"></script>
-  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+	</footer>
+
+	<!-- Bootstrap core JavaScript -->
+	<script src="vendor/jquery/jquery.min.js"></script>
+	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 </body>
+
 </html>

scss/_buttons.scss

@@ -0,0 +1,17 @@
+.btn {
+    &:focus {
+        border-color: rgba(242, 206, 57, .8);
+        box-shadow: 0 0 0 1px rgba(242, 206, 57, .8);
+    }
+}
+
+.btn-theme-primary {
+    background-color: $theme-color-dark;
+    border-color: $theme-color-dark;
+    color: white;
+    &:hover {
+        color: white;
+        background-color: #69161d;
+        border-color: #69161d;
+    }
+}

scss/_footer.scss

@@ -6,4 +6,9 @@ footer.footer {
   a {
     color: white;
   }
+  .partner-list {
+    background-color: rgba(250,250,250,.5);
+    border-radius: 6px;
+    padding: 10px 0;
+  }
 }

scss/_forms.scss

@@ -0,0 +1,6 @@
+.form-control {
+    &:focus {
+        border-color: rgba(242, 206, 57, .8);
+        box-shadow: 0 0 0 1px rgba(242, 206, 57, .8);
+    }
+}

scss/_global.scss

@@ -1,5 +1,16 @@
+html {
+    height: 100%;
+}
+
 body {
-  @include body-font;
+    @include body-font;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
 }
 
 h1,
@@ -8,25 +19,43 @@ h3,
 h4,
 h5,
 h6 {
-  @include body-font;
-  font-weight: 700;
+    @include body-font;
+    font-weight: 700;
 }
 
 a {
-  color: $theme-color;
-  &:hover {
-    color: #a2171c;
-  }
+    color: $theme-color;
+    &:hover {
+        color: #a2171c;
+    }
+}
+
+.section {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    @media (min-width: 768px) {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+    }
+}
+
+.section-small {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    @media (min-width: 768px) {
+        padding-top: 4rem !important;
+        padding-bottom: 4rem !important;
+    }
 }
 
 .container {
-  @media (min-width: $sm) {
-    max-width: 100%;
-  }
-  @media (min-width: $md) {
-    max-width: 720px;
-  }
-  @media (min-width: $lg) {
-    max-width: 1180px;
-  }
+    @media (min-width: $sm) {
+        max-width: 100%;
+    }
+    @media (min-width: $md) {
+        max-width: 720px;
+    }
+    @media (min-width: $lg) {
+        max-width: 1180px;
+    }
 }

scss/_icons.scss

@@ -1,10 +1,4 @@
 .features-icons {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-    @media (min-width: 768px) {
-        padding-top: 6rem;
-        padding-bottom: 6rem;
-    }
     .features-icons-item {
         max-width: 20rem;
         margin: auto;

scss/_testimonials.scss

@@ -1,10 +1,4 @@
 .testimonials {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-    @media (min-width: 768px) {
-        padding-top: 4rem;
-        padding-bottom: 4rem;
-    }
     .testimonial-item {
         max-width: 100%;
         img {

scss/_variables.scss

@@ -33,7 +33,9 @@ $light: $gray-100 !default;
 $dark: $gray-800 !default;
 
 // Custom variables
-$theme-color: #c41c22;
+$theme-color: #C41C22;
+$theme-color-dark: #891D26;
+$theme-yellow: #F2CE39;
 
 // Bootstrap breakpoints
 $sm: 576px;

scss/styles.scss

@@ -5,6 +5,8 @@
 @import "global.scss";
 // Components
 @import "navbar.scss";
+@import "forms.scss";
+@import "buttons.scss";
 @import "masthead.scss";
 @import "showcase.scss";
 @import "icons.scss";