Siema oto moja strona
jak widać te divy nie są idealnie na środku oto mój kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maciej Dębowski - Web Developer</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="https://cdn.glitch.com/bf58909b-a63d-4e48-9d20-5e9b70424416%2F480px-HTML5_logo_and_wordmark.svg.png?v=1598356140436" id="icon">
<script src="/script.js" defer></script>
<script src="https://kit.fontawesome.com/f6412110a3.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div class="welcome">
<br><br>
<div class="section-header">
<h1 class="welcome-page">
<Maciej Dębowski/>
</h1>
<p class="col-lg-6 text-left ml-sm-auto mr-sm-auto">
Hej, jestem Maciej. Zajmuje się tworzeniem stron internetowych. Jestem troche młody, ponieważ mam 14 lat. Chodze do technikum programistycznego. Tworzeniem stron zajmuję się od 9 roku życia. Stworze stronę twoich marzeń!
<br>
<button class="read-more-btn" data-toggle="modal" data-target="#aboutme">
Czytaj więcej...
</button>
</p>
</div>
</div>
<div class="widget">
<h1 class="bigfont">
Co Tworzę?
</h1>
<div class="creativity-tile">
<i class="fas fa-mobile-alt" style="font-size: 32px;"></i> <br>
Portfolia
</div>
<div class="creativity-tile">
<i class="fas fa-users" style="font-size: 32px;"></i> <br>
Fora
</div>
<div class="creativity-tile">
<i class="fas fa-user-edit" style="font-size: 32px;"></i> <br>
Inne...
</div>
<br><br>
<div class="pricing-table col-lg-11">
<div class="pricing">
<h1>
Portfolio
</h1>
Od: <span class="price_asc"><span class="small">PLN</span>799<sup>00</sup></span>
<p class="lead description">
Profesionalne portfolio dzięki któremu przyciągniesz do siebie swoich przyszłych klientów!
</p>
<button class="btn-contact" onclick="_$('https://m.me')">
Zkontaktuj się ze mną...
</button>
</div>
<div class="pricing text-center">
<h1>
Forum
</h1>
Od: <span class="price_asc"><span class="small">PLN</span>1899<sup>00</sup></span>
<p class="lead description">
Fajne forum które przyciągnie do ciebie twoją społeczność!
</p>
<button class="btn-contact" onclick="_$('https://m.me')">
Zkontaktuj się ze mną...
</button>
</div>
<div class="pricing">
<h1>
Inne.
</h1>
Od: <span class="price_asc"><span class="small">PLN</span>799<sup>00</sup></span>
<p class="lead description">
Stwórz projekt strony internetowej, wycenie go i wykonam!
</p>
<button class="btn-contact" onclick="_$('https://m.me')">
Zkontaktuj się ze mną...
</button>
</div>
</div>
</div>
<div class="widget skills">
<div class="header">
<h1 class="skills-h1">
Moje Umiejętności
</h1>
<div class="show">
</div>
</div>
</div>
<!--<div class="sticker sticky-right">
<button class="nav-open">
<i class="fas fa-bars"></i>
</button>
<div class="sidebar-navigator sticky-right">
<span style="position: absolute; margin-left: 10px; top: 38px; border-bottom: 3px solid white;"><b>Maciej Dębowski</b></span>
<ul class="sidebar-list">
<li><a href="#Omnie">O Mnie</a></li>
<li><a href="#CoTworze">Co Tworze</a></li>
<li><a href="#Prace">Stworzone przez mnie</a></li>
<li><a href="#Recenzje">Recenzje</a></li>
</ul>
</div>
</div>-->
<div class="modal fade" id="aboutme">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Maciej Dębowski.
</h5>
<button class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
Hej, jestem Maciej. Zajmuje się tworzeniem stron internetowych. Jestem troche młody, ponieważ mam 14 lat. Chodze do technikum programistycznego. Tworzeniem stron zajmuję się od 9 roku życia. Stworze stronę twoich marzeń!
Obecnie przeszedłem 3 kursy programowania stron internetowych (giganci programowania poziom: zwykły, zaawansowany, expert). Potrafie stworzyć wygląd strony w frameworku (Bootstrap) lub "czysto" czyli samym językiem programowania "css".
<br><br>
<form class="text-right">
<button class="btn btn-danger">
Zamknij
</button>
</form>
</div>
</div>
</div>
</div>
<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.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>
@import url('scroll.css');
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 100;
z-index: 10;
overflow-x: hidden;
}
button,input,textarea{
outline: none!IMPORTANT;
}
.welcome{
text-align: center;
height: 70vh;
background: url('https://cdn.glitch.com/bf58909b-a63d-4e48-9d20-5e9b70424416%2Fphoto-1555066931-4365d14bab8c.webp?v=1598356787144');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
color: white;
}
.welcome .section-header h1{
font-size: 140px;
font-weight: 100;
}
.welcome .section-header h3{
font-size: 48px;
font-weight: 100;
}
.widget{
text-align: center;
background: #ddd;
}
.read-more-btn{
background: #0afa96;
color: white;
border: 2px solid #0afa96;
border-radius: 12px;
font-weight: 600px;
padding: 5px 25px;
margin-top: 15px;
transition: .3s;
}
.read-more-btn:hover{
background: transparent;
color: #0afa96;
}
.bigfont{
font-size: 130px;
font-weight: 100;
}
.creativity-tile{
min-width: 15%;
display: inline-block;
}
.pricing{
width: 360px;
display: inline-block;
background: #fff;
border-radius: 12px;
border: 1px solid #eee;
height: 60vh;
margin: 70px;
padding: 20px;
border-top: 10px solid transparent;
transition: .3s;
margin-top: 150px;
}
.pricing-table{
height: 110vh;
}
.pricing:hover{
transform: scale(1.15);
}
.price_asc{
font-size: 72px;
}
.price_asc .small{
font-size: 24px;
}
.price_asc sup{
font-size: 48px;
}
.btn-contact{
padding: 6px 30px;
border: 2px solid #0afa96;
color: white;
background: #0afa96;
border-radius: 12px;
margin-top: 60%;
transition: .3s;
}
.btn-contact:hover{
color: #0afa96;
background: transparent;
}
/*.nav-open{
background: transparent;
color: white;
border:0;
position: absolute;
top:40px;
right:50px;
outline: none!important;
z-index: 999;
}
.sidebar-navigator{
background: #000;
width: 10%;
position: absolute;
top:0;
right:0;
height: 100vh;
z-index: 9;
color: white;
}
.sidebar-navigator ul{
margin-top: 10vh;
text-align: center;
}
.sidebar-navigator ul li{
padding: 5px;
transition: .3s;
}
.sidebar-navigator ul li:hover{
background: #333;
}
.sidebar-navigator ul li a, .sidebar-navigator ul li a:hover{
color: white;
text-decoration: none;
}*/
/*media*/
@media only screen and (max-width: 600px){
.welcome .section-header h1, .bigfont{
font-size: 70px;
font-weight: 100;
}
}
@media only screen and (max-width: 300px){
.welcome .section-header h1, .bigfont{
font-size: 40px;
font-weight: 700;
}
}
@media only screen and (max-width: 1555px){
.pricing{
margin-top: 30px;
margin: 70px;
}
.pricing:nth-child(1){
margin: 70px;
}
}
@media only screen and (max-width: 842px){
.pricing{
width: 360px!important;
margin-top: 30px;
}
.pricing:nth-child(3){
width: 360px!important;
}
}
@media only screen and (max-width: 556px){
.pricing{
width: 250px;
height: 60vh;
}
}
@media only screen and (max-width: 315px){
.pricing{
display: none;
}
}
Co zrobić żeby były na środku idealnie?