TerribleDev/PastelGrid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
tparnell
2019-01-26 08:56:48 -05:00
commit 7ccad725f7
6 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 822 KiB

BIN
2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 356 KiB

BIN
3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 259 KiB

BIN
4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 KiB

30
index.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="container">
<h2>Mouse Over:</h2>
<div class="grid">
<div class="column column1"></div>
<div class="column column2"></div>
<div class="column column3"></div>
<div class="column column4"></div>
</div>
</main>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- <script src="styles.css" async defer></script> -->
</body>
</html>

59
styles.css Normal file
View File

@@ -0,0 +1,59 @@
.container {
max-width: 75%;
margin: 1em auto;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 98vh;
grid-gap: 1vw;
margin: 0 auto;
max-width: 96rem;
}
.column {
display: grid;
grid-template-columns: repeat(3, 4vw);
grid-template-rows: repeat(10, 8vh);
transition: 1s ease;
}
.column:hover {
padding-right: 15vw;
}
.column1 {
background-color: #CCF0E8;
opacity: 1;
}
.column1:hover {
opacity: 1;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.column2 {
background-color: #ffbdbd;
}
.column2:hover {
background-image: url(2.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.column3 {
background-color: #A1CDE4;
}
.column3:hover {
background-image: url(3.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.column4 {
background-color: #f1cbff;
}
.column4:hover {
background-image: url(4.jpg);
background-repeat: no-repeat;
background-size: cover;
}