diff --git a/src/index.html b/src/index.html
index bed9877..00f486e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,6 +1,10 @@
+
Zgłaszańsko
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 326339d..9ca9274 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -2,11 +2,103 @@
width: 100%;
height: 100vh;
display: flex;
- flex-wrap: wrap;
+}
+.button {
+ border: rgba(0, 0, 0, 0.116) 1px solid;
+ background-color: none;
+ margin: 15px 0;
+ width: 150px;
+ height: 50px;
}
.container__section {
flex: 1;
- border: 1px solid black;
- min-width: 450px;
- min-height: 400px;
+ padding: 15px;
+ display: block;
+}
+.container__section__title {
+ margin: 15px 0;
+ font-size: 1.5em;
+}
+.container__section__photos {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ row-gap: 35px;
+ column-gap: 15px;
+ justify-items: stretch;
+}
+.section__photos__item {
+ width: 150px;
+ height: 150px;
+ border: black solid 1px;
+}
+.container__section__map {
+ height: 600px;
+ width: 100%;
+}
+.container__section__form {
+ width: 100%;
+ height: 600px;
+}
+.input {
+ width: 80%;
+ height: 30px;
+ margin-bottom: 15px;
+ margin-top: 5px;
+ display: block;
+ box-sizing: border-box;
+}
+.input--textarea {
+ height: 350px;
+ resize: none;
+ font-size: 1.2em;
+}
+.label {
+ width: 100%;
+}
+//to change name
+.img {
+ width: 100%;
+ height: 100%;
+}
+/*breakpoint for mobile*/
+@media (max-width: 1200px) {
+ body {
+ font-size: 2rem;
+ }
+ .container {
+ flex-direction: column;
+ }
+ .container__section__title {
+ margin: 25px 0;
+ font-size: 1.5em;
+ }
+ .container__section__photos {
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ }
+ .section__photos__item {
+ width: 200px;
+ height: 200px;
+ }
+ .button {
+ width: 250px;
+ margin: 30px 0;
+ height: 75px;
+ }
+ .container__section__form {
+ width: 100%;
+ height: 600px;
+ }
+ .input {
+ width: 90%;
+ height: 75px;
+ font-size: 2rem;
+ margin-top: 10px;
+ margin-bottom: 25px;
+ }
+ .input--textarea {
+ height: 450px;
+ width: 90%;
+ margin-top: 10px;
+ margin-bottom: 25px;
+ }
}