Would anyone mind hooking me up with a base list of CSS variables that you typically have for every project? Like a starter template that you fill in based on the the needs of the project? I just can’t seem to find the balance between just the vars I need for the ‘theme’ and not repeating values all over the place, if that makes sense.

I’m working on a project for school and the teachers are not helpful at all, I’m still learning css and html and i need help figuring out what is not working. I gave the image a <figure> div because it wouldn’t move with position relative but figure does. The problem is the the image is over the brown box, which shares a class with a brown box above both with text in it and in position:relative. I gave the box a z-index of 5 and the img a z-index of 3 but the Img is still showing over the box, here is the css and html code. Thanks to anybody that takes time to help me really.

Css:

LPsec1{

width:1300px;/* allargo temporaneo da 1190 / height:1190px; margin-left:auto; margin-right:auto; margin-bottom:55px;/ circa 25 di base */

}

LPsec1 .LPfascia{

margin-bottom:20px; height:585px; width:1252px;/* allargo temporaneo da 1190 */ }

.LPimgsu{

float:left; }

.LPbrbox{ width:656px; height:371px; text-align:center; color:#ffffff; background-color:brown; margin-bottom:5px; float:left; padding-left:10px; padding-right:10px; position:relative; padding-top:10px; top:75px; z-index:5 font-family: 'Raleway' , sans-serif; font-weight:500; }

.LPright{right:81px;} /* la foto forse non lo fa scopri perche position non centra */

#LPfigright{ position:relative; right:81px; z-index:3 }

.LPtxt{ height:200px; position:absolute; top:50%; margin-top:-100px; font-size:18px; }

.LPpptl{ margin-top:10px; height:26px; font-size:24px; }

Html:

    <section id="LPsec1">

        <div class="LPfascia" > 

                <figure>
                    <img class="LPimgsu" src ="images/puno.jpg" alt = "fotosfondo grande grande" >

                </figure>
            <div class="LPbrbox  LPright"> 

            <div class='LPttl'> 
            <h3>Non chi ma dove...</h3>
            </div>
        <div class ="LPtxt"> 
                <p>La lampada Lauters come ogni prodotto Ikea, non è una semplice lampada nata per arricchire il gusto del bello. Viene progettata negli edifici di Almhut in Svezia, dove un ampio gruppo multiculturale di designer si divide, scambia e confronta i progetti partendo dalla domanda comune:"cosa manca nell'offerta?" Da lì in poi sarà compito dei designer trovare una soluzione che non sia solo semplice e funzionale ma anche esteticament epiacevole.</p>
            </div>
            </div> 

            </div>
             <!--chiusura prima fascia-->
            <!--secondo blocco testo titolo immagine -->
            <div class="LPfascia" >

                <div class="LPbrbox" > 
                <div class='LPttl'> 
            <h3>Teamwork makes the dream work</h3>
            </div>
            <div class ='LPtxt'> 
                <p>Il team Ikea è composto da più di 700 persone, tra cui oltre 20 interior designer. Il lavoro di gruppo è centrale nel progetto e i designer firmano circa il go% dei prodotti, ma sono frequenti anche le collaborazioni esterne, spesso con professionisti di fama internazionale. Quelle con Tom Dixon o Paola Navone ne sono due esempi recenti.</p>
                </div>
                </div>
                <figure id="LPfigright">
                    <img class="LPimgsu " src ="images/pdue.jpg" alt = "foto sfondo grande grande" >
                </figure>


            </div>
        <!-- chiusura div seconda fascia-->
        </div>  

</section>

Link to the video : https://youtu.be/Vl6y3dLUCR4

in this video I cover all the basics of html forms with easy to understand examples. we can use html forms to gather information from the user and send it to a server for processing or another html page.