diff --git a/README.md b/README.md deleted file mode 100644 index 4f84a22..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -sad \ No newline at end of file diff --git a/image_big1_1.jpg b/image_big1_1.jpg deleted file mode 100644 index adcf4df..0000000 Binary files a/image_big1_1.jpg and /dev/null differ diff --git a/image_big1_2.jpg b/image_big1_2.jpg deleted file mode 100644 index e38231f..0000000 Binary files a/image_big1_2.jpg and /dev/null differ diff --git a/image_big1_3.jpg b/image_big1_3.jpg deleted file mode 100644 index cd39caa..0000000 Binary files a/image_big1_3.jpg and /dev/null differ diff --git a/image_big2_1.jpg b/image_big2_1.jpg deleted file mode 100644 index 20f2995..0000000 Binary files a/image_big2_1.jpg and /dev/null differ diff --git a/image_big2_2.jpg b/image_big2_2.jpg deleted file mode 100644 index a44dd2a..0000000 Binary files a/image_big2_2.jpg and /dev/null differ diff --git a/image_big2_3.jpg b/image_big2_3.jpg deleted file mode 100644 index 584e152..0000000 Binary files a/image_big2_3.jpg and /dev/null differ diff --git a/image_big3_1.jpg b/image_big3_1.jpg deleted file mode 100644 index ad4908f..0000000 Binary files a/image_big3_1.jpg and /dev/null differ diff --git a/image_big3_2.jpg b/image_big3_2.jpg deleted file mode 100644 index ad4908f..0000000 Binary files a/image_big3_2.jpg and /dev/null differ diff --git a/img/foto1.jpg b/img/foto1.jpg new file mode 100644 index 0000000..0b9ed73 Binary files /dev/null and b/img/foto1.jpg differ diff --git a/img/foto2.jpg b/img/foto2.jpg new file mode 100644 index 0000000..c8be30e Binary files /dev/null and b/img/foto2.jpg differ diff --git a/image_big3_3.jpg b/img/image_big3_3.jpg similarity index 100% rename from image_big3_3.jpg rename to img/image_big3_3.jpg diff --git a/img/mapa.jpg b/img/mapa.jpg new file mode 100644 index 0000000..7ccf6f0 Binary files /dev/null and b/img/mapa.jpg differ diff --git a/tlo5.jpg b/img/tlo5.jpg similarity index 100% rename from tlo5.jpg rename to img/tlo5.jpg diff --git a/img/tlo51600x600.jpg b/img/tlo51600x600.jpg new file mode 100644 index 0000000..103d638 Binary files /dev/null and b/img/tlo51600x600.jpg differ diff --git a/index.html b/index.html index 25fe94f..891ddaa 100644 --- a/index.html +++ b/index.html @@ -1,108 +1,127 @@ + - - - strona + + dokument - - - - - -
-

carousel

-

Lorem ipsum dolor sit amet, pri ea cotidieque vituperatoribus, scaevola convenire maluisset at vel.
Et nulla referrentur instructior eum, ea atqui vocent vim, prima posse ad duo.

- read more -
- - -
-

recent works

-

Lorem ipsum dolor sit amet, pri ea cotidieque vituperatoribus, scaevola convenire
maluisset at vel. - Et nulla referrentur instructior eum.

-
- -
-
- image1 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- image2 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- 3 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- image1 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- image2 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- 3 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- image1 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- image2 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
- 3 -

i'am hangry desinger

-

TheCodrops always hungry to lern.

-
-
+
-
- work -

How we work

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio enim modi sapiente quisquam non aliquid, provident sunt qui reprehenderit! Tempore inventore consequatur nesciunt nostrum praesentium sunt illum architecto atque, suscipit soluta fuga, amet sed dolorem nobis neque dolores. Ipsa ullam accusantium harum veniam cupiditate magni officiis, dolorum sint atque? Veniam repellendus amet itaque, magnam. Nulla sapiente nostrum delectus consequuntur sunt quos. Veritatis enim provident, iure odio in molestias dolor. Repudiandae quas, temporibus voluptates aperiam vel nulla nobis minima cumque aliquid!

-
+
+ +
+
- -
-
- desingn by - xovenTech -
-

© All Right Reserved 2017

+

bootstop carouse on codeCanyon

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam minima officiis, repellendus dolorum + maxime exercitationem!

+ + read more + +
+ +
+

Recent Works

+

Lorem ipsum dolor sit amet, pri ea cotidieque vituperatoribus, scaevola convenire maluisset at vel. + Et nulla referrentur instructior eum.

+
+ +
+
+
+ +

i'm hangry desinger

+

TheCodrops always hungry to lern.

+
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+ +
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+ +
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+
+
+
+
+

i'm hangry desinger

+

TheCodrops always hungry to lern.

+
+
+ +
+
+
+

How we work

+

Lorem ipsum dolor sit amet, pri ea cotidieque scaevola convenire maluisset at vel.Et nulla + referrentur + instructior eum, ea atqui vocent vim, prima posse ad duo. Et nulla referrentur instructior eum, ea + atqui vocent vim, prima posse ad duo.Lorem ipsum dolor sit amet, pri ea cotidieque scaevola + convenire + maluisset at vel.Et nulla referrentur instructior eum, ea atqui vocent vim, prima posse ad duo. Et + nulla referrentur instructior eum, ea atqui vocent vim, prima posse ad duo

+
+ + + +
+
- + + \ No newline at end of file diff --git a/kontakt.html b/kontakt.html new file mode 100644 index 0000000..0890546 --- /dev/null +++ b/kontakt.html @@ -0,0 +1,72 @@ + + + + + + + + + + + dokument + + + + +
+ +
+ +
+
+ +

contact

+ + +
+
+
+

our contact

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Odio enim modi sapiente quisquam non aliquid,provident sunt qui reprehenderit!

+ +
address
+

12 Street, Nirvana Avenue

+
phone
+

+123784125

+
e-mail
+

support@yourmail.com

+ +
+
+ lokalizacja +
+
+ +
+
+ + + + + +
+
+ +
+ \ No newline at end of file diff --git a/mobile.css b/mobile.css deleted file mode 100644 index f65d531..0000000 --- a/mobile.css +++ /dev/null @@ -1,212 +0,0 @@ -/* górne logo*/ -@media screen and ( min-width: 1024px){ - .logo { - display: inline-block; - } -} -@media screen and ( min-width: 1024px){ - .logo1 { - font-size: 23px; - display: inline-block; - height: 55px; - padding: 12px 1000px 12px 35px; - } -} -@media screen and ( min-width: 1024px){ - .logo2 { - font-size: 14px; - margin-left: 160px; - padding: 8px 16px; - display: inline-block; - } -} -@media screen and ( min-width: 1024px){ - .logo3{ - font-size: 13px; - margin-left: 45px; - display: inline-block; - } -} -/* logo dolne*/ - - - -@media screen and ( min-width: 1024px){ - .logotwo { - display: inline-block; - padding: 20px 22px 0 14px; - font-size: 16px; - } -} -@media screen and ( min-width: 1024px){ - .anny { - font-size: 25px; - padding: 0 600px 0 200px; - display: inline-block; - } -} -@media screen and ( min-width: 1024px){ - .link { - font-size: 12px; - display: inline-block; - padding: 0 20px; - - - } -} -@media screen and ( min-width: 1024px){ - .home { - font-size: 12px; - display: inline-block; - padding-right: 30px; - - } -} - -/*obraz w tle */ -@media screen and ( min-width: 1024px){ - section { - width: 100%; - height: 598px; - background: url('tlo1.jpg'); - background-repeat: no-repeat; - } -} -@media screen and ( min-width: 1024px){ - section h1 { - font-size: 40px; - margin-top: 20px; - padding: 100px 200px 0 0; - text-align: right; - } -} -@media screen and ( min-width: 1024px){ - section p { - font-size: 18px; - margin-top: 50px; - font-weight: 600; - text-align: right; - line-height: 1.5; - padding-right: 100px; - } -} -@media screen and ( min-width: 1024px){ - section a { - font-size: 16px; - margin-top: 50px; - text-align: center; - margin-left: 1200px; - padding: 15px 20px; - font-weight: 900; - border-radius: 70px; - } -} -/*recent works */ -@media screen and ( min-width: 1024px){ - header h1 { - font-size: 30px; - padding-top: 100px; - } -} -@media screen and ( min-width: 1024px){ - header p { - font-size: 16px; - padding-top: 20px; - margin-bottom: 80px; - } -} - -/* trzy obrazki pierwszy rząd*/ - - -@media screen and ( min-width: 1024px){ -.container { - padding-left: 150px; - } -} - - -@media screen and ( min-width: 1024px){ -.image { - width: 350px; - height: 350px; - padding-bottom: 40px; - } -} - -@media screen and ( min-width: 1024px){ -.topleft1 { - position: absolute; - top: 240px; - left: 150px; - font-size: 20px; - } -} -@media screen and ( min-width: 1024px){ -.bottonleft1 { - position: absolute; - bottom: 60px; - left: 100px; - font-size: 15px; - } -} - - -@media screen and ( min-width: 1024px){ -.boxoneone { - position: relative; - float: left; - margin: 0 28px; - } -} - - -/* work */ - -@media screen and ( min-width: 1024px){ - .work h1 { - font-size: 50px; - margin-top: 200px; - padding: 0 50px 100px 200px; - display: inline-block; - - - } -} -@media screen and ( min-width: 1024px){ - .obraz { - float: right; - width: 400px; - height: 400px; - - - } -} -@media screen and ( min-width: 1024px){ - .work p { - text-align: left; - line-height: 2.5; - font-size: 16px; - padding: 0px 400px 200px 200px; - } -} - -/* footer */ - - -@media screen and ( min-width: 1024px){ -.footer h5 { - font-size: 15px; - padding: 20px 0 20px 200px; - - } -} - - -@media screen and ( min-width: 1024px){ -.footer p { - font-size: 15px; - padding-left: 950px; - } -} - diff --git a/style.css b/style.css index d58fea3..7d5f8f1 100644 --- a/style.css +++ b/style.css @@ -1,252 +1,361 @@ +/*reset*/ * { - margin: 0; - padding: 0; - font-family: 'Lato', sans-serif; - box-sizing: border-box; - + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; } +/*style*/ body { - max-width: 100%; - margin: 0 auto; - + font-family: "Oxygen", sans-serif; } + a { - text-decoration: none; - } + text-decoration: none; +} -/* górne logo*/ +img { + max-width: 100%; + height: 100%; +} -.logo { - background-color: black; - width: 100%; - display: inline-block; +h1 { + font-size: 30px; + text-align: center; + font-weight: bold; } -.logo1 { - font-size: 15px; - color: #669900; - display: inline-block; - +p { + text-align: center; + font-size: 14px; + line-height: 2; } -.logo1::before { - content: 'evento'; - color: white; +/*klasy*/ +.color-first { + color: #a67d4a; } -.logo2 { - font-size: 12px; - background-color: #669900; - border-radius: 5px; - color: white; - display: inline-block; +.text-upp { + text-transform: uppercase; } -.logo2:hover { - background-color: green; - cursor: pointer; +.text-cap { + text-transform: capitalize; } -.logo3{ - font-size: 12px; - text-transform: capitalize; - color: #777777; - display: inline-block; + +.wrap { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: white; } -.logo3:hover { - color: white; - cursor: pointer; - -} -/* logo dolne*/ - -.logotwo{ - text-align: center; - background-color: white; - color: black; - text-transform: uppercase; - -} -.anny -{ - font-size: 12px; - color: #A67D4A; - font-weight: 900; - text-transform: uppercase; -} -.home { - color: #A67D4A; - font-size: 12px; -} -.link { - color: black; - font-size: 12px; -} -.link:hover { - color: #A67D4A; -} - - - - -/*obraz w tle */ - - - -section { - background: url('tlo3.jpg'); - background-repeat: no-repeat; - width: 100%; - height: 455px; - cursor: pointer; -} -section h1 { - font-size: 25px; - margin-top: 40px; - padding-top: 20px; - text-transform: capitalize; - color: #A67D4A; - - -} -section h1::before { - content: 'bootstop '; - color: white; -} -section h1::after { - content: ' on codeCanyon'; - color: white; -} -section p { - font-size: 15px; - color: white; - margin-top: 30px; - text-align: center; - - } -section a { - color: white; - font-size: 15px; - margin-top: 30px; - background-color: #A67D4A; - text-transform: uppercase; - display: inline-block; - margin-left: 400px -} -section a:hover { - color: #A67D4A; - background-color: white; -} - -/*recent works */ - - header { - - background-color: white; - text-align: center; - } - header h1 { - font-size: 20px; - color: #A67D4A; - text-transform: capitalize; - padding-top: 60px; - font-weight: 800; - } - header p { - font-size: 15px; - color: black; - padding-top: 20px; - line-height: 1.5; - margin-bottom: 40px - } - - -/* trzy obrazki pierwszy rząd*/ - -.container { - max-width: 100%; - margin: 0 auto; - color: white; - padding-left: 130px; - -} -.image { - width: 350px; - height: 350px; - padding-bottom: 40px; - } -.topleft1 { - position: absolute; - top: 240px; - left: 150px; - font-size: 20px; - } -.bottonleft1 { - position: absolute; - bottom: 60px; - left: 100px; - font-size: 15px; - } - -.boxoneone { - position: relative; - margin: 0 28px; - - -} - - -/* work */ - -.work { - background-color: white; - -} -.work h1 { - color: #A67D4A; - font-size: 10px; - text-align: center; - display: inline-block; -} - -.obraz { - float: right; - width: 500px; - height: 500px; - margin: 200px 200px 100px 0; -} - -.work p { - text-align: left; - line-height: 2.5; - font-size: 16px; - padding: 0px 400px 0 200px; -} - -/* footer */ - -.footer { - background-color: #cecbcb; - color: #A67D4A; - border: 2px solid yellow; - width: 100%; + +/*botton*/ +.botton { + background-color: white; + flex-basis: 5vh; + line-height: 5vh; + align-self: stretch; + color: black; +} + +.botton ul { + display: flex; + align-items: center; + box-sizing: border-box; } -.footer h5 { - font-size: 10px; - text-transform: capitalize; - display: inline-block; +.botton li { + width: 12vh; + font-size: 13px; +} + +.botton a { + color: black; +} +.botton a:hover { + color: #a67d4a; +} +.anna { + flex-grow: 1; + padding-left: 15%; +} +.anna a { + color: #a67d4a; + font-size: 20px; +} +@media (max-width: 780px) { + .anna { + padding-left: 5%; + } +} +/*welcome-home*/ +.welcom-home { + background-image: url(img/tlo51600x600.jpg); + background-size: cover; + background-position: bottom; + flex-basis: 500px; + align-self: stretch; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding-left: 5%; +} +.welcom-home h2 { + font-size: 35px; +} +.welcom-home p { + width: 50%; + text-align: left; + padding: 20px 0; +} +.welcom-home a { + color: white; + background-color: #a67d4a; + padding: 10px 25px; + border-radius: 20px; + font-size: 15px; +} +.welcom-home a:hover { + background-color: white; + color: #a67d4a; +} +@media (max-width: 780px) { + .welcom-home h2 { + font-size: 30px; + } + .welcom-home p { + width: 60%; + } +} + +/*main-top*/ +.main-top { + flex-basis: 300px; + align-self: stretch; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; +} +.main-top h1 { + padding-bottom: 3%; + width: 100%; +} +.main-top p { + width: 50%; +} +@media (max-width: 780px) { + .main-top p { + width: 80%; + } +} + +/*card section*/ +.card-section { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; +} + +.card { + background-image: url(img/image_big3_3.jpg); + background-size: cover; + width: 40vw; + height: 40vh; + margin: 20px; + color: white; + position: relative; + overflow: hidden; +} +@media (max-width: 780px) { + .card { + width: 50vh; + height: 50vh; + margin: 10px 0; + } +} +.hgroup { + position: absolute; + top: 0; + left: 0; + border-top: 2px solid #a67d4a; + transition: 0.5s linear; +} +.card:hover .hgroup { + top: 30vh; + left: 20vw; +} - } -.footer p { - font-size: 10px; - display: inline-block; - -} -.wyraz2:hover { -cursor: pointer; -} - - - +/*main-botton*/ +.main-botton { + display: flex; + justify-content: space-around; + align-items: center; + flex-basis: 50vh; + align-self: stretch; +} + +.main-work { + width: 50vh; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} +.main-botton h3 { + font-size: 30px; + padding-bottom: 20px; +} + +.main-botton img { + width: 40vh; + height: 40vh; +} +@media (max-width: 780px) { + .main-botton { + flex-direction: column; + flex-basis: 100%; + align-items: center; + padding: 5% 0; + } + .main-work p { + padding: 5% 0; + font-size: 12px; + } + .main-botton img { + width: 35vh; + height: 35vh; + } +} +/*footer*/ +footer { + display: flex; + flex-basis: 5vh; + justify-content: space-around; + align-items: center; + font-size: 18px; + padding: 0 40px; + align-self: stretch; +} +/*welcom-box*/ +.welcom-box { + flex-basis: 50vh; + background-image: url(img/foto1.jpg); + + align-self: stretch; + background-position: bottom; + display: flex; + flex-direction: column; +} + +.welcom-box ul { + display: flex; + flex-basis: 10%; + padding-left: 14%; + padding-top: 2%; +} + +.welcom-box h2 { + padding: 2% 0 0 14%; + font-size: 40px; +} +@media (max-width: 780px) { + .welcom-box ul, + .welcom-box h2 { + padding-left: 5%; + } +} + +.welcom-box a { + color: white; + padding-right: 35%; +} +/*ourcontact*/ +.ourcontact { + align-self: stretch; + display: flex; + justify-content: center; + align-items: center; + flex-basis: 500px; +} +.ourcontact img { + width: 50vh; + height: 40vh; + border: 2px solid #778888; +} +.contact { + flex-basis: 40%; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} +@media (max-width: 780px) { + .contact { + padding-left: 5%; + } +} +.contact h4 { + font-size: 30px; +} +.contact h5 { + font-size: 20px; +} +.contact i { + padding-right: 3%; +} +.contact p { + text-align: left; + font-size: 15px; + padding-left: 6%; + margin: 2% 0; +} +@media (max-width: 780px) { + .ourcontact { + flex-direction: column; + flex-basis: 800px; + } +} + +.contact-input { + width: 40%; +} +.contact-input input { + display: block; + height: 40px; + width: 100%; + margin-bottom: 5%; + border: none; + box-shadow: 5px 5px 5px 0px rgba(166, 125, 74, 1); +} +.contact-input textarea { + height: 100px; + width: 100%; + box-shadow: 5px 5px 5px 0px rgba(166, 125, 74, 1); + margin-bottom: 50px; +} +.contact-input button { + background-color: rgba(166, 125, 74, 1); + padding: 10px 20px; + border-radius: 20px; + display: block; + margin: 0 auto; + border: none; +} +.contact-input button:hover { + background-color: white; + color: rgba(166, 125, 74, 1); + border: 2px solid rgba(166, 125, 74, 1); +} +@media (max-width: 780px) { + .contact-input { + width: 70%; + } +} diff --git a/tlo1.jpg b/tlo1.jpg deleted file mode 100644 index ae42316..0000000 Binary files a/tlo1.jpg and /dev/null differ diff --git a/tlo2.jpg b/tlo2.jpg deleted file mode 100644 index 131639b..0000000 Binary files a/tlo2.jpg and /dev/null differ diff --git a/tlo3.jpg b/tlo3.jpg deleted file mode 100644 index 7966d14..0000000 Binary files a/tlo3.jpg and /dev/null differ