how do I build a logo to tell the user they are going to click on a video or a text or a quiz like this?

how do I build that star and video click button and that text file logo?

THANKS

CodePudding user response：

You can use a svg using a <svg> tag. You can make your own drawing! Here's how to.

Get Started with SVG

In your svg tag, first make two attributes called width and height and these will be your svg dimensions.

<h1>A SVG!(Blank)</h1>
<svg width="200" h>

</svg>

A Path

A path is what you normally think of. A path to a city. A path to a mountain. use the path tag to make your drawings.

Commands

All of the commands are stored in the d attribute.

M = moveto

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Bézier curve

T = smooth quadratic Bézier curveto

A = elliptical Arc

Z = closepath

Here's how to use all of them:

<h1>SVG Shapes!</h1>
<h2>Square</h2>
<svg width="100" height="100">
        <path d="M0 0 L100 0 L100 100 L0 100 Z">Sorry, but your browser doesn't support inline SVG.</path>
    </svg>

You can use more than one path in a SVG.

Colors!

Use the attribute fill in the path tag to change the color using rgb or rgba color.

CodePudding user response：

You can find various sites that have free logos, I like https://www.iconfinder.com/ it has free downloadable PNG's

If you want the logo's to be clickable I would have a button in the HTML and wrap the image inside the element like so:

<button> <img src="./image.png" /> </button>

CodePudding user response：

Well first you would want to use fontawesome to get icons. to get it you must do in the <head> tag with <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css"> once you implemented that into your code, go to https://fontawesome.com/ and search which icon you want. once you have use the <i> tag to get icon's. After you have chosen and decided what you want you can start with javascript and the html <button> tag. So let me give you an example on the html <button onclick="cheese()"><i >Click</i></button> now you can add that anywhere on your html page. now with js.

<script>
function cheese() {
window.open('https://google.com');
}
</script>