html – Como criar layout igual ao do Hubspot

Boa noite, gostaria de saber se tem como descobrir se um sistema utiliza algum template ou biblioteca de css, o sistema em questão é o hubspot. Gostaria de criar algo parecido e se alguém souber o nome do template ou bibliotecas usadas eu agradeço !

html – Problema de Responsive Design CSS

Estaba adaptando una página a responsive design, las medidas adaptables a móvil iban bien, hasta que lo actualizo en un momento y las medidas en móvil no se adaptaron bien, tuve que actualizarlo un par de veces para que se adapte.

¿Será un problema al cargar la imagen?

¿Será que las imágenes son muy pesadas?

¿Es problema de mi diseño?

¿Será que esa herramienta responsive de Chrome falla y debería probarlo directamente en móvil?.

La primera imagen es el diseño correcto y la segunda es cuando la actualizo.

Diseño Responsive correcto

Diseño Responsive incorrecto

CODIGO CSS

:root{
    --color-principal:#21ADFF;
    --color-fondo:#F0F0F0;
    --color-negro:#1A1A1A;
    --color-plomo:#999999;
}

nav{
    background-color:var(--color-principal);
    height:70px;
    width:100%;
    display:flex;
    align-items:flex-start;

    justify-content:space-between;
}

img{
    margin-top:5px;
    width:30%;
    margin-right:40px;
}

@media only screen and (max-width: 825px) {
    img{
        width:250px;
        margin-right:5px;

    }
}

.botones_nav{
    height:100%;
    display:flex;

    align-items:center;
}


.boton_home{
    background-image:url(Home.svg);
    background-repeat:no-repeat;
    background-size:40px 40px;
    background-position:center;
    margin-right:10px;

    padding:30px;
    
}
.boton_menu{
    background-image:url(Menu.svg);
    background-repeat:no-repeat;
    background-size:40px 40px;
    background-position:center;

    padding:30px;
}

CODIGO HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario</title>
    <link rel="stylesheet" href="estilos.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <nav>
        <div class="botones_nav">
            <a href="#" class="boton_home"></a>
            <a href="#" class="boton_menu"></a>
        </div>
        <img src="Logo_blanco_negro.svg" alt="logo">
    </nav>
</body>
</html>

html – Does it matter if blockquotes contain quote characters for SEO or accessibility?

If I have a block quote

<blockquote>
    <p>“Time is an illusion. Lunchtime doubly so.”</p>
</blockquote>

Does it matter or impact seo if I do or don’t include quote characters , with the quote?

<blockquote>
    <p>Time is an illusion. Lunchtime doubly so.</p>
</blockquote>

Will blockquotes without quote characters be interpreted in exactly the same way?

html – Eu especifico o ícone que eu desejo aplicar no meu botão com bootstrap, mas ele só aparece vazio na página… O que está havendo?

<div>
    <span>TROCO</span>
    <button type="button" class="btn btn-outline-dark" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    </button>

    <div class="collapse" id="collapse">
        <div class="card card-body">
            texto
        </div>
    </div>
</div>

Esse aí é o trecho que tem o botão. O ícone simplesmente não aparece…

html – ¿Cómo puedo hacer un iframe del view:source de una web con Javascript?

function extraccion() {
 var milink = document.getElementById("urlf").value
 var sc = "view-source:" + milink
 document.getElementById("analizar").src = sc
}
<input id="urlf" placeholder="Link de la película..." /> <button onclick="extraccion()">Ver código</button>
<iframe id="analizar"></iframe>

html – Issue with stylesheet after switching from IE to EDGE. Background color shifted

I’m building a calendar dinamically with table elements (tr,td) combined together in SQL and then bound to a Repeater. The current day is highlighted by adding background-color to the number in a -cell. After switching from IE to EDGE that highlighted background is shifted in relation to the number.enter image description here
This is how the html code is created in SQL:

COALESCE(PRETAG,'') + '<td style=text-align:center;column-width:52px;background-color:#'+ COALESCE(ColorCode,'FFFFFF') + ';>' 
                                          + Case WHEN DATEDIFF(day, date, getdate()) = 0 
                                                 THEN '<span class=highlight>&nbsp;'  
                                                 ELSE ''
                                                 END as PRETAG,
CAST(datepart(day, date) as nvarchar) + Case WHEN DATEDIFF(day, date, getdate()) = 0 
                                             THEN '&nbsp;&nbsp;</span>'
                                             ELSE ''
                                             END + '<br />' + CASE WHEN delta is Null THEN '&nbsp;'
                                                                   WHEN delta < 10 and delta > 0 THEN '0' 
                                                                   ELSE CAST(delta as NVARCHAR) END + CASE WHEN extra > 0 THEN '+' + CAST(extra as nvarchar) ELSE '' END as TAG

and this is how it is rendered in the browser:

<td style=text-align:center;column-width:52px;background-color:#C0C0C0;><span class=highlight>&nbsp;
        <a id="RepeaterKalendar_ctl183_ButtonSelect" href="javascript:__doPostBack(&#39;RepeaterKalendar$ctl183$ButtonSelect&#39;,&#39;&#39;)" style="vertical-align:text-bottom;text-decoration:none">2&nbsp;&nbsp;</span><br />&nbsp;</a> 
        </td>

Anybody has a hint to solve this? I could live with it, but I’m a perfectionist.
Martin

html – Espacio entre imagen y div contenedor

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cardProducto{
    width: 300px;
    height: 480px;
    margin: 10px;
    border: 1px solid black;
}

.section-flex{
    width: 100%;
    margin-top: 20px;
}

.container-flex{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.img-card{
    width: 100%;
    height: 340px;
}

.name{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 20px;
}

.precio{
    margin: 0;
    text-align: center;
}

.container-btn{
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
}

.btnVenta{
    border: 1px solid white;
    width: 125px;
    height: 30px;
    line-height: 25px;
    text-align: center;
    line-height: px;
    background-color: red;
    color: white;
    border-radius: 15px;
}

.btnVenta:hover{
    text-decoration: none;
    color: white;
    background-color: rgb(150, 0, 0);
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://es.stackoverflow.com/#">TusFiguras</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://es.stackoverflow.com/#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://es.stackoverflow.com/#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://es.stackoverflow.com/#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="https://es.stackoverflow.com/#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown link
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="https://es.stackoverflow.com/#">Action</a>
                <a class="dropdown-item" href="https://es.stackoverflow.com/#">Another action</a>
                <a class="dropdown-item" href="https://es.stackoverflow.com/#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>

      <section class="section-flex">
          <div class="container-flex">
            <div class="cardProducto">
                <img src="https://http2.mlstatic.com/kamiki-burning-gundam-hg-1144-rcnd-figuras-D_NQ_NP_688318-MLA26512585969_122017-F.jpg" alt="" class="img-card">
                <p class="name">Nombre</p>
                <p class="precio">$10000</p>
                <div class="container-btn">
                    <a href="" class="btnVenta">Añadir al carrito</a>
                    <a href="" class="btnVenta">Ver Producto</a>
                </div>
            </div>
            <div class="cardProducto">
                <img src="https://www.figurasdbzchile.cl/wp-content/uploads/2020/05/jira1.jpg" alt="" class="img-card">
                <p class="name">Nombre</p>
                <p class="precio">$10000</p>
                <div class="container-btn">
                    <a href="" class="btnVenta">Añadir al carrito</a>
                    <a href="" class="btnVenta">Ver Producto</a>
                </div>
            </div>
            <div class="cardProducto">
                <img src="https://www.figurasdbzchile.cl/wp-content/uploads/2020/05/jira1.jpg" alt="" class="img-card">
                <p class="name">Nombre</p>
                <p class="precio">$10000</p>
                <div class="container-btn">
                    <a href="" class="btnVenta">Añadir al carrito</a>
                    <a href="" class="btnVenta">Ver Producto</a>
                </div>
            </div>
          </div>
      </section>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

Flask – Templates, Routes and HTML

I’m in the process of designing a webapp using Flask and have begun with creating a template to base my other pages on.

For my navigation bar, I was wanting to have a coloured indicator on the button for the currently selected page. Is there any way in Flask template to have a sort of :

{% if "route == "https://stackoverflow.com/"": %}
  {{ <a class="navbar-item has-background-primary" href="https://stackoverflow.com/"> Home </a> }}
{% else: %}
   {{ <a class="navbar-item has-background-primary" href="https://stackoverflow.com/"> Home </a> }}
{% endif %}

I was hoping to reduce the amount of times I use this code, and actually make use of the template function, rather than have code for the navigation bar in every page I will design.

html – Remover remover elementos DOM com javascript

var btn = document.querySelector('.btn');
btn.addEventListener('click', remove);
var imagem = document.querySelector("img");

function remove() {

  imagem.classList.add('hide-me');
};
* {
  margin: 0;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  /* outline: 1px solid tomato; */
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  min-width: 100px;
}

.image {
  max-width: 200px;
  max-height: 250px;
  padding-top: 55px;
  padding-left: 40px;
}

.btn {
  border-radius: 8px;
  padding: 14px 40px;
  position: absolute;
  left: 20px;
  margin-top: 5px;
}

.hide-me {
  display: none;
}
<div>
  <button class='btn'>Botão</button>
  <img src="https://via.placeholder.com/100" class='image' alt="">
</div>

html – Multiple Selection Form PHP to MYSQL

I am working on something, learning PHP and I don’t know how to continue.

I have form for adding costumer to a database, and I have classes (program) table where I add all classes, and from that table I get data to select box.
Here is my HTML/PHP form:

<form action="dodajstudenta.php" method="POST">

    <div class="modal-body">

        <div class="form-group">
            <label> Ime i Prezime </label>
            <input type="text" name="ime" class="form-control" placeholder="Upišite Ime i Prezime">
        </div>
        <div class="form-group">
            <label> Upišite Spol </label>
            <input type="text" name="spol" class="form-control" placeholder="Upišite Spol (M/Ž)">
        </div>
        <div class="form-group">
            <label>Grad</label>
            <input style="font-style: #f89900" type="text" name="grad" class="form-control" placeholder="Upišite Grad iz kojeg dolazi Student">
        </div>
        <div class="form-group">
            <label>Telefon</label>
            <input style="font-style: #f89900" type="text" name="tel" class="form-control" placeholder="Upišite Telefon">
        </div>
        <div class="form-group">
            <label>Email</label>
            <input style="font-style: #f89900" type="email" name="email" class="form-control" placeholder="Upišite Email">
        </div>
        <div class="form-group">
            <label>Uzrast</label>
            <input style="font-style: #f89900" type="text" name="uzrast" class="form-control" placeholder="Upišite Uzrast">
        </div>
        <div class="form-group">
            <label>Škola</label>
            <input style="font-style: #f89900" type="text" name="skola" class="form-control" placeholder="Upišite Obrazovnu Ustanovu">
        </div>

        <div class="form-group">
          <label>Izaberite Programe sa liste</label>
         <select name="naziv()" id="naziv" class="form-control action" multiple="">
          <option disabled selected>-- Izaberi Program --</option>
          <?php
            include "config/database.php";  // Using database connection file here
            $records = mysqli_query($conn, "SELECT naziv FROM program");  // Use select query here 

            while($data = mysqli_fetch_array($records))
            {
            echo "<option value='". $data('naziv') ."'>" .$data('naziv') ."</option>";  // displaying data in option menu
            } 
          ?>  
        </select> 
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Zatvori</button>
        <button type="submit" value="Register" name="registerbtn" class="btn btn-primary">Pošalji</button>
    </div>
  </form>

This one is php action code dodajstudenta.php

require(‘config/database.php’);
// When form submitted, insert values into the database.

if (isset($_REQUEST('ime'))) {
$ime = stripslashes($_REQUEST('ime'));
//escapes special characters in a string
$ime = mysqli_real_escape_string($conn, $ime);
if (isset($_REQUEST('spol'))) {
$spol = stripslashes($_REQUEST('spol'));
//escapes special characters in a string
$spol = mysqli_real_escape_string($conn, $spol);
if (isset($_REQUEST('grad'))) {
$grad = stripslashes($_REQUEST('grad'));
//escapes special characters in a string
$grad = mysqli_real_escape_string($conn, $grad);
if (isset($_REQUEST('telefon'))) {
$telefon = stripslashes($_REQUEST('telefon'));
//escapes special characters in a string
$telefon = mysqli_real_escape_string($conn, $telefon);
if (isset($_REQUEST('email'))) {
// removes backslashes
$email = stripslashes($_REQUEST('email'));
//escapes special characters in a string
$email = mysqli_real_escape_string($conn, $email);
if (isset($_REQUEST('uzrast'))) {
// removes backslashes
$uzrast = stripslashes($_REQUEST('uzrast'));
//escapes special characters in a string
$uzrast = mysqli_real_escape_string($conn, $uzrast);

if (isset($_REQUEST('skola'))) {
// removes backslashes
$skola = stripslashes($_REQUEST('skola'));
//escapes special characters in a string
$skola = mysqli_real_escape_string($conn, $skola);


//if (isset($_REQUEST('naziv'))) {
// removes backslashes
//$naziv = stripslashes($_REQUEST('naziv'));
//escapes special characters in a string
//$naziv = mysqli_real_escape_string($conn, $naziv);

$query = "INSERT into `students` (ime, spol, grad, tel, email, uzrast, skola, program) VALUES ('$ime', '$spol', '$grad', '$tel', '$email', '$uzrast', '$skola', '$naziv')";
// add coutry ID's
    foreach($_POST('naziv') as $naziv) {
        $query = "($naziv),";
    }
$result   = mysqli_query($conn, $query);
if ($result) {
header('Location: studenti.php');
echo "<div class='form'>
<h3>Uspješno ste dodali program.</h3><br/>
</div>";
} else {
echo "<div class='form'>
<h3>Niste sva polja popunili.</h3><br/>
</div>";
}
}
}
}
}
}
}
} else {
}
?>

For some reason when I type in whole PHP code it doesn’t look very well, I made it without <?php

I want to make code to get multiple data from select box and enter it in a database table.