Freebie: “Sedna” One Page Website Template (HTML5, Sketch)

Sedna is an elegant and versatile one page website template that was implemented with the latest web technologies and with easy reusability in mind. The Sketch file is included as a bonus.

Today we are very happy to share yet another responsive and modern one page website template with you. Sedna was designed & developed by Peter Finlan, exclusively for Codrops.

Sedna is a carefully crafted HTML5 one page website template that comes with some lovely, smooth effects. It’s sophisticated design makes for a fitting template usable for many different scenarios. It’s coded with user-friendliness and reusability in mind, so that you can fine tune Sedna for your own project.

As a bonus, we are also offering the Sketch file of the design that you can experiment with and use as a base for your design projects.

sedna

About the website template

The responsive template is made with the freshest web technologies and it’s built with (among others):

Preview

Takes a look at the real pixels:

Sedna_Preview

Check out the live demo of the template: Sedna Live Preview

Download the template for free:

You can download the ZIP file of the template and the design file here:

 

Use it freely but please don’t republish or redistribute the template.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your freebie on Codrops just drop us a line.

If you like Sedna then don’t forget to check out Boxify and Halcyon Days, two more responsive and versatile one page website templates for you.

Tagged with:

Peter Finlan

Peter's a UX lead @ Google. Crafting memorable, emotive and engaging experiences through research, testing and data science.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 53

Comments are closed.
  1. Nice. Very clean and good spacing. I like the header effect when you scroll down from the top.

  2. This is fantastic! Smooth, classy, elegant.. Thank you so much for sharing this with the world! Appreciated.

  3. very nice, love the design. The down arrow just below the entrance isn’t working as expected (jumps to the top, no animation) probably lacks the class for the scroll effect.

    • Hi Eva!

      Ah you’re right! Thank you for pointing this out. I will update the build 🙂

    • Hi Rachel – I’ve tested the download link, and also opening the file in app – everything is working fine. It might be a problem with your system configuration.

  4. Very nice ! (:

    So,

    On Safari (iOS) :
    Background of the fixed navigation appears during the scrolling action.

    On Chrome (iOS) :
    Background of the fixed navigation appears only at the end of the scrolling action.

    Why ?

  5. firstly Thanks for your article. SEDNA is one of the best One page theme I loved. I will definitely use it in future.

  6. Hi, there is something I don’t understand. How can I use the sketch file to update the sedna website? Is it possible that I change some text in sketch and when I view it in my browser, it shows the changes?

    • Hi Seb

      You can use the Sketch file to plan and design any additions or changes to the template you like, after this you would need some knowledge in html/css to implement your changes. Alternatively, you could have a freelancer help you out.

  7. Great Design I like it!!
    Please give me download link for this web icons you use on this theme,
    Thanks in advance.

  8. Hey Peter — great theme! Question…I’m using Koala App to compile my .scss and I’m getting a couple of errors:

    – @import “compass”; <– there is no compass directory or associated files so it won't compile.
    – @include border-radius( … ); <– this also prevents a successful compiling

    Any thoughts?
    Thanks!

    • Hey Geordie!

      InVision is a fantastic product, one myself and many of my designer friends use every day. Inspiration comes from all around us, but for me, it’s more about designing using best practise ui patterns and experiences that users are used to interacting with. As designers, that allows us to validate our design decisions.

      Thanks for the feedback and I hope you enjoy Sedna for what it is. 🙂

  9. Peter – I am not a designer and/oe a developer. I have looked and tried many free templates so far and Sedna is by far the best of all!!!
    It si amazingly beautiful, blazing fast and highly professional!

    Thanks for making it free!!!

    One question though – I don’t have Sketch. I use Affinity Designer.
    Any chance of getting the Sketch file converted to PDF or PSD?

    I’d be happy to pay or make a donation if you have a facility to accept.

    Thanks again!!

    • Hey Miko!

      If you have a Mac, you can download a free trial of Sketch and check out the Sketch file. Unfortunately, at this point there’s no plan to convert to a PSD due to time/resources.

      This may change in the future so check back for details.

  10. Peter – thanks for making this amazing template free!
    It is bt far the best and most beautiful template I have ever come across, especially as a non-designer, non-developer.

    Unfortunately, I don’t have Sketch. Would it be possible to convert the Sketch files to PDF so that I ould open them in Affinity Designer?

    Many thanks again!!!

  11. How can I make the contact form to actually send info to my email?? and where do i do that?

    • Hey Walter,

      The icons are included in the Assets. If you’re having trouble finding them, they’re called Et-Line Icons.

      Cheers.

  12. It’s wonderful template I loved it.

    Mr. Peter
    Please can I convert it to Arabic Template and make some change?

    regards,

  13. Great theme Peter, thank you for sharing.

    Can I use the banner “http://tympanus.net/Freebies/Sedna/img/hero.jpg” for my commercial website?

    • Can anyone please clarify that I can use the banner provided in this theme for my commercial site? “http://tympanus.net/Freebies/Sedna/img/hero.jpg”

  14. Overall color selection is very good and content is nicely laid out. Only feedback I have is: the (content) font contrast is too weak. Utterly illegible. The white on black (used the headers) is good, but when it comes to the actual content, its grey and white is too light. If it can be corrected, this one will be a good one for any landing page.

  15. Hi peter, thanks for sharing this beautiful template.
    java script for fixing the navigation on header can improve with css,
    when designer change the header style or navigation style, they need to change the java script too, but with my suggestion they change the css only:

    JS scroll event:
    if (scroll >= 20) {
    $(‘section.navigation’).addClass(‘fixed’);
    } else {
    $(‘section.navigation’).removeClass(‘fixed’);
    }

    and add some css:
    section.navigation.fixed header
    {
    padding:35px 0;
    border-bottom: none;
    }
    section.navigation.fixed header .member-actions
    {
    top:26px;
    }
    section.navigation.fixed header .navicon
    {
    top:34px;
    }

  16. hello peter.
    thanks a million for this amazing template
    I just need some help.
    how can I place the logo on the most right side of the page and on its left side place the menue which is styled with “primary nav”
    and in the end put the members action part on the left side of the page

  17. It’s a really nice templates. It also helped me out to figure out my problems easily and give it the positive reply to the functions. In this blog overall the color collection is good. Thank You!

  18. Hi, can I used this to make a wordpress theme? Though, I’m not sure yet if I will succeed as I am just beginning. Is there any do’s and don’t if I use this ?

  19. Hi, great theme.
    One question regarding the blog section. I would like to use the images as galleries. When you click an image the lightbox opens and you can flip through some more images. I tried to use this: http://jsfiddle.net/uZCC6/ but unfortunatelly I couldn’t make it work.
    Thanks so much for a note on this!
    Nadine