diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..30bc16279 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/node_modules \ No newline at end of file diff --git a/css/index.css b/css/index.css index 21442c782..2007eb6d0 100644 --- a/css/index.css +++ b/css/index.css @@ -3,48 +3,135 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } + body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; + +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; + +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; } + table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } * { @@ -52,7 +139,7 @@ table { } html { - max-width: 1920px; + /*max-width: 1920px;*/ min-width: 428px; width: 100%; font-size: 62.5%; @@ -63,7 +150,15 @@ body { line-height: 1.5; } -h1, h2, h3, h4, h5, h6, p, a, i { +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +i { text-decoration: none; } @@ -79,7 +174,8 @@ h3 { font-size: 5rem; } -p, a { +p, +a { font-size: 3rem; } @@ -87,7 +183,7 @@ p, a { header { width: 100%; height: 100vh; - background-image: url('../img/home-header.jpg'); + background-image: url('/img/home-header.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; @@ -99,6 +195,7 @@ header { height: 20vh; background-color: rgb(0, 4, 17); } + .spacer-sm { width: 100%; height: 10vh; @@ -118,10 +215,11 @@ header { width: 100%; height: 75vh; text-align: center; - background-image: url("../img/staff-cooks.jpg"); + background-image: url("/img/staff-cooks.jpg"); background-size: cover; background-position: top; background-repeat: no-repeat; + color: white; } .about-container { @@ -155,6 +253,7 @@ header { width: 100%; height: 100%; background-color: rgb(0, 4, 17, .8); + color: white; } .contact h2 { @@ -188,57 +287,225 @@ header { width: 25%; } +.header-content { + + background-color: rgb(0, 4, 17, .8); + text-align: center; + flex-direction: column; + justify-content: space-evenly; + color: white; +} + +.header-content h1 { + color: white; +} + +nav div:first-child { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + +nav a { + color: white; + font-size: 2.5rem; + text-decoration: none; +} + +#social i { + font-size: 50px; + margin: 3rem +} + +.gallery { + color: white; + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + height: auto; +} + +.gallery-img { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-content: space-around; +} + +.gallery-img img { + margin: 2% 0; +} + +.contacts a { + color: white; +} + /* footer section */ footer { + display: flex; + flex-direction: row; width: 100%; - height: 15vh; + padding: 2%; padding-top: 2.5vh; font-size: 3rem; + background: rgb(0, 4, 17); + color: white; + border-top: 2px solid rgba(255, 255, 255, 0.164); +} + +footer div { + display: inline-block; + vertical-align: top; } +footer nav { + display: inline-flex; + + justify-content: space-around; + width: 60%; + /*vertical-align: top;*/ +} + +footer nav a { + font-size: 3rem; +} + +footer p { + font-size: 1.5rem; + text-align: right; +} + + + + /* mobile media query */ -@media (max-width: 428px) { +@media (max-width: 500px) { + body div { + display: flex; + flex-direction: column; + } + /* header section */ - + header { + width: 100%; + height: 90vh; + background-image: url('/img/home-header.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + } + + .header-content { + background-color: rgb(0, 4, 17, .8); + text-align: center; + flex-direction: column; + justify-content: space-evenly; + color: white; + } + + .header-content a h1 { + color: white; + font-size: 4rem; + } + + nav div:first-child { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + padding-top: 2.5rem; + } + + nav a { + color: white; + font-size: 2.5rem; + text-decoration: none; + } + + #social { + display: flex; + flex-direction: row; + justify-content: center; + } + + #social i { + font-size: 2rem; + margin: 0.25rem; + padding: 2.5rem 0; + } /* gallery section */ + .gallery { + color: white; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; height: auto; } - + + .gallery-img { + width: 100%; + height: 100%; + } + + .gallery h2 { + font-size: 5.5rem; + } + + .gallery-img img { + margin: 4% 0; + } + /* about us section */ .about { - height: 200vh; + display: flex; + height: 100%; + width: 100%; + text-align: center; + background-image: url("/img/staff-cooks.jpg"); + background-size: cover; + background-position: bottom; + background-repeat: no-repeat; + color: white; } - + + .about-container { + flex-direction: column; + align-content: flex-end; + } + .about h2 { width: 100%; padding-top: 5vh; } - + .about-container .text { width: 85%; } - + /* contact us section */ .contact h3 { padding-top: 2.5vh; } - + .info { flex-wrap: wrap; } - + .address { width: 100%; padding-bottom: 2.5vh; } - + .hours { width: 100%; } - + .contacts { width: 100%; padding-bottom: 2.5vh; @@ -246,8 +513,38 @@ footer { /* footer section */ footer { + vertical-align: top; + flex-direction: column; + justify-content: center; height: auto; + width: 100%; padding-top: 2.5vh; font-size: 2rem; + text-align: center; } -} + + footer div { + display: flex; + vertical-align: top; + flex-direction: column; + } + + footer nav { + display: flex; + flex-direction: column; + width: auto; + margin: 2rem 0; + vertical-align: middle; + } + + footer nav a { + font-size: 2rem; + } + + footer p { + font-size: 1rem; + text-align: center; + } + + +} \ No newline at end of file diff --git a/css/menu.css b/css/menu.css index 9aba6954d..721ee37d1 100644 --- a/css/menu.css +++ b/css/menu.css @@ -3,48 +3,135 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } + body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; + +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; + +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; } + table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } * { @@ -52,7 +139,7 @@ table { } html { - max-width: 1920px; + /*max-width: 1920px;*/ min-width: 428px; font-size: 62.5%; } @@ -62,7 +149,15 @@ body { line-height: 1.5; } -h1, h2, h3, h4, h5, h6, p, a, i { +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +i { text-decoration: none; } @@ -82,7 +177,8 @@ h4 { font-size: 4rem; } -p, a { +p, +a { font-size: 3rem; } @@ -96,12 +192,42 @@ header { background-repeat: no-repeat; } +.header-content { + background-color: rgb(0, 4, 17, .8); + text-align: center; + flex-direction: column; + justify-content: space-evenly; + color: white; +} + +.header-content h1 { + color: white; +} + +nav div:first-child { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + +nav a { + color: white; + font-size: 2.5rem; + text-decoration: none; +} + +#social i { + font-size: 50px; + margin: 3rem +} + /* spacer */ .spacer { width: 100%; height: 20vh; background-color: rgb(0, 4, 17); } + .spacer-sm { width: 100%; height: 10vh; @@ -118,35 +244,201 @@ header { background-size: cover; background-position: center; background-repeat: no-repeat; + color: white; +} + +.back-color { + background-color: rgb(0, 4, 17, .8); +} + +.ust-menu-section { + /*background-color: rgb(0, 4, 17, .8);*/ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +.menu-section { + width: 40%; + display: inline-flex; + flex-direction: column; + padding: 3% 5%; +} + +.menu h2 { + text-align: center; +} + +.menu-item div { + display: flex; + justify-content: space-between; + +} + +.menu-item { + padding: 3% 0; +} + +.menu-item p { + font-weight: lighter; +} + +.baslik { + padding-top: 4%; } /* footer section */ + footer { + display: flex; + flex-direction: row; width: 100%; - height: 15vh; + padding: 2%; padding-top: 2.5vh; - font-size: 3rem; + font-size: 2rem; + background: rgb(0, 4, 17); + color: white; + border-top: 2px solid rgba(255, 255, 255, 0.164); +} + +footer div { + display: inline-block; + vertical-align: top; +} + +footer nav { + display: inline-flex; + justify-content: space-around; + width: 60%; + /*vertical-align: top;*/ +} + +footer nav a { + font-size: 2rem; +} + +footer p { + font-size: 1.5rem; + text-align: right; +} + +footer h4 { + font-size: 2rem; } /* mobile media query */ -@media (max-width: 428px) { +@media (max-width: 500px) { + /* header section */ - .header-title { - width: 75%; - margin: 0 auto; + header { + width: 100%; + height: 90vh; + background-image: url('/img/menu-header.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + } + + .header-content { + background-color: rgb(0, 4, 17, .8); text-align: center; + flex-direction: column; + justify-content: space-evenly; + color: white; + } + + .header-content a h1 { + color: white; font-size: 4rem; } + nav div:first-child { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + padding-top: 2.5rem; + } + + nav a { + color: white; + font-size: 2.5rem; + text-decoration: none; + } + + #social { + display: flex; + flex-direction: row; + justify-content: center; + } + + #social i { + font-size: 2rem; + margin: 0.25rem; + padding: 2.5rem 0; + } + /* menu */ .menu { background-image: none; + color: rgb(0, 4, 17); + } + + .back-color { + background-color: rgb(229, 236, 235); + flex-direction: column; + } + + .menu-section { + width: 90%; + padding: 0; + display: flex; + flex-direction: column; + } + + .menu-item div { + flex-direction: column; + justify-content: space-around; + } + + .menu-item { + justify-content: space-between; + text-align: center; } /* footer section */ footer { + vertical-align: top; + flex-direction: column; + justify-content: center; height: auto; + width: 100%; padding-top: 2.5vh; font-size: 2rem; + text-align: center; } -} + + footer div { + display: flex; + vertical-align: top; + flex-direction: column; + } + + footer nav { + display: flex; + flex-direction: column; + width: auto; + margin: 2rem 0; + vertical-align: middle; + } + + footer nav a { + font-size: 2rem; + } + + footer p { + font-size: 1rem; + text-align: center; + } +} \ No newline at end of file diff --git a/index.html b/index.html index a59021d2a..7bbbe4b67 100644 --- a/index.html +++ b/index.html @@ -6,23 +6,34 @@
+
+
+
+
+
+
+
+
+