From 3e3fb6ea22b81cd93fd3e258e46326d13e750865 Mon Sep 17 00:00:00 2001 From: Santiago Adolfo Date: Tue, 24 Sep 2024 21:15:53 -0300 Subject: [PATCH] mejoras en estilos y web full sass faltan textos e imagenes --- css/main.css | 120 +++++++++++++++---- css/main.css.map | 2 +- index.html | 2 +- page/contact.html | 119 +++++++++++-------- scss/base/_layout.scss | 95 +++++++++++++++ scss/{utilities => base}/_reset.scss | 0 scss/styles.scss | 170 +++++++++------------------ scss/utilities/_mixin.scss | 17 +++ scss/utilities/_variables.scss | 2 +- 9 files changed, 340 insertions(+), 187 deletions(-) create mode 100644 scss/base/_layout.scss rename scss/{utilities => base}/_reset.scss (100%) diff --git a/css/main.css b/css/main.css index 2a79c5d..86d5443 100644 --- a/css/main.css +++ b/css/main.css @@ -4,11 +4,6 @@ box-sizing: border-box; } -.reviews .review-item .review-img img, .about-me-flex .about-me-img img, main .main-img img { - width: 100%; - object-fit: cover; -} - body { background-color: #DDD9C3; font-family: "Inconsolata", monospace; @@ -18,12 +13,20 @@ body { header { background-color: #171717; + border-bottom-right-radius: 35px; + border-bottom-left-radius: 35px; +} +@media (min-width: 768px) { + header { + width: 95%; + margin: 0 auto; + } } header .logo-home { margin-left: 30px; } header .logo-home img { - width: 170px; + width: 150px; } .p-link { @@ -51,6 +54,14 @@ footer { color: whitesmoke; padding: 20px; margin-top: 20px; + border-top-right-radius: 35px; + border-top-left-radius: 35px; +} +@media (min-width: 768px) { + footer { + width: 95%; + margin: 20px auto 0px auto; + } } footer .footer-logo img { width: 130px; @@ -77,7 +88,9 @@ main h1 { } main .main-img img { margin-top: 0px; - height: 200px; + height: 300px; + width: 100%; + object-fit: cover; } .snippets { @@ -96,6 +109,10 @@ main .main-img img { margin: 40px 0px; } .snippets .snippet .snippet-img { + border: 4px solid #548F3A; + border-radius: 10px; + padding: 5px; + background-color: whitesmoke; width: 100%; } .snippets .snippet .snippet-img img { @@ -114,16 +131,16 @@ main .main-img img { padding: 10px 0; } .snippets .snippet .snippet-descr a { - background-color: #171717; - color: whitesmoke; text-decoration: none; padding: 10px; margin: 10px 0; font-weight: 500; font-style: italic; font-size: 20px; - border: 2px solid whitesmoke; border-radius: 10px; + background-color: #171717; + color: whitesmoke; + border: 2px solid whitesmoke; } @media (min-width: 768px) { .snippets .snippet .snippet-descr { @@ -145,8 +162,15 @@ main .main-img img { color: rgb(57, 57, 57); } .about-me-flex .about-me-img { - padding: 20px; + border: 4px solid #548F3A; + border-radius: 10px; + padding: 5px; + background-color: whitesmoke; +} +.about-me-flex .about-me-img img { + width: 100%; } + iframe { width: 100%; } @@ -181,11 +205,14 @@ iframe { grid-template-rows: 75% 25%; align-items: center; gap: 8px; - border: 3px solid #796D6D; - border-radius: 20px; - padding: 10px; - margin-bottom: 20px; + border: 4px solid #548F3A; + border-radius: 10px; + padding: 5px; background-color: whitesmoke; + margin-bottom: 20px; +} +.reviews .review-item .review-img img { + width: 100%; } .reviews .review-item .review-text { padding: 5px; @@ -209,7 +236,9 @@ iframe { display: flex; flex-wrap: wrap; gap: 10px; - border: 3px solid #171717; + border: 4px solid #548F3A; + border-radius: 10px; + padding: 5px; background-color: whitesmoke; } @media screen and (min-width: 768px) { @@ -218,7 +247,14 @@ iframe { } } .eventos-flex .evento-item img { - width: 35%; + width: 100%; + padding: 10px; + margin: 0px auto; +} +@media screen and (min-width: 768px) { + .eventos-flex .evento-item img { + width: 35%; + } } .eventos-flex .evento-item .evento-text { padding: 20px; @@ -230,14 +266,52 @@ iframe { } .contact-form { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; + border: 4px solid #548F3A; + border-radius: 10px; + padding: 5px; + background-color: whitesmoke; + margin-top: 50px; } -.contact-form form { - width: 70%; + +form fieldset .form-input { + padding: 0px 20px; +} +form fieldset .form-input label { + display: block; + text-align: left; +} +form fieldset .form-input input, form fieldset .form-input textarea { + display: block; + width: 100%; +} +form fieldset .form-input textarea { + height: 150px; +} +form fieldset .form-submit { + text-decoration: none; + padding: 10px; + margin: 10px 0; + font-weight: 500; + font-style: italic; + font-size: 20px; + border-radius: 10px; background-color: whitesmoke; + color: rgb(57, 57, 57); + border: 2px solid #548F3A; + margin: 20px auto; + display: inline-block; +} +@media screen and (min-width: 768px) { + form fieldset { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(5, 1fr); + gap: 10px; + grid-template-rows: 1fr 1fr 1fr auto 1fr; + } + form fieldset legend, form fieldset .form-comments, form fieldset .form-submit { + grid-column: span 2; + } } .merch { diff --git a/css/main.css.map b/css/main.css.map index e003c65..b9cb30f 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/utilities/_reset.scss","../scss/styles.scss","../scss/utilities/_variables.scss","../scss/utilities/_mixin.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;ACEJ;EACI;EACA;;;AAIJ;EACI,kBCXY;EDYZ,aCRW;EDSX;EACA;;;AAIJ;EACI,kBClBc;;ADoBd;EACI;;AAEA;EACI;;;AAMZ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;;AAIR;EACI,kBC1Cc;;;AD8ClB;EE9CI;EACA;EACA;EF8CA;EACA,kBCjDc;EDkDd,OC7Ce;ED8Cf;EACA;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI;;;AAMZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA,OCxEU;EDyEV;EACA;EACA;;AAIA;EACI;EACA;;;AAOZ;EE5FI;EACA;EACA;EF4FA;EACA,OC3Fc;;AD6Fd;EE3FA;EACA;EACA;EACA;EF0FI;EACA;;AAEA;EACI;;AACA;EACI;;AAEJ;EALJ;IAMQ;;;AAIR;EACI;;AACA;EACI;EACA;;AAEJ;EACI,kBCvHE;EDwHF,OCnHG;EDoHH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAlBJ;IAmBQ;IACA;;;AAKZ;AAAA;EAEI;;;AASR;EEpJI;EACA;EACA;EFoJA;EACA;EACA,OCpJc;;ADsJd;EACI;;AAQR;EACI;;;AAGJ;EACI;IACI;;;AAKR;EACI;;AAEA;EAHJ;IEjKI;IACA;IACA;IACA;;;AFqKA;EAPJ;IEjKI;IACA;IACA;IACA;;;AFyKA;EErKA;EACA;EACA;EACA;EACA;EFmKI;EACA;EACA;EACA;EACA,kBC9LU;;ADoMV;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAMZ;EE9MI;EACA;EACA;EACA;EF6MA;;AAEA;EACI;EACA;EAIA;EACA;EACA,kBC/NU;;AD0NV;EAHJ;IAIQ;;;AAMJ;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;;;AAOhB;EE7OI;EACA;EACA;EACA;;AF6OA;EACI;EACA,kBCvPU;;;AD4PlB;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAGJ;EEvQA;EACA;EACA;EFuQI;EACA;EACA;EACA;EACA,kBC5QU;;AD8QV;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/base/_reset.scss","../scss/base/_layout.scss","../scss/utilities/_variables.scss","../scss/utilities/_mixin.scss","../scss/styles.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;ACDJ;EACI,kBCFY;EDGZ,aCCW;EDAX;EACA;;;AAIJ;EACI,kBCTc;EDUd;EACA;;AACA;EAJJ;IAKQ;IACA;;;AAEJ;EACI;;AAEA;EACI;;;AAMZ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;;AAIR;EACI,kBCtCc;;;AD0ClB;EE1CI;EACA;EACA;EF0CA;EACA,kBC7Cc;ED8Cd,OCzCe;ED0Cf;EACA;EACA;EACA;;AACA;EATJ;IAUQ;IACA;;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;;;AAMZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA,OC1EU;ED2EV;EACA;EACA;;AAIA;EACI;EACA;EACA;EACA;;;AGpFZ;EDLI;EACA;EACA;ECKA;EACA,OFJc;;AEMd;EDJA;EACA;EACA;EACA;ECGI;EACA;;AAEA;EDaJ;EACA;EACA;EACA,kBD9Bc;EEgBN;;AACA;EACI;;AAEJ;EANJ;IAOQ;;;AAIR;EACI;;AACA;EACI;EACA;;AAEJ;EDGR;EACA;EACA;EACA;EACA;EACA;EACA;ECPY,kBFlCE;EEmCF,OF9BG;EE+BH;;AAEJ;EAZJ;IAaQ;IACA;;;AAKZ;AAAA;EAEI;;;AASR;EDxDI;EACA;EACA;ECwDA;EACA;EACA,OFxDc;;AE0Dd;EDlCA;EACA;EACA;EACA,kBD9Bc;;AEgEV;EACI;;;AAKZ;EACI;;;AAGJ;EACI;IACI;;;AAKR;EACI;;AAEA;EAHJ;IDrEI;IACA;IACA;IACA;;;ACyEA;EAPJ;IDrEI;IACA;IACA;IACA;;;AC6EA;EDzEA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA,kBD9Bc;EE+FV;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;;AAMZ;ED/GI;EACA;EACA;EACA;EC8GA;;AAEA;EACI;EACA;EAIA;EDnGJ;EACA;EACA;EACA,kBD9Bc;;AE2HV;EAHJ;IAIQ;;;AAKJ;EACI;EACA;EACA;;AACA;EAJJ;IAKQ;;;AAIR;EACI;EACA;;AAEA;EACI;EACA;;;AAOhB;ED5HI;EACA;EACA;EACA,kBD9Bc;EEyJd;;;AAMI;EACI;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAIR;ED5IJ;EACA;EACA;EACA;EACA;EACA;EACA;ECwIQ,kBFhLM;EEiLN,OF9KM;EE+KN;EACA;EACA;;AAGJ;EA1BJ;IDjJA;IACA;IACA;IACA;IC0KQ;;EACA;IACI;;;;AAOhB;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;AAGJ;ED7MA;EACA;EACA;EC6MI;EACA;EACA;EACA;EACA,kBFlNU;;AEoNV;EACI;;AAGJ;AAAA;EAEI;EACA;;AAGJ;EACI","file":"main.css"} \ No newline at end of file diff --git a/index.html b/index.html index 105f549..fe2b72f 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
-