Portfolio/portfolio.css at main · Crunchymon/Portfolio · 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
/*

1. Primary Backgrounds and Elements

	•	Background Color (Dark Gray): rgb(20, 20, 20) - Deep background for the main sections.
	•	Secondary Background (Slightly Lighter Gray): rgb(35, 35, 35) - Use for headers or sections to add subtle contrast.
	•	Accent Color (Dark Blue-Grey): rgb(45, 55, 65) - A dark, muted accent color for subtle borders or hover effects.

2. Text Colors

	•	Primary Text (Light Gray): rgb(220, 220, 220) - For body text to ensure readability.
	•	Secondary Text (Gray): rgb(150, 150, 150) - For subtitles or less important information.
	•	Muted Text (Darker Gray): rgb(100, 100, 100) - For placeholder text or metadata.

3. Highlight Colors

	•	Primary Accent (Bright Blue): rgb(0, 122, 255) - Use sparingly for buttons, links, or highlights to make elements pop.
	•	Secondary Accent (Cyan): rgb(0, 188, 212) - Another highlight color, great for icons or smaller elements to create contrast without overwhelming.

4. Border and Divider Colors

	•	Divider Line or Border (Medium Gray): rgb(55, 55, 55) - For separating sections or adding subtle outlines.

5. Error or Warning Colors

	•	Error Color (Red): rgb(255, 69, 58) - For error messages or alerts.
	•	Warning Color (Yellow-Orange): rgb(255, 159, 10) - For warnings or important notices.

This palette balances a neutral dark theme with occasional pops of color for interactive elements or highlights. Use the bright accent colors sparingly to make buttons and links stand out. Let me know if you’d like suggestions on how to apply these colors to specific elements on your site! */


body
{
    background-color: rgb(20, 20, 20);
    color: rgb(220, 220, 220);
    height: 100vh;
    width: 100vh;


}

/* div container */

.container
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


/* heading */

.header
{
    margin: 0 10px;
    height: 10vh;
    width: 80vw;
    font-size: 2vw;
}


/* About me section */

.about-me
{
    background-color:rgb(35, 35, 35);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    height: 20vh;
    width: 50vw;

}


/* skill section */

.skill
{
    background-color:rgb(35, 35, 35);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    height: 20vh;
    width: 50vw;


}

.skill>h2
{
    margin: 20px 0;
}

.skill>div
{
    display: inline;
    background-color: rgb(75, 75, 75);
    margin: 0 10px;
    padding: 5px;
    border-radius: 5px;
}

.skill>div:hover
{
    background-color:rgb(45, 55, 65);
}

/* social section */

.social
{
    background-color:rgb(35, 35, 35);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    height: 20vh;
    width: 50vw;
}

.social>div
{
    display: inline;
    margin: 5px;
}

.social>div>a>img
{
    height: 50px;
    width: 50px;
}