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;
}