Skip to content

Instantly share code, notes, and snippets.

@kaviyarasu34

kaviyarasu34/Homepage.css

Created July 16, 2024 02:14
Show Gist options
  • Save kaviyarasu34/256443412a50dff87bc1fee88a07a813 to your computer and use it in GitHub Desktop.
Save kaviyarasu34/256443412a50dff87bc1fee88a07a813 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Homepage.css
* {box-sizing: border-box;}
body {
margin:0;
font-family: 'poppins';
background: #f5f5f5f5;
}
.grid {
display:grid;
grid-template-columns: repeat(12,1fr);
gap: 30px;
}
.widget {
background-color: #333;
padding: 10px 20px;
}
a {
color: white;
font-family: Arial, Helvetica, sans-serif;
margin: 30px;
}
header {
padding: 2px 40px;
background: #fff;
align-items: center;
background-color: #04e7c1;
}
header h1 {
grid-column: span 6;
}
header nav {
grid-column: 7 / span 6;
justify-self: end;
}
header nav a {
color: #333;
margin-left: 10px;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 60px auto;
padding: 20px;
}
main img {
grid-column: span 6;
width: 100%;
border-radius: 6px;
}
main .weclome {
grid-column: 8 / span 3;
}
main > h2 {
grid-column: span 12;
text-align: center;
font-size: 1.5em;
padding-top: 0px;
background-color: #04e7c1;
}
.wrapper {
grid-column: span 4;
padding: 2px 2px ;
border-radius: 6px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.05);
background-color: #04e7c1;
width: 400px;
height: 400px;
}
.image {
background-color: #333;
cursor: pointer;
width: 100%;
height: auto;
}
.container {
position: relative;
width: 100%;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
.content {
width: 100%;
border: 1px solid;
}
@media screen and (max-width: 960px) {
main img {
grid-column: 2 / span 10;
}
main .weclome {
grid-column: 3 / span 8;
text-align: center;
}
main .card {
grid-column: 3 / span 8;
}
}
Raw
Homepage.html
<!DOCTYPE html>
<html>
<head>
<title>Evergreen</title>
<link rel="stylesheet" href="Homepage.css">
</head>
<body>
<header class="grid">
<h1>Evergreen - Best Deals For Anything Pc</h1>
<nav>
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Contact</a>
</nav>
</header>
<div class="widget">
<a href="/">Gaming Pc's</a>
<a href="/">Budget Pc's</a>
<a href="/">Specials</a>
<a href="/">Upgrade Kits</a>
</div>
<main class="grid">
<img src="">
<div class="welcome">
<h2></h2>
<p>
</p>
</div>
<h2>Services</h2>
<div class="wrapper">
<div class="image">
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png">
<div class="overlay">is it time to revitalise your gaming rig? Get the best deals and start Dominating</div>
</div>
</div>
<div class="content">
<h5>Upgrade Kits</h5>
<h5>Specials</h5>
<h5>Components</h5>
</div>
<div class="image">
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png">
<div class="overlay">is it time to revitalise your gaming rig? Get the best deals and start Dominating</div>
</div>
</div>
<div class="content">
<h5>Upgrade Kits</h5>
<h5>Specials</h5>
<h5>Components</h5>
</div>
<div class="image">
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png">
<div class="overlay">is it time to revitalise your gaming rig? Get the best deals and start Dominating</div>
</div>
</div>
<div class="content">
<h5>Upgrade Kits</h5>
<h5>Specials</h5>
<h5>Components</h5>
</div>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment