Concetta Giannangeli

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Concetta Giannangeli</title>
	<link>https://concettagiannangeli.com</link>
	<description>Concetta Giannangeli</description>
	<pubDate>Fri, 04 Apr 2025 14:32:16 +0000</pubDate>
	<generator>https://concettagiannangeli.com</generator>
	<language>en</language>
	
		
	<item>
		<title>Untitled page</title>
				
		<link>http://concettagiannangeli.com/Untitled-page</link>

		<comments></comments>

		<pubDate>Fri, 04 Apr 2025 14:32:16 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">456458</guid>

		<description></description>
		
		<excerpt></excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>about2</title>
				
		<link>http://concettagiannangeli.com/about2</link>

		<comments></comments>

		<pubDate>Fri, 04 Apr 2025 14:22:55 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">456457</guid>

		<description>

body, h1, h2, h3, h4, h5, h6, p, a, small, small2, div {
    color: #f6f4ed !important;
}

    .row {
        display: flex;
    }

    .column {
        flex: 0 0 62%; /* 50% della larghezza della pagina */
    }

    .column:nth-child(2) {
        max-width: 320px; /* Larghezza massima di 350px per la seconda colonna */
    }

    .column:last-child {
        flex: 1; /* Usa lo spazio rimanente */
    }

    .background-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #191919;
        z-index: 1; /* Assicura che l'overlay sia dietro il contenuto */
    }

    .content {
        position: relative;
        z-index: 2; /* Assicura che il contenuto sia sopra l'overlay del background */
        min-height: 96vh; /* Altezza minima pari all'altezza della finestra del browser */
        display: flex;
        flex-direction: column;
        padding-bottom: 0px; /* Aggiunto padding inferiore */
    }

    .bottom-row-container {
        padding-right: 0em; /* Aggiunto solo padding a destra */
        margin-top: auto; /* Allinea in basso */
    }

    @media (max-width: 1080px) {
        .column:nth-child(2) {
            display: none; /* Nascondi la seconda colonna alla versione mobile */
        }
    }
    
@media (min-width: 2001px) {
    /* Imposta la larghezza della prima colonna al 42% */
    .column:first-child {
        flex: 0 0 60%; /* 62% - 20% */
    }

    /* Imposta la larghezza massima della seconda colonna */
    .column:nth-child(2) {
        max-width: none;
    }

    /* Imposta la seconda colonna per occupare tutto lo spazio disponibile */
    .column:nth-child(2) {
        max-width: 23%;
    }

    /* Imposta la terza colonna per utilizzare lo spazio rimanente */
    .column:last-child {
        flex: 1;
    }
}

@media (max-width: 900px) {
    .bottom-row-container {
        margin-top: 2%;
    }
}


    /* Rimuove la sottolineatura e il bordo inferiore e rende il testo corsivo al passaggio del mouse */
    [grid-col="x12"] a {
        text-decoration: none !important;
        border-bottom: none !important;
        color: #f6f4ed !important; /* Imposta il colore del testo su bianco */
    }

    [grid-col="x12"] a:hover {
        font-style: italic;
    }
    
   
     .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
    }
    
    
  Menu Espandibile
   
    /* Stile per l'overlay background */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: #f6f4ed;
      z-index: -1; /* Assicura che l'overlay sia dietro al contenuto */
    }
    
 /* Stile per il menu */
    #menu {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    #main-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 0.8em;
    }
  
    /* Stile per il link del menu */
    #menu-link {
      cursor: pointer;
      color: #f6f4ed; /* Colore del testo nero */
      text-decoration: none; /* Rimuove la sottolineatura */
    }
  
    /* Stile per nascondere il link dopo il clic */
    #menu-link.clicked {
      display: none;
    }
  
    /* Stile per visualizzare il menu espanso */
    #menu.expanded {
      display: block;
    }
  
    /* Stile per le voci del menu */
    #menu a {
      display: inline-block;
      margin-right: 10px; /* Spazio tra le voci del menu */
      font-style: normal; /* Rimuove il corsivo predefinito */
      color: #f6f4ed; /* Colore del testo nero */
    }
  
    /* Stile per la freccia */
    #menu.expanded:before {
      content: "← ";
      margin-right: 5px;
      display: inline;
    }
  
    /* Stile corsivo al passaggio del mouse */
    #menu a:hover,
    #menu-link:hover {
      font-style: italic;
      color: #f6f4ed;
    }
  
    /* Rimuove la sottolineatura solo per i link nel menu espanso */
    #menu.expanded a {
      text-decoration: none;
      color: #f6f4ed !important;
    }
    
    
         [grid-col="x10"] &#62; div &#62; img {
                    margin-top: -1em;
                }
                
                
#menu a {
  display: inline-block;
  margin-right: 3px; /* Riduce lo spazio tra le voci del menu */
  font-style: normal; /* Rimuove il corsivo predefinito */
  color: #f6f4ed; /* Colore del testo nero */
}                


@media (max-width: 768px) {
    .mobile-only-image {
        display: block; /* Mostra l'immagine su schermi mobili */
        text-align: right; /* Allinea l'immagine a destra */
        padding-top: 40px; 
    }
    .mobile-only-image img {
        width: 40%; /* L'immagine occupa tutta la larghezza della pagina */
        height: auto; /* Mantiene le proporzioni dell'immagine */
    }
}

@media (min-width: 769px) {
    .mobile-only-image {
        display: none; /* Nascondi l'immagine su schermi desktop */
    }
}

#mobile-landscape-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #191919;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#mobile-landscape-message img {
    max-width: 25%; /* Imposta la larghezza massima dell'immagine */
    max-height: 25%; /* Imposta l'altezza massima dell'immagine */
}

    
            CG
        
        
                S
            
        
    &#60;img src="https://i.imghippo.com/files/9R3GC1720603329.jpg" alt="Descrizione dell'immagine"&#62;


    &#60;img src="https://i.imghippo.com/files/K0kzu1719508661.png" alt="Messaggio Importante"&#62;


                      ABOUT


			Architecture, fashion, craft, art, education, design: along my professional path I have crossed many different disciplines, arriving at a personal way of conceiving and living the role of Design Curator. A reference figure for companies and designers, capable of bringing to light the soul of projects, transforming them into products that tell stories with the language of materials and colours, interweaving ancient knowledge and new technologies, transferring new materials and processes from other sectors into furniture. It is a job that fascinates and engages me on all fronts, with a single objective: to give concrete, original and recognisable forms to the brand identity.


    + Menu
    
      About,
      Services,
      Friends,
      Contact
    
  
// Rimuovi la classe 'expanded' al caricamento della pagina
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded'); // Rimuovi la classe 'expanded'
  menuLink.classList.remove('clicked');
});

// JavaScript per gestire il clic sul link del menu
document.getElementById('menu-link').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.toggle('expanded');
  menuLink.classList.toggle('clicked');
});

// JavaScript per chiudere il menu quando si passa a una nuova pagina
document.querySelectorAll('#menu a').forEach(function(link) {
  link.addEventListener('click', function() {
    var menu = document.getElementById('menu');
    var menuLink = document.getElementById('menu-link');
    
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  });
});

// JavaScript per chiudere il menu quando si torna indietro nella cronologia del browser
window.addEventListener('popstate', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded');
  menuLink.classList.remove('clicked');
});

// JavaScript per chiudere il menu quando si clicca sulla freccia
document.getElementById('menu').addEventListener('click', function(event) {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  if (event.target.tagName !== 'A') {
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  }
});

function checkOrientation() {
        var messageElement = document.getElementById('mobile-landscape-message');
        if (window.innerWidth &#62; window.innerHeight &#38;&#38; window.innerWidth </description>
		
		<excerpt>CG                                                                              S                                                     ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>Serviceprova</title>
				
		<link>http://concettagiannangeli.com/Serviceprova</link>

		<comments></comments>

		<pubDate>Tue, 09 Jul 2024 15:45:09 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">453656</guid>

		<description>

body, h1, h2, h3, h4, h5, h6, p, a, small, small2, div {
    color: black !important;
}

.row {
    display: flex;
}

.column {
    flex: 0 0 45%; /* 50% della larghezza della pagina */
}

.column:nth-child(2) {
    max-width: 450px; /* Larghezza massima di 350px per la seconda colonna */
}

.column:last-child {
    flex: 1; /* Usa lo spazio rimanente */
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f4ed;
    z-index: 1; /* Assicura che l'overlay sia dietro il contenuto */
}

.content {
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay del background */
    min-height: 96vh; /* Altezza minima pari all'altezza della finestra del browser */
    display: flex;
    flex-direction: column;
    padding-bottom: 0px; /* Aggiunto padding inferiore */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
}

.bottom-row-container {
    position: relative;
    margin-top: 6%; /* Sposta il contenitore verso il basso */
    width: 100%;
    padding-right: 0em;
}

@media screen and (min-width: 2000px) {
    .bottom-row-container {
        margin-top: 4%; /* Imposta il margine superiore a 150px quando la larghezza della finestra è maggiore di 2000px */
    }
}

@media (max-width: 1080px) {
    .bottom-row-container {
        margin-top: 33%;
    }
}


@media (max-width: 900px) {
    .bottom-row-container {
        margin-top: 6%;
    }
}

@media (max-width: 700px) {
    .bottom-row-container {
        margin-top: 1%;
    }
}
    
@media (max-width: 1080px) {
    .column:nth-child(2) {
        display: none; /* Nascondi la seconda colonna alla versione mobile */
    }
}

@media (min-width: 2001px) {
    /* Imposta la larghezza della prima colonna al 42% */
    .column:first-child {
        flex: 0 0 45%; /* 62% - 20% */
    }

    /* Imposta la larghezza massima della seconda colonna */
    .column:nth-child(2) {
        max-width: none;
    }

    /* Imposta la seconda colonna per occupare tutto lo spazio disponibile */
    .column:nth-child(2) {
        max-width: 35%;
    }

    /* Imposta la terza colonna per utilizzare lo spazio rimanente */
    .column:last-child {
        flex: 1;
    }
}


    /* Rimuove la sottolineatura e il bordo inferiore e rende il testo corsivo al passaggio del mouse */
    [grid-col="x12"] a {
        text-decoration: none !important;
        border-bottom: none !important;
        color: black !important; /* Imposta il colore del testo su bianco */
    }

    [grid-col="x12"] a:hover {
        font-style: italic;
    }
    
   
     .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
    }
    
    
  Menu Espandibile
   
    /* Stile per l'overlay background */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f6f4ed;
      z-index: -1; /* Assicura che l'overlay sia dietro al contenuto */
    }
    
 /* Stile per il menu */
    #menu {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
                @media (max-width: 900px) {
    #main-menu {
        background-color: #f6f4ed;
        padding: 3px;
    }
}
    
    #main-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 0.8em;
    }
  
    /* Stile per il link del menu */
    #menu-link {
      cursor: pointer;
      color: black; /* Colore del testo nero */
      text-decoration: none; /* Rimuove la sottolineatura */
    }
  
    /* Stile per nascondere il link dopo il clic */
    #menu-link.clicked {
      display: none;
    }
  
    /* Stile per visualizzare il menu espanso */
    #menu.expanded {
      display: block;
    }
  
    /* Stile per le voci del menu */
    #menu a {
      display: inline-block;
      margin-right: 10px; /* Spazio tra le voci del menu */
      font-style: normal; /* Rimuove il corsivo predefinito */
      color: black; /* Colore del testo nero */
    }
  
    /* Stile per la freccia */
    #menu.expanded:before {
      content: "← ";
      margin-right: 5px;
      display: inline;
    }
  
    /* Stile corsivo al passaggio del mouse */
    #menu a:hover,
    #menu-link:hover {
      font-style: italic;
      color: black;
    }
  
    /* Rimuove la sottolineatura solo per i link nel menu espanso */
    #menu.expanded a {
      text-decoration: none;
      color: black !important;
    }
    
    
         [grid-col="x10"] &#62; div &#62; img {
                    margin-top: -1em;
                }
                
                
  /* Stili per la riga fissa */
    .fixed-row {
        position: fixed;
        top: 0;
        width: calc(100% - 20px); /* Larghezza della finestra meno il padding destro */
        padding-top: 10px; /* Padding top */
        padding-right: 10px; /* Padding right */
        z-index: 999;
        margin-bottom: 10px; /* Aggiungi un margine inferiore per lo spazio tra la riga fissa e il contenuto sottostante */
    }

     .content {
        padding-top: 0px; 
    }
    

    .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
        
            .added-row .column:nth-child(3) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 3 */
    }
    
        
    }    
    
    .added-row {
    height:100%; /* Altezza desiderata per la riga aggiunta */
}

.custom-image {
    padding: 90px;
}


@media screen and (min-width: 2001px) {
    /* Modifica lo scale delle immagini nella versione mobile */
    .added-row .column:nth-child(3) img {
        transform: scale(0.7); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(0.9); /* Modifica lo scale dell'immagine 3 */
    }
    
    
    .row:nth-child(2) .column:nth-child(3) {
    margin-top: -350px;
    }
    
}

    
#menu a {
  display: inline-block;
  margin-right: 3px; /* Riduce lo spazio tra le voci del menu */
  font-style: normal; /* Rimuove il corsivo predefinito */
  color: white; /* Colore del testo nero */
}

.scroll-down-arrow {
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 9999;
    font-size: 1em;
    color: black;
    cursor: pointer;
    transition: opacity 0.3s ease; /* Aggiungi una transizione per una transizione più fluida */
    opacity: 1; /* Assicura che la freccia sia inizialmente visibile */
}

.scroll-down-arrow.hidden {
    opacity: 0; /* Nasconde la freccia */
}


/* Stili CSS per le nuove colonne */
.added-row .custom-column {
    width: 50%; /* Larghezza desiderata per le nuove colonne */
    float: left; /* Float left per allineare le colonne */
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza totale */
    padding: 0 0px; /* Padding orizzontale per le colonne */
}

/* Stili per le immagini all'interno delle nuove colonne */
.added-row .custom-image {
    width: 100%; /* Assicura che le immagini si adattino completamente alle colonne */
    height: auto; /* Altezza automatica per mantenere le proporzioni */
}

/* Stili per le immagini all'interno delle nuove colonne */
.added-row .custom-text {
    width: 100%; /* Assicura che le immagini si adattino completamente alle colonne */
    height: auto; /* Altezza automatica per mantenere le proporzioni */
    padding-right: 150px;
}

/* Media query per dispositivi con larghezza massima di 768px (mobile) */
@media (max-width: 768px) {
    .added-row .custom-text {
        padding-right: 0; /* Imposta il padding a 0 per dispositivi mobili */
    }
}


.added-row {
    display: flex;
    flex-wrap: wrap; /* Per consentire il wrapping delle colonne */
    justify-content: space-between; /* Distribuire uniformemente lo spazio tra le colonne */
}


.added-row .custom-column {
    width: calc(50% - 20px); /* Larghezza desiderata per le colonne considerando i margini */
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza totale */
    padding: 0 10px; /* Padding orizzontale per tutte le colonne */
}

@media (min-width: 1001px) {
    .added-row .custom-column {
        width: calc(50% - 20px); /* Larghezza desiderata per le colonne considerando i margini */
    }
}


/* Media query per dispositivi con larghezza inferiore a 1000px */
@media (max-width: 1000px) {
    .added-row .custom-column {
        width: 100%; /* Larghezza al 100% quando la larghezza della finestra è inferiore a 1000px */
        float: none; /* Rimuove il float per far sì che le colonne si allineino verticalmente */
        padding: 0 0px; /* Padding orizzontale per le colonne */
        padding-right: 0; /* Rimuove il padding destro */
        margin-bottom: 20px; /* Aggiunge uno spazio tra le colonne verticali */
        margin-top: 20px; /* Aggiunge uno spazio tra le colonne verticali */
    }
    
    
    .added-row .custom-image img {
        width: 100%; /* Larghezza al 100% della larghezza del contenitore */
        height: auto; /* Altezza automatica per mantenere le proporzioni */
    }
    
    .added-row .custom-image {
    padding: 0; /* Rimuove il padding intorno all'immagine */
}
}


/* Stile per il container aggiunto */
.added-row:last-child {
    margin-top: auto; /* Posiziona il container in fondo alla pagina */
    margin-bottom: 0; /* Rimuove il margine inferiore */
}

/* Stile per il contenuto precedente */
.content {
    margin-bottom: 50px; /* Aggiunge spazio tra il contenuto precedente e l'ultimo container */
}

@media (max-width: 768px) {
    .mobile-only-image {
        display: block; /* Mostra l'immagine su schermi mobili */
        text-align: right; /* Allinea l'immagine a destra */
        padding-top: 50px; 
    }
    .mobile-only-image img {
        width: 75%; /* L'immagine occupa tutta la larghezza della pagina */
        height: auto; /* Mantiene le proporzioni dell'immagine */
    }
}

@media (min-width: 769px) {
    .mobile-only-image {
        display: none; /* Nascondi l'immagine su schermi desktop */
    }
}
 
 
#mobile-landscape-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f4ed;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#mobile-landscape-message img {
    max-width: 25%; /* Imposta la larghezza massima dell'immagine */
    max-height: 25%; /* Imposta l'altezza massima dell'immagine */
}

 
            CG
        
        
                S
            
        
            &#60;img width="4032" height="3024" width_o="4032" height_o="3024" src_o="https://cortex.persona.co/t/original/i/0bd8d5b655d13c3651b443ba1f3c0ec064221eec8cb35483a7a2c8ee233c10b0/material--textile--color-5.jpg" data-mid="1371203" border="0" /&#62;
        
        
    &#60;img src="https://i.imghippo.com/files/VV1zH1720543013.jpg" alt="Descrizione dell'immagine" style="width: 53%;"&#62;
    

    &#60;img src="https://i.imghippo.com/files/djrGp1719506909.png" alt="Messaggio Importante"&#62;

    
    + Menu
    
      About,
      Services,
      Friends,
      Contact
    
  
                    SERVICES
                                         
Over time I have collaborated with leading architectural studios and international fashion and design brands such as Prada, Moroso, Gervasoni, Magis. I have worked with internationally renowned artists, designers and architects such as Ron Arad, Marina Abramovich, Olafur Eliasson, David Adjaie, Daniel Liebeskind, Kostantin Grcic, Nendo, Patricia Urquiola. I have measured myself against the management of my family business, product design and education in contemporary art and creativity. All these experiences allow me to have a very broad vision and skillset, offering consultancy ranging from the reinterpretation and repositioning of existing products, to the development and prototyping of new design projects, to the definition of interiors and exhibition spaces, with an approach based on analysis, research and coherence.  

                    
        &#60;img src="https://i.imghippo.com/files/IPC261720541310.jpg" alt="Immagine 1" style="width: 90%;"&#62;
    
    
        &#60;img src="https://i.imghippo.com/files/LB82s1713972529.jpg" alt="Immagine 2" style="width: 85%;"&#62;
    

        MATERIAL, TEXTILE, COLOUR CURATION
            Choosing and customising the materials, fabrics and colours of a product is a fundamental activity for expressing the narrative inherent in each project, harmoniously integrating it into the company's collection and the space for which it is intended. Based on constant research, this consultancy also has a strategic significance for optimising the production process, enriching the product with added values, standing out on the market and creating a transversal colour and material system, capable of establishing connections and suggesting combinations even between very different products. 
    

        &#60;img src="https://i.imghippo.com/files/6qbkO1720541586.jpg" alt="Immagine 3" style="width: 75%;"&#62;
    
    
        &#60;img src="https://i.imghippo.com/files/Z8qhO1720541727.jpg" alt="Immagine 4" style="width: 100%;"&#62;
    

        PRODUCT CURATION
            Taking care of a product or a collection is a challenging task that requires a broad outlook and in-depth analysis. The aim is to find an ideal balance between the identity of the company, the demands of the market and the specific characteristics of the project. This consultancy also lays the foundations for all future developments: from defining briefs, selecting designers, assisting with design and prototyping, introducing new product lines, to finding suppliers of materials, components and processes. 
    
    
        &#60;img src="https://i.imghippo.com/files/hhDhP1719500920.jpg" alt="Immagine 5" style="width: 100%;"&#62;
    
    
        &#60;img src="https://i.imghippo.com/files/YbWt81719500939.jpg" alt="Immagine 6" style="width: 80%;"&#62;
    

        SETUP, INTERIOR AND EXHIBITION DESIGN
            My Design Curator consultancy includes the selection of products, colours, finishes and objects to be included in showrooms and displays, as well as the organisation of these spaces to express an atmosphere consistent with the company's personality and values. Added to this is the design of exhibition stands that reflect the brand identity and create an engaging experience for visitors, presenting each product and collection in the best possible way.
    

        &#60;img src="https://i.imghippo.com/files/gfnBa1720543458.jpg" alt="Immagine 7" style="width: 110%;"&#62;
    
    
    &#60;img src="https://i.imghippo.com/files/cNS8l1720543580.jpg" alt="Immagine 8" style="width: 70%;"&#62;
        
    
↓

  
// Rimuovi la classe 'expanded' al caricamento della pagina
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded'); // Rimuovi la classe 'expanded'
  menuLink.classList.remove('clicked');
});

// JavaScript per gestire il clic sul link del menu
document.getElementById('menu-link').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.toggle('expanded');
  menuLink.classList.toggle('clicked');
});

// JavaScript per chiudere il menu quando si passa a una nuova pagina
document.querySelectorAll('#menu a').forEach(function(link) {
  link.addEventListener('click', function() {
    var menu = document.getElementById('menu');
    var menuLink = document.getElementById('menu-link');
    
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  });
});

// JavaScript per chiudere il menu quando si torna indietro nella cronologia del browser
window.addEventListener('popstate', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded');
  menuLink.classList.remove('clicked');
});

// JavaScript per chiudere il menu quando si clicca sulla freccia
document.getElementById('menu').addEventListener('click', function(event) {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  if (event.target.tagName !== 'A') {
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  }
});

document.addEventListener('DOMContentLoaded', function() {
    var scrollArrow = document.querySelector('.scroll-down-arrow');
    var lastScrollTop = 0;

    window.addEventListener('scroll', function() {
        var currentScroll = window.pageYOffset &#124;&#124; document.documentElement.scrollTop;
        if (currentScroll &#62; lastScrollTop) {
            // Scroll verso il basso
            scrollArrow.classList.add('hidden');
        } else {
            // Scroll verso l'alto
            scrollArrow.classList.remove('hidden');
        }
        lastScrollTop = currentScroll  window.innerHeight &#38;&#38; window.innerWidth </description>
		
		<excerpt>CG                                                                               S                                                    ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>friends4</title>
				
		<link>http://concettagiannangeli.com/friends4</link>

		<comments></comments>

		<pubDate>Tue, 09 Jul 2024 15:03:34 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">453655</guid>

		<description>

body, h1, h2, h3, h4, h5, h6, p, a, small, small2, div {
    color: black !important;
}

.row {
    display: flex;
}

.column {
    flex: 0 0 60%; /* 50% della larghezza della pagina */
}

.column:nth-child(2) {
    max-width: 350px; /* Larghezza massima di 350px per la seconda colonna */
}

.column:last-child {
    flex: 1; /* Usa lo spazio rimanente */
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #36b4c0;
    z-index: 1; /* Assicura che l'overlay sia dietro il contenuto */
}

.content {
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay del background */
    min-height: 96vh; /* Altezza minima pari all'altezza della finestra del browser */
    display: flex;
    flex-direction: column;
    padding-bottom: 0px; /* Aggiunto padding inferiore */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
}

.bottom-row-container {
    position: relative;
    margin-top: 16%; /* Sposta il contenitore verso il basso */
    width: 100%;
    padding-right: 0em;
}

@media screen and (min-width: 2000px) {
    .bottom-row-container {
        margin-top: 19%; /* Imposta il margine superiore a 150px quando la larghezza della finestra è maggiore di 2000px */
    }
}

@media (max-width: 1080px) {
    .bottom-row-container {
        margin-top: 45%;
    }
}

@media (max-width: 900px) {
    .bottom-row-container {
        margin-top: 25%;
    }
}
    
@media (max-width: 1080px) {
    .column:nth-child(2) {
        display: none; /* Nascondi la seconda colonna alla versione mobile */
    }
}

@media (min-width: 2001px) {
    /* Imposta la larghezza della prima colonna al 42% */
    .column:first-child {
        flex: 0 0 60%; /* 62% - 20% */
    }

    /* Imposta la larghezza massima della seconda colonna */
    .column:nth-child(2) {
        max-width: none;
    }

    /* Imposta la seconda colonna per occupare tutto lo spazio disponibile */
    .column:nth-child(2) {
        max-width: 22%;
    }

    /* Imposta la terza colonna per utilizzare lo spazio rimanente */
    .column:last-child {
        flex: 1;
    }
}


    /* Rimuove la sottolineatura e il bordo inferiore e rende il testo corsivo al passaggio del mouse */
    [grid-col="x12"] a {
        text-decoration: none !important;
        border-bottom: none !important;
        color: black !important; /* Imposta il colore del testo su bianco */
    }

    [grid-col="x12"] a:hover {
        font-style: italic;
    }
    
   
     .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
    }
    
    
  Menu Espandibile
   
    /* Stile per l'overlay background */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f6f4ed;
      z-index: -1; /* Assicura che l'overlay sia dietro al contenuto */
    }
    
 /* Stile per il menu */
    #menu {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    
    @media (max-width: 900px) {
    #main-menu {
        background-color: #36b4c0;
        padding: 3px;
    }
}
    
    #main-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 0.8em;
    }
    

    /* Stile per il link del menu */
    #menu-link {
      cursor: pointer;
      color: black; /* Colore del testo nero */
      text-decoration: none; /* Rimuove la sottolineatura */
    }
  
    /* Stile per nascondere il link dopo il clic */
    #menu-link.clicked {
      display: none;
    }
  
    /* Stile per visualizzare il menu espanso */
    #menu.expanded {
      display: block;
    }
  
    /* Stile per le voci del menu */
    #menu a {
      display: inline-block;
      margin-right: 10px; /* Spazio tra le voci del menu */
      font-style: normal; /* Rimuove il corsivo predefinito */
      color: black; /* Colore del testo nero */
    }
  
    /* Stile per la freccia */
    #menu.expanded:before {
      content: "← ";
      margin-right: 5px;
      display: inline;
    }
  
    /* Stile corsivo al passaggio del mouse */
    #menu a:hover,
    #menu-link:hover {
      font-style: italic;
      color: black;
    }
  
    /* Rimuove la sottolineatura solo per i link nel menu espanso */
    #menu.expanded a {
      text-decoration: none;
      color: black !important;
    }
    
    
         [grid-col="x10"] &#62; div &#62; img {
                    margin-top: -1em;
                }
                
                
.container {
    display: flex;
    flex-wrap: wrap;
  }

  .colonna {
    flex: 1;
    padding:0px;
  }

  .colonna img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

    .testo {
     display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 100%; /* Imposta l'altezza al 100% per centrare il contenuto */
    padding-right: 170px; /* Aggiunge del padding a destra */
  }

.testo-img {
 display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 100%; /* Imposta l'altezza al 100% per centrare il contenuto */
padding-right: 170px;
padding-left: 0px;
}

@media screen and (min-width: 2000px) {
    .testo-img {
        padding-right: 300px;
    }
}

.testo-img2 {
 display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 50%; /* Imposta l'altezza al 100% per centrare il contenuto */
padding-right: 170px;
padding-left: 0px;
}


@media screen and (min-width: 2000px) {
    .testo-img2 {
        padding-right: 300px;
    }
}


/* Nascondi la parte del codice su dispositivi mobili */
@media screen and (max-width: 1000px) {
  .mobile-hidden {
    display: none;
  }
}


/* Stile per rendere visibile la parte del codice solo su dispositivi mobili */
@media screen and (max-width: 1000px) {
  .mobile-container {
    display: block;
  }
}

/* Nascondi la parte del codice su dispositivi non mobili */
@media screen and (min-width: 1000px) {
  .mobile-container {
    display: none;
  }
}
/* Stile per l'immagine e il testo nel container mobile */
.mobile-content {
  width: 100%; /* Occupa l'intera larghezza della colonna */
  padding-top: 50px;
  padding-bottom: 70px;
}

.mobile-content img {
  width: 100%; /* Imposta la larghezza dell'immagine al 100% */
  height: auto; /* Altezza automatica, per mantenere le proporzioni originali */
}

.text-below-image {
  width: 100%; /* Occupa l'intera larghezza della colonna */
  text-align: left; /* Centra il testo */
}

                
  /* Stili per la riga fissa */
    .fixed-row {
        position: fixed;
        top: 0;
        width: calc(100% - 20px); /* Larghezza della finestra meno il padding destro */
        padding-top: 10px; /* Padding top */
        padding-right: 10px; /* Padding right */
        z-index: 999;
        margin-bottom: 10px; /* Aggiungi un margine inferiore per lo spazio tra la riga fissa e il contenuto sottostante */
    }

     .content {
        padding-top: 0px; 
    }
    

    .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
        
            .added-row .column:nth-child(3) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 3 */
    }
    
        
    }    
    
    .added-row {
    height:100%; /* Altezza desiderata per la riga aggiunta */
}

.custom-image {
    padding: 90px;
}


@media screen and (min-width: 2001px) {
    /* Modifica lo scale delle immagini nella versione mobile */
    .added-row .column:nth-child(3) img {
        transform: scale(0.7); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(0.9); /* Modifica lo scale dell'immagine 3 */
    }
    
    
    .row:nth-child(2) .column:nth-child(3) {
    margin-top: -350px;
    }
    
}


#menu a {
  display: inline-block;
  margin-right: 3px; /* Riduce lo spazio tra le voci del menu */
  font-style: normal; /* Rimuove il corsivo predefinito */
  color: white; /* Colore del testo nero */
}

.scroll-down-arrow {
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 9999;
    font-size: 1em;
    color: black;
    cursor: pointer;
    transition: opacity 0.3s ease; /* Aggiungi una transizione per una transizione più fluida */
    opacity: 1; /* Assicura che la freccia sia inizialmente visibile */
}

.scroll-down-arrow.hidden {
    opacity: 0; /* Nasconde la freccia */
}


@media (max-width: 768px) {
    .mobile-only-image {
        display: block; /* Mostra l'immagine su schermi mobili */
        text-align: right; /* Allinea l'immagine a destra */
        padding-top: 70px; 
    }
    .mobile-only-image img {
        width: 60%; /* L'immagine occupa tutta la larghezza della pagina */
        height: auto; /* Mantiene le proporzioni dell'immagine */
    }
}

@media (min-width: 769px) {
    .mobile-only-image {
        display: none; /* Nascondi l'immagine su schermi desktop */
    }
}

#mobile-landscape-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #36b4c0;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#mobile-landscape-message img {
    max-width: 25%; /* Imposta la larghezza massima dell'immagine */
    max-height: 25%; /* Imposta l'altezza massima dell'immagine */
}

  
            CG
        
        
                S
            
        
            &#60;img width="3132" height="2359" width_o="3132" height_o="2359" src_o="https://cortex.persona.co/t/original/i/bd171371075d4fd9b7fccd1779a181bbbaceda41bf63ddfd1f8dc028b88679f4/IMG_4861.JPG" data-mid="1371191" border="0" /&#62;
        
        
    &#60;img src="https://i.imghippo.com/files/ouRni1719483856.jpg" alt="Descrizione dell'immagine"&#62;


    &#60;img src="https://i.imghippo.com/files/djrGp1719506909.png" alt="Messaggio Importante"&#62;


                    FRIENDS, WHAT THEY SAY ABOUT ME
                                         
Being a Design Curator means creating relationships not only between products and spaces, but also and above all between people. I believe that a fundamental element of my work is to encourage dialogue between the company, the designer and the other figures involved in the definition of the project, by listening and integrating my skills with all the perspectives and objectives at stake. A spirit of collaboration from which deep and lasting relationships are born, both professionally and humanly. 

                    
      “I was very lucky to work with Concetta as the product manager/producer following the development of my Moroso products for many years. Concetta was always very thorough and professional on both the technical and the artistic development of the projects. It was obvious that although she is excellent at making other designers work come to life, Concetta has a designer in her that needs to come to life! I am so happy that she now working on her own creations- I am curious and looking forward to seeing her designs!“
       

      Ron Arad - Ron Arad Associates
    
  
      "My friendship with Concetta was born from work. 
I have learnt to appreciate that constant curiosity, that never giving up on finding a solution, that constant exuberance and enthusiasm always cloaked in uncommon kindness and savoir faire.
We don't always see eye to eye, but I have always found a respect for the ideas of others that has become a very rare quality." 
       

      Rudi von Wedel – R+W Design &#38;amp; Brand Management 
    
  
    &#60;img&#62;
  

  "Working with Concetta is a wonderful adventure.
Her passion and creativity are contagious, she never tires, driven by an uncommon enthusiasm. She manages to dialogue well with the designers, sometimes even supporting them in their choices and proposals. From an initial idea, in some cases, we have arrived, in agreement of course with the designer, at products that are quite different, but much more concrete and above all more in the spirit of Gervasoni.
Concetta also possesses a real culture of design, architecture, set design and a profound knowledge of many materials. And she keeps herself constantly updated."
 
Giovanni Gervasoni - President Gervasoni Spa
  

      "Concetta Giannangeli is distinguished by her impeccable professionalism and passion, which manifest themselves in the fusion of the designer's ideas and the actual realisation of the products. Thanks to her extensive knowledge of design history and contemporary processes, she has actively participated in the realisation of numerous projects. An ever-evolving collaboration.”
       

      Federica Biasi - Art Director &#38;amp; Designer 
    
  
    &#60;img&#62;
  

&#60;img&#62;
  
  
"The collaboration between Studio Nendo and Concetta began many years ago in a promising way at Moroso. Concetta's in-depth knowledge of materials and brilliant technical insights ensured that the designs developed maintained a solid relationship with the company. Working together has been a pleasant combination, resulting in creative synergies that have resulted in highly successful products."   
 

Moreno Vannini - Senior Lead Designer Nendo Studio 
  

      "I worked (and still work) with Concetta thanks to Gervasoni and I discovered not only an excellent design curator but also a competent, friendly person who is able to make the presentation and interpretation of designers' work correctly understood at the various levels of corporate organisations. Bravo Concetta!"
       

      Andrea Sasso - Chairman and CEO of Italian Design Brands now Dexelance 
    
  
    &#60;img&#62;
  

      “I was very lucky to work with Concetta as the product manager/producer following the development of my Moroso products for many years. Concetta was always very thorough and professional on both the technical and the artistic development of the projects. It was obvious that although she is excellent at making other designers work come to life, Concetta has a designer in her that needs to come to life! I am so happy that she now working on her own creations- I am curious and looking forward to seeing her designs!“
      

Ron Arad – Ron Arad Associates  
    
  
    &#60;img&#62;
    
    
      "My friendship with Concetta was born from work. 
I have learnt to appreciate that constant curiosity, that never giving up on finding a solution, that constant exuberance and enthusiasm always cloaked in uncommon kindness and savoir faire.
We don't always see eye to eye, but I have always found a respect for the ideas of others that has become a very rare quality." 
      

Rudi von Wedel – R+W Design &#38;amp; Brand Management 
    
  
    &#60;img&#62;
    
    
      "Working with Concetta is a wonderful adventure.
Her passion and creativity are contagious, she never tires, driven by an uncommon enthusiasm. She manages to dialogue well with the designers, sometimes even supporting them in their choices and proposals. From an initial idea, in some cases, we have arrived, in agreement of course with the designer, at products that are quite different, but much more concrete and above all more in the spirit of Gervasoni.
Concetta also possesses a real culture of design, architecture, set design and a profound knowledge of many materials. And she keeps herself constantly updated." 
      
Giovanni Gervasoni - President Gervasoni Spa 
    
  
    &#60;img&#62;
    
    
      "Concetta Giannangeli is distinguished by her impeccable professionalism and passion, which manifest themselves in the fusion of the designer's ideas and the actual realisation of the products. Thanks to her extensive knowledge of design history and contemporary processes, she has actively participated in the realisation of numerous projects. An ever-evolving collaboration.”  
      

Federica Biasi - Art Director &#38;amp; Designer 
    
  
    &#60;img&#62;
    
    
      "The collaboration between Studio Nendo and Concetta began many years ago in a promising way at Moroso. Concetta's in-depth knowledge of materials and brilliant technical insights ensured that the designs developed maintained a solid relationship with the company. Working together has been a pleasant combination, resulting in creative synergies that have resulted in highly successful products."  
      

Moreno Vannini - Senior Lead Designer Nendo Studio 
    
  
    &#60;img&#62;
    
    
      "I worked (and still work) with Concetta thanks to Gervasoni and I discovered not only an excellent design curator but also a competent, friendly person who is able to make the presentation and interpretation of designers' work correctly understood at the various levels of corporate organisations. Bravo Concetta!"  
      

Andrea Sasso - Chairman and CEO of Italian Design Brands now Dexelance 
    
  
↓

  
    + Menu
    
      About,
      Services,
      Friends,
      Contact
    
  
// Rimuovi la classe 'expanded' al caricamento della pagina
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded'); // Rimuovi la classe 'expanded'
  menuLink.classList.remove('clicked');
});

// JavaScript per gestire il clic sul link del menu
document.getElementById('menu-link').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.toggle('expanded');
  menuLink.classList.toggle('clicked');
});

// JavaScript per chiudere il menu quando si passa a una nuova pagina
document.querySelectorAll('#menu a').forEach(function(link) {
  link.addEventListener('click', function() {
    var menu = document.getElementById('menu');
    var menuLink = document.getElementById('menu-link');
    
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  });
});

// JavaScript per chiudere il menu quando si torna indietro nella cronologia del browser
window.addEventListener('popstate', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded');
  menuLink.classList.remove('clicked');
});

// JavaScript per chiudere il menu quando si clicca sulla freccia
document.getElementById('menu').addEventListener('click', function(event) {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  if (event.target.tagName !== 'A') {
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  }
});

document.addEventListener('DOMContentLoaded', function() {
    var scrollArrow = document.querySelector('.scroll-down-arrow');
    var lastScrollTop = 0;

    window.addEventListener('scroll', function() {
        var currentScroll = window.pageYOffset &#124;&#124; document.documentElement.scrollTop;
        if (currentScroll &#62; lastScrollTop) {
            // Scroll verso il basso
            scrollArrow.classList.add('hidden');
        } else {
            // Scroll verso l'alto
            scrollArrow.classList.remove('hidden');
        }
        lastScrollTop = currentScroll  window.innerHeight &#38;&#38; window.innerWidth </description>
		
		<excerpt>CG                                                                               S                                                    ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>home4</title>
				
		<link>http://concettagiannangeli.com/home4</link>

		<comments></comments>

		<pubDate>Wed, 12 Jun 2024 16:23:47 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">453332</guid>

		<description>
    
    Pagina con Overlay
    
        * {
            padding: 0 !important;
        }
        
        .slider-container {
            position: relative;
        }
        
        .slider {
            position: relative;
            width: 100%;
            height: 100vh;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.7s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .slide.active {
            opacity: 1;
        }
        
        .caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 2em; /* Modifica questa dimensione a piacere */
            text-align: center;
        }
        
      
        /* Stile specifico per ciascuna didascalia */
        .slide:nth-child(1) .caption {
            color: black;
            font-size: 3em;
            line-height: 1em;
        }
        
        .slide:nth-child(2) .caption {
            color: #dca898;
            font-size: 2em;
            line-height: 1em;
        }
        
        .slide:nth-child(3) .caption {
            color: black;
            font-size: 3em;
            line-height: 1em;
        }
        
        .slide:nth-child(4) .caption {
            color: #f3efcc;
            font-size: 2em;
            line-height: 1em;
        }
        
        .slide:nth-child(5) .caption {
              color: #323b2d;
            font-size: 3em;
            line-height: 1em;
        }
        
      
        .slide:nth-child(1) {
            background-color: #f6f4ed;
        }
        
        .slide:nth-child(2) {
            background-color: #6b463f;
        }
        
        .slide:nth-child(3) {
            background-color: #f0d2c8;
        }
        
        .slide:nth-child(4) {
            background-color: #515736;
        }
        
        .slide:nth-child(5) {
            background-color: #a1892b;
        }
        
  
/* Media query per dispositivi mobili */
@media only screen and (max-width: 600px) {
    .caption {
        font-size: 1.5em; /* Riduce la dimensione del testo */
        width: 80%; /* Aumenta la larghezza della didascalia */
        word-wrap: break-word; /* Consente la rottura delle parole */
    }
}        
  
        
        .slider-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f6f4ed;
            z-index: -1;
        }
        
     
        #menu {
            display: none;
            list-style-type: none;
            padding: 10;
            margin: 0;
        }
        
        #main-menu {
            position: fixed;
            bottom: 0;
            width: 100%;
            padding-bottom: 0.8em;
            z-index: 10000;
        }
        
        #menu-link {
            cursor: pointer;
            color: black;
            text-decoration: none;
        }
        
        #menu-link.clicked {
            display: none;
        }
        
        #menu.expanded {
            display: block;
        }
        
        #menu a {
            display: inline-block;
            margin-right: 10px;
            font-style: normal;
            color: black;
        }
        
        #menu.expanded:before {
            content: "← ";
            margin-right: 5px;
            display: inline;
            color: black;
        }
        
        #menu a:hover,
        #menu-link:hover {
            font-style: italic;
            color: black;
        }
        
        #menu.expanded a {
            text-decoration: none;
            color: black !important;
        }
        
        [grid-col="x10"] &#62; div &#62; img {
            margin-top: -1em;
        }
        
        #menu a {
            display: inline-block;
            margin-right: 3px;
            font-style: normal;
            color: black;
        }
    

            CG
        
        
                S &#38;nbsp;
            
        
            DESIGNCURATION
        
        
            MATERIAL, TEXTILE,AND COLOUR CONSULTING
        
        
            PRODUCTCURATION
        
        
            SET—UP ANDINTERIOR DESIGN
        
        
            EXHIBITIONDESIGN
        
    
    + Menu
    
        About,
        Services,
        Friends,
        Contact
    

    document.addEventListener('DOMContentLoaded', function() {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        menu.classList.remove('expanded');
        menuLink.classList.remove('clicked');
    });

    document.getElementById('menu-link').addEventListener('click', function() {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        menu.classList.toggle('expanded');
        menuLink.classList.toggle('clicked');
    });

    document.querySelectorAll('#menu a').forEach(function(link) {
        link.addEventListener('click', function() {
            var menu = document.getElementById('menu');
            var menuLink = document.getElementById('menu-link');
            
            menu.classList.remove('expanded');
            menuLink.classList.remove('clicked');
        });
    });

    window.addEventListener('popstate', function() {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        menu.classList.remove('expanded');
        menuLink.classList.remove('clicked');
    });

    document.getElementById('menu').addEventListener('click', function(event) {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        if (event.target.tagName !== 'A') {
            menu.classList.remove('expanded');
            menuLink.classList.remove('clicked');
        }
    });

    function autoScroll() {
        const slides = document.querySelectorAll('.slide');
        let currentIndex = 0;
        const firstSlideDuration = 2500; // Durata della prima slide (5 secondi)
        const otherSlidesDuration = 2500; // Durata delle altre slide (4,2 secondi)
        
        function showNextSlide() {
            slides[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % slides.length;
            slides[currentIndex].classList.add('active');
            
            let duration = currentIndex === 0 ? firstSlideDuration : otherSlidesDuration;
            setTimeout(showNextSlide, duration);
        }
        
        setTimeout(showNextSlide, firstSlideDuration);
    }

    document.addEventListener('DOMContentLoaded', function() {
        autoScroll();
    });

    window.addEventListener('popstate', function() {
        autoScroll();
    });
</description>
		
		<excerpt>Pagina con Overlay                                    CG                                                S &#38;nbsp;                                          ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>home3</title>
				
		<link>http://concettagiannangeli.com/home3</link>

		<comments></comments>

		<pubDate>Wed, 12 Jun 2024 09:19:01 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">453327</guid>

		<description>
    
    Pagina con Overlay
    
        * {
            padding: 0 !important;
        }
        
        .slider-container {
            position: relative;
        }
        
        .slider {
            position: relative;
            width: 100%;
            height: 100vh;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.7s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .slide.active {
            opacity: 1;
        }
        
        .caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 2em; /* Modifica questa dimensione a piacere */
            text-align: center;
        }
        
      
        /* Stile specifico per ciascuna didascalia */
        .slide:nth-child(1) .caption {
            color: black;
            font-size: 3em;
            line-height: 1em;
        }
        
        .slide:nth-child(2) .caption {
            color: #dca898;
            font-size: 2em;
            line-height: 1em;
        }
        
        .slide:nth-child(3) .caption {
            color: black;
            font-size: 3em;
            line-height: 1em;
        }
        
        .slide:nth-child(4) .caption {
            color: #f3efcc;
            font-size: 2em;
            line-height: 1em;
        }
        
        .slide:nth-child(5) .caption {
              color: #323b2d;
            font-size: 3em;
            line-height: 1em;
        }
        
      
        .slide:nth-child(1) {
            background-color: #f6f4ed;
        }
        
        .slide:nth-child(2) {
            background-color: #6b463f;
        }
        
        .slide:nth-child(3) {
            background-color: #efcabf;
        }
        
        .slide:nth-child(4) {
            background-color: #515736;
        }
        
        .slide:nth-child(5) {
            background-color: #a1892b;
        }
         
      
/* Media query per dispositivi mobili */
@media only screen and (max-width: 600px) {
    .caption {
        font-size: 1.5em; /* Riduce la dimensione del testo */
        width: 80%; /* Aumenta la larghezza della didascalia */
        word-wrap: break-word; /* Consente la rottura delle parole */
    }
}      
      
        
        .slider-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f6f4ed;
            z-index: -1;
        }
        
        /* Stile specifico per l'overlay */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(246, 244, 237, 1);
            color: #f6f4ed;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            z-index: 20000;
            opacity: 1;
            animation: fadeOut 0.7s ease forwards;
            animation-delay: 2.3s;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        #overlay-content h2 {
            opacity: 0;
            animation: fadeIn 0.7s ease-in forwards;
        }
        
        #overlay-content h2:last-child {
            animation-delay: 0.7s;
        }
        
        #overlay #overlay-content h2:last-child + div h2 {
            animation-delay: 1.5s;
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
                z-index: 20000;
            }
            to {
                opacity: 0;
                z-index: 9999;
            }
        }
        
        #overlay-content {
            width: 100%;
            padding: 0em;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        #overlay-content div {
            flex: 1;
            padding: 11px;
        }
        
        #overlay-content div:last-child {
            text-align: right;
        }
        
        #menu {
            display: none;
            list-style-type: none;
            padding: 10;
            margin: 0;
        }
        
        #main-menu {
            position: fixed;
            bottom: 0;
            width: 100%;
            padding-bottom: 0.8em;
            z-index: 10000;
        }
        
        #menu-link {
            cursor: pointer;
            color: black;
            text-decoration: none;
        }
        
        #menu-link.clicked {
            display: none;
        }
        
        #menu.expanded {
            display: block;
        }
        
        #menu a {
            display: inline-block;
            margin-right: 10px;
            font-style: normal;
            color: black;
        }
        
        #menu.expanded:before {
            content: "← ";
            margin-right: 5px;
            display: inline;
            color: black;
        }
        
        #menu a:hover,
        #menu-link:hover {
            font-style: italic;
            color: black;
        }
        
        #menu.expanded a {
            text-decoration: none;
            color: black !important;
        }
        
        [grid-col="x10"] &#62; div &#62; img {
            margin-top: -1em;
        }
        
        #menu a {
            display: inline-block;
            margin-right: 3px;
            font-style: normal;
            color: black;
        }
    

            CG
        
        
                S &#38;nbsp;
            
        
            CONCETTA GIANNANGELI
        
        
            STUDIO
        
    
            DESIGNCURATION
        
        
            MATERIAL, TEXTILE,AND COLOUR CONSULTING
        
        
            PRODUCTCURATION
        
        
            SET—UP ANDINTERIOR DESIGN
        
        
            EXHIBITIONDESIGN
        
    
    + Menu
    
        About,
        Services,
        Friends,
        Contact
    

    document.addEventListener('DOMContentLoaded', function() {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        menu.classList.remove('expanded');
        menuLink.classList.remove('clicked');
    });

    document.getElementById('menu-link').addEventListener('click', function() {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        menu.classList.toggle('expanded');
        menuLink.classList.toggle('clicked');
    });

    document.querySelectorAll('#menu a').forEach(function(link) {
        link.addEventListener('click', function() {
            var menu = document.getElementById('menu');
            var menuLink = document.getElementById('menu-link');
            
            menu.classList.remove('expanded');
            menuLink.classList.remove('clicked');
        });
    });

    window.addEventListener('popstate', function() {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        menu.classList.remove('expanded');
        menuLink.classList.remove('clicked');
    });

    document.getElementById('menu').addEventListener('click', function(event) {
        var menu = document.getElementById('menu');
        var menuLink = document.getElementById('menu-link');
        
        if (event.target.tagName !== 'A') {
            menu.classList.remove('expanded');
            menuLink.classList.remove('clicked');
        }
    });

   function autoScroll() {
        const slides = document.querySelectorAll('.slide');
        let currentIndex = 0;
        const firstSlideDuration = 5000; // Durata della prima slide (5 secondi)
        const otherSlidesDuration = 2500; // Durata delle altre slide (4,2 secondi)
        
        function showNextSlide() {
            slides[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % slides.length;
            slides[currentIndex].classList.add('active');
            
            let duration = currentIndex === 0 ? firstSlideDuration : otherSlidesDuration;
            setTimeout(showNextSlide, duration);
        }
        
        setTimeout(showNextSlide, firstSlideDuration);
    }

    document.addEventListener('DOMContentLoaded', function() {
        autoScroll();
    });

    window.addEventListener('popstate', function() {
        autoScroll();
    });
</description>
		
		<excerpt>Pagina con Overlay                                    CG                                                S &#38;nbsp;                                          ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>home2</title>
				
		<link>http://concettagiannangeli.com/home2</link>

		<comments></comments>

		<pubDate>Thu, 16 May 2024 15:19:10 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">453008</guid>

		<description>

Pagina con Overlay


    * {
      padding: 0 !important;
    }
  
    .slider-container {
      position: relative;
    }

    .slider {
      position: relative;
      width: 100%;
      height: 100vh;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1.6s ease-in-out;
    }

    .slide.active {
      opacity: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .caption {
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: white;
    }
    
        @media (max-width: 900px) {
    .caption {
        display: none;
    }
}

    .slider-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f6f4ed;
      z-index: -1;
    }


  /* Aggiunto stile per dividere in due colonne */
  #overlay-content {
    width: 100%; /* Larghezza al 100% */
    padding: 0em; /* Padding a destra e sinistra di 1em */
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Distribuisce uniformemente gli elementi lungo la riga */
    align-items: flex-start; /* Allinea gli elementi in alto */
  }

  /* Stile per le colonne */
  #overlay-content div {
    flex: 1; /* Ogni colonna occupa lo stesso spazio */
    padding: 11px; /* Aggiunto padding per separare il testo dal bordo */
  }

  /* Allinea il testo STUDIO a destra */
  #overlay-content div:last-child {
    text-align: right;
  }
  
  
  Menu Espandibile
   
    /* Stile per l'overlay background */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f6f4ed;
      z-index: -1; /* Assicura che l'overlay sia dietro al contenuto */
    }
    
 /* Stile per il menu */
    #menu {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    #main-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 0.8em;
      z-index: 10000;
    }
    
  
    /* Stile per il link del menu */
    #menu-link {
      cursor: pointer;
      color: #f6f4ed; /* Colore del testo nero */
      text-decoration: none; /* Rimuove la sottolineatura */
    }
  
    /* Stile per nascondere il link dopo il clic */
    #menu-link.clicked {
      display: none;
    }
  
    /* Stile per visualizzare il menu espanso */
    #menu.expanded {
      display: block;
    }
  
    /* Stile per le voci del menu */
    #menu a {
      display: inline-block;
      margin-right: 10px; /* Spazio tra le voci del menu */
      font-style: normal; /* Rimuove il corsivo predefinito */
      color: #f6f4ed; /* Colore del testo nero */
    }
  
    /* Stile per la freccia */
    #menu.expanded:before {
      content: "← ";
      margin-right: 5px;
      display: inline;
      color: #f6f4ed;
    }
  
    /* Stile corsivo al passaggio del mouse */
    #menu a:hover,
    #menu-link:hover {
      font-style: italic;
      color: #f6f4ed;
    }
  
    /* Rimuove la sottolineatura solo per i link nel menu espanso */
    #menu.expanded a {
      text-decoration: none;
      color: #f6f4ed !important;
    }
    
    
         [grid-col="x10"] &#62; div &#62; img {
                    margin-top: -1em;
                }
                
                
#menu a {
  display: inline-block;
  margin-right: 3px; /* Riduce lo spazio tra le voci del menu */
  font-style: normal; /* Rimuove il corsivo predefinito */
  color: #f6f4ed; /* Colore del testo nero */
}                
                 
  
            CG
        
        
                S &#38;nbsp;
            
        
 &#60;img src="https://i.imghippo.com/files/MjyhD1713972370.jpg" alt="Image 1"&#62;
      Gervasoni stand / MDW 2023
    
    
      &#60;img src="https://i.imghippo.com/files/oTXp91713972346.jpg" alt="Image 2"&#62;
      Like a Bracelet / Working on chair detail
    
    
      &#60;img src="https://i.imghippo.com/files/Ll5KO1713972394.jpg" alt="Image 3"&#62;
      Gervasoni stand / MDW 2024
    
   
      &#60;img src="https://i.imghippo.com/files/IpJUH1713972417.jpg" alt="Image 4"&#62;
      Gervasoni stand / MDW 2024
    

      &#60;img src="https://i.imghippo.com/files/xob9z1713972560.jpg" alt="Image 5"&#62;
      Textile research
    
 
      &#60;img src="https://i.imghippo.com/files/0ID8u1713972617.jpg" alt="Image 6"&#62;
      Gervasoni stand / MDW 2024
    
 
      &#60;img src="https://i.imghippo.com/files/mVw521713972725.jpg" alt="Image 7"&#62;
      Jardin Suspendu for Moroso
    
 
      &#60;img src="https://i.imghippo.com/files/asREB1713972800.jpg" alt="Image 8"&#62;
      Samà for Moroso
    
 
      &#60;img src="https://i.imghippo.com/files/LB82s1713972529.jpg" alt="Image 9"&#62;
      Surface research
    
    
    + Menu
    
      About,
      Services,
      Friends,
      Contact
    
  
// Rimuovi la classe 'expanded' al caricamento della pagina
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded'); // Rimuovi la classe 'expanded'
  menuLink.classList.remove('clicked');
});

// JavaScript per gestire il clic sul link del menu
document.getElementById('menu-link').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.toggle('expanded');
  menuLink.classList.toggle('clicked');
});

// JavaScript per chiudere il menu quando si passa a una nuova pagina
document.querySelectorAll('#menu a').forEach(function(link) {
  link.addEventListener('click', function() {
    var menu = document.getElementById('menu');
    var menuLink = document.getElementById('menu-link');
    
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  });
});

// JavaScript per chiudere il menu quando si torna indietro nella cronologia del browser
window.addEventListener('popstate', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded');
  menuLink.classList.remove('clicked');
});

// JavaScript per chiudere il menu quando si clicca sulla freccia
document.getElementById('menu').addEventListener('click', function(event) {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  if (event.target.tagName !== 'A') {
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  }
});

// Funzione per scorrere le immagini automaticamente
  function autoScroll() {
    const slides = document.querySelectorAll('.slide');
    let currentIndex = 0;

    setInterval(() =&#62; {
      // Nascondi la slide corrente
      slides[currentIndex].classList.remove('active');
      // Passa alla prossima slide
      currentIndex = (currentIndex + 1) % slides.length;
      // Mostra la prossima slide con un effetto di dissolvenza
      slides[currentIndex].classList.add('active');
    }, 5600); // Cambia l'intervallo di tempo qui (in millisecondi)
  }

  // Avvia lo scorrimento automatico al caricamento della pagina
  document.addEventListener('DOMContentLoaded', function() {
    autoScroll();
  });
  
// JavaScript per riavviare lo slider quando si torna alla pagina principale
window.addEventListener('popstate', function() {
  autoScroll(); // Riavvia lo slider
});

</description>
		
		<excerpt>Pagina con Overlay                                 CG                                                S &#38;nbsp;                                                     ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>services3</title>
				
		<link>http://concettagiannangeli.com/services3</link>

		<comments></comments>

		<pubDate>Thu, 16 May 2024 10:01:17 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">453006</guid>

		<description>

body, h1, h2, h3, h4, h5, h6, p, a, small, small2, div {
    color: black !important;
}

.row {
    display: flex;
}

.column {
    flex: 0 0 57%; /* 50% della larghezza della pagina */
}

.column:nth-child(2) {
    max-width: 490px; /* Larghezza massima di 350px per la seconda colonna */
}

.column:last-child {
    flex: 1; /* Usa lo spazio rimanente */
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f4ed;
    z-index: 1; /* Assicura che l'overlay sia dietro il contenuto */
}

.content {
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay del background */
    min-height: 96vh; /* Altezza minima pari all'altezza della finestra del browser */
    display: flex;
    flex-direction: column;
    padding-bottom: 0px; /* Aggiunto padding inferiore */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
}

.bottom-row-container {
    position: relative;
    margin-top: 4%; /* Sposta il contenitore verso il basso */
    width: 100%;
    padding-right: 0em;
    z-index: -1
}

@media screen and (min-width: 2000px) {
    .bottom-row-container {
        margin-top: 4%; /* Imposta il margine superiore a 150px quando la larghezza della finestra è maggiore di 2000px */
    }
}

@media (max-width: 1080px) {
    .bottom-row-container {
        margin-top: 33%;
    }
}


@media (max-width: 900px) {
    .bottom-row-container {
        margin-top: 3%;
    }
}

@media (max-width: 700px) {
    .bottom-row-container {
        margin-top: 1%;
    }
}
    
@media (max-width: 1080px) {
    .column:nth-child(2) {
        display: none; /* Nascondi la seconda colonna alla versione mobile */
    }
}

@media (min-width: 2001px) {
    /* Imposta la larghezza della prima colonna al 42% */
    .column:first-child {
        flex: 0 0 55%; /* 62% - 20% */
    }

    /* Imposta la larghezza massima della seconda colonna */
    .column:nth-child(2) {
        max-width: none;
    }

    /* Imposta la seconda colonna per occupare tutto lo spazio disponibile */
    .column:nth-child(2) {
        max-width: 35%;
    }

    /* Imposta la terza colonna per utilizzare lo spazio rimanente */
    .column:last-child {
        flex: 1;
    }
}


    /* Rimuove la sottolineatura e il bordo inferiore e rende il testo corsivo al passaggio del mouse */
    [grid-col="x12"] a {
        text-decoration: none !important;
        border-bottom: none !important;
        color: black !important; /* Imposta il colore del testo su bianco */
    }

    [grid-col="x12"] a:hover {
        font-style: italic;
    }
    
   
     .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
    }
    
    
  Menu Espandibile
   
    /* Stile per l'overlay background */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f6f4ed;
      z-index: -1; /* Assicura che l'overlay sia dietro al contenuto */
    }
    
 /* Stile per il menu */
    #menu {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
                @media (max-width: 900px) {
    #main-menu {
        background-color: #f6f4ed;
        padding: 3px;
    }
}
    
    #main-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 0.8em;
    }
  
    /* Stile per il link del menu */
    #menu-link {
      cursor: pointer;
      color: black; /* Colore del testo nero */
      text-decoration: none; /* Rimuove la sottolineatura */
    }
  
    /* Stile per nascondere il link dopo il clic */
    #menu-link.clicked {
      display: none;
    }
  
    /* Stile per visualizzare il menu espanso */
    #menu.expanded {
      display: block;
    }
  
    /* Stile per le voci del menu */
    #menu a {
      display: inline-block;
      margin-right: 10px; /* Spazio tra le voci del menu */
      font-style: normal; /* Rimuove il corsivo predefinito */
      color: black; /* Colore del testo nero */
    }
  
    /* Stile per la freccia */
    #menu.expanded:before {
      content: "← ";
      margin-right: 5px;
      display: inline;
    }
  
    /* Stile corsivo al passaggio del mouse */
    #menu a:hover,
    #menu-link:hover {
      font-style: italic;
      color: black;
    }
  
    /* Rimuove la sottolineatura solo per i link nel menu espanso */
    #menu.expanded a {
      text-decoration: none;
      color: black !important;
    }
    
    
         [grid-col="x10"] &#62; div &#62; img {
                    margin-top: -1em;
                }
                
                
  /* Stili per la riga fissa */
    .fixed-row {
        position: fixed;
        top: 0;
        width: calc(100% - 20px); /* Larghezza della finestra meno il padding destro */
        padding-top: 10px; /* Padding top */
        padding-right: 10px; /* Padding right */
        z-index: 999;
        margin-bottom: 10px; /* Aggiungi un margine inferiore per lo spazio tra la riga fissa e il contenuto sottostante */
    }

     .content {
        padding-top: 0px; 
    }
    

    .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
        
            .added-row .column:nth-child(3) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 3 */
    }
    
        
    }    
    
    .added-row {
    height:100%; /* Altezza desiderata per la riga aggiunta */
}

.custom-image {
    padding: 90px;
}


@media screen and (min-width: 2001px) {
    /* Modifica lo scale delle immagini nella versione mobile */
    .added-row .column:nth-child(3) img {
        transform: scale(0.7); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(0.9); /* Modifica lo scale dell'immagine 3 */
    }
    
    
    .row:nth-child(2) .column:nth-child(3) {
    margin-top: -350px;
    }
    
}

    
#menu a {
  display: inline-block;
  margin-right: 3px; /* Riduce lo spazio tra le voci del menu */
  font-style: normal; /* Rimuove il corsivo predefinito */
  color: white; /* Colore del testo nero */
}

.scroll-down-arrow {
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 9999;
    font-size: 1em;
    color: black;
    cursor: pointer;
    transition: opacity 0.3s ease; /* Aggiungi una transizione per una transizione più fluida */
    opacity: 1; /* Assicura che la freccia sia inizialmente visibile */
}

.scroll-down-arrow.hidden {
    opacity: 0; /* Nasconde la freccia */
}


/* Stili CSS per le nuove colonne */
.added-row .custom-column {
    width: 50%; /* Larghezza desiderata per le nuove colonne */
    float: left; /* Float left per allineare le colonne */
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza totale */
    padding: 0 0px; /* Padding orizzontale per le colonne */
}

/* Stili per le immagini all'interno delle nuove colonne */
.added-row .custom-image {
    width: 100%; /* Assicura che le immagini si adattino completamente alle colonne */
    height: auto; /* Altezza automatica per mantenere le proporzioni */
}

/* Stili per le immagini all'interno delle nuove colonne */
.added-row .custom-text {
    width: 100%; /* Assicura che le immagini si adattino completamente alle colonne */
    height: auto; /* Altezza automatica per mantenere le proporzioni */
    padding-right: 150px;
}

/* Media query per dispositivi con larghezza massima di 768px (mobile) */
@media (max-width: 768px) {
    .added-row .custom-text {
        padding-right: 0; /* Imposta il padding a 0 per dispositivi mobili */
    }
}


.added-row {
    display: flex;
    flex-wrap: wrap; /* Per consentire il wrapping delle colonne */
    justify-content: space-between; /* Distribuire uniformemente lo spazio tra le colonne */
}


.added-row .custom-column {
    width: calc(50% - 20px); /* Larghezza desiderata per le colonne considerando i margini */
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza totale */
    padding: 0 10px; /* Padding orizzontale per tutte le colonne */
}

@media (min-width: 1001px) {
    .added-row .custom-column {
        width: calc(50% - 20px); /* Larghezza desiderata per le colonne considerando i margini */
    }
}


/* Media query per dispositivi con larghezza inferiore a 1000px */
@media (max-width: 1000px) {
    .added-row .custom-column {
        width: 100%; /* Larghezza al 100% quando la larghezza della finestra è inferiore a 1000px */
        float: none; /* Rimuove il float per far sì che le colonne si allineino verticalmente */
        padding: 0 0px; /* Padding orizzontale per le colonne */
        padding-right: 0; /* Rimuove il padding destro */
        margin-bottom: 20px; /* Aggiunge uno spazio tra le colonne verticali */
        margin-top: 20px; /* Aggiunge uno spazio tra le colonne verticali */
    }
    
    
    .added-row .custom-image img {
        width: 100%; /* Larghezza al 100% della larghezza del contenitore */
        height: auto; /* Altezza automatica per mantenere le proporzioni */
    }
    
    .added-row .custom-image {
    padding: 0; /* Rimuove il padding intorno all'immagine */
}
}


/* Stile per il container aggiunto */
.added-row:last-child {
    margin-top: auto; /* Posiziona il container in fondo alla pagina */
    margin-bottom: 0; /* Rimuove il margine inferiore */
}

/* Stile per il contenuto precedente */
.content {
    margin-bottom: 50px; /* Aggiunge spazio tra il contenuto precedente e l'ultimo container */
}

@media (max-width: 768px) {
    .mobile-only-image {
        display: block; /* Mostra l'immagine su schermi mobili */
        text-align: left; /* Allinea l'immagine a destra */
        padding-top: 35px; 
        padding-bottom: 40px; 
    }
    .mobile-only-image img {
        width: 75%; /* L'immagine occupa tutta la larghezza della pagina */
        height: auto; /* Mantiene le proporzioni dell'immagine */
    }
}

@media (min-width: 769px) {
    .mobile-only-image {
        display: none; /* Nascondi l'immagine su schermi desktop */
    }
}
 
 
#mobile-landscape-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f4ed;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#mobile-landscape-message img {
    max-width: 25%; /* Imposta la larghezza massima dell'immagine */
    max-height: 25%; /* Imposta l'altezza massima dell'immagine */
}

.product-curation {
    padding-left: 0 !important;
    margin-left: 0 !important;
} 

@media (max-width: 768px) {
    .custom-image img[src*="https://i.imghippo.com/files/cNS8l1720543580.jpg"] {
        margin-bottom: 200px;
    }
}
  

            CG
        
        
                S
            
        
            &#60;img width="1080" height="810" width_o="1080" height_o="810" src_o="https://cortex.persona.co/t/original/i/8afcefb742de2cc8534b3117d59d08045ad012d242275dcf21370964f51720c1/material--textile--color-5.jpg" data-mid="1371291" border="0" /&#62;
        
        
    &#60;img src="https://i.imghippo.com/files/VV1zH1720543013.jpg" alt="Descrizione dell'immagine" style="width: 80%;"&#62;
    

    &#60;img src="https://i.imghippo.com/files/djrGp1719506909.png" alt="Messaggio Importante"&#62;

    
    + Menu
    
      About,
      Services,
      Friends,
      Contact
    
  
                    SERVICES
                                         
Over time I have collaborated with leading architectural studios and international fashion and design brands such as Prada, Moroso, Gervasoni, Magis. I have worked with internationally renowned artists, designers and architects such as Ron Arad, Marina Abramovich, Olafur Eliasson, David Adjaie, Daniel Liebeskind, Kostantin Grcic, Nendo, Patricia Urquiola. I have measured myself against the management of my family business, product design and education in contemporary art and creativity. All these experiences allow me to have a very broad vision and skillset, offering consultancy ranging from the reinterpretation and repositioning of existing products, to the development and prototyping of new design projects, to the definition of interiors and exhibition spaces, with an approach based on analysis, research and coherence.  

                    
        &#60;img src="https://i.imghippo.com/files/IPC261720541310.jpg" alt="Immagine 1" style="width: 90%;"&#62;
    
    
        &#60;img src="https://i.imghippo.com/files/LB82s1713972529.jpg" alt="Immagine 2" style="width: 85%;"&#62;
    

        MATERIAL, TEXTILE, COLOUR CURATION
            Choosing and customising the materials, fabrics and colours of a product is a fundamental activity for expressing the narrative inherent in each project, harmoniously integrating it into the company's collection and the space for which it is intended. Based on constant research, this consultancy also has a strategic significance for optimising the production process, enriching the product with added values, standing out on the market and creating a transversal colour and material system, capable of establishing connections and suggesting combinations even between very different products. 
    

        &#60;img src="https://i.imghippo.com/files/6qbkO1720541586.jpg" alt="Immagine 3" style="width: 75%;"&#62;
    
    
        &#60;img src="https://i.imghippo.com/files/Z8qhO1720541727.jpg" alt="Immagine 4" style="width: 100%;"&#62;
    

        PRODUCT CURATION
            Taking care of a product or a collection is a challenging task that requires a broad outlook and in-depth analysis. The aim is to find an ideal balance between the identity of the company, the demands of the market and the specific characteristics of the project. This consultancy also lays the foundations for all future developments: from defining briefs, selecting designers, assisting with design and prototyping, introducing new product lines, to finding suppliers of materials, components and processes. 
    
    
        &#60;img src="https://i.imghippo.com/files/6Dsjf1720604340.jpg" alt="Immagine 5" style="width: 100%;"&#62;
    
    
        &#60;img src="https://i.imghippo.com/files/YbWt81719500939.jpg" alt="Immagine 6" style="width: 80%;"&#62;
    

        SETUP, INTERIOR AND EXHIBITION DESIGN
            My Design Curator consultancy includes the selection of products, colours, finishes and objects to be included in showrooms and displays, as well as the organisation of these spaces to express an atmosphere consistent with the company's personality and values. Added to this is the design of exhibition stands that reflect the brand identity and create an engaging experience for visitors, presenting each product and collection in the best possible way.
    

        &#60;img src="https://i.imghippo.com/files/gfnBa1720543458.jpg" alt="Immagine 7" style="width: 100%;"&#62;
    
    
    &#60;img src="https://i.imghippo.com/files/cNS8l1720543580.jpg" alt="Immagine 8" style="width: 70%;"&#62;
        
    
↓

  
// Rimuovi la classe 'expanded' al caricamento della pagina
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded'); // Rimuovi la classe 'expanded'
  menuLink.classList.remove('clicked');
});

// JavaScript per gestire il clic sul link del menu
document.getElementById('menu-link').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.toggle('expanded');
  menuLink.classList.toggle('clicked');
});

// JavaScript per chiudere il menu quando si passa a una nuova pagina
document.querySelectorAll('#menu a').forEach(function(link) {
  link.addEventListener('click', function() {
    var menu = document.getElementById('menu');
    var menuLink = document.getElementById('menu-link');
    
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  });
});

// JavaScript per chiudere il menu quando si torna indietro nella cronologia del browser
window.addEventListener('popstate', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded');
  menuLink.classList.remove('clicked');
});

// JavaScript per chiudere il menu quando si clicca sulla freccia
document.getElementById('menu').addEventListener('click', function(event) {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  if (event.target.tagName !== 'A') {
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  }
});

document.addEventListener('DOMContentLoaded', function() {
    var scrollArrow = document.querySelector('.scroll-down-arrow');
    var lastScrollTop = 0;

    window.addEventListener('scroll', function() {
        var currentScroll = window.pageYOffset &#124;&#124; document.documentElement.scrollTop;
        if (currentScroll &#62; lastScrollTop) {
            // Scroll verso il basso
            scrollArrow.classList.add('hidden');
        } else {
            // Scroll verso l'alto
            scrollArrow.classList.remove('hidden');
        }
        lastScrollTop = currentScroll  window.innerHeight &#38;&#38; window.innerWidth </description>
		
		<excerpt>CG                                                                               S                                                    ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>services2</title>
				
		<link>http://concettagiannangeli.com/services2</link>

		<comments></comments>

		<pubDate>Thu, 16 May 2024 08:49:19 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">453005</guid>

		<description>

body, h1, h2, h3, h4, h5, h6, p, a, small, small2, div {
    color: black !important;
}

.row {
    display: flex;
}

.column {
    flex: 0 0 45%; /* 50% della larghezza della pagina */
}

.column:nth-child(2) {
    max-width: 500px; /* Larghezza massima di 350px per la seconda colonna */
}

.column:last-child {
    flex: 1; /* Usa lo spazio rimanente */
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f4ed;
    z-index: 1; /* Assicura che l'overlay sia dietro il contenuto */
}

.content {
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay del background */
    min-height: 96vh; /* Altezza minima pari all'altezza della finestra del browser */
    display: flex;
    flex-direction: column;
    padding-bottom: 0px; /* Aggiunto padding inferiore */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
}

.bottom-row-container {
    position: relative;
    margin-top: 10%; /* Sposta il contenitore verso il basso */
    width: 100%;
    padding-right: 0em;
}

@media screen and (min-width: 2000px) {
    .bottom-row-container {
        margin-top: 7%; /* Imposta il margine superiore a 150px quando la larghezza della finestra è maggiore di 2000px */
    }
}

@media (max-width: 1080px) {
    .bottom-row-container {
        margin-top: 40%;
    }
}
    
@media (max-width: 1080px) {
    .column:nth-child(2) {
        display: none; /* Nascondi la seconda colonna alla versione mobile */
    }
}

@media (min-width: 2001px) {
    /* Imposta la larghezza della prima colonna al 42% */
    .column:first-child {
        flex: 0 0 45%; /* 62% - 20% */
    }

    /* Imposta la larghezza massima della seconda colonna */
    .column:nth-child(2) {
        max-width: none;
    }

    /* Imposta la seconda colonna per occupare tutto lo spazio disponibile */
    .column:nth-child(2) {
        max-width: 40%;
    }

    /* Imposta la terza colonna per utilizzare lo spazio rimanente */
    .column:last-child {
        flex: 1;
    }
}


    /* Rimuove la sottolineatura e il bordo inferiore e rende il testo corsivo al passaggio del mouse */
    [grid-col="x12"] a {
        text-decoration: none !important;
        border-bottom: none !important;
        color: black !important; /* Imposta il colore del testo su bianco */
    }

    [grid-col="x12"] a:hover {
        font-style: italic;
    }
    
   
     .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
    }
    
    
  Menu Espandibile
   
    /* Stile per l'overlay background */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f6f4ed;
      z-index: -1; /* Assicura che l'overlay sia dietro al contenuto */
    }
    
 /* Stile per il menu */
    #menu {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    #main-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 0.8em;
    }
  
    /* Stile per il link del menu */
    #menu-link {
      cursor: pointer;
      color: black; /* Colore del testo nero */
      text-decoration: none; /* Rimuove la sottolineatura */
    }
  
    /* Stile per nascondere il link dopo il clic */
    #menu-link.clicked {
      display: none;
    }
  
    /* Stile per visualizzare il menu espanso */
    #menu.expanded {
      display: block;
    }
  
    /* Stile per le voci del menu */
    #menu a {
      display: inline-block;
      margin-right: 10px; /* Spazio tra le voci del menu */
      font-style: normal; /* Rimuove il corsivo predefinito */
      color: black; /* Colore del testo nero */
    }
  
    /* Stile per la freccia */
    #menu.expanded:before {
      content: "← ";
      margin-right: 5px;
      display: inline;
    }
  
    /* Stile corsivo al passaggio del mouse */
    #menu a:hover,
    #menu-link:hover {
      font-style: italic;
      color: black;
    }
  
    /* Rimuove la sottolineatura solo per i link nel menu espanso */
    #menu.expanded a {
      text-decoration: none;
      color: black !important;
    }
    
    
         [grid-col="x10"] &#62; div &#62; img {
                    margin-top: -1em;
                }
                
                
.container {
    display: flex;
    flex-wrap: wrap;
  }

  .colonna {
    flex: 1;
    padding:0px;
  }

  .colonna img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

    .testo {
     display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 100%; /* Imposta l'altezza al 100% per centrare il contenuto */
    padding-right: 170px; /* Aggiunge del padding a destra */
  }

.testo-img {
 display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 100%; /* Imposta l'altezza al 100% per centrare il contenuto */
padding-right: 170px;
padding-left: 0px;
}

@media screen and (min-width: 2000px) {
    .testo-img {
        padding-right: 300px;
    }
}

.testo-img2 {
 display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 50%; /* Imposta l'altezza al 100% per centrare il contenuto */
padding-right: 170px;
padding-left: 0px;
}


@media screen and (min-width: 2000px) {
    .testo-img2 {
        padding-right: 300px;
    }
}


/* Nascondi la parte del codice su dispositivi mobili */
@media screen and (max-width: 1000px) {
  .mobile-hidden {
    display: none;
  }
}


/* Stile per rendere visibile la parte del codice solo su dispositivi mobili */
@media screen and (max-width: 1000px) {
  .mobile-container {
    display: block;
  }
}

/* Nascondi la parte del codice su dispositivi non mobili */
@media screen and (min-width: 1000px) {
  .mobile-container {
    display: none;
  }
}
/* Stile per l'immagine e il testo nel container mobile */
.mobile-content {
  width: 100%; /* Occupa l'intera larghezza della colonna */
  padding-top: 50px;
  padding-bottom: 70px;
}

.mobile-content img {
  width: 100%; /* Imposta la larghezza dell'immagine al 100% */
  height: auto; /* Altezza automatica, per mantenere le proporzioni originali */
}

.text-below-image {
  width: 100%; /* Occupa l'intera larghezza della colonna */
  text-align: left; /* Centra il testo */
}

                
  /* Stili per la riga fissa */
    .fixed-row {
        position: fixed;
        top: 0;
        width: calc(100% - 20px); /* Larghezza della finestra meno il padding destro */
        padding-top: 10px; /* Padding top */
        padding-right: 10px; /* Padding right */
        z-index: 999;
        margin-bottom: 10px; /* Aggiungi un margine inferiore per lo spazio tra la riga fissa e il contenuto sottostante */
    }

     .content {
        padding-top: 0px; 
    }
    

    .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
        
            .added-row .column:nth-child(3) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 3 */
    }
    
        
    }    
    
    .added-row {
    height:100%; /* Altezza desiderata per la riga aggiunta */
}

.custom-image {
    padding: 90px;
}


@media screen and (min-width: 2001px) {
    /* Modifica lo scale delle immagini nella versione mobile */
    .added-row .column:nth-child(3) img {
        transform: scale(0.7); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(0.9); /* Modifica lo scale dell'immagine 3 */
    }
    
    
    .row:nth-child(2) .column:nth-child(3) {
    margin-top: -350px;
    }
    
}

    
#menu a {
  display: inline-block;
  margin-right: 3px; /* Riduce lo spazio tra le voci del menu */
  font-style: normal; /* Rimuove il corsivo predefinito */
  color: white; /* Colore del testo nero */
}

.scroll-down-arrow {
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 9999;
    font-size: 1em;
    color: black;
    cursor: pointer;
    transition: opacity 0.3s ease; /* Aggiungi una transizione per una transizione più fluida */
    opacity: 1; /* Assicura che la freccia sia inizialmente visibile */
}

.scroll-down-arrow.hidden {
    opacity: 0; /* Nasconde la freccia */
}
  

            CG
        
        
                S
            
        
    + Menu
    
      About,
      Services,
      Friends,
      Contact
    
  
                    Services
                                         
Nel corso del tempo ho collaborato con importanti studi di architettura e firme internazionali della moda e del design, come Prada, Moroso, Nendo, Ron Arad, Patricia Urquiola. Mi sono misurata con la gestione dell'azienda della mia famiglia, il design di prodotti, l'educazione alla creatività. Tutte queste esperienze mi permettono di avere una visione e delle competenze quanto mai ampie, offrendo una consulenza che spazia dalla reinterpretazione e riposizionamento di prodotti esistenti, allo sviluppo e prototipazione di nuovi progetti di design, alla definizione di interni e spazi espositivi, con un approccio basato sull'analisi, la ricerca e la coerenza. 

                    
  &#60;img width="1622" height="2286" width_o="1622" height_o="2286" src_o="https://cortex.persona.co/t/original/i/3c4189576d66bc327f881dac515591f24fbf0cf49b829bad24926aa6ce429d2b/Schermata-2023-10-25-alle-22.57.44.jpg" data-mid="1363390" border="0" data-scale="35"/&#62;
  
  
&#60;img width="4032" height="3024" width_o="4032" height_o="3024" src_o="https://cortex.persona.co/t/original/i/5f93b404cae1c089df65ba10626edeaae73876517553f762c91d0a46f7b1fae9/IMG_3458.jpg" data-mid="1363392" border="0" data-scale="30"/&#62;
  

&#60;img&#62;
  
  
Material, Textile, Colour Curation
 

Scegliere e personalizzare i materiali, i tessuti e i colori di un prodotto, è un'attività fondamentale per esprimere la narrazione insita in ogni progetto, inserendolo armoniosamente nella collezione dell'azienda e nello spazio a cui è destinato. Basata su una costante ricerca, questa consulenza ha un significato strategico anche per ottimizzare il processo di produzione, arricchire il prodotto di valori aggiunti, distinguersi sul mercato e creare un sistema cromatico e materico trasversale, in grado di stabilire connessioni e suggerire abbinamenti anche fra prodotti molto diversi.  

  
    &#60;img&#62;&#60;img width="2016" height="1512" width_o="2016" height_o="1512" src_o="https://cortex.persona.co/t/original/i/3720c1be1578b99a141f0240dd5e5003b35d30cf6ad3da5af5d39e6d56af4195/IMG_6738.jpg" data-mid="1363393" border="0" data-scale="45"/&#62;
  

      “Con Concetta abbiamo collaborato (e ancora collaboriamo) grazie a Gervasoni e ho scoperto non solo una eccellente design curator, ma anche una persona competente, simpatica e in grado di far capire correttamente ai vari livelli delle organizzazioni aziendali la presentazione e l’interpretazione del lavoro dei designer per il pubblico. Brava Concetta!”
       

      Andrea Sasso Chairman e CEO del Gruppo Italian Design Brands oggi Dexelance
    
  
    &#60;img&#62;&#60;img width="2016" height="1512" width_o="2016" height_o="1512" src_o="https://cortex.persona.co/t/original/i/3720c1be1578b99a141f0240dd5e5003b35d30cf6ad3da5af5d39e6d56af4195/IMG_6738.jpg" data-mid="1363393" border="0" data-scale="45"/&#62;
  

      “Con Concetta abbiamo collaborato (e ancora collaboriamo) grazie a Gervasoni e ho scoperto non solo una eccellente design curator, ma anche una persona competente, simpatica e in grado di far capire correttamente ai vari livelli delle organizzazioni aziendali la presentazione e l’interpretazione del lavoro dei designer per il pubblico. Brava Concetta!”
       

      Andrea Sasso Chairman e CEO del Gruppo Italian Design Brands oggi Dexelance
    
  
    &#60;img&#62;&#60;img width="2016" height="1512" width_o="2016" height_o="1512" src_o="https://cortex.persona.co/t/original/i/3720c1be1578b99a141f0240dd5e5003b35d30cf6ad3da5af5d39e6d56af4195/IMG_6738.jpg" data-mid="1363393" border="0" data-scale="45"/&#62;
  

      “Con Concetta abbiamo collaborato (e ancora collaboriamo) grazie a Gervasoni e ho scoperto non solo una eccellente design curator, ma anche una persona competente, simpatica e in grado di far capire correttamente ai vari livelli delle organizzazioni aziendali la presentazione e l’interpretazione del lavoro dei designer per il pubblico. Brava Concetta!”
       

      Andrea Sasso Chairman e CEO del Gruppo Italian Design Brands oggi Dexelance
    
  
    &#60;img&#62;&#60;img width="2016" height="1512" width_o="2016" height_o="1512" src_o="https://cortex.persona.co/t/original/i/3720c1be1578b99a141f0240dd5e5003b35d30cf6ad3da5af5d39e6d56af4195/IMG_6738.jpg" data-mid="1363393" border="0" data-scale="45"/&#62;
  

↓

  
// Rimuovi la classe 'expanded' al caricamento della pagina
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded'); // Rimuovi la classe 'expanded'
  menuLink.classList.remove('clicked');
});

// JavaScript per gestire il clic sul link del menu
document.getElementById('menu-link').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.toggle('expanded');
  menuLink.classList.toggle('clicked');
});

// JavaScript per chiudere il menu quando si passa a una nuova pagina
document.querySelectorAll('#menu a').forEach(function(link) {
  link.addEventListener('click', function() {
    var menu = document.getElementById('menu');
    var menuLink = document.getElementById('menu-link');
    
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  });
});

// JavaScript per chiudere il menu quando si torna indietro nella cronologia del browser
window.addEventListener('popstate', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded');
  menuLink.classList.remove('clicked');
});

// JavaScript per chiudere il menu quando si clicca sulla freccia
document.getElementById('menu').addEventListener('click', function(event) {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  if (event.target.tagName !== 'A') {
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  }
});

document.addEventListener('DOMContentLoaded', function() {
    var scrollArrow = document.querySelector('.scroll-down-arrow');
    var lastScrollTop = 0;

    window.addEventListener('scroll', function() {
        var currentScroll = window.pageYOffset &#124;&#124; document.documentElement.scrollTop;
        if (currentScroll &#62; lastScrollTop) {
            // Scroll verso il basso
            scrollArrow.classList.add('hidden');
        } else {
            // Scroll verso l'alto
            scrollArrow.classList.remove('hidden');
        }
        lastScrollTop = currentScroll </description>
		
		<excerpt>CG                                                                               S                                                   ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
		
	<item>
		<title>friends3</title>
				
		<link>http://concettagiannangeli.com/friends3</link>

		<comments></comments>

		<pubDate>Wed, 15 May 2024 09:24:26 +0000</pubDate>

		<dc:creator>Concetta Giannangeli</dc:creator>
		
		<category><![CDATA[]]></category>

		<guid isPermaLink="false">452993</guid>

		<description>

body, h1, h2, h3, h4, h5, h6, p, a, small, small2, div {
    color: black !important;
}

.row {
    display: flex;
}

.column {
    flex: 0 0 60%; /* 50% della larghezza della pagina */
}

.column:nth-child(2) {
    max-width: 350px; /* Larghezza massima di 350px per la seconda colonna */
}

.column:last-child {
    flex: 1; /* Usa lo spazio rimanente */
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #36b4c0;
    z-index: 1; /* Assicura che l'overlay sia dietro il contenuto */
}

.content {
    position: relative;
    z-index: 2; /* Assicura che il contenuto sia sopra l'overlay del background */
    min-height: 96vh; /* Altezza minima pari all'altezza della finestra del browser */
    display: flex;
    flex-direction: column;
    padding-bottom: 0px; /* Aggiunto padding inferiore */
    justify-content: space-between; /* Distribuisce lo spazio tra gli elementi */
}

.bottom-row-container {
    position: relative;
    margin-top: 18%; /* Sposta il contenitore verso il basso */
    width: 100%;
    padding-right: 0em;
}

@media screen and (min-width: 2000px) {
    .bottom-row-container {
        margin-top: 19%; /* Imposta il margine superiore a 150px quando la larghezza della finestra è maggiore di 2000px */
    }
}

@media (max-width: 1080px) {
    .bottom-row-container {
        margin-top: 45%;
    }
}

@media (max-width: 900px) {
    .bottom-row-container {
        margin-top: 25%;
    }
}
    
@media (max-width: 1080px) {
    .column:nth-child(2) {
        display: none; /* Nascondi la seconda colonna alla versione mobile */
    }
}

@media (min-width: 2001px) {
    /* Imposta la larghezza della prima colonna al 42% */
    .column:first-child {
        flex: 0 0 60%; /* 62% - 20% */
    }

    /* Imposta la larghezza massima della seconda colonna */
    .column:nth-child(2) {
        max-width: none;
    }

    /* Imposta la seconda colonna per occupare tutto lo spazio disponibile */
    .column:nth-child(2) {
        max-width: 22%;
    }

    /* Imposta la terza colonna per utilizzare lo spazio rimanente */
    .column:last-child {
        flex: 1;
    }
}


    /* Rimuove la sottolineatura e il bordo inferiore e rende il testo corsivo al passaggio del mouse */
    [grid-col="x12"] a {
        text-decoration: none !important;
        border-bottom: none !important;
        color: black !important; /* Imposta il colore del testo su bianco */
    }

    [grid-col="x12"] a:hover {
        font-style: italic;
    }
    
   
     .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
    }
    
    
  Menu Espandibile
   
    /* Stile per l'overlay background */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f6f4ed;
      z-index: -1; /* Assicura che l'overlay sia dietro al contenuto */
    }
    
 /* Stile per il menu */
    #menu {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    
    @media (max-width: 900px) {
    #main-menu {
        background-color: #36b4c0;
        padding: 3px;
    }
}
    
    #main-menu {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-bottom: 0.8em;
    }
    

    /* Stile per il link del menu */
    #menu-link {
      cursor: pointer;
      color: black; /* Colore del testo nero */
      text-decoration: none; /* Rimuove la sottolineatura */
    }
  
    /* Stile per nascondere il link dopo il clic */
    #menu-link.clicked {
      display: none;
    }
  
    /* Stile per visualizzare il menu espanso */
    #menu.expanded {
      display: block;
    }
  
    /* Stile per le voci del menu */
    #menu a {
      display: inline-block;
      margin-right: 10px; /* Spazio tra le voci del menu */
      font-style: normal; /* Rimuove il corsivo predefinito */
      color: black; /* Colore del testo nero */
    }
  
    /* Stile per la freccia */
    #menu.expanded:before {
      content: "← ";
      margin-right: 5px;
      display: inline;
    }
  
    /* Stile corsivo al passaggio del mouse */
    #menu a:hover,
    #menu-link:hover {
      font-style: italic;
      color: black;
    }
  
    /* Rimuove la sottolineatura solo per i link nel menu espanso */
    #menu.expanded a {
      text-decoration: none;
      color: black !important;
    }
    
    
         [grid-col="x10"] &#62; div &#62; img {
                    margin-top: -1em;
                }
                
                
.container {
    display: flex;
    flex-wrap: wrap;
  }

  .colonna {
    flex: 1;
    padding:0px;
  }

  .colonna img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

    .testo {
     display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 100%; /* Imposta l'altezza al 100% per centrare il contenuto */
    padding-right: 170px; /* Aggiunge del padding a destra */
  }

.testo-img {
 display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 100%; /* Imposta l'altezza al 100% per centrare il contenuto */
padding-right: 170px;
padding-left: 0px;
}

@media screen and (min-width: 2000px) {
    .testo-img {
        padding-right: 300px;
    }
}

.testo-img2 {
 display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente gli elementi */
    height: 50%; /* Imposta l'altezza al 100% per centrare il contenuto */
padding-right: 170px;
padding-left: 0px;
}


@media screen and (min-width: 2000px) {
    .testo-img2 {
        padding-right: 300px;
    }
}


/* Nascondi la parte del codice su dispositivi mobili */
@media screen and (max-width: 1000px) {
  .mobile-hidden {
    display: none;
  }
}


/* Stile per rendere visibile la parte del codice solo su dispositivi mobili */
@media screen and (max-width: 1000px) {
  .mobile-container {
    display: block;
  }
}

/* Nascondi la parte del codice su dispositivi non mobili */
@media screen and (min-width: 1000px) {
  .mobile-container {
    display: none;
  }
}
/* Stile per l'immagine e il testo nel container mobile */
.mobile-content {
  width: 100%; /* Occupa l'intera larghezza della colonna */
  padding-top: 50px;
  padding-bottom: 70px;
}

.mobile-content img {
  width: 100%; /* Imposta la larghezza dell'immagine al 100% */
  height: auto; /* Altezza automatica, per mantenere le proporzioni originali */
}

.text-below-image {
  width: 100%; /* Occupa l'intera larghezza della colonna */
  text-align: left; /* Centra il testo */
}

                
  /* Stili per la riga fissa */
    .fixed-row {
        position: fixed;
        top: 0;
        width: calc(100% - 20px); /* Larghezza della finestra meno il padding destro */
        padding-top: 10px; /* Padding top */
        padding-right: 10px; /* Padding right */
        z-index: 999;
        margin-bottom: 10px; /* Aggiungi un margine inferiore per lo spazio tra la riga fissa e il contenuto sottostante */
    }

     .content {
        padding-top: 0px; 
    }
    

    .align-left small a:hover {
        font-style: italic;
    }

    @media screen and (max-width: 768px) {
        div[grid-col="x12"] {
            flex-direction: column;
        }

        .align-left {
            text-align: left !important;
            flex: 0 0 100%;
        }
        
            .added-row .column:nth-child(3) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(1.8); /* Modifica lo scale dell'immagine 3 */
    }
    
        
    }    
    
    .added-row {
    height:100%; /* Altezza desiderata per la riga aggiunta */
}

.custom-image {
    padding: 90px;
}


@media screen and (min-width: 2001px) {
    /* Modifica lo scale delle immagini nella versione mobile */
    .added-row .column:nth-child(3) img {
        transform: scale(0.7); /* Modifica lo scale dell'immagine 1 */
    }
    
    .added-row .column:nth-child(4) img {
        transform: scale(0.9); /* Modifica lo scale dell'immagine 3 */
    }
    
    
    .row:nth-child(2) .column:nth-child(3) {
    margin-top: -350px;
    }
    
}


#menu a {
  display: inline-block;
  margin-right: 3px; /* Riduce lo spazio tra le voci del menu */
  font-style: normal; /* Rimuove il corsivo predefinito */
  color: white; /* Colore del testo nero */
}

.scroll-down-arrow {
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 9999;
    font-size: 1em;
    color: black;
    cursor: pointer;
    transition: opacity 0.3s ease; /* Aggiungi una transizione per una transizione più fluida */
    opacity: 1; /* Assicura che la freccia sia inizialmente visibile */
}

.scroll-down-arrow.hidden {
    opacity: 0; /* Nasconde la freccia */
}


@media (max-width: 768px) {
    .mobile-only-image {
        display: block; /* Mostra l'immagine su schermi mobili */
        text-align: right; /* Allinea l'immagine a destra */
        padding-top: 70px; 
    }
    .mobile-only-image img {
        width: 60%; /* L'immagine occupa tutta la larghezza della pagina */
        height: auto; /* Mantiene le proporzioni dell'immagine */
    }
}

@media (min-width: 769px) {
    .mobile-only-image {
        display: none; /* Nascondi l'immagine su schermi desktop */
    }
}

#mobile-landscape-message {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #36b4c0;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#mobile-landscape-message img {
    max-width: 25%; /* Imposta la larghezza massima dell'immagine */
    max-height: 25%; /* Imposta l'altezza massima dell'immagine */
}

  
            CG
        
        
                S
            
        
            &#60;img width="3132" height="2359" width_o="3132" height_o="2359" src_o="https://cortex.persona.co/t/original/i/56d8822f79ff8a988fb997aec8f0eafba1a97a2078abdb6a28f972f65fee4f67/IMG_4861.JPG" data-mid="1367240" border="0" /&#62;
        
        
    &#60;img src="https://i.imghippo.com/files/ouRni1719483856.jpg" alt="Descrizione dell'immagine"&#62;


    &#60;img src="https://i.imghippo.com/files/djrGp1719506909.png" alt="Messaggio Importante"&#62;


                    FRIENDS: WHAT THEY SAY ABOUT ME
                                         
Being a Design Curator means creating relationships not only between products and spaces, but also and above all between people. I believe that a fundamental element of my work is to encourage dialogue between the company, the designer and the other figures involved in the definition of the project, by listening and integrating my skills with all the perspectives and objectives at stake. A spirit of collaboration from which deep and lasting relationships are born, both professionally and humanly. 

                    
      “I was very lucky to work with Concetta as the product manager/producer following the development of my Moroso products for many years. Concetta was always very thorough and professional on both the technical and the artistic development of the projects. It was obvious that although she is excellent at making other designers work come to life, Concetta has a designer in her that needs to come to life! I am so happy that she now working on her own creations- I am curious and looking forward to seeing her designs!“

      
       Ron Arad - Ron Arad Associates
    
  
      "My friendship with Concetta was born from work. 
I have learnt to appreciate that constant curiosity, that never giving up on finding a solution, that constant exuberance and enthusiasm always cloaked in uncommon kindness and savoir faire.
We don't always see eye to eye, but I have always found a respect for the ideas of others that has become a very rare quality." 

       Rudi von Wedel – R+W Design &#38;amp; Brand Management 
    
  
    &#60;img&#62;
  

  "Working with Concetta is a wonderful adventure.
Her passion and creativity are contagious, she never tires, driven by an uncommon enthusiasm. She manages to dialogue well with the designers, sometimes even supporting them in their choices and proposals. From an initial idea, in some cases, we have arrived, in agreement of course with the designer, at products that are quite different, but much more concrete and above all more in the spirit of Gervasoni.
Concetta also possesses a real culture of design, architecture, set design and a profound knowledge of many materials. And she keeps herself constantly updated."
 
 Giovanni Gervasoni - President Gervasoni Spa
  

      "Concetta Giannangeli is distinguished by her impeccable professionalism and passion, which manifest themselves in the fusion of the designer's ideas and the actual realisation of the products. Thanks to her extensive knowledge of design history and contemporary processes, she has actively participated in the realisation of numerous projects. An ever-evolving collaboration.”

       Federica Biasi - Art Director &#38;amp; Designer 
    
  
    &#60;img&#62;
  

&#60;img&#62;
  
  
"The collaboration between Studio Nendo and Concetta began many years ago in a promising way at Moroso. Concetta's in-depth knowledge of materials and brilliant technical insights ensured that the designs developed maintained a solid relationship with the company. Working together has been a pleasant combination, resulting in creative synergies that have resulted in highly successful products."

 Moreno Vannini - Senior Lead Designer Nendo Studio 
  

      "I worked (and still work) with Concetta thanks to Gervasoni and I discovered not only an excellent design curator but also a competent, friendly person who is able to make the presentation and interpretation of designers' work correctly understood at the various levels of corporate organisations. Bravo Concetta!"

       Andrea Sasso - Chairman and CEO of Dexelance 
    
  
    &#60;img&#62;
  

      “I was very lucky to work with Concetta as the product manager/producer following the development of my Moroso products for many years. Concetta was always very thorough and professional on both the technical and the artistic development of the projects. It was obvious that although she is excellent at making other designers work come to life, Concetta has a designer in her that needs to come to life! I am so happy that she now working on her own creations- I am curious and looking forward to seeing her designs!“
      

Ron Arad – Ron Arad Associates  
    
  
    &#60;img&#62;
    
    
      "My friendship with Concetta was born from work. 
I have learnt to appreciate that constant curiosity, that never giving up on finding a solution, that constant exuberance and enthusiasm always cloaked in uncommon kindness and savoir faire.
We don't always see eye to eye, but I have always found a respect for the ideas of others that has become a very rare quality." 
      

Rudi von Wedel – R+W Design &#38;amp; Brand Management 
    
  
    &#60;img&#62;
    
    
      "Working with Concetta is a wonderful adventure.
Her passion and creativity are contagious, she never tires, driven by an uncommon enthusiasm. She manages to dialogue well with the designers, sometimes even supporting them in their choices and proposals. From an initial idea, in some cases, we have arrived, in agreement of course with the designer, at products that are quite different, but much more concrete and above all more in the spirit of Gervasoni.
Concetta also possesses a real culture of design, architecture, set design and a profound knowledge of many materials. And she keeps herself constantly updated." 
      
Giovanni Gervasoni - President Gervasoni Spa 
    
  
    &#60;img&#62;
    
    
      "Concetta Giannangeli is distinguished by her impeccable professionalism and passion, which manifest themselves in the fusion of the designer's ideas and the actual realisation of the products. Thanks to her extensive knowledge of design history and contemporary processes, she has actively participated in the realisation of numerous projects. An ever-evolving collaboration.”  
      

Federica Biasi - Art Director &#38;amp; Designer 
    
  
    &#60;img&#62;
    
    
      "The collaboration between Studio Nendo and Concetta began many years ago in a promising way at Moroso. Concetta's in-depth knowledge of materials and brilliant technical insights ensured that the designs developed maintained a solid relationship with the company. Working together has been a pleasant combination, resulting in creative synergies that have resulted in highly successful products."  
      

Moreno Vannini - Senior Lead Designer Nendo Studio 
    
  
    &#60;img&#62;
    
    
      "I worked (and still work) with Concetta thanks to Gervasoni and I discovered not only an excellent design curator but also a competent, friendly person who is able to make the presentation and interpretation of designers' work correctly understood at the various levels of corporate organisations. Bravo Concetta!"  
      

Andrea Sasso - Chairman and CEO of Dexelance 
    
  
↓

  
    + Menu
    
      About,
      Services,
      Friends,
      Contact
    
  
// Rimuovi la classe 'expanded' al caricamento della pagina
document.addEventListener('DOMContentLoaded', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded'); // Rimuovi la classe 'expanded'
  menuLink.classList.remove('clicked');
});

// JavaScript per gestire il clic sul link del menu
document.getElementById('menu-link').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.toggle('expanded');
  menuLink.classList.toggle('clicked');
});

// JavaScript per chiudere il menu quando si passa a una nuova pagina
document.querySelectorAll('#menu a').forEach(function(link) {
  link.addEventListener('click', function() {
    var menu = document.getElementById('menu');
    var menuLink = document.getElementById('menu-link');
    
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  });
});

// JavaScript per chiudere il menu quando si torna indietro nella cronologia del browser
window.addEventListener('popstate', function() {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  menu.classList.remove('expanded');
  menuLink.classList.remove('clicked');
});

// JavaScript per chiudere il menu quando si clicca sulla freccia
document.getElementById('menu').addEventListener('click', function(event) {
  var menu = document.getElementById('menu');
  var menuLink = document.getElementById('menu-link');
  
  if (event.target.tagName !== 'A') {
    menu.classList.remove('expanded');
    menuLink.classList.remove('clicked');
  }
});

document.addEventListener('DOMContentLoaded', function() {
    var scrollArrow = document.querySelector('.scroll-down-arrow');
    var lastScrollTop = 0;

    window.addEventListener('scroll', function() {
        var currentScroll = window.pageYOffset &#124;&#124; document.documentElement.scrollTop;
        if (currentScroll &#62; lastScrollTop) {
            // Scroll verso il basso
            scrollArrow.classList.add('hidden');
        } else {
            // Scroll verso l'alto
            scrollArrow.classList.remove('hidden');
        }
        lastScrollTop = currentScroll  window.innerHeight &#38;&#38; window.innerWidth </description>
		
		<excerpt>CG                                                                               S                                                    ...</excerpt>

		<!--<wfw:commentRss></wfw:commentRss>-->

	</item>
		
	</channel>
</rss>