• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zmienić wyśrodkowanie obrazu w karuzeli bootstrap

VPS Starter Arubacloud
0 głosów
369 wizyt
pytanie zadane 12 października 2020 w JavaScript przez napoludniestad.pl Użytkownik (960 p.)

Nie mogę wyśrodkować obrazu na slajdach przymniejszych szerokościach - jak bym nie próbował nic nie idzie próbowałem z @media ale nic nie daje - cały czas pokazuje mi tylko lewą część obrazka, dodałem do klasy img-fluid i img-responsive - bez zmian, starałem się zmienić d-block - też bez rezultatu... może ktoś mi podpowiedzieć, bo nie mogę tego rozwiązać - mam problem też z buttonem odpowiedzialnym za CV - po najechaniu na przycisk "po polsku" albo "in english" zmienia background color i wykazuje border radius czego nie chcę ale nie moge dojść od czego to zależy

 

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Strona ta jest wykonana przez Jana Pytlarczyka, jako wizytówka pomagająca znaleźć pracę"/> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>Michał Pytlarczyk</title>
    <link rel="stylesheet" href="mainstyle.css" type="text/css"/>
    <link rel="stylesheet" href="fontello-f5215c88/css/fontello.css" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

 <!--jquery odpowiedzialne za pojawianie się i znikanie menu-->   
<script>
  $(document).ready(function(){
      $(".btn-lg").hide();
      $(".navbar-toggler").click(function(){
      $(".btn-lg").fadeToggle("1000");   
        });
      });
</script>

<!--płynne przewijanie-->  
<style>
  html 
  {  
    scroll-behavior: smooth;
  }
</style>

</head>

<body>
  <!--ustawienia sliderów-->  
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="8000">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
  <!--koniec ustawienia sliderów-->  

     
    <div class="carousel-inner">
      <!--pierwszy slider--> 
      <div class="carousel-item active">
        <img class="d-block w-100 img-responsive" src="photo/dezodoranty.png" alt="First slide">
          <div class="carousel-caption d-none d-md-block">
              <h2 class="animate__animated animate__fadeInDown animate__delay-1s">Hej! Zainteresowany?</h2>
              <p class="animate__animated animate__fadeInLeft animate__delay-2s">Jeśli spodobała ci się moja strona</br>
              i myślisz, że będę się świetnie sprawdzał w twojej firmie</br>
              nie czekaj tylko rozwiń przycisk i sprawdź moje CV!</br>
            <div class="animate__animated animate__fadeInRight animate__delay-3s" class="btn-group">
              <button type="button" class="btn btn-warning btn-primary" title="Zobacz moje CV">Curriculum Vitae</button>
              <button type="button" class="btn btn-warning btn-primary dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu btn-warning" role="menu">
                <li><a href="Jan_Pytlarczyk_(PL).pdf">Po polsku</a></li>
                <li><a href="Jan_Pytlarczyk_(ENG).pdf">In english</a></li>
              </ul>
            </div> 
          </div>
      </div>
    <!--koniec pierwszego slidera-->  

    <!--drugi slider-->  
      <div class="carousel-item">
        <img class="d-block w-100 img-responsive" src="photo/torba.png" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="animate__animated animate__rotateInDownLeft animate__delay-1s">Umówmy się już dziś!</h2>
          <p class="animate__animated animate__fadeInRightBig animate__delay-2s">Ok, sprawdziłeś moje CV, teraz czas na spotkanie!</br>
          Kliknij w przycisk E-mail i umówmy się na rozmowę,</br>
          w czasie której, omówimy warunki współpracy! 
          </p>
          <a href="mailto:jan.pytlarczyk@protonmail.com" title="Napisz do mnie maila" class="animate__animated animate__fadeInUpBig animate__delay-3s"><i class="icon-gmail mr-3"></i>E-mail</a>
        </div>
      </div>
      <!--koniec drugiego slidera-->

      <!--trzeci slider-->
      <div class="carousel-item">
        <img class="d-block w-100 img-responsive" src="photo/IMG_20190727_131249.jpg" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="animate__animated animate__backInRight animate__delay-1s">Poznajmy się na Linked in!</h2>
          <p class="animate__animated animate__backInDown animate__delay-2s">Współczesne poszukiwnaie pracy,</br> 
            to wykorzystywanie wielu portali,</br>  
            w tym także Linked in!</br> 
            Klinknij i sprawdź mój profil!</br> 
          </p> 
          <a href="https://www.linkedin.com/in/jan-pytlarczyk" target="_blank" title="Zapraszam na mój profil na Linkedin" class="animate__animated animate__fadeInUp animate__delay-3s"><i class="icon-linkedin mr-3"></i>Linked in</a>
        </div>
      </div>
      <!--koniec trzeciego slidera-->
    </div><!--div kończący carousel-inner slider--> 

    <!--przyciski sliderów--> 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    <!--koniec przycisków sliderów--> 

</div><!--div zamykający ustawienia sliderów-->  

  


  <div class="container-fluid">
        <nav class="navbar sticky-top navbar-light"><!--menu gówne-->  
          <ul class="nav navbar-nav">     
            <a class="btn-sm btn-warning">
            
            <button class="navbar-toggler" title="Menu" type="button"  data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" ></span>
            </button></a>
          
            <li><button type="button" class="btn-lg btn-warning" title="Home"><i class="icon-home-outline"></i></button></li>

            <li><button type="button" class="btn-lg btn-warning" title="O mnie">O mnie</button></li>

            <li><button type="button" class="btn-lg btn-warning" title="Moje wykształcenie">Wykształcenie</button></li>

            <li><button type="button" class="btn-lg btn-warning" title="Moje doświadczenie">Doświadczenie</button></li>
          </ul>
        </nav><!--koniec menu gówne-->


 


<div class="jumbotron jumbotron-fluid"><!--zawartość główna-->
  <div class="container-fluid">

    <header>
    <div id="main-title">
    <h1>Po co powstała <span style="color:yellow">ta</span> strona?</h1>
    </div>
    </header>
      <div id="main-text">
      <a style="text-indent: 7%;"> <p>Początki są zawsze trudne, nie raz i nie dwa zaczynałem naukę od zera. Ale nauka czegoś nowego to też <span style="color:yellow">wyzwania</span>, z którymi musimy się mierzyć. Jednym z większych wyznawań, była dla mnie nauka pisania stron internetowych. Spędziłem wiele godzin przy pisaniu kodu - bardzo często popełniałem błędy i nie mogłem zrozumieć, w którym miejscu mam bł<span style="color:yellow">a</span>d. Nie raz i nie dwa miałem kompletnie dosyć pisania kodu, lecz odczuwałem ogromną <span style="color:yellow"> satysfakcję</span>, kiedy ten kod zaczynał działać! Dzięki swojej <span style="color:yellow">upartości</span> i chęci zdobycia doświadczenia, pokonywałem przeciwności. Doszedłem do momentu, gdzie rozumiem podstawowe zasady pisania i wiem jak je wykorzystać. Brakuje mi jednak odpowiedniego <span style="color:yellow"> wsparcia merytorycznego</span>, abym mógł rozwijać się dalej - więc jeśli twoja firma, szuka kogoś, kto jest zmotywowany do  <span style="color:yellow"> pracy i nauki</span>, to moja kandydatura jest najlepszym wyborem! Jeśli chcesz dowiedzieć się więcej o mnie i moim doświadczeniu, to sprawdź pozostałe sekcje na mojej stronie, do zobaczenia!
      </p></a>
    </div>
  </div>
</div><!--koniec zawartości głównej--> 
  
<div class="buttons"><!--przyciski do kontaktu na dole strony-->
  <div class="row">
    <div class="col-sm-4">
      <div class="btn-group"><!--przycisk CV-->
          <button type="button" class="btn btn-warning btn-primary" title="Zobacz moje CV">Curriculum Vitae</button>
          <button type="button" class="btn btn-warning btn-primary dropdown-toggle" data-toggle="dropdown">
          <span class="caret"></span>
          </button>
          <ul class="dropdown-menu btn-warning" role="menu">
            <li><a href="Jan_Pytlarczyk_(PL).pdf">Po polsku</a></li>
            <li><a href="Jan_Pytlarczyk_(ENG).pdf">In english</a></li>
          </ul>
      </div> 
    </div>

        <div class="col-sm-4"><!--przycisk email-->
          <a href="mailto:jan.pytlarczyk@protonmail.com" title="Napisz do mnie maila"><button type="button" class="btn btn-light"><i class="icon-gmail mr-3"></i>E-mail</button></a>
        </div>

        <div class="col-sm-4"><!--przycisk linked in-->
          <a href="https://www.linkedin.com/in/jan-pytlarczyk" target="_blank" title="Zapraszam na mój profil na Linkedin"> <button type="button" class="btn btn-primary"><i class="icon-linkedin mr-3"></i>Linked in</button></a>
        </div>
  </div>
</div><!--koniec przycisków do kontaktu na dole strony-->    
 

  
  
  <div class="up-button"><!--przycisk powrotu do góry-->
      <a href="#"  class="btn btn-outline-warning" title="Przewiń do góry"><i class="icon-up-outline"></i><span class="sr-only">Przewiń na górę strony</span></a>
  </div><!--koniec przycisku powrotu do góry-->
  




  <footer class="page-footer font-small blue"> <!--stopka-->
    <div class="container-fluid text-center">
        <div class="row">
            <div class="footer-copyright text-center">
              <span style="color:yellow"> &copy Copyrights 2020 by Jan Pytlarczyk</span></br>
                Strona ta została utwożona w celu nauki programownaia, jak i chęci znalezienia pracy.</br> Jeśli widzisz jakieś błędy lub niedopatrzenia - proszę poinformuj mnie o nich :)
    
    
            </div>
        </div>
    </div>
  </footer><!--koniec stopki-->        


   
        
</div><!--div zamykający container-fluid-->





<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  

</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 12 października 2020 przez napoludniestad.pl Użytkownik (960 p.)
body
{
   background-color:black;
}
@media(max-width: 600px)
{
    .carousel-item
    {
        max-height: 600px;
        min-width: 400px;
        position:center;
    }
    .d-block {
        width: 600px;
        height: 400px;
        position:center;
    }
}

.nav
{
    height: 260px;
    float:left;
}
.navbar 
{
    float:left;
    width: fit-content;
    position: fixed;
    z-index: 2;
    left:-20px;
    top:-5px;
}

.d-block {
    width: 100%;
    height: 800px;
    -webkit-background-size:cover;
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;

}

.carousel-item
{ 
height: auto;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;    
}

.carousel-item>img
{
    max-height: 800px;
    min-width: 1000px;
}

.carousel-caption
{
    font-size: large;
    color: #edbb00;
    padding-bottom: 490px;
}
.carousel-caption h2
{
    font-size: 60px;
    text-transform: uppercase;
    font-weight: bold;
}

.carousel-caption p
{
    color: #edbb00;
    font-weight: bold;
}

.dropdown-menu
{
    background-color: #edbb00;
    padding:0;
    border-radius: none;

}

.dropdown-menu>li>a
{
    background-color: #edbb00;
    padding-left:5px;
    
    
}
.carousel-caption a
{
    background: #edbb00;
    padding: 15px 35px;
    display: inline-block;
    color: black;
    border-radius: 25px;
}

.carousel-control .left
{
    background-image: none;
}

.carousel-control .right
{
    background-image: none;
}
.carousel-indicators .active
{
    background-color:#edbb00;
    border-color: #edbb00;
    border-radius: 50px;
    
}
.btn-sm
{
    width: 66px;
}

.jumbotron
{
    background-color: black;
}
.container-fluid
{
    width: 100%;
    height: 100%;
    background-color:black;
    text-align: justify;
    padding: 20px;
    color:white;
    margin-top: 20px;
}

#main-title
{
    text-align: center;
    margin-bottom: 30px;   
}
.buttons
{
    margin:30px;
    text-align: center;
    padding:12px;
    margin-bottom: 40px;
}

.col-sm-4
{
    margin-bottom: 30px;
}

.up-button
{
    float:right;
}

.page-footer
{
    background-color:black;
    margin-left:auto;
    margin-right:auto;
    margin-top: 20px;
}

.footer-copyright
{
    background-color:black;
    text-align: justify;
    padding: 10px;
    color:white;
    margin-left:auto;
    margin-right:auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 10px;   
}

 

Podobne pytania

0 głosów
0 odpowiedzi 313 wizyt
pytanie zadane 6 lipca 2016 w PHP przez krystianoos Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 4,501 wizyt
pytanie zadane 23 czerwca 2015 w HTML i CSS przez SikorKK Użytkownik (610 p.)
0 głosów
2 odpowiedzi 297 wizyt

92,830 zapytań

141,771 odpowiedzi

320,817 komentarzy

62,159 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...