Magnetic – Free HTML5 Responsive Photography Website Template

Responsive Photography Website Template

This freebie is the HTML5/CSS3 version of last week free PSD template called magnetic, it’s an amazing responsive HTML5 template, it can be used by photographers to showcase their beautiful photos, or by creatives such as web designers, graphic designer, illustrators…etc.

The Magnetic Responsive Photography Website Template, comes with three fully-responsive pages, portfolio, contact page and a clean, modern inner page.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.

  • ngothanhtai

    Thank you, I will learn from this template to be a HTML5, CSS and Javascript developer 😉

    • http://Pixelhint.com/ Pixelhint

      Thank you @ngothanhtai:disqus for your comment, we are working on an amazing series of tutorials, stay tuned :)

  • stealtheh

    Thank you ! <3 this template.
    Concerning the main image on the inner page,
    how do I use the prev and next nav as a type of image slider so I can add more images?

    • http://Pixelhint.com/ Pixelhint

      You are welcome, the next and previous arrows are only used to navigate the portfolio items.

    • guest

      Yes, how do you switch this header image for multiple unique “inner” pages? The top image is defined nicely in the css, how do you maintain those CSS defines but switch the image? Please comment? Thank you

      • http://Pixelhint.com/ Pixelhint

        You need to create an HTML file for each image you can follow the following steps, lets say for example you want to create an additional inner page, first create an HTML file with the same code as “inner.html” and name it “inner2.html” inside it you find this class class=”top” change it to this class class=”top image2″, then open the “main.css” file and add the code below :

        .image2{
        background: url(‘../img/image2.jpg’) no-repeat !important;
        }

        Follow the same steps to create more inner pages.

        • Dirk

          Hey guys,

          I followed the instructions and it works – BUT the image doesn’t scale anymore on resizing the browser-window. It only rescales, when the 1100px-mark is reached, but it doesn’t adapt to screen-width anymore, when scaling e.g. from 1320px to 1400px.

          It’s as if the css from the .top is not transferred to .home

          My css:
          .top{
          width: 100%;
          height: 350px;
          overflow: hidden;
          display: block;
          position: relative;
          background-size: cover;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-position: 50% 50%;
          }
          .home{
          background: url(‘../img/home.jpg’) no-repeat;
          }

          My html:

          • http://Pixelhint.com/ Pixelhint

            Change .home{code} with the code below

            .home{
            background: url(‘../img/home.jpg’) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-position: 50% 50%;
            }

            And remove the code below from .top{}

            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-position: 50% 50%;

          • Dirk

            Works, thanks.

            Since I am rewriting the page into php, this gave me the right idea. I kicked out .home and only left .top.

            In the php-file I added:
            <section class="top" style="
            background: url('../img/.jpg’) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-position: 50% 50%;”>

            And it works great. The background will be selected by the php (index.php?page=home -> background: url(‘../img/home.jpg)

          • http://Pixelhint.com/ Pixelhint

            Great, it’s not recommended to use inline CSS, but you can do something like this :

            And add the code to your CSS file

            .top{
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-position: 50% 50%;
            }

          • Dirk

            Ah, thanks. That’s even better. I myself am some sort of code-butcher. I can hack and I can edit, but I am not really gifted in writing refined code :-/
            It’s nice, that there are people like you, who know what they are doing 😉
            I was wondering, how you guys make your money? Everything on this site seems to be free? And no official donation-button? Just being curious…

          • http://Pixelhint.com/ Pixelhint

            Thank you @Liesenfeld:disqus, We make no money from the site, but we are planning to release premium templates, by the way we are currently making our first premium template, and we will release it soon (probably next month).

          • Dirk

            I don’t know, if you plan to release php-Versions? I could send you my php-file, that works pretty good and without SQL. Maybe it will give you some ideas about what to add to premium?

          • http://Pixelhint.com/ Pixelhint

            Thank you, we are working on a different template not this one, and we will only release the HTML/CSS and later the wordpress version.

          • Dirk

            O.K. I wish you the best of luck :-)

  • Gabriel

    Thank you for this , is exactly what i was looking for…im learning some HTML5 CSS3 and Js to build up my portfolio!!

    • http://Pixelhint.com/ Pixelhint

      Welcome @Gabriel, don’t forget to subscribe to our mailing list & follow us on Facebook & Twitter

  • Steven

    thank you so much! this template is gorgeous!
    But I have a problem with it in firefox. somewehere between the 990px and 1100px it shows the collapsed menu and a white page!
    [link]
    in chrome it works fine!

    is maybe something in the media queries?
    thanks in advance!

    • http://Pixelhint.com/ Pixelhint

      Thank you @Steven for letting us know, we are working to fix the issue.

    • http://Pixelhint.com/ Pixelhint

      @Steven we just fixed the issue and everything is working now.

      • Steven

        thank you.

  • Inspired!

    Hi,

    This is a lovely responsive site. A few questions which I would be grateful if someone can help?

    1. This is my first time using a template/attempting a responsive site. How do I use the downloaded files? I have dreamweaver but a little lost…
    2. Is there any step by step tutorial for this? Especially if I want the navigation at the top rather than on the left.

    Any help to a newbie would be awesome :)

  • Tim

    Hi, Is it possible to use the menu at the right side? Will this affect the responsive website? Thanks in advance. Tim

    • http://Pixelhint.com/ Pixelhint

      Yes it’s possible to have it in the right side, but you need to do some css changes.

  • gabriella

    thank you for this awesome template!

    • http://Pixelhint.com/ Pixelhint

      You are welcome @gabriella

  • Hellz

    Hi there,

    Love the look of this template, but I have never used a PSD as a starting point before. What do I need to do to start using this? If I use the save for web I’m getting just a flat image with no web components at all.

    I’d really appreciate it if you could point in the right direction so I can get started :)

    Many thanks,
    H.

    • http://Pixelhint.com/ Pixelhint

      Hi @disqus_LptkStMqsI:disqus, thanks you for the comment, this is an HTML template, you just need to make the changes in the HTML then upload it to your server.

  • Tom

    Hey, just wondering how easy it would be to make this site editable on wordpress?
    Thanks!

  • Gabriel Maddox

    Hi there!

    First off I wanna say this template is awesome! I’ve been through a ton of sites/templates/tutorials trying to find the perfect one for my site.

    Secondly I have found that on some resolutions if the height of the page is too small the navigation menu on the left gets cut off and can’t be used. Is there a way to fix this? Maybe add in some parameters in the CSS to switch to the mobile navigation is the height is too small as well as the width?

    Secondly is there a way to donate as thanks for the awesome work done?

    • http://Pixelhint.com/ Pixelhint

      Hi @gabrielmaddox:disqus thanks a lot for you amazing comment and support, for your question we don’t think there is a devices with a screen height smaller than the width, we already made this template responsive, and it’s working perfectly in smaller devices.

      For donations please contact us at contact@pixelhint.com

      • Gabriel Maddox

        My roommate uses a lenovo yoga pad 2 and she has this issue. I can replicate the issue if I resize my browser. Also If I use dreamweaver to preview in the resolution of 1440 x 900 I get the same issue. Are the sizes/aspects ratios so odd that it isn’t worth worrying about or could this be a problem?

        • http://Pixelhint.com/ Pixelhint

          @gabrielmaddox:disqus yes you are right, there are so many solutions for this issue, the easiest and the best solution is to set the “header” “min-height:100%;” property to “height:100%;” and the “overflow-y” to auto, then go to “header .footer” and change the “position” property to “relative” and remove the “bottom” property.

          Let me know if you need more help.

          • Gabriel Maddox

            Worked like a charm! Thank you so much for the advice, I wouldn’t have had any clue where in the CSS to edit that. XD

          • http://Pixelhint.com/ Pixelhint

            You are welcome @gabrielmaddox:disqus.

  • shaMewalkeR

    For me the design looks absolutely gorgeous, but when I downloaded it and ran it using xampp, the site looks weird in chrome, while it looks as intended in both firefox and IE. Any suggestions? :)

    • http://Pixelhint.com/ Pixelhint

      We tested and it’s perfectly working, can give us more details and you don’t need a xampp or WampServer to run this template, it’s an HTML template.

  • kaka

    bro…thanks its awesome! thanks alot its free for you, god bless you bro – from indonesia

  • Isaak Wittgenstein

    Great Template! I just built my portfolio site with it.
    I used the static html for it (like the basic template) but it will be quite cool to set the whole thing up with php, when I can aford the service with my server. 😛
    Here it is:
    http://www.isaak.in

    • Dwayne Smith

      Question. Where did you get the youtube and soundcloud icons? I’ve been looking for icons that match the Google+ and fb ones.

      • http://Pixelhint.com/ Pixelhint

        Hi @disqus_5JmB41909N:disqus we used “socialico font”.

        • Aly James

          Hey! I’m fairly new to CSS. What code do I change to change the icons (eg from Facebook to Instagram or something)? I’ve been trawling it for like an hour and trial and error has failed me! lol
          Other than that, thanks for this gorgeous template!
          – Aly

          • http://Pixelhint.com/ Pixelhint

            Hi @alyjames:disqus

            We apologize for the late response to you comment.

            You do it by first changing the “sm.png” & “sm_hover.png” images inside the img folder, then add the html for the icon in the footer section, below is the HTML for the twitter link/icon.

            Last change the background-position in the “main.css” inside the css folder, below is the css for twitter as an example.

            header ul.social li a.twitter,
            header ul.social li a.twitter:hover{
            background-position: -93px 0;
            }

            Please let us know if you need more help.

            Regards.
            Ijja

          • http://Pixelhint.com/ Pixelhint

            Hi @alyjames:disqus

            We apologize for the late response to you comment.

            You do it by first changing the “sm.png” & “sm_hover.png” images inside the img folder, then add the html for the icon in the footer section, below is the HTML for the twitter link/icon.

            Last change the background-position in the “main.css” inside the css folder, below is the css for twitter as an example.

            header ul.social li a.twitter,
            header ul.social li a.twitter:hover{
            background-position: -93px 0;
            }

            Please let us know if you need more help.

            Regards.
            Ijja

  • Shujimas

    Thank You Very Much!

  • jg80303

    Thank you for such wonderful work. Is there an easy way to make this compatible on mobile devices? I viewed it on my iphone and the formatting is off. Thanks in advance.

    • http://Pixelhint.com/ Pixelhint

      It’s a responsive template and it work on small screen devices, if you have any problem with it please contact us and we will fix the issue.

  • Dirk

    Wow. Amazing simple and beautiful template. Is there a way to keep the left navigation div floating? So that if I scroll e.g. the inner pages down, the left navigation will stay visible all the time? That would be SO cool.
    Plus – is there a way to donate for this site? I like to pay for what I use…

    • http://Pixelhint.com/ Pixelhint

      Hi @Liesenfeld:disqus thanks for your comment, the left navigation stays visible on all pages when you scroll down, it will only be invisible on small screen devices, for donations please get in touch with us at contact@pixelhint.com

      • Dirk

        Ah – I should have checked on my pc and not my smartphone 😉
        All right, will send you an email asap. Or can I use your email as a PayPal-Address?

        • http://Pixelhint.com/ Pixelhint

          @Liesenfeld:disqus Please send us an email an we will give the Paypal address privately.

          • Dirk

            OK :-)

  • Dirk

    Hi there,

    I have got another question and would really appreciate your help. I would like to do 2 changes on the inner.html:

    – I would like to have rounded corners on the upper corners of the semi-transparent part (the container of the headline). Where do I have to add the “rounded-corners”-css?

    – I would like to have a transition when I hit the upper menue in the mobile view, so that the menu will slide out slowly from the top. Where do I have do add the “transition”-css?

    I have been looking for hours now, but cannot find the solution to those two problems :-(

    Plus: I found a bug? In chrome, if I resize the page, so that it switches from desktop to mobile view, the menu-icon will be to low, so that it will be hidden by the menu, if I click it. This only happens by resizing. If I leave the page-size small and hit reload, the menu-icon will be at the perfect place… strange… maybe a chrome-related bug?

    • http://Pixelhint.com/ Pixelhint

      Hi Dirk,

      – For your first question, please search for .top .title inside the main.css files and add this two lines of code below :

      border-top-right-radius: 5px;
      border-top-left-radius: 5px;

      – To add the slide effect, go to main.js which is located inside the js folder, then search for this line of code $(“header nav ul”).slideToggle(“slow”); and replace it with this line $(“header nav ul”).slideToggle(“slow”);

      – We have fixed the bug and now the menu icon is working perfectly.

      Thanks for your questions, please let us now if you have more.

      • Dirk

        Wow, great, thnx :-)
        – rounded corner: Works

        – slide toggle works, but introduced another bug: If I use it once (open and close the new sliding menu) and resize the window (make it larger again), there will be no menu on the left side until I reload the page. Maybe you want to see for yourself:
        http://www.Liesenfeld.media

        – menu-button-bug: Since I changed the template very much, I cannot overwrite it with the new one you created. Is there any chance you can tell me what you changed? I hope it is simply two or three lines…? 😉

        • http://Pixelhint.com/ Pixelhint

          – Unfortunately the slide effect requires a lot of CSS changes, i highly recommend you to use default one.

          – For sure, open the main.css file and replace the code inside this @media (max-width:1100px){code} with the one in the new file, and it will work.

          • Dirk

            I hope, I am not getting on your nerves :-/

            I did do the changes (used beyond compare to find out, what you changed) and the Menu-Button stays where it should – great. And you changed the way, that the menu will slide out, so that it slides over the content, instead of pushing it away – much better! Maybe you want to add: opacity:0.8; to header nav ul li a{ – that looks better in my opinion :-)

            BUT – the Bug with the menu on the left side disappearing is unfortunately still there:
            If I slide out the menu on the top and change the pagesize, the menu on the left will be there. If I slide out the menu on the top, slide it back in and change the pagesize, the menu on the left will require a reload to show…
            :-(

          • http://Pixelhint.com/ Pixelhint

            Hi @Liesenfeld:disqus no problem :), we just sent you a the complete main.css file to your email address, it should work now, we changed the majority of CSS to fix the issue.

          • Dirk

            Hey guys, thank you so much :-)

            It works perfect now and the main.css is much cleaner now. Found a small bug, that you might want to correct in your css as well. You should use
            @media (max-width:1099px){

            because otherwise the screen will do strange things if you resize it to exactly 1100px width. (e.g. menu button will not work)
            So – I wish you a pleasant time and keep up the good work. I will definately recommend you to my friends and clients.

            Love,
            Dirk.

          • http://Pixelhint.com/ Pixelhint

            Sure we will fix the bug, thank you so much for you help Dirk , please us know if you need more help.

            Cheers,

            Pixelhint Team

  • Miki Fubuki

    Is there a way to make the gallery grid respond to the size of the images? I tried to put a photo that has a longer width and shorter than the default images but it seems to look off when i previewed it.

  • Marc

    Thank you very much for this amazing template!

    I think I found a bug on iOS 8.2 (iPad Air 1):

    The menu doesnt pop up in landscape mode. It does in portrait mode.

    Any idea how to fix it, or am I the only one? In your demo it isnt working either.

    Thanks.

    • http://Pixelhint.com/ Pixelhint

      Hi @Marc, please re-download the source files we have fixed the bug, thanks for your comment.

  • Jamie

    Hi there love the template! one problem i am finding is in landscape mode of iPad Air 2 the menu does not appear. Also when scaling down safari to a similar size the menu does not appear.
    Any Help would be very grateful :)

    • http://Pixelhint.com/ Pixelhint

      Thank You Jamie for your comment, The issue is fixed & sorry for the late reply.

  • baran

    Hello!
    This template is perfect and thank you for this work!
    I have question for you and I really apreciate if you can help.
    On grid layout name tags appears on mouseover and for compute view it is working very well. However on small screens, since there is no mouseover option, nothing defines that the small images are clickable and refering to a sub-site. Is it possible to make the captions always on just for small screens but not on computer screen?
    Thanks.

  • George Fowler

    Thanks for the amazing template. I was just wondering if we have permission to remove the “Template by pixelhint.com”

    • http://Pixelhint.com/ Pixelhint

      @disqus_tsfbE0MN6s:disqus Yes you can.

  • http://www.mobilesmartwebsite.com Mobi Man

    Hi there. This template is really well done, clean and straight-forward, and it looks fantastic. Thank you for making it widely available.
    My question is: how would I have copyright text and social icons show up as a footer on mobile devices?

    • http://Pixelhint.com/ Pixelhint

      Hi Mobi Man,

      Thanks for amazing comment, you can do it by editing the css inside the “main.css” file.

      Thanks,
      Ijja

  • asap

    Hi Pixelhint,

    thank you for reading this and for what you do.
    …and here’s my problem:

    I would like to have the title and caption visible also on mobile devices.

    I know that is impossible to have :hover on mobile but I would like to have one more step before to go to the inner page.

    First click on image: caption
    Second click: link to inner page

    Can you please help me?

    Thank you very much for your support

    • http://Pixelhint.com/ Pixelhint

      Thanks @disqus_WHXQS5Gx5q:disqus for the suggestion, we can not add it at the moment, but we will consider it for the next update.

  • Joe Mehl

    Is there a way I can make the social media and footer stay on at the bottom in mobile view?

  • JM

    Is it possible to make the footer visible at the bottom of every page? Right now when I make the footer visible in the @media mobile view, just the text copyright text appears underneath the header below the logo.

  • Judy Farelo

    Hello there. Thanks for the beautiful template. Question please. Can submenus be added to the navigation bar so they can also appear in the mobile view with a + and – toggle? Thanks in advance for your help.

  • Vlad

    Hello Guys. I love the template. Can you please help me with the Contact Us form. I really need a e-mail form, so customers could reach me. And I also have a question. Can I integrate a small e-commerce into this template? Thank you very much.

  • prasad ghone

    Great theme :) I want to upload more projects than 9. How can I do that?

  • flitz

    Hi are you also the one behind the devfloat? because they have this exact same theme for wordpress?

    • http://Pixelhint.com/ Pixelhint

      Hi @flitz , no it’s not us, and we don’t have any kind of relation or partnership with them, they stole the template, and put it in their website without our permission.

      Thank you so much for reporting that, we will take care of it.