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.

By Peter Finlan in Freebies on August 11, 2015

Demo Code

From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!

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.

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:

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.

Peter Finlan

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

bootstrap freebie template

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ⁵³

Comments are closed.

Ray August 11, 2015 at 15:02

Nice. Very clean and good spacing. I like the header effect when you scroll down from the top.
fhancquart August 11, 2015 at 16:04

Looks like http://www.invisionapp.com/ 🙂 Great!
Tim Githinji August 11, 2015 at 22:06

Fantastic site..Absolutely love it
Dusan August 12, 2015 at 01:16

This is fantastic! Smooth, classy, elegant.. Thank you so much for sharing this with the world! Appreciated.
Lucas August 12, 2015 at 13:34

Sleek
Eva August 12, 2015 at 14:04

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.
- Peter Finlan August 17, 2015 at 11:11
  
  Hi Eva!
  
  Ah you’re right! Thank you for pointing this out. I will update the build 🙂
rachel August 13, 2015 at 23:42

Awesome! The sketch file doesn’t open though. 🙁
- Peter Finlan August 17, 2015 at 11:11
  
  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.
LOADMATE August 18, 2015 at 08:28

Just awesome
Unique Font August 20, 2015 at 04:23

Thanks for sharing man!
Great template!
Maxim Levikov August 20, 2015 at 16:29

Thatk you so much! It’s very useful for me.
Rachid August 22, 2015 at 23:23

Very nice template 🙂 good work
Amardeep August 24, 2015 at 07:28

Nice template, very clean and sleek.
Sukhdev singh August 24, 2015 at 12:45

Thanks and Great template.
YannCopp August 24, 2015 at 20:43

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 ?
- Peter Finlan September 4, 2015 at 11:49
  
  Thanks for letting me know YannCopp
  
  I will look in to this as soon as possible.
Ravi Patel August 27, 2015 at 15:29

firstly Thanks for your article. SEDNA is one of the best One page theme I loved. I will definitely use it in future.
seb August 28, 2015 at 12:44

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?
- Peter Finlan September 4, 2015 at 11:50
  
  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.
Sarah September 2, 2015 at 09:24

Thanks for an amazing freebie Sedna. I’ve shared this with my readers at http://www.byteswire.com/40-incredible-freebies-for-web-designers-august-2015/
- Peter Finlan September 4, 2015 at 11:50
  
  Thanks for the share, Sarah 🙂
Manoj September 3, 2015 at 09:43

Ek dam Jhakkas !!!
Aslan September 8, 2015 at 16:43

Thank you very nice.
Uikithemes September 9, 2015 at 00:40

Great Design I like it!!
Please give me download link for this web icons you use on this theme,
Thanks in advance.
- Uikithemes September 9, 2015 at 00:51
  
  Thanks I found it 🙂
pnr-status.info September 9, 2015 at 11:38

Hey Peter thanks for the share bro
- Peter Finlan February 2, 2016 at 22:00
  
  No worries!
Daniel September 9, 2015 at 12:52

Beautiful $ thanks a lot.
Cheers …
Michael Alden September 9, 2015 at 18:49

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!
Miguel September 11, 2015 at 19:24

Hi
What is the fix for the down arrow? When clicking it, it does not scroll down.
Thanks
Jagadish September 13, 2015 at 16:05

Thanks to Peter for sharing great template.
Geordie September 23, 2015 at 23:35

This seems like it was really heavily inspired by the old InVision App website.
- Peter Finlan February 2, 2016 at 22:27
  
  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. 🙂
Miko September 30, 2015 at 23:36

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!!
- Peter Finlan February 2, 2016 at 22:29
  
  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.
Miko London October 1, 2015 at 09:30

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!!!
eric October 5, 2015 at 20:54

How can I make the contact form to actually send info to my email?? and where do i do that?
trursty October 28, 2015 at 12:09

its not work…!
Walter Bacon December 30, 2015 at 20:37

Hey, is there a list of the icons and where to look up other icons in this set?
- Peter Finlan February 2, 2016 at 22:31
  
  Hey Walter,
  
  The icons are included in the Assets. If you’re having trouble finding them, they’re called Et-Line Icons.
  
  Cheers.
GENERAL February 6, 2016 at 17:32

It’s wonderful template I loved it.

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

regards,
Mike May 3, 2016 at 14:40

Great theme Peter, thank you for sharing.

Can I use the banner “http://tympanus.net/Freebies/Sedna/img/hero.jpg” for my commercial website?
- Mike May 11, 2016 at 13:18
  
  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”
Sanjay Rajpurohit July 27, 2016 at 08:51

Awesome Template Peter, thanks a lot for sharing.
Gopalakrishna November 5, 2016 at 04:18

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.
Mehdi Rizvandi November 15, 2016 at 12:23

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;
}
Giacomo Lawrance December 5, 2016 at 17:52

Are you allowed to republish if edited?

Thanks!
- Mary Lou December 6, 2016 at 10:42
  
  Hi Giacomo,
  did you read our license already? Everything you need to know about using our resources fairly can be found there: http://tympanus.net/codrops/licensing/
  Let us know via the our contact form if you have any further questions: http://tympanus.net/codrops/contact/
  Thanks,
  ML
Eli December 21, 2016 at 13:34

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
Rios Delgado May 10, 2017 at 16:22

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!
Horo June 25, 2017 at 22:54

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 ?
Nadine August 14, 2017 at 15:58

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

About the website template

Preview

Download the template for free:

Peter Finlan

Experimental CSS-Only Carousels with Scroll-Driven Animations

Scroll-Based Layout Animations

Trigonometry in CSS and JavaScript: Beyond Triangles

Stay in the loop: Get your dose of frontend twice a week

Feedback 53

Feedback ⁵³