commit 262b8741d5e4b0fbb5afcb7f8235c2a224921b44 Author: Sergey <32025367+sergeyyarkov@users.noreply.github.com> Date: Wed Aug 14 23:08:57 2019 +0300 Add files via upload diff --git a/img/about-us_mac.jpg b/img/about-us_mac.jpg new file mode 100644 index 0000000..5ca79f6 Binary files /dev/null and b/img/about-us_mac.jpg differ diff --git a/img/about-us_point.svg b/img/about-us_point.svg new file mode 100644 index 0000000..ca5c251 --- /dev/null +++ b/img/about-us_point.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/clients/chanel-logo.png b/img/clients/chanel-logo.png new file mode 100644 index 0000000..0b32897 Binary files /dev/null and b/img/clients/chanel-logo.png differ diff --git a/img/clients/guerlain-logo.png b/img/clients/guerlain-logo.png new file mode 100644 index 0000000..df430ad Binary files /dev/null and b/img/clients/guerlain-logo.png differ diff --git a/img/clients/lacoste-logo.png b/img/clients/lacoste-logo.png new file mode 100644 index 0000000..f9fe8b5 Binary files /dev/null and b/img/clients/lacoste-logo.png differ diff --git a/img/clients/lancome-logo.png b/img/clients/lancome-logo.png new file mode 100644 index 0000000..621de69 Binary files /dev/null and b/img/clients/lancome-logo.png differ diff --git a/img/clients/zara-logo.png b/img/clients/zara-logo.png new file mode 100644 index 0000000..90360ec Binary files /dev/null and b/img/clients/zara-logo.png differ diff --git a/img/footer/dribbble.svg b/img/footer/dribbble.svg new file mode 100644 index 0000000..fc0a03c --- /dev/null +++ b/img/footer/dribbble.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/footer/facebook.svg b/img/footer/facebook.svg new file mode 100644 index 0000000..4202ce5 --- /dev/null +++ b/img/footer/facebook.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/footer/google.svg b/img/footer/google.svg new file mode 100644 index 0000000..a8f728f --- /dev/null +++ b/img/footer/google.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/footer/linkedin.svg b/img/footer/linkedin.svg new file mode 100644 index 0000000..46a0986 --- /dev/null +++ b/img/footer/linkedin.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/footer/twitter.svg b/img/footer/twitter.svg new file mode 100644 index 0000000..b23fb9c --- /dev/null +++ b/img/footer/twitter.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/our-services_mac.svg b/img/our-services_mac.svg new file mode 100644 index 0000000..2a8788f --- /dev/null +++ b/img/our-services_mac.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/img/our-services_marketing.svg b/img/our-services_marketing.svg new file mode 100644 index 0000000..e256568 --- /dev/null +++ b/img/our-services_marketing.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/img/our-services_mobile.svg b/img/our-services_mobile.svg new file mode 100644 index 0000000..839b972 --- /dev/null +++ b/img/our-services_mobile.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/img/our-services_photo.svg b/img/our-services_photo.svg new file mode 100644 index 0000000..aeb6b43 --- /dev/null +++ b/img/our-services_photo.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/img/our-team_person.png b/img/our-team_person.png new file mode 100644 index 0000000..59da4a0 Binary files /dev/null and b/img/our-team_person.png differ diff --git a/img/work/work-1.png b/img/work/work-1.png new file mode 100644 index 0000000..329c319 Binary files /dev/null and b/img/work/work-1.png differ diff --git a/img/work/work-2.png b/img/work/work-2.png new file mode 100644 index 0000000..1f01f77 Binary files /dev/null and b/img/work/work-2.png differ diff --git a/img/work/work-3.png b/img/work/work-3.png new file mode 100644 index 0000000..edf45e9 Binary files /dev/null and b/img/work/work-3.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4c0f142 --- /dev/null +++ b/index.html @@ -0,0 +1,309 @@ + + + + + + + Landing Page Grid CSS + + + + + + + +
+
+
+
+ MYCOMPANY +
+
+ +
+ +
+
+

WELCOME ON MYCOMPANY

+

We are a digital agency with years of experience and with extraordinary people

+
+
+
+ +
+
+
+
+ # +
+
+

SOME WORDS ABOUT US

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus .

+
+

Mission - We deliver uniqueness and quality

+

Skills - Delivering fast and excellent results

+

Client - Satisfied clients thanks to our experience

+
+ +
+
+
+ +
+ +
+
+
+

OUR TEAM

+
+
+
+
+ # +
+
+ Vlad Ivanov
+ Designer
+

+ Do not seek to change what has come before. Seek to create that which has not. +

+
+
+ +
+
+ # +
+
+ Vlad Ivanov
+ Designer
+

+ Do not seek to change what has come before. Seek to create that which has not. +

+
+
+
+
+ # +
+
+ Vlad Ivanov
+ Designer
+

+ Do not seek to change what has come before. Seek to create that which has not. +

+
+
+ +
+
+ # +
+
+ Vlad Ivanov
+ Designer
+

+ Do not seek to change what has come before. Seek to create that which has not. +

+
+
+
+
+
+ +
+
+
+

OUR SERVICES


+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.

+
+
+
+
+ +
+
+ WEB DESIGN
+

+ The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. +

+
+
+
+
+ +
+
+ MOBILE APPS
+

+ The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. +

+
+
+
+
+ +
+
+ PHOTOGRAPHY
+

+ The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. +

+
+
+
+
+ +
+
+ MARKETING
+

+ The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. +

+
+
+ +
+
+
+ +
+
+
+

SOME OF OUR CLIENTS


+
+ +
+ + + + + +
+
+
+ +
+
+
+

TAKE A LOOK AT OUR WORK


+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.

+
+
+ +
+ # +
+
+ # +
+
+ # +
+
+ # +
+ + +
+ # +
+
+ # +
+
+ # +
+
+ # +
+ + +
+ # +
+
+ # +
+
+ # +
+
+ # +
+
+
+
+ +
+
+
+

OUR CLIENT'S TESTIMONIALS


+
+
+

This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.


+ Dean Martin, CEO Acme Inc. +
+
+
+ +
+
+
+

CONTACT US


+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+
+
+ + +
+ +
+ + +
+
+ +
+
+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/styles/media.css b/styles/media.css new file mode 100644 index 0000000..e3d939e --- /dev/null +++ b/styles/media.css @@ -0,0 +1,115 @@ +@media (max-width: 1170px) { + #our-clients .our-clients_content { + grid-template-columns: 1fr 1fr 1fr; + } +} +@media (max-width: 1140px) { + #our-work .our-work_content { + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10px; + } +} +@media (max-width: 991px) { + #about-us .computer-image { + display: none; + } + #about-us .about-us_content { + grid-template-columns: 1fr; + } + #contact-us { + padding-left: 85px; + padding-right: 85px; + } +} +@media (max-width: 900px) { + header { + grid-template-columns: 1fr; + justify-items: center; + } + #first .title-page { + margin-top: 140px; + } + #our-services .our-services_content { + grid-template-columns: 1fr 1fr; + } + #our-team .our-team_content { + grid-template-columns: 1fr 1fr; + } + #our-team .our-team_person { + margin-top: 25px; + } + #our-services .our-services_feature { + margin-top: 25px; + } + #our-clients { + padding-bottom: 120px; + } + #our-work .our-work_content { + grid-template-columns: 1fr 1fr; + margin-top: 100px; + } + #first .header-content { + margin-top: 15px; + } +} +@media (max-width: 768px) { + #our-clients .our-clients_content { + grid-template-columns: 1fr 1fr; + padding-left: 0; + padding-right: 0; + } + #contact-us { + padding-left: 50px; + padding-right: 50px; + } +} +@media (max-width: 600px) { + ul li { + display: block; + text-align: center; + margin-top: 15px; + margin-left: 0; + } + #first .title-page { + margin-top: 45px; + } + ul li:nth-child(1) { + border-bottom: none; + } + #first .title-page h1 { + font-size: 38px; + } +} +@media (max-width: 576px) { + #our-team .our-team_content { + grid-template-columns: 1fr; + } + #our-services .our-services_content { + grid-template-columns: 1fr; + } + #our-clients .our-clients_content { + grid-template-columns: 1fr; + margin-top: 0; + } + #our-clients .our-client_logo { + margin-top: 15px; + } + #our-work .our-work_content { + grid-template-columns: 1fr; + } + #contact-us { + padding-left: 0; + padding-right: 0; + } +} +@media (max-width: 420px) { + #contact-us .contact-us_content form { + display: block; + } + #contact-us .contact-us_content .input-email { + margin-top: 20px; + } + #contact-us .contact-us_content textarea { + margin-top: 30px; + } +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..2d0f6a5 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,401 @@ +/* grid-auto-rows: minmax(200px, auto); - Высота блоков */ +/* grid-row - позиция сверху вниз или указать */ +/* grid-column - позиция слева направо или указать */ +/* align-self - выровнять блок в сетке */ +/* grid-template-columns - указать сколько колонок в fr */ +body { + margin: 0; + font-family: 'Open Sans', sans-serif; +} +.container { + max-width: 1200px; + margin-right: auto; + margin-left: auto; + padding-right: 15px; + padding-left: 15px; +} +.title-section { + color: #fff; + font-size: 44px; + text-align: center; + font-weight: 600; + margin-top: 0; +} +.title-section::after { + content: ''; + color: #fff; + display: block; + background-color: #fcac45; + height: 5px; + width: 100px; + margin-left: auto; + margin-right: auto; + margin-top: 20px; +} +/* dn */ +#first, #about-us, #our-team, #our-services, #our-clients, #our-work { + +} +/* First Section */ +#first { + padding-top: 60px; + background-color: #111111; + height: 100vh; +} +header { + color: #fff; + font-weight: 700; + display: grid; + grid-template-columns: 1fr 2fr; +} +header .header-content { + display: grid; + justify-items: end; +} +ul { + padding-left: 0; + margin-top: 6px; + margin-bottom: 0; +} +li a { + color: #fff; + text-decoration: none; +} +ul li { + list-style: none; + display: inline-block; + font-size: 14px; + margin-left: 20px; +} +ul li:nth-child(1) { + border-bottom: 3px solid #fcac45; +} +ul li:hover { + border-bottom: 3px solid #fcac45; + transition: all 0.2s; +} +.header-title { + font-size: 24px; +} +.title-page { + color: #999999; + text-align: center; + font-weight: 300; + margin-top: 220px; +} +.title-page h1 { + font-size: 44px; + font-weight: 300; + margin-bottom: 0; + margin-top: 0; +} +.titile-page p { + margin-top: 25px; +} +.title-page span { + font-weight: 700; +} +.title-page h1 span { + color:#fcac45; +} +/* Section About Us */ +#about-us { + padding-bottom: 100px; + padding-top: 100px; +} +.about-us_content { + display: grid; + grid-template-columns: 1fr 1fr; +} +.about-us_content h2 { + border-bottom: 4px solid #fcac45; + display: inline-block; + color: #222222; + padding-bottom: 10px; +} +.about-us_content p { + color: #767676; + font-size: 18px; + margin-bottom: 0; +} +.about-us_content p:nth-child(2) { + margin-top: 10px; +} +.about-us_content h2, p { + font-weight: 300; +} +.about-us_content p { + margin-top: 15px; +} +.about-us_content span { + font-style: italic; + font-size: 16px; +} +.about-us_content b { + font-weight: 600; +} +.about-us_text { + padding-left: 25px; +} +.about-us_text-features { + margin-top: 45px; +} +.about-us_text-features b { + padding-left: 10px; +} +.about-us_text-features p::before { + content: ''; + width: 14px; + height: 14px; + display: inline-block; + background: url(../img/about-us_point.svg); +} +/* Section Our Team */ +#our-team { + background-color: #070707; + padding-top: 100px; + padding-bottom: 165px; +} +.our-team_content { + color: #fff; + text-align: center; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + margin-top: 90px; +} +.our-team_person { + padding-left: 15px; + padding-right: 15px; +} +.person-info { + margin-top: 20px; +} +.person-info p { + margin-top: 30px; +} +/* Section Our Services */ +#our-services { + color: #222222; + padding-top: 100px; + padding-bottom: 100px; +} +.our-services_content { + margin-top: 100px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} +.our-services_title h2 { + color: #222222; + margin-bottom: 35px; +} +.our-services_title p { + text-align: center; + color: #6c6c6c; + font-style: italic; +} +.our-services_feature { + text-align: center; +} +.feature-info b { + font-size: 25px; +} +.feature-info p { + font-size: 15px; + margin-top: 10px; +} +.feature-info { + margin-top: 30px; + padding-left: 15px; + padding-right: 15px; +} +.feature-img { + width: 125px; + height: 125px; + display: inline-block; + border: 7px solid #fcac45; + border-radius: 100%; +} +.our-services_feature:nth-child(1) .feature-img { + background: url(../img/our-services_mac.svg) no-repeat center center; +} +.our-services_feature:nth-child(2) .feature-img { + background: url(../img/our-services_mobile.svg) no-repeat center center; +} +.our-services_feature:nth-child(3) .feature-img { + background: url(../img/our-services_photo.svg) no-repeat center center; +} +.our-services_feature:nth-child(4) .feature-img { + background: url(../img/our-services_marketing.svg) no-repeat center center; +} +/* Section Our Clients */ +#our-clients { + padding-top: 100px; + padding-bottom: 210px; + background-color: #0b0b0b; +} +.our-clients_content { + padding-left: 90px; + padding-right: 90px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-gap: 25px; + justify-items: center; + margin-top: 50px; +} +.our-client_logo img { + height: 22px; +} +.our-clients_title span { + font-weight: 600; +} +.our-clients_title h2 { + font-weight: 300; +} +/* Section Our Work */ +#our-work { + padding-top: 100px; + padding-bottom: 100px; + background-color: #fff; +} +.our-work_title h2 { + color: #222222; + font-weight: 300; + margin-bottom: 10px; +} +.our-work_title span { + font-weight: 600; +} +.our-work_title p { + text-align: center; + font-style: italic; + color: #6c6c6c; +} +.our-work_content { + margin-top: 170px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-gap: 30px; + justify-items: center; +} +/* Section Testimonial */ +#testimonial { + background-color: #0b0b0b; + padding-top: 100px; + padding-bottom: 170px; +} +.testimonial_title h2 { + font-weight: 300; +} +.testimonial_title span { + font-weight: 600; +} +.testimonial_content p { + text-align: center; + color: #e7e7e7; + font-size: 18px; + font-weight: 600; +} +.testimonial_content small { + display: block; + text-align: center; + color: #b2b2b2; + font-size: 18px; +} +/* Section Contact Us */ +#contact-us { + padding-top: 100px; + padding-bottom: 100px; + padding-left: 185px; + padding-right: 185px; + background-color: #fff; +} +.contact-us_title h2 { + color: #222222; + font-weight: 600; +} +.contact-us_title p { + color: #6c6c6c; + font-weight: 600; +} +.contact-us_title { + text-align: center; +} +.contact-us_content { + margin-top: 120px; +} +.contact-us_content form { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 30px; +} + +form { + color: #6c6c6c; + font-size: 18px; +} +textarea { + width: 100%; + resize: none; + padding: 0; + height: 165px; + outline: none; + margin-top: 50px; + box-sizing: border-box; + padding-left: 15px; + padding-top: 15px; +} + +input { + width: 100%; + height: 40px; + background-color: #fff; + border: 1px solid #999999; + outline: none; + padding-left: 15px; + box-sizing: border-box; +} +form label { + position: relative; + bottom: 10px; +} +form label span { + color: red; +} +form button { + height: 40px; + width: 165px; + background-color: #fcac45; + border: none; + color: #fff; + text-align: center; + outline: none; + cursor: pointer; + transition: all 0.2s; + margin-top: 20px; +} +form button:hover { + opacity: .7; +} +.textarea-message { + grid-column: 1/3; +} +.button-send { + grid-column: 2; + text-align: right; +} +/* Section Footer */ +footer { + background-color: #222222; + padding-top: 30px; + padding-bottom: 30px; +} +.footer-content { + text-align: center; +} +.footer-content img { + margin-left: 15px; + transition: all 0.2s; +} +.footer-content img:hover { + opacity: .8; +} \ No newline at end of file