Witam serdecznie!
Mam 2 problemy mianowicie
1. Pojawiło mi się białe miejsce z prawej strony i nie wiem jak się tego pozbyć.
2. Jak wyrownac opcje do prawej strony próbowałem na wszelakie sposoby bootsrapem czy za pomoca styli w dokumencie nic nie pomogło.
Z góry dziękuje !
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MM</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CVarela+Round" rel="stylesheet">
</head>
<body >
<div id="header">
<div class="backg">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg bg-image fixed-top">
<a class="navbar-brand" href="#header"><img src="img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" style="width:100%;margin: auto;text-align: center" id="navbarText">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link text-white " href="#aboutme">o mnie <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#portfolio">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#contact">kontakt</a>
</li>
</ul>
</div>
</nav>
<!-- <nav class="navbar navbar-light fixed-top">
<div class="row" >
<div class="col-md-4 mx-auto align-middle">
<img clas="img-fluid" src="img/logo.png" />
</div>
<div class="col-md-8 mx-auto align-middle">
<ul >
<li><a class="text-white" href="#aboutme">o mnie</a></li>
<li><a class="text-white" href="#portfolio">portfolio</a></li>
<li><a class="text-white" href="#contact">kontakt</a></li>
</ul>
</div>
</div></nav>-->
<div class="homewrapper">
<div class="row justify-content-around" >
<div class="col-md-10 mx-auto text-center text-white align-middle ">
<div class="headertext"> <h1><p >Rzeczy niemożliwe załatwiam od razu.</p></h1><h1><p class="cheddar-text">Na cuda trzeba trochę poczekać.</p></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="aboutme">
<div class="container-fluid ">
<div class="row my-5">
<div class="col-md-5 px-auto">
<img class=" img-fluid rounded mx-auto d-block p-0 " id="faceimg" src="img/zdjecie_twarz.jpeg" />
</div>
<div class="col-md-7 mx-auto text-left">
<p class="indent" ><strong>Cześć! Jetem Mateusz, na co dzień programuję strony internetowe. Zdarza się, że praca pochłania mnie tak, że znajomi, podczas wspólnych spotkań, dostają mnie w pakiecie z moim laptopem</strong>.</p>
<p class="indent">Oprócz chwil, w których pochłonięty jestem programowaniem, fascynują mnie podróże, szczególnie te pełne spontaniczności, ale również niewymagające wkładu finansowego, do których z pewnością zalicza się podróż autostopem. Moimi kolejnymi pasjami są: matematyka, muzyka i kinematografia, te dwie ostatnie szczególnie powiązane z Hansem Zimmerem i Christopherem Nolanem.</p><br>
<div class="text-center">
<button type="button" class="btn btn-primary btn-lg mt-4 p-4 px-5 ">Napisz do mnie!</button>
</div>
</div>
</div>
<div class="row ">
<div class="bg-skils">
<div class="col-12 ">
<div class="row">
<div class=" col-lg-2 col-sm-3 col-6"><img class="float-left img-fluid" src="img/ikona_komputer.png" /></div>
<div class="col-lg-3 col-sm-5 col-6 align-self-center"><p class="float-left "> Kodowanie stron WWW z zastosowaniem najnowszych technologi HTML'a używałem już na nocniku.</p></div>
</div>
</div>
<div class="col-12 ">
<div class="row justify-content-end">
<div class="col-lg-3 col-sm-5 col-6 col align-self-center"><p class="float-left">Nieprzerwanie rozwijam swoje umiejętności i uczę się nowych rzeczy, aktualnie... chińskiego.</p></div>
<div class="col-lg-2 col-sm-3 col-6 col align-self-end"><p class="float-left "> <img src="img/ikona_ksiazki.png" /></div>
</div>
</div>
<div class="col-12 ">
<div class="row">
<div class="col-lg-2 col-sm-3 col-6"><img class="float-left img-fluid" src="img/ikona_html.png" /></div>
<div class="col-lg-3 col-sm-5 col-6 align-self-center"> <p >W swojej pracy używam HTML,CSS,Javascript.
Z PHP,Pythonem czy MySQL też sobię poradzę. W Wordzie
zaś piszę z zamkniętymi oczami... od tyłu
</p></div>
</div>
</div>
</div>
<div class="row mt-5 mx-auto">
<div class="col-md-1"></div>
<div class="col-md-5 text-left"><h2 ><strong><p class="green">Oferta idealna dla Ciebie!</p></strong></h2><p class="indent">Strona internetowa będzię wizytówką Twojego biznesu. Musisz więć zadbać o to by była najwyższej jakości i pokazała Twojemu Klientowi że trafił do właściwej osoby. Tak się składa że ja mogę Ci w tym pomóc.</p></div>
<div class="col-md-6 mt-4"><img class="img-fluid" src="img/kod_html.png" /></div>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="container-fluid mx-0 px-0 my-5 py-5">
<div class="row mx-0 px-0">
<div class="col-12 mx-0 mb-5 px-0"><img class="img-fluid p-0 portfolio-width" src="img/moje_prace.png" /></div>
<div class="col-12 mx-0 px-0 mt-5"><img class="img-fluid p-0 portfolio-width " src="img/seppmed.png"/ ></div>
</div>
</div>
</section>
<section id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 text-left justify-content-around ">
<h2><strong><p class="u-green">Skontakuj </p><span class="green"> się ze mną!</span></strong></h2>
<div class="w-100 my-3"></div>
<div class="row">
<div class="col-4 col-md-3 col-lg-2"> <img class="mr-3" src="img/ikona_telefon.png" alt="Generic placeholder image"></div>
<div class="col-8 col-md-9 col-lg-10 align-self-center green"><h2>886 827 982</h2></div>
</div>
<div class="w-100 my-3"></div>
<div class="row">
<div class="col-4 col-md-3 col-lg-2 "><img class="mr-3" src="img/ikona_mail.png" alt="Generic placeholder image"></div>
<div class="col-8 col-md-9 col-lg-10 align-self-center green"><h2>matimyrcik@gmail.com</h2></div>
</div>
</div>
<div class="col-md-6">
<form>
<div class="form-row text-left ">
<div class="col"><h2><strong><p class="u-green ">Napisz,</p><span class="green"> śmiało! </span></strong></h2></div>
<div class="w-100 my-3"></div>
<div class="col-6 p-0 m-0">
<input type="text" class="form-control" placeholder="Imię">
</div>
<div class="col-6 m-0">
<input type="text" class="form-control" placeholder="E-Mail">
</div>
<div class="w-100 my-3 m=0"></div>
<textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Wiadomość" rows="5"></textarea>
<button type="button" class="btn btn-primary btn-lg mt-3 p-4 px-5">Wyślij</button>
</div>
</form>
</div>
</div>
<footer class="mt-5 pt-5">
<div class="row">
<div class="col-4 "><h3 class="grey"><span>2018 Mateusz Myrcik</span></h3></div>
<div class="col-4 text-center"><a href="#header"><img class="img-fluid" src="img/strzalka.png"/></a></div>
<div class="col-4 text-right"><img class="img-fluid" src="img/fb_ikona.png"/></div>
</div>
</footer>
</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch("");
</script>
</body>
</html>
/*
Theme Name:
Author: mutu
Colors:
Body : #434343
Headers : white
Green :#1bbc84
Grey : #F4F4F4 #FAFAFA #EEE
Fonts: Montserrat
Table OF Contents
----------------------*/
@font-face {
font-family: 'Cheddar Jack';
src: url(../font/cheddarjack.ttf);
}
html , body
{
width: 100%;
height: 100%;
font-size: 10px;
color: #434343;
}
body
{
font-family: Montserrat;
}
#header
{
height: 100%;
width: 100%;
}
li
{
list-style: none;
float: left;
border-right: 1px white solid;
padding-right: 20px;
padding-left: 20px;*/
}
li:last-child
{
border-right: none;
}
li:hover
{
text-decoration: none;
}
ul, img
{
padding:10px;
}
.backg
{
background: url(../img/zdjecie_header.jpg) center/cover;
height: 100%;
}
.homewrapper
{
position: absolute;
left: 0px;
right: 0px;
top: 50%;
transform: translateY(-50%);
}
.cheddar-text
{
font-family: 'Cheddar Jack';
}
p,li
{
margin-top: 23px !important;
}
.portfolio-width
{
width: 100% !important;
}
button
{
background-color: #1bbc84 !important;
border-color: #1bbc84 !important;
border-radius: 25px !important;
}
#faceimg
{
box-shadow: 6px 6px 5px 0px rgba(115,108,115,0.38);
}
.bg-skils
{
background-color: #EEE;
}
.u-green
{
display: inline;
padding-bottom: 4px;
border-bottom: 2px solid #1bbc84;
width: 30px;
}
.bg-image
{
background-color:#1bbc84;
opacity: 0.65;
}
.bg-image:hover
{
opacity: 1;
}
u{
color:#1bbc84;
}
.green
{
color: #1bbc84;
}
.indent
{
text-indent: 5%;
}
input,textarea
{
border: 3px solid #1bbc84 !important;
}
/*Media Quaries*/
@media (min-width: 576px) {
li
{
font-size: 2rem;
}
.homewrapper
{
margin-top: 20px;
}
h1{
font-size:3.5rem;
}
h2
{
}
p{
font-size: 2rem;
}
h3 p{
font-weight: 700;
}
#faceimg
{
height: 80% !important;
}
}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {
p
{
font-size: 2.3rem;
}
h1 p
{
font-size: 5.5rem;
}
h2 p,h2
{
font-size:3.5rem !important;
}
.btn
{
font-size: 2.3rem !important;
}
input,textarea
{
font-size: 2.7rem !important;
}
}
