Creare il file stile.css

Vediamo ora come si crea il file stile.css con Neovim e come salvarlo.

Sulla barra di ricerca del launcher delle applicazioni del sistema operativo di linux che state utilizzando digitare Neovim:

Selezionare con il mouse "Neovim".

Apparirà la seguente finestra di LazyVim:

Digitare il tasto N per aprire un nuovo documento. Si aprirà Neovim nella modalità INSERT:

Digitare il tasto Esc per uscire dalla modalità INSERT ed entrare nella modalità NORMAL di Neovim:

Digitare ora sulla tastiera il comando di Neovim : che serve per entrare nella modalità "COMMAND" di Neovim:

Nella riga Cmdline di Neovim digitare ora il comando w /home/asahi/Projects/sito_prova/stile.css e poi digitare il tasto INVIO.

Il file verrà salvato con il nome "stile.css"

Copiare il seguente codice:

body{
  margin: auto;
  width: 90%;
  font-family: Arial, Verdana, sans-serif;
  font-size: 1rem;
  color: #000000;
  margin: 0 auto;
}

.header{
    position: relative;
    width: 100%;
    height: 50vh;
    background: fixed no-repeat center;
    background-size: cover;
    background-image: url("risorse/banner_sito.jpg");  
    }

.navbar {
background-color: #333;
overflow: hidden;
}

.navbar .menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar .menu li {
display: inline-block;
}

.navbar .menu li a {
display: block;
color: white;
font-size: 20px;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar .menu li a:hover {
background-color: #0186ba;
}

.hamburger {
display: none;
font-size: 35px;
color: white;
padding: 14px 20px;
cursor: pointer;
}

#menu-toggle {
display: none;
}

@media screen and (max-width: 1200px) {
.navbar .menu {
display: none;
width: 100%;
}
.navbar .menu li {
display: block;
text-align: left;
}

#menu-toggle:checked + .hamburger + .menu {
display: block;
}
.hamburger {
display: block;
text-align: center;
}
}

.active {
    background-color: #4CAF50;
    color: white;
}

h1 {
  font-size: 2,5rem;
  text-align: center;
  color: #669114;
}

h2 {
  font-size: 2rem;
  text-align: center;
  color: #669114;
}

h3 {
  font-size: 1,3rem;
  text-align: center;
  color:#66CC00
}

.footer {
  width: 95%;
  text-align: center;
  background-color: darkgray;
  padding: 20px;
  margin: auto;
  }

pre {
   overflow: auto;
   background:#000;
   color:#f8f8f8;
   padding: 14px;
   margin: 0 auto;
    }

/*cellulari orientamento verticale*/
@media screen and (max-device-width: 767px) and (orientation: portrait) {
  
  .menu > *{
    width: 100% !important;
    text-align: left;

   
}
    
  .container{
    padding-top: 2%;
    padding-bottom: 2%;
    top: 5%;
    left: 80%;
    width:8%;
    border: solid 5px red;
    
}
    
.icona {
 width: 60%;
 height: 6px;
 margin: 8% 20%;}

 .overlay .closebtn {
 position: absolute;
 top: 20px;
 right: 45px;
 font-size: 10em;
 color: #818181;
 
}

  .overlay-content {
flex:1 !important;
}
 .overlay-content *{ flex:1 !important; align-content:center !important;}

.menu>li {font-size: 2.5em;
}
}

.titolo {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
 color: white;
 font-size: 60px;
}

Ora incollarlo su Neovim selezionando il tasto p

La finestra di Neovim apparirà così:

Andare sulla prima riga del programma che è vuota con il tasto freccia oppure selezionando 1 e poi il tasto g

Ora cancellare la riga premendo dd

La finestra di Neovim apparirà così:

Digitare ora sulla tastiera il comando di Neovim :wq

Digitare il tasto INVIO. Il file verrà salvato e verrà chiusa la finestra di Neovim.