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

Pomoc z bootstrap

VPS Starter Arubacloud
–1 głos
96 wizyt
pytanie zadane 7 marca 2019 w HTML i CSS przez Dawid Adrian Lichota Nowicjusz (140 p.)

Witam. Czy ktoś mógłby pomóc przerobić mi tą prostą stronę na bootstrap. Jest mi to bardzo szybko potrzebne starałem się nauczyć kursami ale jest to sporo wiedzy, której nie zdążę tak szybko opanować, a muszę jak najprędzej zrobić aby ta strona była przystosowana na telefony :D. Proszę o pilną pomoc

HTML:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>3FILM - PRODUKCJA FILMOWA</title>
    <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">
    <link href="css4/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css4/normalize.css" rel="stylesheet" type="text/css">
    <link href="css4/demo.css" rel="stylesheet" type="text/css">
    <link href="css4/xopixel.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
    
    
    <link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" href="favicon/favicon.ico">
</head>
<body>
    

<section class="xop-container">

 

    <div class="logo">
    <center><img src="images4/logow.png" width="200" height="200' alt="Wedding"></center>
    </div>
    
 <div class="social">
    <center>
    <a href="https://facebook.com/3filmvideo" target="_blank"><i class="fa fa-facebook" style="font-size:50px;" ></i></a>
    <a href="https://vimeo.com/user29680398" target="_blank"><i class="fa fa-vimeo" style="font-size:50px"></i></a>
    <a href="https://www.youtube.com/channel/UCbnjBqr6RLEomPMZr5Cj_0Q" target="_blank"><i class="fa fa-youtube-play" style="font-size:50px"></i></a>
    <a href="https://www.instagram.com/3film/" target="_blank"><i class="fa fa-instagram" style="font-size:50px"></i></a>

    </center>
    </div>
    
    <div class="xop-left">

        <article>
            <h1>Wedding</h1>
            <a class="xop-button1" href="https://wedding.3film.pl">Przejdź do strony</a>
        </article>
    </div>    
    <div class="xop-right">

        <article>
            <h1>Commercial</h1>
            <a class="xop-button2" href="https://commercial.3film.pl">Przejdź do strony</a>
        </article>
    </div>

</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
</body>
</html>


 

CSS:

 

 

@import url('https://fonts.googleapis.com/css?family=Pacifico|Rock+Salt');

html, body, section {
    height: 100%;
    font-family: 'Lato';

}

body {
    color: #fff;
    text-align: center;
        background-color: #1e1e1e;
}

.xop-container {
    display: flex;
}

div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xop-left {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(43,43,43,0.10)),
        url(../images4/wedding.jpg);
    background-size: cover;
    background-position: center;
    flex: 1;
    padding: 1rem;
    transition: all .2s ease-in-out;
          -webkit-filter: contrast(1.1);
  filter: contrast(1.1);

 
}

.xop-right {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(43,43,43, 0.10)),
        url(../images4/commercial.jpg);
        background-size: cover;
        background-position: center;
    flex: 1;
    padding: 1rem;
    transition: all .2s ease-in-out;
          -webkit-filter: contrast(1.1);
  filter: contrast(1.1);

}

.xop-left:hover {
     -webkit-transform: scale(0.95);
          transform: scale(0.95);
 
 -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
    -webkit-filter: contrast(1.4);
  filter: contrast(1.4);

}

.xop-right:hover
{
         -webkit-transform: scale(0.95);
          transform: scale(0.95);
 -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
      -webkit-filter: contrast(1.4);
  filter: contrast(1.4);
}

.xop-left h1 {
    /*font-family: 'Rock Salt', cursive;*/
    font-size: 6rem;
    margin-top:50%;

}

.xop-right h1 {
    /*font-family: 'Pacifico', cursive;*/
    font-size: 6rem;
    margin-top:50%;
}

.xop-button1 {
    
    color: #333;
    background-color: #FFF;
    padding: 1.5%;
    margin: 0 2%;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    width: 150px;

}

.xop-button1:hover {
    background: #008aff;
    color: #fff;
}

.xop-button2 {
    
    color: #333;
    background-color: #FFF;
    padding: 1.5%;
    margin: 0 2%;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    width: 150px;
    

}

.xop-button2:hover {
    background: #ff7200;
    color: #fff;
}

.logo
{
 z-index:3;
 margin-top: -15%;

}

.logo {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.social {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.social
{
 z-index:4;
height:100px;
}

.fa
{
    margin-top:45%;
    margin-right:80px;
    padding-left:6%;
     color:rgba(255,255,255,1);
}

.fa-facebook:hover
{
     color:rgba(17,131,236,1);
}

.fa-youtube-play:hover
{
     color:rgba(204,24,30,1);
}

.fa-vimeo:hover
{
     color:rgba(78,187,255,1);
}

.fa-instagram:hover
{
     background: linear-gradient(45deg, #f09433 0%,#e6683c 5%,#dc2743 10%,#cc2366 15%,#bc1888 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

 

komentarz 7 marca 2019 przez Mariusz08 Maniak (62,300 p.)
Chyba sobie żartujesz prosząc, o przebudowę Twojej strony za damo na framework. To forum programistycznie, więc

a) możesz uczyć się i pytać o to, czego nie wiesz/nie działa

b) przenieść pytanie do kategorii Zlecenia

1 odpowiedź

0 głosów
odpowiedź 7 marca 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
Daj link do strony. Czym zmotywowany jest twój pośpiech?

Podobne pytania

0 głosów
1 odpowiedź 130 wizyt
pytanie zadane 16 marca 2016 w HTML i CSS przez primosdace Użytkownik (730 p.)
0 głosów
0 odpowiedzi 82 wizyt
pytanie zadane 11 listopada 2023 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 94 wizyt
pytanie zadane 20 września 2023 w HTML i CSS przez niezalogowany

92,452 zapytań

141,262 odpowiedzi

319,078 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...