Hello my fellow web developers, I have three issues with my first website ever (from scratch). I have set up angles right and left from Fontawesome. Prior this, I had my Previous and Next labels working.
1st Issue: Angles are behind the images (on the top). I want them over the images (obviously). I can´t figure out how to fix this.
2nd Issue: Angles must replace Previous and Next labels. I can´t figure out how to handle this.
3rd Issue: I have set up color: rgb(255,255,255,0.01) in order to turn transparente the numbers over the previous and next buttons. But I suppose that´s not the solution, according to good practices.
I´m attaching the image of the website and the html and css code. Angles can be seen because I catch the screenshot just in the switch, but numbers over the previous and next buttons don´t because they are “invisible” as I told you.
Thanks in advance!
HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesionales adecuados."/>
<title>Balance - Salud Mental Online</title>
<link rel="stylesheet" href="./css./flexslider.css">
<link rel="stylesheet" href="./css/all.css">
<script src="./js./jquery-3.5.1.js"></script>
<script src="./js./jquery.flexslider.js"></script>
<script src="./js./main.js"></script>
<link rel="icon" href="img/favicon.png">
<!-- FONT POPPINS-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet"/>
<!-- BACKGROUND HERO PATTERNS: TEMPLE COLORS: #FFFFFF #9ACD32-->
</head>
<body>
<nav class="navmain">
<a href="index.html"> <img src="img/bbsmf-removebg-preview.png" class="brand" alt="logotipo oficial"/>
<ul class="navmenu">
<li>
<a href="./quienes_somos.html">¿Quienes Somos?</a>
</li>
<li>
<a href="./nuestros_profesionales.html">Nuestros Profesionales</a>
</li>
<li>
<a href="./consultas_citas.html">Consultas y Citas</a>
</li>
<li>
<a href="./blog.html">Blog</a>
</li>
</ul>
</nav>
<div class="flexslider">
<ul class="slides">
<i class="fas fa-angle-left"></i>
<i class="fas fa-angle-right"></i>
<li>
<img src="./img./adiccion.jpg" />
<section class="caption">
<h2>Adicción</h2>
</section>
</li>
<li>
<img src="./img./ansiedad.jpg" />
<section class="caption">
<h2>Ansiedad</h2>
</section>
</li>
<li>
<img src="./img./bullying.jpg" />
<section class="caption">
<h2>Bullying</h2>
</section>
</li>
<li>
<img src="./img./terapia_pareja.jpg" />
<section class="caption">
<h2>Terapia de Pareja</h2>
</section>
</li>
<li>
<img src="./img./depresion.jpg" />
<section class="caption">
<h2>Depresión</h2>
</section>
</li>
<li>
<img src="./img./estres.jpg" />
<section class="caption">
<h2>Estrés</h2>
</section>
</li>
<li>
<img src="./img./panico.jpg" />
<section class="caption">
<h2>Pánico</h2>
</section>
</li>
<li>
<img src="./img./ira.jpg" />
<section class="caption">
<h2>Ira</h2>
</section>
</li>
</ul>
</div>
<footer class="pie">
2018-2020 Balance Salud Mental - Designed by Watermelon
</footer>
</body>
</html>
CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
margin-top: -25px;
}
.navmain {
font-size: 17px;
justify-content: space-evenly;
align-items: center;
display: flex;
height: 100px;
background: white;
margin-top: 0px;
}
.brand {
width: 190px;
}
.navmain ul {
display: flex;
}
.navmain ul li {
padding: 30px;
list-style: none;
}
a {
color: #313335;
text-decoration: none;
font-size: 18px;
}
body {
text-align: center;
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.22'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
font-size: 16px;
font-family: 'Poppins', sans-serif;
border: 1px solid black;
}
h2 {
font-size: 40px;
margin-top: 470px;
margin-bottom: 30px;
margin-left: 680px;
font-family: 'Poppins', sans-serif;
font-weight: solid;
color: whitesmoke;
}
.pie {
margin-top: 100px;
font-size: 13px;
font-family: monospace;
}
.flexslider {
width: 95%;
max-width: 900px;
margin: 50px auto;
border: 3px solid black;
border-radius: 8px;
box-shadow: 0px 0px 30px 0px rgba (0,0,0,0.70);
display: flex;
flex-direction: column;
position: relative;
}
.slides,
.slides li,
.slides li img {
width: 100%;
}
.slides li {
margin-bottom: -11px;
}
.flex-control-nav.flex-control-paging {
position: absolute;
z-index: 9;
top: 95%;
margin-left: 350px;
}
.flex-control-nav li {
display: inline-block;
margin: 0 5px;
}
.flex-control-nav li a {
display: block;
width: 15px;
height: 15px;
background: green;
border-radius: 100%;
box-shadow: inset 0px -3px 5px 0 grey;
color:rgb(255, 255, 255, 0.01);
}
.flex-control-nav li a.flex-active {
background: red;
}
.flex-direction-nav {
position: absolute;
z-index: 3;
list-style: none;
}
.flex-direction-nav a {
margin-bottom: 45px;
display: flex;
background: white;
}
.fas fa-angle-left {
z-index: 9;
}
.caption {
position: absolute;
top: .5%;
}
The image:
