Skip to content

Commit

Permalink
Main page full
Browse files Browse the repository at this point in the history
  • Loading branch information
@OlenaIa
OlenaIa committed Mar 2, 2023
1 parent 5db0bfd commit 34c6a3f
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 58 deletions.
162 changes: 109 additions & 53 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,8 @@ img {
color: var(--accent-color);
}

/* +++++++++++ Only Phone ++++++++++++ */

@media screen and (max-width: 767px) {
.header-menu,
address {
Expand Down Expand Up @@ -346,6 +348,18 @@ address {
}
}

/* +++++++++++ Only small Phone ++++++++++++ */

@media screen and (min-width: 280px) and (max-width: 400px) {
.mobile-tel {
font-size: 24px;
}

.mobile-net-list {
gap: 28px;
}
}

/* +++++++++++++++++ Tablet +++++++++++ */

@media screen and (min-width: 768px) {
Expand Down Expand Up @@ -466,16 +480,25 @@ address {
padding-top: 112px;
text-align: center;
color: var(--hero-text-color);
max-width: 1440px;
min-height: 600px;
max-width: 428px;
min-height: 432px;
margin: 0 auto;
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url('../images/people-office.jpg');
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url('../images/people-office-mobile.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #434455;
}

@media (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
.hero {
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url('../images/people-office-mobile@2x.jpg');
}
}

.hero-title {
margin-left: auto;
margin-right: auto;
Expand Down Expand Up @@ -530,6 +553,18 @@ address {
@media screen and (min-width: 768px) {
.hero {
padding-bottom: 108px;
max-width: 768px;
min-height: 436px;
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url('../images/people-office-tablet.jpg');
}

@media (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
.hero {
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url('../images/people-office-tablet@2x.jpg');
}
}

.hero-title {
Expand All @@ -550,6 +585,18 @@ address {
.hero {
padding-top: 188px;
padding-bottom: 188px;
max-width: 1440px;
min-height: 600px;
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url('../images/people-office-desktop.jpg');
}

@media (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
.hero {
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url('../images/people-office-desktop@2x.jpg');
}
}

.hero-title {
Expand All @@ -559,23 +606,6 @@ address {

}

/* .hero {
color: var(--hero-text-color);
max-width: 1440px;
min-height: 600px;
margin: 0 auto;
background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7) ), url('../images/people-office.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #434455;
}
*/



/* ================= VALUES ================= */

/* +++++++++++ Only Phone and Tablet ++++++++++++ */
Expand Down Expand Up @@ -991,9 +1021,9 @@ address {
}
}

/* ============== Модальне вікно ============== */
/* ============== MODAL WINDOW ============== */

/*.backdrop {
.backdrop {
position: fixed;
top: 0;
left: 0;
Expand All @@ -1016,12 +1046,10 @@ address {
position: absolute;
top: 50%;
left: 50%;
width: 408px;
min-height: 576px;
padding: 72px 24px 24px;
width: 392px;
min-height: 586px;
padding: 72px 16px 24px;
background-color: var(--modal-background-color);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 2px 1px rgba(0, 0, 0, 0.2);
border-radius: 4px;
transform: translate(-50%, -50%);
}
Expand All @@ -1041,12 +1069,11 @@ address {
border-radius: 50%;
cursor: pointer;
transition: background-color var(--transition-duration) cubic-bezier(var(--cubic));
}

.modal-close-btn:hover,
.modal-close-btn:focus {
background-color: var(--activ-hover-color);
background-color: var(--activ-hover-color);
}

.modal-close-svg {
Expand All @@ -1059,33 +1086,28 @@ background-color: var(--activ-hover-color);
}

.form-ttl {
margin-bottom: 14px;
margin-bottom: 16px;
font-weight: 500;
text-align: center;
color: var(--title-text-color);
}

.txt-mdl-lbl-first-last {
.txt-mdl-lbl {
font-size: 12px;
line-height: 1.33;
letter-spacing: 0.04em;
line-height: 1.17;
letter-spacing: 0.01em;
color: var(--modal-label-txt);
}

.txt-mdl-lbl-first {
color: var(--modal-label-txt);
letter-spacing: 0.04em;
}

.txt-mdl-lbl-last {
letter-spacing: 0.04em;
color: var(--modal-txt-accept);
}

.txt-mdl-lbl {
font-size: 12px;
line-height: 1.17;
letter-spacing: 0.01em;
color: var(--modal-label-txt);
}
.modal-label {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -1119,11 +1141,11 @@ background-color: var(--activ-hover-color);
left: 16px;
transform: translateY(-50%);
fill: var(--fill-modal-icon);

transition: fill var(--transition-duration) cubic-bezier(var(--cubic));
}
}

.modal-input:focus + .icon-input {
.modal-input:focus+.icon-input {
fill: var(--accent-color);
}

Expand All @@ -1134,12 +1156,12 @@ background-color: var(--activ-hover-color);
}

.mdl-lbl-cmmnt {
margin-bottom: 16px;
margin-bottom: 18px;
}

.modal-textarea {
width: 100%;
height: 138px;
height: 120px;
resize: none;
border-radius: 4px;
padding: 8px 16px;
Expand Down Expand Up @@ -1175,31 +1197,65 @@ background-color: var(--activ-hover-color);
opacity: 0;
}

.modal-input-accept:checked + .modal-label-accept > .icon-click-wrap {
.modal-input-accept:checked+.modal-label-accept>.icon-click-wrap {
background-color: var(--activ-hover-color);
border: 1.25px solid var(--activ-hover-color);
}

.modal-input-accept:checked + .modal-label-accept .icon-click {
.modal-input-accept:checked+.modal-label-accept .icon-click {
opacity: 1;
}

.modal-input-accept:focus + .modal-label-accept > .icon-click-wrap {
.modal-input-accept:focus+.modal-label-accept>.icon-click-wrap {
outline: 1px solid var(--accent-color);
}

.modal-label-accept {
.modal-label-accept {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 24px;
}

.btn-submit {
.btn-submit {
min-width: 169px;
display: block;
} */
margin-left: auto;
margin-right: auto;
padding: 16px 32px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

/* +++++++++++ Only small Phone ++++++++++++ */

@media screen and (min-width: 280px) and (max-width: 400px) {
.modal {
max-width: 100%;
min-height: 100%;
}
}

/* +++++++++++ Tablet ++++++++++++ */

@media screen and (min-width: 768px) {
.modal {
width: 408px;
min-height: 586px;
padding: 72px 24px 24px;
}
}

/* +++++++++++ Desktop ++++++++++++ */

@media screen and (min-width: 1200px) {
.modal {
min-height: 584px;
}

.mdl-lbl-cmmnt {
margin-bottom: 16px;
}
}

/* =============== Портфоліо ===================== */

Expand Down
0 images/people-office.jpg → images/people-office-desktop.jpg
View file
File renamed without changes
0 images/people-office@2x.jpg → images/people-office-desktop@2x.jpg
View file
File renamed without changes
Binary file added images/people-office-mobile.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/people-office-mobile@2x.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/people-office-tablet.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/people-office-tablet@2x.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,7 @@ <h2 class="customers-ttl ttl">Customers</h2>
</footer>

<!-- MODAL WINDOW -->
<!-- <div class="backdrop is-hidden" data-modal>
<div class="backdrop" data-modal>
<div class="modal">
<button type="button" class="modal-close-btn" data-modal-close>
<svg class="modal-close-svg" width="8" height="8">
Expand All @@ -548,7 +548,7 @@ <h2 class="customers-ttl ttl">Customers</h2>
<p class="form-ttl">Leave your contacts and we will call you back</p>
<form class="modal-form">
<label class="modal-label"
><span class="txt-mdl-lbl-first-last txt-mdl-lbl-first">Name</span
><span class="txt-mdl-lbl txt-mdl-lbl-first">Name</span
><span class="wrapper-icon-input">
<input
type="text"
Expand Down Expand Up @@ -609,16 +609,16 @@ <h2 class="customers-ttl ttl">Customers</h2>
<use href="./images/icons.svg#icon-click"></use>
</svg>
</span>
<span class="txt-mdl-lbl-first-last txt-mdl-lbl-last"
<span class="txt-mdl-lbl txt-mdl-lbl-last"
>I accept the terms and conditions of the
<a href="">Privacy Policy</a></span
></label
>
<button type="submit" class="btn btn-submit">Send</button>
</form>
</div>
</div> -->
</div>
<script src="./js/mobile-menu.js"></script>
<!-- <script src="./js/modal.js"></script> -->
<script src="./js/modal.js"></script>
</body>
</html>

0 comments on commit 34c6a3f

Please sign in to comment.