Last active
July 24, 2018 09:43
-
-
Save heyouli/75c32855653fb7ec50752c70f239e32b to your computer and use it in GitHub Desktop.
Julia Hofmann
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>Julia Hofmann</title> | |
| <!-- Bootstrap core CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <!-- Custom styles for this template go here --> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" | |
| integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" | |
| crossorigin=""/> | |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body data-spy="scroll" data-target=".navbar"> | |
| <!-- Start navbar --> | |
| <nav class="navbar navbar-inverse navbar-fixed-top"> | |
| <div class="container-fluid"> | |
| <!--start navbar-header --> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="#"> | |
| <img alt="Brand" src="img/Julia_Hofmann_Logo.png"> | |
| </a> | |
| </div> | |
| <!--end navbar-header --> | |
| <!--Start navbar-collapse --> | |
| <div class="navbar-collapse collapse"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li> | |
| <a href="#about">About</a> | |
| </li> | |
| <li class="dropdown"> | |
| <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Work<span class="caret"></span></a> | |
| <ul class="dropdown-menu"> | |
| <li><a href="#photography">Photography</a></li> | |
| <li><a href="#design">Design</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#faq">FAQ</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <!-- End navbar-collapse --> | |
| </div><!-- /container-fluid --> | |
| </nav> | |
| <!--End navbar--> | |
| <!-- Start Contactbox --> | |
| <div class="contactbox hidden-xs hidden-sm"> | |
| <a href="#contact">Contact<br>me!</a> | |
| </div><!-- /contactbox --> | |
| <!-- End Contactbox --> | |
| <!--Index page --> | |
| <div class="row-work anchor" id="index"> | |
| <!-- Start Large and middle Screen carousel --> | |
| <div class="indexcarousel_LM visible-md visible-lg hidden-xs hidden-sm indexportfolio"> | |
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | |
| <!-- Indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="1"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="3"></li> | |
| </ol> | |
| <!-- End Indicators --> | |
| <!-- Start Wrapper for slides --> | |
| <div class="carousel-inner" role="listbox"> | |
| <figure class="item active"> | |
| <img src="img/Julia_Hofmann.1.1.jpg" alt="JuliaHofmann_1" class="workshow"> | |
| <div class="carousel-caption"> | |
| <img src="img/Logo_claim.white.svg" alt="Home Logo"> | |
| </div><!-- /carousel-caption --> | |
| </figure><!-- /item active --> | |
| <div class="item"> | |
| <img src="img/Julia_Hofmann.2.1.jpg" alt="JuliaHofmann_2" class="workshow"> | |
| <div class="carousel-caption"> | |
| <img src="img/Logo_claim.white.svg" alt="Home Logo"> | |
| </div><!-- /carousel-caption --> | |
| </div><!-- /item --> | |
| <div class="item"> | |
| <img src="img/Julia_Hofmann.3.1.jpg" alt="JuliaHofmann_3" class="workshow"> | |
| <div class="carousel-caption"> | |
| <img src="img/Logo_claim.white.svg" alt="Home Logo"> | |
| </div><!-- /carousel-caption --> | |
| </div><!-- /item --> | |
| <div class="item"> | |
| <img src="img/Julia_Hofmann.4.1.jpg" alt="JuliaHofmann_4" class="workshow"> | |
| <div class="carousel-caption"> | |
| <img src="img/Logo_claim.white.svg" alt="Home Logo"> | |
| </div><!-- /carousel-caption --> | |
| </div><!-- /item --> | |
| <div class="item"> | |
| <img src="img/Julia_Hofmann.5.1.jpg" alt="JuliaHofmann_5" class="workshow"> | |
| <div class="carousel-caption"> | |
| <img src="img/Logo_claim.white.svg" alt="Home Logo"> | |
| </div><!-- /carousel-caption --> | |
| </div><!-- /item --> | |
| <div class="item"> | |
| <img src="img/Julia_Hofmann.6.1.jpg" alt="JuliaHofmann_6" class="workshow"> | |
| <div class="carousel-caption"> | |
| <img src="img/Logo_claim.white.svg" alt="Home Logo"> | |
| </div><!-- /carousel-caption --> | |
| </div><!-- /item --> | |
| </div><!-- /carousel inner --> | |
| <!-- End Wrapper for slides --> | |
| <!-- Controls --> | |
| <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a> | |
| <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> | |
| <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div><!-- /carousel-slide --> | |
| </div><!-- /indexcarousel_LM --> | |
| <!-- End Large and middle Screen carousel --> | |
| <!-- Start Small Screens single image --> | |
| <div class="indeximage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Julia_Hofmann.1.1.s.jpg" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /indeximage --> | |
| <!-- End Small Screens single image --> | |
| <!-- Start Goal Grid --> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-4 goals"> | |
| <h2 class="subhead">Portfolio Concept</h2> | |
| <p>Portfolio Concept: My Portfolio shows my work as a graphic designer, web designer and photographer. The Menu consists of"web design", "design", "photography", "about" and contact". There will be links to other portfolios on <a href ="https://www.pinterest.de/heyouli/" target="_blank" title="Please click here to have a look at my Pinterest site" id="item1" class="tooltiplink"> Pinterest</a> and Instagram as well as additional portfolio sites added during the course. The landing page will show one large image as a slideshow through my different areas of profession. Scroll down will show an overview of different projects divided by genres as well as the about me section. Click on the menu items will automatically scroll to the area. I want a simple, clean look, as minimalist and easy to navigate as possible.</p> | |
| <button type="button" class="btn btn-default nobackgroundbutton" data-toggle="tooltip" data-placement="right" title="Get to know more about my portfolio concept"> | |
| View details » | |
| </button> | |
| </div><!-- /col-xs-12 col-md-4 --> | |
| <div class="col-xs-12 col-md-4 goals"> | |
| <h2 class="subhead">Project Goals</h2> | |
| <p>Project Goals: I plan to stick to the deadlines set in the course progress for part time study. I can commit to around 15 hours each week.</p> | |
| <button type="button" class="btn btn-default nobackgroundbutton" data-toggle="tooltip" data-placement="right" title="Get to know more about my project goals"> | |
| View details » | |
| </button> | |
| </div><!-- /col-xs-12 col-md-4 --> | |
| <div class="col-xs-12 col-md-4 goals"> | |
| <h2 class="subhead">Course Goals</h2> | |
| <p>Course Goals: I am a graphic designer and photographer already. I want to widen my area of profession to web design. My ideal is to be a professional web designer for Germans in the Chinese market, since I am fluent in Chinese. I am working as a freelancer and I want to stay one, preferable working remotely. I hope to get advice on how to get more job opportunities.</p> | |
| <button type="button" class="btn btn-default nobackgroundbutton" data-toggle="tooltip" data-placement="right" title="Get to know more about my course goals"> | |
| View details » | |
| </button> | |
| </div><!-- /col-xs-12 col-md-4 --> | |
| </div><!-- /row --> | |
| </div> <!-- /container --> | |
| <!-- End Goal Grid --> | |
| <!-- Start Work Grid --> | |
| <div class="container"> | |
| <div class="row" id="work"> | |
| <div class="row" id="overlay"> | |
| </div> <!-- /overlay --> | |
| </div> <!-- /row --> | |
| </div> <!-- /container --> | |
| <!-- End Work Grid --> | |
| </div><!--/Index page --> | |
| <!-- End Index page --> | |
| <!--About page --> | |
| <div class="container anchor" id="about"> | |
| <div class="header"><!-- Start header --> | |
| <h1 class="headline">--- About Me ---</h1> | |
| </div><!-- end header --> | |
| <!-- About Grid --> | |
| <div class="grids"> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-4"> | |
| <img src="img/JuliaHofmann.jpg" class="aboutimg" alt="Julia Hofmann"> | |
| </div><!-- /col-xs-12 col-md-4 --> | |
| <div class="col-xs-12 col-md-4" id="aboutintro"> | |
| <p>I am a designer for web and print and an art photographer.</p> | |
| </div><!-- /col-xs-12 col-md-4 --> | |
| <div class="col-xs-12 col-md-4" id="aboutskills"> | |
| <div class="skilllist"> | |
| <p><span class="glyphicon glyphicon-glyphicon glyphicon glyphicon-grain" aria-hidden="true"></span> Graphic Designer</p> | |
| <p><span class="glyphicon glyphicon-glyphicon glyphicon glyphicon-ice-lolly-tasted" aria-hidden="true"></span> Web Designer</p> | |
| <p><span class="glyphicon glyphicon-glyphicon glyphicon glyphicon-plane" aria-hidden="true"></span> Photographer</p> | |
| <p><span class="glyphicon glyphicon-glyphicon glyphicon glyphicon-globe" aria-hidden="true"></span> Chinese speaker</p> | |
| </div> <!-- /skilllist --> | |
| </div><!-- /col-xs-12 col-md-4 --> | |
| </div><!-- /row --> | |
| </div><!-- /grids --> | |
| <!-- End About Grid --> | |
| <!-- About Text --> | |
| <div> | |
| <div class="aboutmetext"> | |
| <h2 class="subhead">More About Me</h2> | |
| <p>I am a photographer and designer for web and print living between Berlin and Beijing. I am involved in corporate and logo design. As well as printed matters like brochures, flyers posters. I'm currently studyin adesigning prin I love to create, something beautiful, something that makes me and other people happy...using my camera, my computer, a pen or concrete. <br>I'm designing printed matters, CI concepts as well as websites for small and middle-sized companies. And I'm also working on my own projects like Cafe Zarah and Fengyü. Besides that I'm an art photographer, telling stories about myself, society or the world with my camera.</p> | |
| </div><!-- /abouttext --> | |
| </div> | |
| <!-- End About Text --> | |
| </div> | |
| <!-- End About page --> | |
| <!--Photography page --> | |
| <div class="container anchor" id="photography"> | |
| <div class="header"> | |
| <h1 class="headline">--- Photography ---</h1> | |
| </div><!-- end header --> | |
| <!-- Toggltext --> | |
| <div class="toggltext"> | |
| <div class="panel-group"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#missingcode" href="#collapseOneText1"> | |
| Text on/off | |
| </a> | |
| </h4> | |
| </div><!-- end panel-heading --> | |
| <div id="collapseOneText1" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <p><strong>Blurred</strong><br>The series „Blurred” expresses feelings of unsteadiness and search for a meaning in life. A constant going forward, backward, worrying, being excited. Like a whole mess of blurriness. Lonely at times, overwhelming or beautiful at others.<br>Searching, trying, worrying, questioning.<br>Feeling confused, but full of ideas….<br>Life is slow, life is fast, life is blurred.<br>„Is this what my life should look like?<br>Is this the place I should live in?”<br>Growing into a state of not reacting to disturbances,<br>staying calm despite of uncertainties.<br>Believing that everything will develop like it is meant to and one is only supposed to<br>feel, sense, enjoy, give and be….</p> | |
| </div><!-- end panel-body --> | |
| </div><!-- end panel-collapse collapse --> | |
| </div><!-- end panel-default --> | |
| </div><!-- end panel-group --> | |
| </div> | |
| <!-- End toggltext --> | |
| <!-- Large Screen Portfolio --> | |
| <div class="large_screen_portfolio visible-md visible-lg hidden-xs hidden-sm"> | |
| <div id="myCarousel" class="carousel slide" data-ride="carousel"> | |
| <!-- Indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#myCarousel" data-slide-to="0" class="active"></li> | |
| <li data-target="#myCarousel" data-slide-to="1"></li> | |
| <li data-target="#myCarousel" data-slide-to="2"></li> | |
| <li data-target="#myCarousel" data-slide-to="3"></li> | |
| </ol> | |
| <!-- Wrapper for slides --> | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active"> | |
| <img src="img/Blurred_1.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_2.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_3.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_4.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_5.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_6.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_7.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_8.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_9.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_10.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_11.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_12.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| <div class="item"> | |
| <img src="img/Blurred_13.JPG" alt="Realities" width="460" height="345"> | |
| </div> | |
| </div><!-- /carousel-inner --> | |
| <!-- End Wrapper for slides --> | |
| <!-- Left and right controls --> | |
| <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a> | |
| <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> | |
| <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div><!-- /carousel slide--> | |
| </div> | |
| <!-- End Large Screen Portfolio--> | |
| <!-- Small Screens Portfolio --> | |
| <div class="small_screen_portfolio visible-xs visible-sm hidden-md hidden-lg"> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_1.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_2.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_3.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_4.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_5.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div><!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_6.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_7.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_8.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_9.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_10.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_11.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_12.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| <div class="Portfolioimage visible-xs visible-sm hidden-md hidden-lg"> | |
| <img src="img/Blurred_13.JPG" alt="JuliaHofmann_6" class="img-responsive workshow"> | |
| </div> <!-- /portfolioimage --> | |
| </div> | |
| <!-- End Small Screen Portfolio --> | |
| </div> | |
| <!-- End Photography page --> | |
| <!--Design page --> | |
| <div class="container anchor" id="design"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <h1 class="headline">--- Design ---</h1> | |
| </div> | |
| <!-- End Header --> | |
| <!-- Work Grid --> | |
| <div class="grids"> | |
| <div class="row workgrid"> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/work.design.8.jpg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/work.design.3.jpg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/work.design.2.jpg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/work.design.4.svg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/Work.design.10.jpg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/Work.design.7.jpg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/Work.design.6.jpg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="img/Work.design.1.jpg" class="img-responsive" alt="Work Portfolio"> | |
| </div><!-- /col-xs-12 col-sm-6 col-md-4 col-lg-3 --> | |
| </div> <!-- /row workgrid --> | |
| </div><!-- /grids --> | |
| <!-- End Work Grid --> | |
| </div> | |
| <!-- End Design page --> | |
| <!--FAQ page --> | |
| <div class="container anchor" id="faq"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <h1 class="headline">--- FAQ ---</h1> | |
| </div> | |
| <!-- End Header --> | |
| <!-- Learn More Button Screen--> | |
| <div class="learnmorebutton"> | |
| <h2 class="subhead">Learn More</h2> | |
| <div class="modalbutton"> | |
| <button class="btn btn-light cvbuttondesktop" data-toggle="modal" data-target=".bd-example-modal-lg">Read my CV</button> | |
| <button class="btn btn-light cvbuttonmobile" onclick="window.open('img/CV_JuliaHofmann_en.pdf', '_blank')">Download my CV</button> | |
| </div><!-- end modalbutton --> | |
| <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| <h4 class="modal-title" id="myModalLabel">My CV</h4> | |
| </div><!-- / modal-header --> | |
| <div class="modal-body"> | |
| <embed id="modalembed" src="img/CV_JuliaHofmann_en.pdf"> | |
| </div><!-- / modal-body --> | |
| </div><!-- / modal-content --> | |
| </div><!-- / modal-dialog modal-lg --> | |
| </div><!-- / modal fade bd-example-modal-lg --> | |
| </div><!-- / learnmorebutton --> | |
| <!-- End Learn More Button Screen--> | |
| <!-- FAQ Collaps Panel --> | |
| <div class="faq_collaps_panel"> | |
| <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading" role="tab" id="headingOne"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> | |
| <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> Who are your clients? | |
| </a> | |
| </h4> | |
| </div><!-- /panel-heading --> | |
| <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> | |
| <div class="panel-body"> | |
| <p>Over the last years I worked with a variety of clients – larger companies as well as start ups and restaurants.</p> | |
| </div><!--/panel-body--> | |
| </div><!--/panel-collapse collapse in --> | |
| </div><!--/panel panel-default --> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading" role="tab" id="headingTwo"> | |
| <h4 class="panel-title"> | |
| <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> | |
| <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> Why did you become a designer and photographer? | |
| </a> | |
| </h4> | |
| </div><!--/panel-heading --> | |
| <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> | |
| <div class="panel-body"> | |
| <p>Beautiful things that I created always give me a tingle of happiness. I want to share this happiness with my clients.</p> | |
| </div><!--/panel-body --> | |
| </div><!-- /panel-collapse collapse --> | |
| </div><!-- /panel panel-default --> | |
| <div class="panel panel-default" role="tab" id="headingThree"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> | |
| <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> What are you doing? | |
| </a> | |
| </h4> | |
| </div><!-- /panel-heading --> | |
| <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> | |
| <div class="panel-body"> | |
| <p>I create Logos, advertisement material, menus for restaurant, website. I am also taking photos of products, food as well as portraits for companies.</p> | |
| </div><!--/panel-body --> | |
| </div><!--/panel-collapse collapse --> | |
| </div><!--/panel panel-default --> | |
| <div class="panel panel-default" role="tab" id="headingFour"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> | |
| <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> What is your working language? | |
| </a> | |
| </h4> | |
| </div><!--/panel-heading --> | |
| <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> | |
| <div class="panel-body"> | |
| <p>I do speak German, English and Chinese. I worked on many bi-and trilingual projects (English/German/Chinese).</p> | |
| </div><!--/panel-body --> | |
| </div><!--/panel-collapse collapse --> | |
| </div><!--/panel panel-default --> | |
| <div class="panel panel-default" role="tab" id="headingFive"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFour"> | |
| <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> What do you enjoy? | |
| </a> | |
| </h4> | |
| </div><!--/panel-heading --> | |
| <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> | |
| <div class="panel-body"> | |
| <p>I love travelling and explore different cultures. I love good coffee and fine Asian quisine. I am an Ashtanga Yoga practitioner</p> | |
| </div><!--/panel-body --> | |
| </div><!--/panel-collapse collapse --> | |
| </div><!--/panel panel-default --> | |
| </div><!-- /panel-group --> | |
| </div><!-- /faq_collaps_panel --> | |
| </div> | |
| <!-- End FAQ page --> | |
| <!-- Contact page --> | |
| <div class="row-work anchor inner" id="contact"> | |
| <div class="contactinfo"> | |
| <!-- Contact Text --> | |
| <div class="contacttext"> | |
| <p id="greetings"> <strong>I would love to hear from you! <span class="glyphicon glyphicon-glyphicon glyphicon-heart" aria-hidden="true"></span></strong><br>If you need a quote, have a question or just want to say hello, please feel free to drop me a line.</p> | |
| </div><!-- end contacttext--> | |
| <!-- End Contact Text --> | |
| <!-- Contact Grid --> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <!-- Column 1 --> | |
| <div class="col-lg-3 col-sm-12 phonemail"> | |
| <!-- adress, email --> | |
| <div class="centermail"> | |
| <p><span class="glyphicon glyphicon-glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Berlin  +49-176-83 51 74 16</p> | |
| <p><span class="glyphicon glyphicon-glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Beijing +86-185 00 30 14 74</p> | |
| <a href="mailto:julia@julia-hofmann.com"><p><span class="glyphicon glyphicon-glyphicon glyphicon-envelope" aria-hidden="true"></span> julia@julia-hofmann.com</p></a> | |
| </div><!-- end adress, email --> | |
| <!-- social media --> | |
| <div class="socialmedia"> | |
| <table class="table socialmedia"> | |
| <tr> | |
| <td><a class="linkedin socialmedia_icon" href="https://www.linkedin.com/in/julia-hofmann-62842617/" target="_blank"><img alt="Social Media" src="img/linkedin.svg" class="img-responsive"></a></td> | |
| <td><a class="instagram socialmedia_icon" href="https://www.instagram.com/juliahofmann_photography/" target="_blank"><img alt="Social Media" src="img/instagram.svg" class="img-responsive"></a></td> | |
| <td><a class="pinterest socialmedia_icon" href="https://www.pinterest.de/heyouli/" target="_blank"><img alt="Social Media" src="img/pinterest.svg" class="img-responsive"></a></td> | |
| <td><a class="github socialmedia_icon" href="https://github.com/heyouli" target="_blank"><img alt="Social Media" src="img/github.svg" class="img-responsive"></a></td> | |
| </tr> | |
| </table> | |
| </div><!-- end social media --> | |
| </div><!-- /col-lg-3 col-sm-12 phonemail--> | |
| <!-- End Column 1 --> | |
| <!-- Column 2 --> | |
| <div class="col-lg-6 col-sm-12"> | |
| <form class="centermail"> | |
| <div class="form-group form_row_one"> | |
| <label for="Name" class="contact_label">Name*</label> | |
| <input type="text" id="Name" placeholder="Your name" class="form-control" > | |
| </div><!-- end form-group Name--> | |
| <div class="form-group form_row_one"> | |
| <label for="Phone" class="contact_label">Phone</label> | |
| <input type="tel" id="Phone" placeholder="Your phone number" class="form-control"> | |
| </div><!-- end form-group Phone--> | |
| <div class="form-group"> | |
| <label for="Email" class="contact_label">Email*</label> | |
| <input type="email" id="Email" placeholder="Your email" class="form-control email_box" > | |
| </div><!-- end form-group Email--> | |
| <label for="message" class="contact_label">Message*</label> | |
| <textarea style="resize:none" cols="40" rows="5" placeholder="Your message" id="message" class="message_box form-control"></textarea> | |
| <p id=visible-comment></p> | |
| <p id=char_count></p> | |
| <p id=visible-redemail></p> | |
| <p id=visible-redmessage></p> | |
| <button type="submit" class="btn btn-light messagebutton" id="contact_button">Submit</button> | |
| </form> | |
| </div><!-- end form-group Message--> | |
| <!-- End Column 2 --> | |
| <!-- Column 3 --> | |
| <div class="col-lg-3 col-sm-12" id="mapid"> | |
| </div><!-- end Map--> | |
| <!-- End Column 3 --> | |
| </div><!-- /row --> | |
| </div><!-- /container-fluid--> | |
| <!-- End Contact Grid --> | |
| <!-- Skyline --> | |
| <div class="skyline"> | |
| <img src="img/SkylineBerlinBeijing.svg" class="img-responsive" alt="SkylineBerlinBeijing"> | |
| </div><!-- / skyline --> | |
| <!-- End Skyline --> | |
| </div><!-- / contactinfo --> | |
| </div><!-- /contact-page --> | |
| <!-- End Contact page --> | |
| <!-- /Video page --> | |
| <div class="container"> | |
| <div class="videosizer"> | |
| <div class="embed-responsive embed-responsive-16by9"> | |
| <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0V5BwTrQOCs" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |
| </div><!-- /embed-responsive --> | |
| </div><!-- /videosizer --> | |
| <!-- /Video in modal page --> | |
| <div class="row videomodal"> | |
| <h3 id="testvideo"> | |
| Watch the above video in a modal window | |
| </h3> | |
| <div id="modalvideobutton"> | |
| <button class="btn btn-light" data-toggle="modal" data-target="#modalYT">Watch video</button> | |
| </div><!-- /modalvideobutton --> | |
| <div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
| </div><!-- /modal-header --> | |
| <div class="modal-body"> | |
| <div class="embed-responsive embed-responsive-16by9"> | |
| <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/0V5BwTrQOCs" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |
| </div><!-- /embed-responsive embed-responsive-16by9 --> | |
| </div><!-- /modal-body --> | |
| </div><!-- /modal-content --> | |
| </div><!-- /modal-dialog modal-lg --> | |
| </div><!-- /modal fade --> | |
| </div><!-- /video in modal page --> | |
| </div><!-- /video page --> | |
| <!-- End Video page --> | |
| <!-- Footer page --> | |
| <footer id="footercontent"> | |
| <div id="copyright"> | |
| <a href="#contact">©Julia Hofmann 2018</a> | |
| </div><!-- /copyright --> | |
| <div id="socialmedialike"> | |
| <a href="https://twitter.com/JuliaDesign?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-lang="en" data-show-count="false">Follow @JuliaDesign</a> | |
| </div><!-- /socialmedialike --> | |
| <div class="fb-like"> | |
| <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FJulia-Hofmann-Design-Photography-1667450366636833%2F%3Fmodal%3Dadmin_todo_tour&width=150&layout=button&action=like&size=small&show_faces=true&share=true&height=65&appId" width="150" height="65" style="border:none;overflow:hidden" allow="encrypted-media"></iframe> | |
| </div><!-- /fb-like --> | |
| </footer> | |
| <!-- End Footer page --> | |
| <!-- ============================= --> | |
| <!-- All your JavaScript comes now --> | |
| <!-- ============================= --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <!-- Bootstrap core JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <!-- Can place script tags with JavaScript files here --> | |
| <!-- Make sure you put this AFTER Leaflet's CSS --> | |
| <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" | |
| integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" | |
| crossorigin=""></script> | |
| <script src="js/jquery.stellar.min.js"></script> | |
| <script src="js/work.js"></script> | |
| <script src="js/scripts.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); | |
| // Map | |
| var mymap = L.map('mapid').setView([52.540296, 13.415742], 13); | |
| var circle = L.circle([52.540296, 13.415742], { | |
| color: 'red', | |
| fillColor: '#f03', | |
| fillOpacity: 0.5, | |
| radius: 100 | |
| }).addTo(mymap); | |
| var popup = L.popup() | |
| .setLatLng([52.540296, 13.415742]) | |
| .setContent("Julia Hofmann Design") | |
| .openOn(mymap); | |
| L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { | |
| attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| maxZoom: 15, | |
| id: 'mapbox.streets', | |
| accessToken: 'pk.eyJ1IjoiaGV5b3VsaSIsImEiOiJjamplMmVtb2cwMDV5M3FvNDJqbTQ0djhzIn0.z8Av3z_YZvzOe8KVW1bhRA' | |
| }).addTo(mymap); | |
| $(document).ready(function(){ | |
| // Smooth scrolling | |
| var $root = $('html, body'); | |
| $('.navbar-nav a').click(function() { | |
| var href = $.attr(this, 'href'); | |
| if (href != undefined && href != '#') { | |
| $root.animate( { | |
| scrollTop: $(href).offset().top | |
| }, 500, function () { | |
| window.location.hash = href; | |
| }); | |
| return false; | |
| } | |
| }); | |
| //Tooltips | |
| $(function () { | |
| $("#item1").tooltip(); | |
| }); | |
| $(function () { | |
| $('[data-toggle="tooltip"]').tooltip(); | |
| }); | |
| //Navbar | |
| $('.navbar-nav a').on('click', function () { | |
| $(".navbar-toggle").click() | |
| }); | |
| //Submit | |
| $('#contact_button').on('click', function() { | |
| var comment = $(".message_box").val(); | |
| var comment = $(".email_box").val(); | |
| if ($(".message_box").val()==="") { | |
| $(".message_box").css("border", "1px solid red"); | |
| $('#visible-redmessage').html("Don't forget to write me a message!"); | |
| } | |
| if ($(".email_box").val()==="") { | |
| $(".email_box").css("border", "1px solid red"); | |
| $('#visible-redemail').html("Don't forget your email!"); | |
| } | |
| else if ($(".message_box").val()==="") { | |
| $(".message_box").css("border", "1px solid red"); | |
| $('#visible-redmessage').html("Don't forget to write me a message!"); | |
| } | |
| else { | |
| $('#visible-comment').html("Thank you for your message!"); | |
| $('.message_box').hide("duration"); | |
| $('.form-control').hide("duration"); | |
| $('.contact_label').hide("duration"); | |
| $("#char_count").hide("duration"); | |
| $('#visible-redmessage').hide("duration"); | |
| $('#visible-redemail').hide("duration"); | |
| $('#contact_button').hide("duration"); | |
| } | |
| return false; | |
| }); | |
| }); | |
| // work section | |
| for(var i = 0; i < works.length; ++i ) { | |
| $("#work").append("\ | |
| <div class='col-xs-12 col-sm-6 col-md-4 col-lg-3'>\ | |
| <a href='" + works[i].url + "' class='work-img'>\ | |
| <img class='img-responsive' src='" + works[i].pic + "'>\ | |
| <span class='info'><p class='proj-title'>Title: <br> " + works[i].title + "</p></span>\ | |
| </a>\ | |
| </div>\ | |
| "); | |
| }; | |
| $(".work-img").mouseenter(function(){ | |
| $(".info", this).show("duration"); | |
| }).mouseleave(function(){ | |
| $(".info", this).hide("duration"); | |
| }); | |
| //Letter count | |
| $(".message_box").on("keyup", function() { | |
| var name = "string"; | |
| var charCount = $(".message_box").val().length; //here we set the length of the content of the textarea to a variable | |
| $("#char_count").html(charCount); //here we show a running character count to the user | |
| if(charCount > 50) { | |
| $("#char_count").css("color", "red"); // need to turn character count red | |
| } | |
| else { | |
| $("#char_count").css("color", "black"); // need it to be black | |
| }; | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ============ General Settings ============ */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: #d9dbde; | |
| position: relative; | |
| font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; | |
| color: black; | |
| } | |
| .container { | |
| width: 95%; | |
| margin: 0 auto; | |
| margin-bottom: 1%; | |
| margin-top: 1%; | |
| } | |
| .anchor { | |
| padding-top: 67.64px; | |
| } | |
| /* ============ Typography ============ */ | |
| p { | |
| font-size: 1.2em; | |
| font-weight: 300; | |
| line-height: 1.7em; | |
| letter-spacing: 0.01em; | |
| } | |
| a { | |
| color: black; | |
| font-weight: 300; | |
| } | |
| a:visited { | |
| color: black; | |
| font-weight: 300; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| a:active { | |
| color: black; | |
| font-weight: 300; | |
| } | |
| h2.subhead { | |
| text-transform: uppercase; | |
| } | |
| h1.headline { | |
| margin-bottom: 5%; | |
| padding-top: 2%; | |
| text-align: center; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| font-weight: 300; | |
| } | |
| /*== Media Queries ==*/ | |
| @media (max-width: 450px) { | |
| h1.headline { | |
| font-size: 1.8em; | |
| letter-spacing: 0.03em; | |
| } | |
| } | |
| /* ============ Navigation ============ */ | |
| .navbar { | |
| padding-bottom: 0.5%; | |
| padding-top: 0.5%; | |
| transition: all 0.5s; | |
| background-color: white; | |
| border-color: transparent; | |
| -webkit-box-shadow: 1px 1px 1px grey; | |
| -moz-box-shadow: 1px 1px 1px grey; | |
| box-shadow: 1px 1px 1px grey; | |
| } | |
| .navbar-brand { | |
| padding: 0; | |
| margin-bottom: 1%; | |
| } | |
| .navbar-brand >img { | |
| height: 100%; | |
| float: left; | |
| padding-left: 10%; | |
| } | |
| .icon-bar { | |
| background-color: black !important; | |
| } | |
| button.navbar-toggle { | |
| border: 0; | |
| } | |
| button.navbar-toggle:hover { | |
| background: transparent !important; | |
| } | |
| button.navbar-toggle:focus { | |
| background: transparent !important; | |
| } | |
| .navbar a, .dropdown-menu a, .dropdown-menu>li>a { | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| font-size: 1.2em; | |
| font-weight: 300; | |
| color: black !important; | |
| background-color: transparent !important; | |
| text-decoration: none; | |
| } | |
| .navbar a:hover, .dropdown-menu a:hover, .dropdown-menu>li>a:hover { | |
| font-weight: 500; | |
| } | |
| .navbar-nav>.active>a, .dropdown-menu>.active>a, .dropdown-menu>.active>a { | |
| font-weight: 500; | |
| background-color: transparent; | |
| text-decoration: underline; | |
| } | |
| /* ============ Buttons ============ */ | |
| .btn-light { | |
| font-weight: 300; | |
| font-size: 1.2em; | |
| margin-top: 2%; | |
| } | |
| .nobackgroundbutton { | |
| border-color: transparent; | |
| margin-bottom: 2%; | |
| font-size: 1.2em; | |
| background-color: transparent; | |
| padding-left: 0; | |
| color: black; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| } | |
| .nobackgroundbutton:hover { | |
| border-color: transparent !important; | |
| background-color: transparent !important; | |
| } | |
| .nobackgroundbutton:active { | |
| border-color: transparent !important; | |
| background-color: transparent !important; | |
| } | |
| /* ============ Image sliders ============ */ | |
| .carousel-caption { | |
| margin-bottom: 25%; | |
| height: auto; | |
| width: 35%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .carousel-indicators { | |
| display: none; | |
| } | |
| .carousel-control.left { | |
| background-image: none; | |
| } | |
| .carousel-control.right { | |
| background-image: none; | |
| } | |
| .carousel-control { | |
| top: 50%; | |
| bottom: 50%; | |
| font-size: 1em; | |
| text-shadow: none; | |
| color: black; | |
| } | |
| .carousel-indicators li { | |
| border: 0.1em solid black; | |
| } | |
| .carousel-indicators .active { | |
| background-color: black; | |
| } | |
| /* ============ Tooltips ============ */ | |
| .tooltip-inner { | |
| color: black !important; | |
| background: white !important; | |
| font-size: 2em; | |
| font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; | |
| font-weight: 300; | |
| text-align: center; | |
| } | |
| .tooltip.top .tooltip-arrow { | |
| border-top: 5px solid white; | |
| } | |
| .tooltip.left .tooltip-arrow { | |
| border-left: 5px solid white; | |
| } | |
| .tooltip.right .tooltip-arrow { | |
| border-right: 5px solid white; | |
| } | |
| .tooltip.bottom .tooltip-arrow { | |
| border-bottom: 5px solid white; | |
| } | |
| .tooltiplink { | |
| color: black; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| } | |
| /* ============ Contact box side ============ */ | |
| .contactbox { | |
| position: fixed; | |
| bottom: 15%; | |
| right: 0; | |
| width: 6%; | |
| height: 12%; | |
| text-align: center; | |
| padding-top: 2%; | |
| padding-bottom: 2%; | |
| background-color: grey; | |
| border-bottom-left-radius: 3em; | |
| border-top-left-radius: 3em; | |
| border-bottom-right-radius: 0; | |
| border-top-right-radius: 0; | |
| z-index: 1; | |
| } | |
| .contactbox a { | |
| font-size: 1.1em; | |
| color: white; | |
| text-align: center; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| } | |
| .contactbox a:hover { | |
| color: #d9dbde; | |
| text-decoration: none; | |
| } | |
| /* ============ Index page ============ */ | |
| #indeximage { | |
| display: inline; | |
| width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /*== Media Queries ==*/ | |
| @media (max-width: 892px) { | |
| .goals { | |
| margin-bottom: 5%; | |
| text-align: justify; | |
| } | |
| } | |
| /* ============ About page ============ */ | |
| .aboutimg { | |
| width: 100%; | |
| margin-bottom: 5%; | |
| } | |
| #aboutintro { | |
| font-size: 2.8em; | |
| text-align: center; | |
| margin-bottom: 5%; | |
| } | |
| #aboutskills { | |
| font-size: 1.5em; | |
| line-height: 200%; | |
| letter-spacing: 0.05em; | |
| background-color: transparent; | |
| padding-bottom: 1%; | |
| } | |
| .skilllist { | |
| display: table; | |
| margin: auto; | |
| } | |
| .work-img { | |
| display: block; /* needed to center the element with margin */ | |
| margin: auto; /* center the image inside the column if it's smaller */ | |
| max-width: 800px; /* needs to be set to the width of your image files if they are relatively small */ | |
| position: relative; /* is needed for .info position: absolute to work */ | |
| padding-top: 8%; | |
| } | |
| .info { | |
| position: absolute; | |
| font-size: 2em; | |
| color: grey; | |
| text-align: center; | |
| text-transform:uppercase; | |
| font-weight:400; | |
| letter-spacing:0.2em; | |
| line-height:1.6; | |
| display: none; | |
| background: rgba(255,255,255, 0.8); ; | |
| top: 7%; | |
| width: 100%; | |
| height: 93%; | |
| } | |
| .proj-title { | |
| font-weight:100; | |
| position: relative; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| padding: 5%; | |
| } | |
| /* ============ Photography page ============ */ | |
| #photography .carousel-inner > .item > img, | |
| #photography .carousel-inner > .item > a > img { | |
| width: 70%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .toggltext { | |
| margin-top: 5%; | |
| margin-left: 0%; | |
| padding-bottom: 5%; | |
| background-color: transparent; | |
| } | |
| #accordion .panel-group { | |
| float: left; | |
| } | |
| #photography .panel { | |
| border: none; | |
| box-shadow: none; | |
| margin-left: 3%; | |
| float: left; | |
| } | |
| #photography .panel-body { | |
| background-color: #d9dbde; | |
| border-style: none; | |
| padding-top: 3%; | |
| text-indent: 0; | |
| } | |
| #photography .header h1 { | |
| margin-bottom: 0.5%; | |
| } | |
| .workshow { | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-bottom: 3%; | |
| } | |
| /* ============ FAQ page ============ */ | |
| .modalbutton { | |
| float: right; | |
| display: inline; | |
| } | |
| .learnmorebutton | |
| .subhead { | |
| display: inline; | |
| } | |
| #modalembed { | |
| height: 500px; | |
| width: 100%; | |
| padding: 10px; | |
| } | |
| .panel-group { | |
| background-color: #d9dbde; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 10%; | |
| margin-bottom: 10%; | |
| } | |
| .panel-default>.panel-heading { | |
| background-color: #d9dbde; | |
| } | |
| #faq .panel { | |
| border: none; | |
| box-shadow: none; | |
| background-color: #d9dbde; | |
| } | |
| #faq .panel-body { | |
| padding-top: 1%; | |
| margin-left: 0; | |
| text-indent: 0; | |
| background-color: #d9dbde; | |
| border-style: none; | |
| } | |
| #faq .panel-body p { | |
| background-color: #bdbec2; | |
| padding: 3%; | |
| } | |
| #faq .panel-title a { | |
| font-size: 1.2em; | |
| font-weight: 400; | |
| color: #b70e0c; | |
| background-color: #d9dbde; | |
| } | |
| /*== Media Queries ==*/ | |
| @media only screen and (min-width: 768px) { | |
| /* For desktop: */ | |
| #faq .panel-group { | |
| width: 70%; | |
| } | |
| .cvbuttonmobile { | |
| visibility: hidden; | |
| float: right; | |
| position: absolute; | |
| } | |
| } | |
| @media only screen and (max-width: 768px) { | |
| .cvbuttondesktop { | |
| visibility: hidden; | |
| float: right; | |
| position: absolute; | |
| } | |
| } | |
| /* ============ Contact page ============ */ | |
| #contact { | |
| margin-bottom: 3%; | |
| padding-left: 3%; | |
| padding-right: 3%; | |
| height: 120%; | |
| background-image: url("../img/contact.1.jpg"); | |
| background-attachment: fixed; | |
| background-size: cover; | |
| height: 80%; | |
| } | |
| .contactinfo { | |
| background-color: white; | |
| width: 90%; | |
| padding-top: 5%; | |
| padding-left: 2%; | |
| padding-right: 2%; | |
| padding-bottom: 5%; | |
| margin-top: 5%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #greetings { | |
| font-size: 2em; | |
| } | |
| .form-control { | |
| color: #555; | |
| background-color: #e8e8e8; | |
| border: none; | |
| border-radius: 4px; | |
| font-weight: 300; | |
| } | |
| .form_row_one { | |
| width: 49.5%; | |
| display: inline-block; | |
| } | |
| label { | |
| margin-bottom: 1%; | |
| margin-top: 3%; | |
| font-weight: 300; | |
| font-size: 1.2em; | |
| } | |
| .messagebutton{ | |
| border-color: #ccc; | |
| } | |
| .centermail { | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 8%; | |
| float: none !important; | |
| } | |
| .contacttext p { | |
| line-height: 150%; | |
| text-align: center; | |
| font-size: 1.2em; | |
| } | |
| .phonemail { | |
| margin-top: 3%; | |
| } | |
| .phonemail p { | |
| text-align: left; | |
| font-size: 1.2em; | |
| } | |
| #mapid { | |
| height: 300px; | |
| width: 190px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 5%; | |
| float: none !important; | |
| } | |
| .phonemail table tbody tr td { | |
| border-top: 0px; | |
| padding-left: 0 !important; | |
| display: inline-block; | |
| } | |
| .socialmedia img { | |
| width: 30px; | |
| height:30px; | |
| } | |
| .glyphicon-heart:hover { | |
| color: red; | |
| transition: color 600ms; | |
| -webkit-transition: color 600ms; | |
| } | |
| .glyphicon-phone-alt:hover { | |
| color: grey; | |
| transition: color 600ms; | |
| -webkit-transition: color 600ms; | |
| } | |
| .glyphicon-envelope:hover { | |
| color: grey; | |
| transition: color 600ms; | |
| -webkit-transition: color 600ms; | |
| } | |
| #visible-redemail, | |
| #visible-redmessage { | |
| color: red; | |
| } | |
| /*== Media Queries ==*/ | |
| @media only screen and (max-width: 850px) { | |
| .contacttext p { | |
| text-align: center; | |
| line-height: 150%; | |
| } | |
| .form_row_one { | |
| width: 100%; | |
| } | |
| } | |
| @media only screen and (max-width: 1199px) { | |
| #mapid { | |
| height: 300px; | |
| width: 98%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 10px; | |
| margin-bottom: 3%; | |
| float: none !important; | |
| } | |
| .messagebutton { | |
| margin-bottom: 3%; | |
| } | |
| .centermail p { | |
| text-align: center; | |
| } | |
| .socialmedia { | |
| display: flex; | |
| justify-content: center; | |
| align-content: center; | |
| align-items: center; | |
| margin-top: 1%; | |
| } | |
| .phonemail { | |
| margin-top: 0%; | |
| } | |
| .centermail { | |
| margin-top: 5%; | |
| } | |
| } | |
| /* ============ Video ============ */ | |
| .videosizer { | |
| width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #modalvideobutton { | |
| margin-left: 48%; | |
| margin-right: 48%; | |
| } | |
| #testvideo { | |
| text-align: center; | |
| margin-top: 3%; | |
| } | |
| /*== Media Queries ==*/ | |
| @media only screen and (max-width: 850px) { | |
| .videosizer { | |
| width: 80%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } | |
| /* ============ Footer ============ */ | |
| #footercontent { | |
| background-color: white; | |
| margin-top: 3%; | |
| padding-top: 1%; | |
| display: flex; | |
| } | |
| #copyright { | |
| float: left; | |
| padding-left: 3%; | |
| padding-right: 3%; | |
| } | |
| #socialmedialike { | |
| padding-right: 1%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var works = [ | |
| { | |
| title: "A long way", | |
| pic: "img/Work.photo.1.jpg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Blurred", | |
| pic: "img/Work.photo.2.jpg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Realities", | |
| pic: "img/Work.photo.3.jpg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Between everyday lifes", | |
| pic: "img/Work.photo.4.jpg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Realities", | |
| pic: "img/Work.photo.5.jpg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Zarah", | |
| pic: "img/Work.design.1.svg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Fengyü", | |
| pic: "img/Work.design.2.jpg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Inter Musiclae", | |
| pic: "img/Work.design.3.jpg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Heilkunst", | |
| pic: "img/Work.design.4.svg", | |
| url: "http://julia-hofmann.com" | |
| }, | |
| { | |
| title: "Staatliches Kombinat 718", | |
| pic: "img/Work.design.5.jpg", | |
| url: "http://julia-hofmann.com" | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment