Website Design - Nature

Hello my friends, in this post, you will learn how to make a nature traveling landing page.

All the images and source code you can download from here. Click the download button on the bottom on this page and you will get a zip file, download it and unzip it.

SOURCE CODE :

index.html

<section> <h1><a href="">LOGO</a></h1> <header> <a href="#home" class="active">HOME</a> <a href="#about">ABOUT</a> <a href="#contact">CONTACT</a> </header> <div class="content"> <p class="title">NATURE<br /> NEXT DOOR</p> <p class="lorem">Just a five-minute drive from downtown Buffalo. Feel the charm of nature, release the stress of your day.</p> <button>LEARN MORE</button> </div> </section>

style.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&family=Poppins:ital,wght@0,100;0,500;0,600;0,800;0,900;1,500;1,900&family=Ubuntu:ital@1&display=swap'); *{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } section{ position: relative; width: 100%; min-height: 100vh; background: url(nature.jpg) no-repeat; background-size: cover; background-position: center; color: #FFF; } header{ display: flex; flex-direction: row; color: #FFF; width: 50%; position: absolute; right: 0; top: 0; } h1{ height: 45px; width: 50%; padding-left: 25px; padding-top: 8px; color: #FFF; text-decoration: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } a{ text-decoration: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); color: #FFF; } header a{ flex: 1; display: flex; justify-content: center; align-items: center; height: 55px; } div.content p.title{ font-size: 78px; font-weight: bold; padding-top: 55px; padding-left: 25px; color: #FFF; } p.lorem{ font-size: 18px; padding-left: 25px; width: 60%; text-align: justify; } button{ width: 135px; height: 45px; background: #FFF; border: none; border-radius: 10px; color: #267D9C; margin-left: 25px; margin-top: 35px; } .active{ background: rgba(255, 255, 255, 0.45); border-radius: 15px; color: #000; }

That is all the source code for this design. THANKS FOR YOUR READING

That is all the tutorial today, if you are facing any problem, contact me using the comment below or go to contact us

Download ZIP :