Proszę o pomoc w tych dwóch miejscach,
1. W miejscu main gdzie mam 3 obrazki, elementy sie rozjezdzaja przy różnych rozdzielczosciach chciałbym je rozciagnac
2. Formularz kontaktu na dole chciałbym żeby był ustawiony po środku strony i był responsywny
<!DOCTYPE html>
<html lang="pl,en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michał - Porfolio</title>
<meta name="description" content="Porfolio, strona zawiera zakres moich umiejętności">
<link href="https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta name='keywords' content='webdeveloper, strony internetowe, portfolio, css, HTML'>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<! SEKCJA NAWIGACJA >
<nav>
<a href="#1">PROJECTS</a>
<a href="aboutme.html" target="_blank">ABOUT ME</a>
<a href="#2">CONTACT</a>
</nav>
<! SEKCJA TLO HEADER>
<header>
<p>HELLO.</p>
<h1>I Am a</h1>
<h2>Front-End-Developer</h2>
<img src="headerpicture.png" alt="tlo zdjecie">
</header>
<! SEKCJA PROJEKTY >
<main>
<div class="tech1">
<h2>My technology skills</h2>
<p>I'm currently working in HTML , CSS and all the time trying to improve my web development skills</p>
</div>
</p>
<section class="projects" id="1">
<div class="project">
<div class="img">
<img src="Project1.jpg" alt="Project1">
<h2>Personal Portfolio Website</h2>
</div>
</div>
<div class="project">
<div class="img">
<img src="Project2.jpg" alt="Project2">
<h2>Restaurant Website</h2>
</div>
</div>
<div class="project">
<div class="img">
<img src="Project3.jpg" alt="Projekt3">
<h2>Hotel Website</h2>
<div>
</div>
</section>
<div class="tech2">
<h2>Mobile devices</h2>
<p>Work looks great and are available on mobile devices</p>
</div>
<section class="motto">
<div class="img">
<div>
<h2>My motto</h2>
<p>Don't Compare Yourself to Others.<br>
Compare Yourself to the Person You Were Yesterday.
</p>
<p class="author">
Johann ML Brown
</p>
</div>
</div>
</section>
<div class="contacts" id="2">
<h2>Get In touch</h2>
<h1>Contact</h1>
<form >
<input type="text" placeholder="Your Name" class="name">
<input type="text" placeholder="E-mail" class="email">
<textarea type="text" placeholder="Your message"></textarea>
<button>Send now</button>
</form>
</div>
</main>
<footer>
<p>Copyright©</p>
</footer>
</body>
*
{
margin: 0;
padding: 0;
}
header
{
font-size: 10px; /* 10px = 1rem */
}
/* SEKCJA NAWIGACJA */
nav
{
padding-top: 10px;
margin: 15px;
text-align: right;
}
nav a
{
display: inline-block; /* inline-block odwołac sie do rodzica */
color: black;
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
text-decoration: none;
margin: 0 20px;
padding: 10px;
margin-right: 55px;
transition: .3s;
}
nav a:hover
{
border-bottom: 2px solid black;
cursor: pointer;
}
header
{
background-color: rgb(255,88,81);
height: 94vh; /* 40 % okna przegladarki */
}
header p
{
font-size: 5rem; /* 10px = 1 rem */
font-weight: bold;
text-transform: uppercase;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
header h2
{
text-transform: uppercase;
font-size: 1.7rem;
font-weight: bold;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
header h1
{
text-transform: uppercase;
font-size: 1.2rem;
font-weight: normal;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
header img
{
max-width: 55vh;
max-height: 55vh;
float: right;
margin-top: -5vh;
}
/* SEKCJA PROJEKTY */
main
{
background-color: #f2f1ed;
max-width: 1440px;
/* margin: auto; */
font-size: 0; /* eliminuje marginesy pomiedzy*/
padding-top: 20px;
}
main div.tech1 h2
{
font-size: 2rem;
text-align: center;
text-transform: uppercase;
}
main div.tech1 p
{
font-size: 1.3rem;
text-align: center;
margin: 30px 30px 50px 20px;
line-height: 180%;
}
main div.tech2 h2
{
font-size: 2rem;
text-align: center;
text-transform: uppercase;
}
main div.tech2 p
{
font-size: 1.3rem;
text-align: center;
padding: 20px 20px;
}
main .projects
{
height: 50vh;
}
main div.project
{
display: inline-block; /* domyslnie sa ustawione na block */
width: 33.33%;
/* background-color: blue; */
}
main div img
{
margin: 0 auto;
padding-left: 3rem;
height: 30vh;
}
main .img h2
{
font-size: 0.8rem;
text-align: center;
}
main img
{
height: 200px;
max-width: 13rem;
align-items: center;
margin: 30px 10px;
}
/* SEKCJA MOTTO */
.motto
{
text-align: center;
font-size: 18px;
background-image: url("motto.jpeg");
background-size: cover;
background-attachment: fixed;
max-width: 144rem;
height: 40vh;
}
.motto div h2
{
padding-top: 10px;
font-size: 1.3rem;
text-align: center;
}
section div p
{
font-size: 1.3rem;
text-align: center;
padding-top: 60px;
}
section div .author
{
font-size: 0.7rem;
text-align: center;
}
/* SEKCJA KONTAKT FORMULARZ */
main div.contacts h1
{
font-family: 'Roboto', sans-serif;
font-size: 1.5rem;
text-align: center;
margin: 10px 0 10px -10px;
}
main div.contacts form
{
display: inline-block;
height: 40vh;
width:100%;
}
main div.contacts form
{
display: block;
width: 50%;
margin: 0 auto;
}
main div.contacts h2
{
font-family: 'Roboto', sans-serif;
font-size: 20px;
text-align: center;
padding-top: 0 20px;
}
main div.contacts input
{
margin-left: 8rem;
margin-bottom: 20px;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
float: left;
width: 20vh;
height: 3vh;
}
main div.contacts textarea
{
margin-bottom: 20px;
font-family: 'Roboto', sans-serif;
font-size: 1.4rem;
width: 40vh;
height: 10vh;
}
main div.contacts form button
{
text-decoration: none;
color: black;
font-family: 'Saira Condensed', sans-serif;
font-size: 1.8rem;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
padding: 0 20px;
line-height: 32px;
margin-left: auto;
margin-right: auto;
display: block;
}
/* SEKCJA STOPKA */
footer p
{
height: 0.4vh;
color: black;
text-align: center;
padding: 1rem 0;
font-size: 1rem;
}
