FCC-Random-Quote-Machine/styles.css at master · thefoxboxman/FCC-Random-Quote-Machine · GitHub

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
h1{
	font-size: 1.5rem;
}


/* grid area declarations */
#header {grid-area: header; }
	#text {grid-area: text; }
	#text {grid-area:text;  }
	#author {grid-area:author;  }
	#newQuoteSection {grid-area:newQuoteSection;  }
	#tweetSection {grid-area:tweetSection;  }
/* grid container */
#quote-box{
	background-color: whitesmoke;
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: 75px 75px 75px 50px 50px 75px;
	grid-gap: 10px;

	grid-template-areas:
	" . .       . "
	" . header  . "
	" . text     . "
	" . author   . "
	" . newQuoteSection  . "
	" . tweetSection . "
	" . .            . ";
}

#header{
	text-align: center;
	text-transform: capitalize;
}

#text{
	align-self: start;
	justify-self: start;
	max-width: 400px;
}

#author{
	align-self: center;
	justify-self: end;
}

#newQuoteSection{
	align-self: center;
	justify-self: center;
}
#tweetSection{
	align-self: center;
	justify-self: center;
}

.btn{
	text-align: center;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	display:inline-block;
	font-size: 20px;
	font-weight: bold;
	padding: 15px 20px;
	min-width: 200px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.btn:hover{
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

#new-quote{
	background-image: linear-gradient( 109.6deg,  rgba(17,181,236,1) 11.2%, rgba(200,227,11,1) 91.1% );
}

#tweet-quote{
	background-image: linear-gradient( 111.9deg,  rgba(0,81,146,1) 0.3%, rgba(14,250,255,1) 90% );
}