/
new2.css
78 lines (48 loc) · 2.88 KB
/
new2.css
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
* {margin: 0; padding: 0; font-family: 'Prompt', sans-serif; box-sizing: border-box;}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("code.png");
/* Set a specific height */
width: 100%;
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
}
nav {display: flex; justify-content: space-around; background-color: rgba(68, 6, 117, 0.8); width: 100%; flex-wrap: wrap; color: white;}
.mobilesand {padding: 10px; text-align: left ; font-size: 1.25em;
background-color: rgba(68, 6, 117, 0.8); width: 100%;
color: white; display: none;}
nav a { color: white; padding: 10px; text-transform: uppercase; text-decoration: none; transition: background-color .5s, color .5s;}
nav a:hover{color: rgba(68, 6, 117, 0.8); background-color: white;}
header h1 {display: block; margin: 40px auto; color: white; font-size: 400%; font-family: 'Cinzel', serif;
animation: hani 3s 1;}
header h2 {display: block; color: white; margin: 40px auto; font-size: 300%; animation: hani 4s 1;}
@keyframes hani {
0% {opacity: 0;}
25% {opacity: .25;}
50% {opacity: .5;}
100% {opacity: 1;}
}
.herobutton {display: inline-block; background-color: white; color: rgba(68, 6, 117, 0.8); text-transform: uppercase; text-decoration: none;
border-radius: 15px; padding: 10px; margin: 10px 50px auto; transition-property: color .4s, background-color .4s; max-width: 250px; border: 2px solid #AB9E00;
font-weight: bolder; transition: background-color 1s, color 1s;}
.herobutton:hover {color: white; background-color: rgba(68, 6, 117, 0.8);}
.brand {display: flex; justify-content: center; align-content: center; font-size: 130%; width: 80%; margin: 30px auto; text-align: center;}
.proj {font-size: 200%; width: 100%; padding: 10px 0; margin: auto;
background-color: rgba(68, 6, 117, 0.8); color: white; text-align: center;}
.cardbody {display: flex; flex-direction: column; width: 300px; border: 2px solid grey; margin: 0; padding: 0; margin: 20px 0; transition: border .5s}
.cardbody:hover {border: 3px solid red;}
.cardbody img {max-width: 300px; height: 246px; margin: 0;}
main {display: flex; flex-wrap: wrap; width: 90%; justify-content: space-around; margin: 20px auto;}
.apptitle {background-color: rgba(68, 6, 117, 0.8); color: white; margin: 0; padding: 10px;}
.link {display: flex; justify-content: space-around;}
.link a {color: rgba(68, 6, 117, 0.8); text-decoration: none; display: block; padding: 5px;}
.link a:hover {background-color: maroon; color: white;}
@media only screen and (max-width: 600px) {
.mobilesand {display: block;}
nav {display: none; flex-direction: column; justify-content: center;}
nav a {display: block;}
}