github_users/style.css at main · mhmeraji/github_users · 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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
/* Prperties of the background image of the octcat */
body::after {
    content: "";
    background: url("assets/octcat.jpg");
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  /* Style of the div responsible for the display of user messages  */
  /* like not finding a user or network issue */
  .userMessage {
    position: fixed;
    left: 990px;
    top: 550px;
    width: 200px;
    height: 100px;
    display: table;
    opacity: 0.9;
    font-size: 20px;
    color: rgb(95, 35, 82);
    }

/* Style of the submit form in which the
   input's div are defined
   Note that the positioning is fixed. */
.submitForm {
    position: fixed;
    background-color: rgb(145, 161, 161);
    right: 350px;
    top: 200px;
    width: 500px;
    height: 300px;
    border: 5px solid rgb(71, 130, 138);
    border-spacing: 1px;
    border-radius: 20px;
    display: table;
    opacity: 0.9;
    }

/* Changing the color of the submit form border
   if it is hovered upon */
.submitForm:hover{
    border: 5px solid #3e6e2f;
}

/* A message at the top of the submit form
   indicating the purpose of the form */
#submitFormMessage {
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 10px;
    left: 50px;

}

/* Style of a text box used for writing the
   username of the github account */
#submitFormTextBox {
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 100px;
    left: 50px;
    right: 50px;
    width: 400px;
    height: 30px;
}

/* Style of the submit button for the username input form */
#submitFormSubmitButton {
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 200px;
    left: 50px;
    right: 50px;
    width: 400px;
    height: 30px;
    background-color: rgb(101, 119, 80);
    border-radius: 8px;
}

/* A class marking the area of the information form which
   the  display of fetched information is handled in.*/
.informationForm {
    position: fixed;
    background-color: rgb(145, 161, 161);
    left: 350px;
    top: 200px;
    width: 500px;
    height: 550px;
    border: 5px solid rgb(71, 130, 138);
    border-spacing: 1px;
    border-radius: 20px;
    display: table;
    opacity: 0.9;
}

/* A paragraph displaying the name of the account */
#infoName {
    display: table-cell;
    position: absolute;
    top: 20px;
    left: 240px;
    width: 200px;
}

/* A paragraph displaying the location of the user */
#infoLocation {
    display: table-cell;
    position: absolute;
    top: 60px;
    left: 240px;
    width: 200px;
}

/* A paragraph displaying the location of the user */
#infoPicture {
    display: table-cell;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 100px;
}

/* The acutual image tag for the avatar of the user */
#infoAvatar {
    width: 100%;
    height: auto;
}

/* The biography of the user */
#infoBio {
    display: table-cell;
    position: absolute;
    top: 240px;
    left: 20px;
    width: 200px;
    height: 100px;
}

/* The blog of the user */
#infoBlog {
    display: table-cell;
    position: absolute;
    top: 100px;
    left: 240px;
    width: 200px;
}

/* The favorate language of the user */
#infoLanguage {
    display: table-cell;
    position: absolute;
    top: 140px;
    left: 240px;
    width: 200px;
}