Skip to content

Commit

Permalink
add tell-me and fixed adaptive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aweiro
Aweiro committed Oct 11, 2024
1 parent b0b40d5 commit 6c75009
Show file tree
Hide file tree
Showing 9 changed files with 455 additions and 118 deletions.
122 changes: 73 additions & 49 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<main class="content">

<!--карусель з фото-->
<header class="about__header">
<header class="container about__header">
<div class="slideshow-container">
<div class="slide">
<img src="./img/testimonials/2.jpg" alt="Photo 1">
Expand All @@ -66,55 +66,79 @@
</div>
</header>


<section class="parallax parallax__about-us"></section>


<section class="tell-me">
<div class="container">
<div class="tell-me__block">
<div class="tell-me__row">
<h1>Замовити констультацію</h1>
<form action="tell-me">
<div class="tell-me__inputs">
<label for="phone">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><circle cx="24" cy="11" r="7"/><path d="M4 41c0-8.837 8.059-16 18-16m9 17l10-10l-4-4l-10 10v4z"/></g></svg>
<input type="text" name="name" placeholder="Ваше ім'я">
</label>

<label for="phone">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.172 15.829c3.845 3.845 7.408 4.266 8.454 4.305c1.264.046 2.554-.986 3.112-2.043c-.89-1.044-2.049-1.854-3.318-2.732c-.749.748-1.672 2.138-2.901 1.64c-.699-.281-2.425-1.076-3.933-2.585S7.283 11.18 7 10.482c-.498-1.231.896-2.156 1.645-2.905c-.878-1.29-1.674-2.479-2.716-3.324c-1.072.56-2.11 1.84-2.063 3.121c.039 1.046.46 4.609 4.306 8.455m8.38 6.304c-1.44-.053-5.521-.617-9.795-4.89c-4.273-4.274-4.836-8.354-4.89-9.795c-.08-2.196 1.602-4.329 3.545-5.162a1.47 1.47 0 0 1 1.445.159c1.608 1.173 2.717 2.95 3.67 4.342A1.504 1.504 0 0 1 10.35 8.7l-1.356 1.357C9.309 10.752 9.95 11.95 11 13s2.248 1.691 2.944 2.006l1.355-1.356a1.5 1.5 0 0 1 1.918-.171c1.42.984 3.088 2.077 4.304 3.634a1.47 1.47 0 0 1 .189 1.485c-.837 1.953-2.955 3.616-5.158 3.535"/></g></svg>
<input type="tel" name="phone" placeholder="Номер телефону">
</label>
</div>

<button class="button">Відправити</button>

</form>
</div>
</div>
</div>
</section>

<section class="about-us">
<h1 class="about-title"></h1>
<div class="container about-us__row left">
<div class="about-us__text">
<p class="about-subtitle">Про нас</p>
<p>Наша компанія "West Decor" - це команда професіоналів,
які займаються декоруванням стін та приміщень, створюючи унікальні
та стильні інтер’єри.
Ми використовуємо лише високоякісні матеріали
та сучасні технології для досягнення найкращих результатів.</p>
</div>
<div class="about-us__img">
<img src="./img/testimonials/5.jpg" alt="img">
</div>
</div>

<div class="container about-us__row right">
<div class="about-us__text">
<p class="about-subtitle">Наша місія</p>
<p>Ми прагнемо зробити кожен інтер'єр неповторним, вкладаючи свою душу та творчість у кожен проект.</p>
</div>
<div class="about-us__img">
<img src="./img/header/1.jpg" alt="header">
</div>
</div>

<div class="container about-us__row left">
<div class="about-us__text">
<p class="about-subtitle">Наша команда</p>
<p>Наша команда складається з досвідчених дизайнерів, декораторів та майстрів, які завжди готові реалізувати ваші найсміливіші ідеї.</p>
</div>
<div class="about-us__img">
<img src="./img/header/1.jpg" alt="header">
</div>
</div>

<div class="container about-us__row right">
<div class="about-us__text">
<p class="about-subtitle">Наші послуги</p>
<p>Ми пропонуємо широкий спектр послуг: від консультацій та підбору матеріалів до повного оздоблення вашого простору.</p>
</div>
<div class="about-us__img">
<img src="./img/header/1.jpg" alt="header">
</div>
</div>
<div class="container">
<h1 class="about-title"></h1>
<div class=" about-us__row left">
<div class="about-us__text">
<p class="about-subtitle">Про нас</p>
<p>Наша компанія "West Decor" - це команда професіоналів,
які займаються декоруванням стін та приміщень, створюючи унікальні
та стильні інтер’єри.
Ми використовуємо лише високоякісні матеріали
та сучасні технології для досягнення найкращих результатів.</p>
</div>
<div class="about-us__img">
<img src="./img/testimonials/5.jpg" alt="img">
</div>
</div>

<div class="about-us__row right">
<div class="about-us__text">
<p class="about-subtitle">Наша місія</p>
<p>Ми прагнемо зробити кожен інтер'єр неповторним, вкладаючи свою душу та творчість у кожен проект.</p>
</div>
<div class="about-us__img">
<img src="./img/header/1.jpg" alt="header">
</div>
</div>

<div class="about-us__row left">
<div class="about-us__text">
<p class="about-subtitle">Наша команда</p>
<p>Наша команда складається з досвідчених дизайнерів, декораторів та майстрів, які завжди готові реалізувати ваші найсміливіші ідеї.</p>
</div>
<div class="about-us__img">
<img src="./img/header/1.jpg" alt="header">
</div>
</div>

<div class="about-us__row right">
<div class="about-us__text">
<p class="about-subtitle">Наші послуги</p>
<p>Ми пропонуємо широкий спектр послуг: від консультацій та підбору матеріалів до повного оздоблення вашого простору.</p>
</div>
<div class="about-us__img">
<img src="./img/header/1.jpg" alt="header">
</div>
</div>
</div>
</section>


Expand Down
206 changes: 178 additions & 28 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,8 +288,6 @@ body {
.testimonials {
padding-top: 40px;
padding-bottom: 30px;
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.testimonials__heading {
Expand Down Expand Up @@ -674,7 +672,7 @@ body {
}

.about-us {
padding: 20px;
margin-top: 50px;
}

.about-us__row {
Expand Down Expand Up @@ -855,32 +853,158 @@ body {
right: 0;
}

.parallax {
/* The image used */
background-image: url(../img/parallax/img_parallax.jpg);
-webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
/* Full height */
height: 35vh;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
.tell-me__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 30px;
height: 200px;
width: 100%;
background-color: rgb(235, 235, 235);
-webkit-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.tell-me__block input[name=name], .tell-me__block [name=phone] {
min-width: 13em;
width: 13vw;
padding: 12px 10px 12px 35px;
margin: 8px 0;
display: inline-block;
border: 1px solid darkgray;
background: none;
border-top: none;
border-left: none;
border-right: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tell-me__block input[name=name]::-webkit-input-placeholder, .tell-me__block [name=phone]::-webkit-input-placeholder {
color: rgb(46, 45, 45);
}
.tell-me__block input[name=name]::-moz-placeholder, .tell-me__block [name=phone]::-moz-placeholder {
color: rgb(46, 45, 45);
}
.tell-me__block input[name=name]:-ms-input-placeholder, .tell-me__block [name=phone]:-ms-input-placeholder {
color: rgb(46, 45, 45);
}
.tell-me__block input[name=name]::-ms-input-placeholder, .tell-me__block [name=phone]::-ms-input-placeholder {
color: rgb(46, 45, 45);
}
.tell-me__block input[name=name]::placeholder, .tell-me__block [name=phone]::placeholder {
color: rgb(46, 45, 45);
}
.tell-me__block input[name=name]:focus, .tell-me__block [name=phone]:focus {
background: none;
}

.tell-me__inputs {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}

.tell-me__row {
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tell-me__row h1 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: rgb(46, 45, 45);
width: auto;
font-weight: 700;
font-size: 24px;
}
.tell-me__row form {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
}
.parallax__bottom {
height: 35vh;
background-position: bottom;
.tell-me__row form svg {
margin-top: 1.3em;
position: absolute;
width: 1.3em;
height: 1.3em;
}
.parallax__about-us {
background-image: url(../img/parallax/shtukaturka_parallax.jpg);
margin: 50px 0;
height: 50vh;
-webkit-filter: blur(0.15rem);
filter: blur(0.15rem);
.tell-me__row button {
margin: auto 0;
padding: 0 50px;
}

@media screen and (max-width: 1090px) {
.tell-me__row {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 20px;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.tell-me__row form {
width: 100%;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
}
@media screen and (max-width: 800px) {
.tell-me__block {
height: auto;
padding: 20px;
}
.tell-me__row form {
row-gap: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (max-width: 560px) {
.tell-me__block {
text-align: center;
}
.tell-me__row h1 {
font-size: 22px;
}
.tell-me__inputs {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
row-gap: 20px;
}
}
@media screen and (max-width: 1024px) {
.container {
max-width: 90%;
Expand Down Expand Up @@ -949,20 +1073,46 @@ body {
display: none;
margin-top: 20px;
}
.navigation-list.show {
width: 100%;
}
.navigation-list.show ul {
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
text-align: center;
}
.navigation-list li {
margin-right: 20px;
width: 100vw;
padding: auto 10px;
background-color: red;
padding: 20px auto;
width: 100%;
}
.navigation-list li:last-child {
margin: 0;
}
.navigation-list li a {
padding: 10px;
border-bottom: 1px solid rgb(205, 205, 205);
background-color: rgb(235, 235, 235);
}
.dash-under-link ul {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hamburger {
display: block; /* Показуємо бургер-кнопку */
Expand Down
Loading

0 comments on commit 6c75009

Please sign in to comment.