Skip to content

Commit

Permalink
Footer and little bit Hero
Browse files Browse the repository at this point in the history
  • Loading branch information
@OlenaIa
OlenaIa committed Mar 2, 2023
1 parent 02d4f52 commit 5db0bfd
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 97 deletions.
253 changes: 161 additions & 92 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,50 +462,31 @@ address {

/* ================ HERO ====================== */



/* .hero {
padding-top: 188px;
padding-bottom: 188px;
.hero {
padding-top: 112px;
text-align: center;
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-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;
}

.hero-title {
max-width: 494px;
margin-bottom: 48px;
margin-left: auto;
margin-right: auto;
font-size: 56px;
line-height: 1.07;
text-transform: capitalize;
text-align: center;
}

.small {
text-transform: none;
} */

/* Кнопка */
/* .btn {
min-width: 169px;
padding: 16px 32px;
.btn {
border-radius: 4px;
border: none;
margin-left: auto;
margin-right: auto;
color: var(--hero-text-color);
background-color: var(--button-background-color);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
font-family: inherit;
font-weight: 500;
font-size: inherit;
Expand All @@ -514,10 +495,86 @@ address {
cursor: pointer;
transition: background-color var(--transition-duration) cubic-bezier(var(--cubic));
}

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

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

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

@media screen and (max-width: 767px) {
.hero {
padding-bottom: 112px;
}

.hero-title {
max-width: 320px;
margin-bottom: 72px;
font-size: 36px;
line-height: 1.11;
}

}

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

@media screen and (min-width: 768px) {
.hero {
padding-bottom: 108px;
}

.hero-title {
max-width: 496px;
margin-bottom: 40px;
font-size: 56px;
line-height: 1.07;
}

.small {
text-transform: none;
}
}

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

@media screen and (min-width: 1200px) {
.hero {
padding-top: 188px;
padding-bottom: 188px;
}

.hero-title {
margin-bottom: 48px;
}


}

/* .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 ================= */

Expand Down Expand Up @@ -777,6 +834,10 @@ address {
color: var(--logo-footer-second-part);
}

.ftr-motto p {
max-width: 264px;
}

.txt-ttl-ftr {
margin-bottom: 16px;
font-weight: 500;
Expand All @@ -799,71 +860,6 @@ address {
background-color: var(--footer-bg-hover-icon);
}

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

@media screen and (max-width: 767px) {
.ftr {
text-align: center;
}

.ftr-motto {
margin-bottom: 72px;
}
}
/* +++++++++++ Tablet ++++++++++++ */

@media screen and (min-width: 768px) {
.ftr-cntnr {
display: flex;
}

.ftr-motto {
margin-right: 24px;
}
}

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

@media screen and (min-width: 1200px) {
.ftr {
padding-top: 100px;
padding-bottom: 100px;
}

.ftr-motto {
margin-right: 120px;
}
}

/*
.ftr-cntnr {
align-items: baseline;
}
.ftr-logo {
line-height: 1.17;
}
.ftr-motto p {
max-width: 264px;
}
.net-container {
margin-right: 80px;
}
.subscribe-form {
display: flex;
gap: 24px;
}
.wrapper-ftr-input {
position: relative;
}
Expand All @@ -885,15 +881,15 @@ address {
}

.ftr-input {
width: 264px;
width: 100%;
height: 40px;
padding: 8px 16px;

font-size: 12px;
line-height: 2;
letter-spacing: 0.04em;
color: var(--footer-second-text);

background-color: transparent;
border: 1px solid var(--ftr-border-input);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
Expand All @@ -920,7 +916,80 @@ address {
top: 50%;
right: 24px;
transform: translateY(-50%);
} */
}

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

@media screen and (max-width: 767px) {
.ftr {
text-align: center;
}

.ftr-motto {
margin-bottom: 72px;
}

.net-container {
margin-bottom: 72px;
}

.ftr-motto p {
text-align: left;
margin-left: auto;
margin-right: auto;
}

.ftr-input {
margin-bottom: 16px;
}

.subscribe-label {
top: calc(50% - 8px);
}
}
/* +++++++++++ Tablet ++++++++++++ */

@media screen and (min-width: 768px) {
.ftr-cntnr {
display: flex;
flex-wrap: wrap;
}

.ftr-motto {
margin-right: 24px;
margin-bottom: 72px;
}

.net-container {
margin-right: auto;
}

.subscribe-form {
display: flex;
gap: 24px;
}

.ftr-input {
width: 264px;
}
}

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

@media screen and (min-width: 1200px) {
.ftr {
padding-top: 100px;
padding-bottom: 100px;
}

.ftr-motto {
margin-right: 120px;
}

.net-container {
margin-right: 80px;
}
}

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

Expand Down
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,16 +130,16 @@

<main>
<!--Hero-->
<!-- <section class="hero">
<section class="hero">
<div class="hero-container container">
<h1 class="hero-title">
Effective Solutions <span class="small">for</span> Your Business
</h1>
<button type="button" class="btn" data-modal-open>
<button type="button" class="btn btn-hero" data-modal-open>
Order Service
</button>
</div>
</section> -->
</section>

<!--Values-->
<section class="section values">
Expand Down Expand Up @@ -526,12 +526,12 @@ <h2 class="customers-ttl ttl">Customers</h2>
><span class="txt-ftr-lbl">E-mail</span></label
>
</div>
<div class="wrapper-ftr-btn">
<span class="wrapper-ftr-btn">
<button type="submit" class="btn btn-ftr">Subscribe</button>
<svg class="icon-subscribe" width="24" height="24">
<use href="./images/icons.svg#icon-subscribe"></use>
</svg>
</div>
</span>
</form>
</div>
</div>
Expand Down

0 comments on commit 5db0bfd

Please sign in to comment.