Scribd
Upload
43 views4 pages

I want to make a glassmorphism website in HTML, CS

Uploaded by

gafirnarvil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views4 pages

I want to make a glassmorphism website in HTML, CS

Uploaded by

gafirnarvil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

I want to make a glassmorphism website

in HTML, CSS, and JavaScript. The website


is about links to other websites. Generate
the code for the website, and ui of the
website should be Glassmorhism cards
and blocks containing links to the website

I want to make a glassmorphism website


in HTML, CSS, and JavaScript. The website
is about links to other websites. Generate
the code for the website, and ui of the
website should be Glassmorhism cards
and blocks containing links to the website
Certainly! I'll provide you with HTML, CSS, and JavaScript code to create a glassmorphism
website for links to other websites. The UI will consist of glassmorphism cards and blocks
containing the links.

Here's the code for your website:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Links</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #ffecd2);
display: flex;
justify-content: center;
align-items: center;
}

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
}

.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
}

.card h2 {
margin-top: 0;
color: #fff;
}

.card ul {
list-style-type: none;
padding: 0;
}

.card li {
margin-bottom: 10px;
}

.card a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}

.card a:hover {
color: #ffecd2;
}
</style>
</head>
<body>
<div></div>

<script>
const links = [
{
category: "Social Media",
sites: [
{ name: "Facebook", url: "https://www.facebook.com" },
{ name: "Twitter", url: "https://www.twitter.com" },
{ name: "Instagram", url: "https://www.instagram.com" }
]
},
{
category: "News",
sites: [
{ name: "CNN", url: "https://www.cnn.com" },
{ name: "BBC", url: "https://www.bbc.com" },
{ name: "Reuters", url: "https://www.reuters.com" }
]
},
{
category: "Technology",
sites: [
{ name: "TechCrunch", url: "https://techcrunch.com" },
{ name: "Wired", url: "https://www.wired.com" },
{ name: "The Verge", url: "https://www.theverge.com" }
]
},
{
category: "Entertainment",
sites: [
{ name: "IMDb", url: "https://www.imdb.com" },
{ name: "Rotten Tomatoes", url: "https://www.rottentomatoes.com" },
{ name: "Metacritic", url: "https://www.metacritic.com" }
]
}
];

const container = document.getElementById('linkContainer');

links.forEach(category => {
const card = document.createElement('div');
card.className = 'card';

const title = document.createElement('h2');


title.textContent = category.category;
card.appendChild(title);

const list = document.createElement('ul');


category.sites.forEach(site => {
const item = document.createElement('li');
const link = document.createElement('a');
link.href = site.url;
link.textContent = site.name;
link.target = "_blank";
item.appendChild(link);
list.appendChild(item);
});
card.appendChild(list);

container.appendChild(card);
});
</script>
</body>
</html>

This code creates a responsive glassmorphism website with cards containing links to
other websites[1][2]. Here's a breakdown of the key features:

1. The background uses a gradient to create a colorful, appealing backdrop.

2. The cards have a semi-transparent background with a blur effect, creating the
glassmorphism look[1][2].

3. The layout is responsive, using CSS Grid to adjust the number of columns based on
screen size.

4. Each card represents a category of links, with a title and a list of website links.

5. The links are stored in a JavaScript array, making it easy to add, remove, or modify
links.

6. Hover effects are added to the cards and links for better interactivity.

To use this code, simply save it as an HTML file and open it in a web browser. You can
customize the links by modifying the links array in the JavaScript section[3].

To further enhance the glassmorphism effect, you could add more subtle shadows, adjust
the transparency levels, or incorporate subtle animations [1][2]. Remember to test the
website on different devices and browsers to ensure compatibility and readability [3].

1. https://webdesign.tutsplus.com/what-is-the-glassmorphism-web-design-trend--cms-93333a

2. https://www.interaction-design.org/literature/topics/glassmorphism

3. https://blog.logrocket.com/ux-design/glassmorphism-what-it-is-how-its-going/

You might also like