71,289 views
18 votes
18 votes
Using HTML, create a centered menu with 4 buttons light red with black text labels(descriptive) with links to 4 external websites of your choice. The links must open in a new window or tab using the target="_blank" attribute

User Dinesh Kanivu
by
3.3k points

1 Answer

25 votes
25 votes

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

<title></title>

</head>

<body>

<div>

<ul>

<a target="_blank" href="PLACE HERE YOUR LINK">

PLACE HERE THE WEB NAME

</a>

</ul>

</div>

<div>

<ul>

<a target="_blank" href="PLACE HERE YOUR LINK">

PLACE HERE THE WEB NAME

</a>

</ul>

</div>

<div>

<ul>

<a target="_blank" href="PLACE HERE YOUR LINK">

PLACE HERE THE WEB NAME

</a>

</ul>

</div>

<div>

<ul>

<a target="_blank" href="PLACE HERE YOUR LINK">

PLACE HERE THE WEB NAME

</a>

</ul>

</div>

</body>

</html>

CSS

*{

display: grid;

justify-content: center;

align-items: center;

background: rgb(76, 75, 75);

}

.web1{

margin-top: 30px;

font-size: 40px;

text-decoration: none;

color: black;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

height: 100px;

width: 250px;

background: rgb(231, 65, 65);

}

.web{

font-size: 40px;

text-decoration: none;

color: black;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

height: 100px;

width: 250px;

background: rgb(231, 65, 65);

}

NOTE: THE CSS DOCUMENT YOU'LL NEED TO NAME IT "styles.css" IF YOU WANT IT TO WORK, AND YOU NEED TO MODIFY ALL THE BOLD LETTERS

User Vicky Ajmera
by
3.2k points