html_css

1
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2

3
body {
4
    font-size: 16px;
5
    font-family: Roboto, sans-serif;
6
    font-weight: normal;
7
    color: #0f141e;
8
    background: #f1f1f1;
9
}
10
.container {
11
    max-width: 750px;
12
    margin: auto;
13
    padding-top: 30px;
14
    /*color: cyan;*/
15
}
16
.info {
17
    margin-bottom: 20px;
18
}
19
.avatar {
20
    width: 32%;
21
    border-radius: 25px;
22
    box-shadow: 5px 5px 14px rgba(0, 0, 0, 0.25);
23
    display: inline-block;
24

25
}
26
.info {
27
    margin-bottom: 20px;
28
    display: flex;
29
}
30
.info-text {
31
    margin-left: 40px;
32
}
33
.info-text p {
34
    font-style: italic;
35
    font-weight: bold;
36
    color: #86898f;
37
    margin: 0px;
38
}
39
.info-text h4 {
40
    margin-top: 7px;
41
    margin-bottom: 3px;
42
}
43
.info-text a {
44
    color: black;
45
    text-decoration: none;
46
}
47
.info-text a:hover {
48
    color: #86898f;
49
}
50
.info-text a:active {
51
    color: blue;
52
}
53
.info-text a:visited {
54
    color: gray
55
}
56
.card {
57
    border: 1px solid black;
58
    border-right: 2px solid black;
59
    border-bottom: 2px solid black;
60
    border-radius: 10px;
61
    margin-bottom: 5px;
62
    padding: 15px 20px;
63
}
64
.hobby {
65
    background-color: #ebfee9;
66
}
67
.workskill {
68
    background-color: #fce6e5;
69
}
70
.writetome {
71
    background-color: #fef8e0;
72
}
73
.btn {
74
    background: #111;
75
    padding: 15px 20px;
76
    color: white;
77
    border: none;
78
    cursor: pointer;
79
    border-radius: 5px;
80
    font-family: inherit;
81
}
82
.btn:hover {
83
    opacity: .8;
84

85
}
86

87
.list {
88
    padding: 0 20px;
89
}
90

91
.list li {
92
    color: #86898f;
93
    margin-bottom: 10px;
94
}
95
.link-list {
96
    list-style: none;
97
    padding: 0;
98
}
99
.link-list li{
100
    margin-bottom: 10px;
101
    border-bottom: 1px solid #ccc;
102
    padding-bottom: 5px;
103
}
104
.table {
105
    width: 100%;
106
}
107
.table td {
108
    padding-bottom: 10px;
109
}
110

111
.table td:nth-child(2),
112
.table td:nth-child(3) {
113
    color: #86898f;
114
}
115
.form h2{
116
    text-align: center;
117
}
118
.form-row {
119
    margin-bottom: 10px;
120
    display: flex;
121
}
122
.form-row .form-group{
123
    /*display: inline-block;*/
124
    margin-right: 20px;
125
    width: 50%;
126
    /*width: calc(50%-20px);*/
127
}
128
.form-row .form-group:last-child {
129
    margin-right: 0;
130
}
131
.form-group label{
132
    display: block;
133
    font-size: 14px;
134
    color: #86898f;
135
}
136
.form-group input,
137
form-group textarea{
138
    width: 100%;
139
    box-sizing: border-box;
140
    border: none;
141
    border-bottom: 1px solid #ccc;
142
    color: #000;
143
    padding: 15px 0 10px;
144
    outline: none;
145
    font-family: inherit;
146
}
147