diff --git a/index.html b/index.html index e69de29..f0e8a1d 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + brancher + + + +
+
+ + +
+ + + +
+ + + +
--> + +
+ + + + + diff --git a/under_construction/css/styles.css b/under_construction/css/styles.css index 3c7e2a5..55da4c7 100644 --- a/under_construction/css/styles.css +++ b/under_construction/css/styles.css @@ -1,46 +1,229 @@ - -@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display|Cutive+Mono'); - - -body { - background-color: #ffd1dc; - overflow: hidden; +.main_h { + position: fixed; + max-height: 70px; + z-index: 999; + width: 100%; + padding-top: 17px; + background: none; + overflow: hidden; + -webkit-transition: all 0.3s; + transition: all 0.3s; + opacity: 0; + top: -100px; + padding-bottom: 6px; + font-family: "Montserrat", sans-serif; } - -div { - height: 100%; - color: #090909; - } - - h1 { - margin: 50px; - position: relative; - text-decoration: none; - left: 50%; - transform: translateX(-50%); - text-align: center; - font-weight: 1; - font-family: Major Mono Display, sans-serif; - letter-spacing: 3px; - width: 100%; - font-size: 40px - + @media only screen and (max-width: 766px) { + .main_h { + padding-top: 25px; } - -h3, h5 { - position: relative; - text-decoration: none; - font-weight: 10; - font-family: Cutive Mono; - left: 50%; - transform: translateX(-50%); - text-align: center; - margin-top: 70px; - width: 100%; } - -button { - position: relative; - left: 50%; - font-family: monospace, sans-serif; + .open-nav { + max-height: 400px !important; } + .open-nav .mobile-toggle { + transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); +} + .sticky { + background-color: #fff; + opacity: 1; + top: 0px; + border-bottom: 1px solid #dcdcdc; +} + .logo { + width: 50px; + font-size: 25px; + color: #8f8f8f; + text-transform: uppercase; + float: left; + display: block; + margin-top: 0; + line-height: 1; + margin-bottom: 10px; +} + @media only screen and (max-width: 766px) { + .logo { + float: none; + } +} + nav { + float: right; + width: 60%; +} + @media only screen and (max-width: 766px) { + nav { + width: 100%; + } +} + nav ul { + list-style: none; + overflow: hidden; + text-align: right; + float: right; +} + @media only screen and (max-width: 766px) { + nav ul { + padding-top: 10px; + margin-bottom: 22px; + float: left; + text-align: center; + width: 100%; + } +} + nav ul li { + display: inline-block; + margin-left: 35px; + line-height: 1.5; +} + @media only screen and (max-width: 766px) { + nav ul li { + width: 100%; + padding: 7px 0; + margin: 0; + } +} + nav ul a { + color: #888; + text-transform: uppercase; + font-size: 12px; +} + .mobile-toggle { + display: none; + cursor: pointer; + font-size: 20px; + position: absolute; + right: 22px; + top: 0; + width: 30px; + -webkit-transition: all 200ms ease-in; + -moz-transition: all 200ms ease-in; + transition: all 200ms ease-in; +} + @media only screen and (max-width: 766px) { + .mobile-toggle { + display: block; + } +} + .mobile-toggle span { + width: 30px; + height: 4px; + margin-bottom: 6px; + border-radius: 1000px; + background: #8f8f8f; + display: block; +} + .row { + width: 100%; + max-width: 940px; + margin: 0 auto; + position: relative; + padding: 0 2%; +} + * { + box-sizing: border-box; +} + body { + color: #8f8f8f; + background: white; + font-family: "Cardo", serif; + font-weight: 300; + -webkit-font-smoothing: antialiased; +} + a { + text-decoration: none; +} + h1 { + font-size: 30px; + line-height: 1.8; + text-transform: uppercase; + font-family: "Montserrat", sans-serif; +} + p { + margin-bottom: 20px; + font-size: 17px; + line-height: 2; +} + .content { + padding: 50px 2% 250px; +} + .hero { + position: relative; + background: #333 url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + text-align: center; + color: #fff; + padding-top: 110px; + min-height: 500px; + letter-spacing: 2px; + font-family: "Montserrat", sans-serif; +} + .hero h1 { + font-size: 50px; + line-height: 1.3; +} + .hero h1 span { + font-size: 25px; + color: #e8f380; + border-bottom: 2px solid #e8f380; + padding-bottom: 12px; + line-height: 3; +} + .mouse { + display: block; + margin: 0 auto; + width: 26px; + height: 46px; + border-radius: 13px; + border: 2px solid #e8f380; + bottom: 40px; + position: absolute; + left: 50%; + margin-left: -14px; +} + .mouse span { + display: block; + margin: 6px auto; + width: 2px; + height: 2px; + border-radius: 4px; + background: #e8f380; + border: 1px solid transparent; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-name: scroll; + animation-name: scroll; +} + @-webkit-keyframes scroll { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + transform: translateY(20px); + } +} + @keyframes scroll { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); + } +} +