detail.css
2.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
.bgImage{
-webkit-filter: brightness(70%);filter: brightness(70%);
position: absolute;
top:0;
left:0;
z-index: -1;
height: 100%;
width:100%;
animation: fadeIn 0.5s linear;
}
.bgImg{
-webkit-filter: brightness(70%);filter: brightness(70%);
position: absolute;
top:0;
left:0;
z-index: -1;
height: 100%;
width:100%;
}
@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1;
}
}
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.detail-container{
display:grid;
grid-template-columns:10% 1fr;
grid-template-rows:20% 60% 1fr;
height:100%;
grid-gap:10px;
grid-template-areas:
"header header"
"side main"
"side footer"
}
header{
grid-area:header;
}
.main{
grid-area:main;
padding-left:3rem;
}
.side{
grid-area: side;
display: flex;
justify-content: center;
padding-top:100%;
}
.footer{
grid-area:footer;
}
.textwhite{
color:rgb(255, 255, 255);
text-decoration:none;
border:2px solid white;
padding:1px 5px 3px 5px;
transition:all 0.2s;
margin-right:0.5rem;
}
.textwhite:hover{
color:#cecece;
text-decoration:none;
border:4px solid #cecece;
padding:1px 5px 3px 5px;
margin-right:0.5rem;
}
.textwhitebx{
color:rgb(255, 255, 255);
text-decoration:none;
transition:all 0.2s;
}
.textwhitebx:hover{
color:#cecece;
text-decoration:none;
padding:1px 5px 3px 5px;
margin-right:0.5rem;
}
.left-footer{
width:35%;
float:left;
box-sizing:border-box;
margin-right:15%;
text-align: right;
}
.right-footer{
width:35%;
float:right;
position: static;
box-sizing:border-box;
text-align: left;
margin-right:15%;
}
.bottomBorderL a,.bottomBorderR a{
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.bottomBorderL a:hover{
border-bottom: solid 2px white;
border-left:solid 2px white;
width: 100%;
}
.bottomBorderR a:hover{
border-bottom: solid 2px white;
border-right:solid 2px white;
width: 100%;
}