Uncategorized

Add waves to your web design using HTML CSS

Do you know adding waves design to your WEBSITE is quite simple now?
Let me explain to you how you could add waves to your website just in 2 minutes.

Add the following HTML to your HTML FIle.

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Tutorial</title>
</head>

<body>
    <!-- Wave CONTAINER-->
    <div class="wave-container">

    </div>
</body>

</html>

Now visit the website: https://getwaves.io/

Create a wave of your choice and click on the download button to copy the SVG code.

Create Wave
Create wave!
download-wave

Now pastes that code in the HTML page.

Your final HTML file should look like:

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wave Tutorial</title>
</head>

<body>
    <!-- Wave CONTAINER-->
    <div class="wave-container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e7008a" fill-opacity="1" d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,90.7C840,128,960,224,1080,218.7C1200,213,1320,107,1380,53.3L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
    </div>
</body>

</html>

So we’re done now!

final-wave

Happy Learning!

Tags

Leave a Reply

Back to top button
Close
Close

Adblock Detected

Please whitelist our site from the adblocker to read the content.