0
personal where I am erring :/ ... ?
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
h2{
font-family: 'Montserrat Alternates', sans-serif;
}
@import url('https://fonts.googleapis.com/css?family=Gentium+Book+Basic');
.numero{font-family: 'Gentium Book Basic', serif;
opacity: 0.6;
font-size:medium;
}
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 59.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color:;
}<head>
<title>Brown Odontologia</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--- zoom desativado para o usuario -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!----fonts google------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/js" href="js/alerta.js">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<style>
.bs-example {
margin: 50px;
}
</style>
</head>
<body class="container">
<!--------------------------------------------------------- Menu ------------------------------------------------------------>
<div class="row justify-content-md-center">
<header class="w3-panel w3-center w3-opacity" style="padding:1px 5px">
<h1 class="w3-xlarge">BROWN ODONTOLOGIA</h1>
<hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
<h6>SEU SORRISO É NOSSA MISSÃO</h6>
<hr style="line-height:2px; boder:none; color:aquamarine; background-color:black; margin-top:10px;" />
<a href="#menu" class="w3-bar-item w3-button">Quem Somos ?</a>
<a href="#escolher" class="w3-bar-item w3-button">Por que nos escolher ?</a>
<a href="#especia" class="w3-bar-item w3-button">Especialidades</a>
<a href="#chegar" class="w3-bar-item w3-button">Como chegar ?</a>
<div class="w3-button">
<button type="button" class="btn btn-primary-center dropdown-toggle" data-toggle="dropdown">Contatos</button>
<div class="dropdown-menu" style="background-color: white"> <a href="#" class="dropdown-item">
<div class="col-lg-1 col-xs-2" style="text-align:right"> <i class="fa fa-whatsapp" style="font-size:19px;color:#1BD741"></i> WhatsApp</div>
</a> <a href="#" class="dropdown-item" style="position:">
<div class="col-lg-1 col-xs-2" style="text-align:right"> <i class="fa fa-phone" style="font-size:19px;color:black"></i> WhatsApp</div>
</a>
</div>
</div>
</header>
<script>
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
</script>
<!----------------------------------------------------------Tabela de contatos-------------------------------------------------->
<!---------------------------------------------------------------Slide--------------------------------------------------------->
<br />
<!-- Header -->
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://img.ibxk.com.br///2019/04/10/10104113623503-t1200x480.jpg" class="d-block w-100" alt="#">
<div class="carousel-caption d-none d-md-block">
<h5>Fácil Acesso</h5>
<p>Como chegar ? </p>
</div>
</div>
<div class="carousel-item">
<img src="https://img.ibxk.com.br///2019/04/10/10104113623503-t1200x480.jpg" class="d-block w-100" alt="#">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://img.ibxk.com.br///2019/04/10/10104113623503-t1200x480.jpg" class="d-block w-100" alt="#">
<div class="carousel-caption d-none d-md-block">
<h5>O que vale é a qualidade</h5>
<p>Venha Conhecer Nossos Planos</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo </span>
</a>
</div>
</div>
more like leaves the background white (I don’t think q would look cool the background half transparent)
– caiquesey
@Caiquesey guy I even tried to see here because it is transparent, but I couldn’t solve... I think you could open another question to see if someone comes up with an answer to that
– hugocsl