2.5k views
5 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 Jbrendel
by
5.7k points

1 Answer

2 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 Justin Levi Winter
by
5.6k points