Basic layout

4 years ago · 1cdf4a2d83
parent 3192dbb4f4
commit 1cdf4a2d83
2 changed files with 100 additions and 4 deletions
--- a/src/index.html
+++ b/src/index.html
@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
  <head>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css"
+      rel="stylesheet"
+    />
    <title>Zgłaszańsko</title>
  </head>
  <body>
--- 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;
+  }
 }