2

Estoy intentando hacer el menú de la imagen y no puedo listar bien los textos con las lineas

ACTUALIZADO

Pude listar los textos con las lineas pero no me quedan bien ordenadas.

.cont {
display: flex;
cursor: pointer;
font-size: 10px;
}

.mbar {
width: 45px;
height: 6px;
margin: 5px 8px;
transition: 0.4s;
}

.br1 {
background-color: #a2d1cb;
}

.br2 {
background-color: #9a8542;
}


.br3 {
background-color: #eb6953;
}

.br4 {
background-color: #1d1d1b;
}
<a href="#">
<div class="cont"><div class="brt2">ABOUT</div> <div class="mbar br1"></div></div>
</a>

<a href="#">
<div class="cont"><div class="brt2">WORK</div> <div class="mbar br2"></div></div>
</a>

<a href="#">
<div class="cont"><div class="brt2">CLIENTS</div> <div class="mbar br3"></div></div>
</a>

<a href="#">
<div class="cont"><div class="brt2">CONTACT</div> <div class="mbar br4"></div></div>
</a>

introducir la descripción de la imagen aquí

4 respuestas 4

2

Hola hice uno parecido con BootStrap, te paso el código completo en caso de que te sirva. introducir la descripción de la imagen aquí

<!doctype html>
<html lang="es">
    <head>
        <title> English App </title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <style type="text/css">
        </style>
    </head>
    <body>
        <div class="row mb-4">
            
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-3">
                <div class="row justify-content-center">
                    <div class="col-lg-3">
                        <i class="fas fa-check" style="color:black"></i>
                    </div>
                    <div class="col-lg-4">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center mb-3">
            <div class="col-lg-3">
                <div class="row justify-content-center">
                    <div class="col-lg-4 text-primary fw-bold">
                        About 
                    </div>
                    <div class="col-lg-4 bg-primary">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center mb-3">
            <div class="col-lg-3">
                <div class="row justify-content-center">
                    <div class="col-lg-4 text-warning fw-bold">
                        Work
                    </div>
                    <div class="col-lg-4 bg-warning">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center mb-3">
            <div class="col-lg-3">
                <div class="row justify-content-center">
                    <div class="col-lg-4 text-danger fw-bold">
                        Clients
                    </div>
                    <div class="col-lg-4 bg-danger">
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center mb-3">
            <div class="col-lg-3">
                <div class="row justify-content-center">
                    <div class="col-lg-4 text-black fw-bold">
                        Contact
                    </div>
                    <div class="col-lg-4 bg-black">
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- Optional JavaScript; choose one of the two! -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>
2

Hice una mezcla entre Bootstrap y el CSS que hiciste.

Chauchis 😘!

a {text-decoration: none !important;}

.cont {font-size: 10px;}

.mbar {
width: 45px;
height: 6px;
margin: 5px 8px;
transition: 0.4s;
}

.tbr1 {color: #a2d1cb;}
.tbr2 {color: #9a8542;}
.tbr3 {color: #eb6953;}
.tbr4 {color: #1d1d1b;}

.br1 {background-color: #a2d1cb;}
.br2 {background-color: #9a8542;}
.br3 {background-color: #eb6953;}
.br4 {background-color: #1d1d1b;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="float-start p-3">
<a href="#" class="mb-0">
<div class="row cont">
<div class="col-md-5 tbr1">ABOUT</div> <div class="col-md-4 mbar br1"></div>
</div>
</a>

<a href="#">
<div class="row cont">
<div class="col-md-5 tbr2">WORKS</div> <div class="col-md-4 mbar br2"></div>
</div>
</a>

<a href="#">
<div class="row cont">
<div class="col-md-5 tbr3">CLIENTS</div> <div class="col-md-4 mbar br3"></div>
</div>
</a>

<a href="#">
<div class="row cont">
<div class="col-md-5 tbr4">CONTACT</div> <div class="col-md-4 mbar br4"></div>
</div>
</a>
</div>

</body>
</html>

1
  • Gracias a todos, voy a ir probando de a poco!
    – user101604
    Commented el 3 dic. 2021 a las 16:51
2

Yo creeria que deberías encerrar a cada uno de tus items en un contenedor:

<div class= "ConItm1">
    <a hrf="#">
      <div class="item1"></div>
      <div class="mbar br1"></div>
    </a>
</div>

luego se le aplicaría el style:

.br1 {
        margin: 5px auto;
        background-color: #a2d1cb;
    }
.contItm1 {
        width: 100px;
        text-align: center;
    }

Y harías eso con cada uno de los items.

1

Lo que tienes que hacer es jugar con las diferentes opciones que te ofrece flex-box para ordenar los elementos de una manera u otra.

En este caso, le ajuste el porcetnaje del tamño del div que contiene el texto, y la laineacion del texto con respecto al elemento padre, y la alineacion de los objetos con respecto al contenedor hijo.

justify-content: flex-end;

Te dejo un articulo donde puedes averiguar mas al respecto

Flexbox by Css Tricks

.cont {
display: flex;
justify-content: flex-end;
cursor: pointer;
font-size: 10px;
text-align: right;
width: 20%;
margin: auto;
}

.mbar {
width: 45px;
height: 6px;
margin: 5px 8px;
transition: 0.4s;
}

.br1 {
background-color: #a2d1cb;
}

.br2 {
background-color: #9a8542;
}


.br3 {
background-color: #eb6953;
}

.br4 {
background-color: #1d1d1b;
}
<a href="#">
<div class="cont"><div class="brt2">ABOUT</div> <div class="mbar br1"></div></div>
</a>

<a href="#">
<div class="cont"><div class="brt2">WORK</div> <div class="mbar br2"></div></div>
</a>

<a href="#">
<div class="cont"><div class="brt2">CLIENTS</div> <div class="mbar br3"></div></div>
</a>

<a href="#">
<div class="cont"><div class="brt2">CONTACT</div> <div class="mbar br4"></div></div>
</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.