<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> <div class="hero-section"> <div class="about-text hover-target">about</div> <div class="contact-text hover-target">contact</div> <div class="section-center"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 text-center"> <h1>Christian Arete</h1> </div> <div class="col-12 text-center mb-2"> <div class="dancing">photography</div> </div> <div class="col-12 text-center mt-4 mt-lg-5"> <p> <span class="travel hover-target">travel</span> <span class="wildlife hover-target">wildlife</span> <span class="nature hover-target">nature</span> </p> </div> </div> </div> </div> </div> <div class="about-section"> <div class="about-close hover-target"></div> <div class="section-center"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 text-center"> <img src="http://www.ivang-design.com/svg-load/portfolio/freel.jpg" alt=""> </div> <div class="col-lg-8 text-center mt-4"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p> </div> <div class="col-12 text-center"> <p><span>Christian Arete</span></p> </div> </div> </div> </div> </div> <div class="contact-section"> <div class="contact-close hover-target"></div> <div class="section-center"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 text-center"> <a href="#" class="hover-target">djonDou@photography.com</a> </div> <div class="col-12 text-center social mt-4"> <a href="#" class="hover-target">instagram</a> <a href="#" class="hover-target">flickr</a> <a href="#" class="hover-target">facebook</a> </div> </div> </div> </div> </div> <div class="travel-section"> <div class="travel-close hover-target"></div> <div class="container"> <div class="row justify-content-center"> <div class="col-12 text-center"> <h3>travel</h3> </div> <div class="col-12 mt-3 text-center"> <p><span>Canon PowerShot S95</span></p> </div> <div class="col-12 text-center"> <p> focal length: 22.5mm<br> aperture: ƒ/5.6<br> exposure time: 1/1000<br> ISO: 80 </p> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1721&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1931&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://plus.unsplash.com/premium_photo-1676139860466-8b8f71c0a737?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> </div> </div> </div> <div class="wildlife-section"> <div class="wildlife-close hover-target"></div> <div class="container"> <div class="row justify-content-center"> <div class="col-12 text-center"> <h3>wildlife</h3> </div> <div class="col-12 mt-3 text-center"> <p><span>Canon PowerShot S95</span></p> </div> <div class="col-12 text-center"> <p> focal length: 22.5mm<br> aperture: ƒ/5.6<br> exposure time: 1/1000<br> ISO: 80 </p> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> </div> </div> </div> <div class="nature-section"> <div class="nature-close hover-target"></div> <div class="container"> <div class="row justify-content-center"> <div class="col-12 text-center"> <h3>nature</h3> </div> <div class="col-12 mt-3 text-center"> <p><span>Canon PowerShot S95</span></p> </div> <div class="col-12 text-center"> <p> focal length: 22.5mm<br> aperture: ƒ/5.6<br> exposure time: 1/1000<br> ISO: 80 </p> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1498429089284-41f8cf3ffd39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1498477386155-805b90bf61f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1854&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1496482475496-a91f31e0386c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1623423415485-1d36867376b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1859&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1499678329028-101435549a4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> <div class="col-md-6 col-lg-4"> <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt=""> </div> </div> </div> </div> <div class='cursor' id="cursor"></div> <div class='cursor2' id="cursor2"></div> <div class='cursor3' id="cursor3"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script> /* Please ❤ this if you like it! */ /* ======================================== * BEST VIEWED FULLSCREEN https://codepen.io/ig_design/full/JxbVRq * ======================================== */ @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); @import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700'); body{ font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: #fff; background-color: #1f2029; overflow: hidden; height: 100vh; -webkit-transition: all 300ms linear; transition: all 300ms linear; perspective: 800px; } a { cursor: pointer; } a:hover { text-decoration: none; } ::selection { color: #c4c3ca; background-color: #000; } ::-moz-selection { color: #c4c3ca; background-color: #000; } /* #Cursor ================================================== */ .cursor, .cursor2, .cursor3{ position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50%; mix-blend-mode: difference; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .cursor{ background-color: #fff; height: 0; width: 0; z-index: 99999; } .cursor2,.cursor3{ height: 36px; width: 36px; z-index:99998; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out } .cursor2.hover, .cursor3.hover{ -webkit-transform:scale(2) translateX(-25%) translateY(-25%); transform:scale(2) translateX(-25%) translateY(-25%); border:none } .cursor2{ border: 2px solid #fff; } .cursor2.hover{ background: rgba(255,255,255,1); border-color: transparent; } @media screen and (max-width: 1200px){ .cursor,.cursor2,.cursor3{ display: none } } /* #Primary style ================================================== */ .hero-section { position: relative; width: 100%; display: block; overflow: hidden; height: 100vh; background-image: url('http://www.ivang-design.com/svg-load/portfolio/photo.jpg'); background-size: cover; background-position: center; transform: scale(1) rotateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.2); -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition-delay: 400ms; transition-delay: 400ms; transform-origin: center top; } .hero-section h1{ color: #fff; font-size: 5vw; line-height: 1; font-weight: 900; } .hero-section .dancing{ font-family: 'Dancing Script', cursive; letter-spacing: 1px; color: #866BAF; font-size: 26px; line-height: 1; font-weight: 700; } @media screen and (max-width: 580px){ .hero-section .dancing{ font-size: 18px; } } .hero-section p{ font-size: 15px; line-height: 20px; font-weight: 500; color: #fff; letter-spacing: 1px; } .hero-section p span{ margin-left: 15px; margin-right: 15px; position: relative; display: inline-block; cursor: pointer; padding-bottom: 35px; } .hero-section p span:before { position: absolute; content: ''; bottom: 10px; left: 50%; height: 30px; width: 30px; margin-left: -15px; z-index: -1; background-repeat: no-repeat; background-position: center; background-size: 30px 30px; background-image: url('http://www.ivang-design.com/svg-load/portfolio/down.svg'); opacity: 0.2; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .hero-section p span:hover:before { opacity: 1; bottom: 5px; } body.about-on .hero-section { transform: scale(0.75); -webkit-transition-delay: 0ms; transition-delay: 0ms; } body.contact-on .hero-section { transform: scale(0.75); -webkit-transition-delay: 0ms; transition-delay: 0ms; } body.travel-on .hero-section { transform: rotateX(-10deg); -webkit-transition-delay: 0ms; transition-delay: 0ms; } body.wildlife-on .hero-section { transform: rotateX(-10deg); -webkit-transition-delay: 0ms; transition-delay: 0ms; } body.nature-on .hero-section { transform: rotateX(-10deg); -webkit-transition-delay: 0ms; transition-delay: 0ms; } .about-text { position: absolute; font-size: 17px; line-height: 20px; font-weight: 700; color: #fff; letter-spacing: 2px; top: 50%; left: 40px; cursor: pointer; z-index: 2; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; transform: translateY(-50%); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .about-text:before { position: absolute; content: ''; top: 50%; left: -25px; height: 30px; width: 30px; margin-top: -15px; z-index: -1; background-repeat: no-repeat; background-position: center; background-size: 30px 30px; background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg'); opacity: 0.2; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .about-text:hover:before { opacity: 1; left: -30px; } .about-section { position: fixed; top: 0; left: 0; width: 100%; display: block; overflow: hidden; height: 100vh; background-color: rgba(31,32,41,1); transform: translateX(-100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; z-index: 10; } body.about-on .about-section { transform: translateX(0); -webkit-transition-delay: 400ms; transition-delay: 400ms; } .about-close { position: absolute; top: 20px; right: 20px; width: 30px; display: block; overflow: hidden; height: 30px; -webkit-transition: all 200ms linear; transition: all 200ms linear; background-repeat: no-repeat; background-position: center; background-size: 36px 36px; background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg'); cursor: pointer; z-index: 11; } .about-close:hover { transform: rotate(90deg); } .section-center { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; } .about-section img { width: 100px; height: 100px; border-radius: 4px; display: block; margin: 0 auto; box-shadow: 0 0 20px rgba(0,0,0,0.15); } .about-section p span { font-family: 'Dancing Script', cursive; letter-spacing: 1px; color: #866BAF; font-size: 25px; font-weight: 400; } .contact-text { position: absolute; font-size: 17px; line-height: 20px; font-weight: 700; color: #fff; letter-spacing: 2px; top: 50%; right: 40px; cursor: pointer; z-index: 2; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; transform: translateY(-50%) rotate(180deg); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .contact-text:before { position: absolute; content: ''; top: 50%; left: -25px; height: 30px; width: 30px; margin-top: -15px; z-index: -1; background-repeat: no-repeat; background-position: center; background-size: 30px 30px; background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg'); opacity: 0.2; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .contact-text:hover:before { opacity: 1; left: -30px; } .contact-section { position: fixed; top: 0; left: 0; width: 100%; display: block; overflow: hidden; height: 100vh; background-color: rgba(31,32,41,1); transform: translateX(100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; z-index: 10; } body.contact-on .contact-section { transform: translateX(0); -webkit-transition-delay: 400ms; transition-delay: 400ms; } .contact-close { position: absolute; top: 20px; right: 20px; width: 30px; display: block; overflow: hidden; height: 30px; -webkit-transition: all 200ms linear; transition: all 200ms linear; background-repeat: no-repeat; background-position: center; background-size: 36px 36px; background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg'); cursor: pointer; z-index: 11; } .contact-close:hover { transform: rotate(90deg); } .contact-section a{ margin: 0 auto; font-size: 32px; font-weight: 900; letter-spacing: 1px; color: #fff; display: inline-block; } .contact-section .social a{ margin-left: 8px; margin-right: 8px; font-size: 15px; font-weight: 600; letter-spacing: 1px; color: #866BAF; } @media screen and (max-width: 580px){ .contact-section a{ font-size: 17px; } .contact-section .social a{ margin-left: 3px; margin-right: 3px; font-size: 13px; letter-spacing: 0; } } .travel-section, .wildlife-section, .nature-section { position: fixed; top: 100%; left: 0; padding: 100px 0; width: 100%; height: 100vh; display: block; overflow-x: hidden; overflow-y: auto; background-color: rgba(31,32,41,1); -webkit-transition: all 300ms linear; transition: all 300ms linear; z-index: 10; } .travel-close, .wildlife-close, .nature-close { position: absolute; top: 20px; right: 20px; width: 30px; display: block; overflow: hidden; height: 30px; -webkit-transition: all 200ms linear; transition: all 200ms linear; background-repeat: no-repeat; background-position: center; background-size: 36px 36px; background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg'); cursor: pointer; z-index: 11; } .travel-close:hover, .wildlife-close:hover, .nature-close:hover { transform: rotate(90deg); } body.travel-on .travel-section { top: 0; -webkit-transition-delay: 400ms; transition-delay: 400ms; } body.wildlife-on .wildlife-section { top: 0; -webkit-transition-delay: 400ms; transition-delay: 400ms; } body.nature-on .nature-section { top: 0; -webkit-transition-delay: 400ms; transition-delay: 400ms; } .travel-section img, .wildlife-section img, .nature-section img { margin-top: 30px; width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } .travel-section h3, .wildlife-section h3, .nature-section h3 { font-size: 44px; line-height: 1.3; font-weight: 700; letter-spacing: 1px; color: #fff; } .travel-section p, .wildlife-section p, .nature-section p { font-size: 14px; line-height: 1.7; letter-spacing: 1px; } .travel-section p span, .wildlife-section p span, .nature-section p span { font-size: 20px; line-height: 1.3; font-weight: 700; color: #866BAF; } /* #Link to page ================================================== */ .link-to-portfolio { position: fixed; bottom: 30px; right: 30px; z-index: 200; cursor: pointer; width: 50px; height: 50px; text-align: center; border-radius: 3px; background-position: center center; background-size: 65%; background-repeat: no-repeat; background-image: url('https://assets.codepen.io/1462889/fcy.png'); box-shadow: 0 0 0 2px rgba(255,255,255,.1); transition: opacity .2s, border-radius .2s, box-shadow .2s; transition-timing-function: ease-out; } .link-to-portfolio:hover { opacity: 0.8; border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,255,255,.1); } /* Please ❤ this if you like it! */ (function($) { "use strict"; //Page cursors document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) { t.style.left = n.clientX + "px", t.style.top = n.clientY + "px", e.style.left = n.clientX + "px", e.style.top = n.clientY + "px", i.style.left = n.clientX + "px", i.style.top = n.clientY + "px" }); var t = document.getElementById("cursor"), e = document.getElementById("cursor2"), i = document.getElementById("cursor3"); function n(t) { e.classList.add("hover"), i.classList.add("hover") } function s(t) { e.classList.remove("hover"), i.classList.remove("hover") } s(); for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) { o(r[a]) } function o(t) { t.addEventListener("mouseover", n), t.addEventListener("mouseout", s) } //About page $(".about-text").on('click', function () { $("body").addClass("about-on"); }); $(".about-close").on('click', function () { $("body").removeClass("about-on"); }); //Contact page $(".contact-text").on('click', function () { $("body").addClass("contact-on"); }); $(".contact-close").on('click', function () { $("body").removeClass("contact-on"); }); //Travel portfolio page $(".travel").on('click', function () { $("body").addClass("travel-on"); }); $(".travel-close").on('click', function () { $("body").removeClass("travel-on"); }); //Wildlife portfolio page $(".wildlife").on('click', function () { $("body").addClass("wildlife-on"); }); $(".wildlife-close").on('click', function () { $("body").removeClass("wildlife-on"); }); //Nature portfolio page $(".nature").on('click', function () { $("body").addClass("nature-on"); }); $(".nature-close").on('click', function () { $("body").removeClass("nature-on"); }); })(jQuery); Навигация по записям Password Generator Product page
English 
Russian