Hugging Face's logo

Spaces:
JAYASWAROOP
/
portfolio1
Running

App Files Community
JAYASWAROOP commited on
Commit
e74c99f
·
verified ·
1 Parent(s): 0a70f12

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +77 -65
style.css CHANGED
@@ -1,102 +1,114 @@
 
 
 
 
 
 
1
 
2
- body {
3
- font-family: Arial, sans-serif;
4
- margin: 0;
5
- padding: 0;
6
  }
7
 
 
8
  .header {
9
- background-color: #fff;
10
- box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
11
- position: fixed;
12
- top: 0;
13
- width: 100%;
14
- z-index: 10;
15
  }
16
 
17
  .navbar {
18
- padding: 1rem 2rem;
19
  }
20
 
21
- .hero {
22
- height: 100vh;
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- background-image: url("images/background.jpg"); /* Replace with your background image */
27
- background-size: cover;
28
- background-attachment: fixed;
29
- color: #fff;
30
  }
31
 
32
- .about, .skills, .portfolio, .contact {
33
- padding: 5rem 0;
 
 
 
 
 
34
  }
35
 
36
- .skill-card {
37
- background-color: #f5f5f5;
38
- padding: 2rem;
39
- border-radius: 5px;
40
- text-align: center;
41
- transition: all 0.3s ease-in-out;
42
  }
43
 
44
- .skill-card:hover {
45
- transform: scale(1.05);
 
46
  }
47
 
48
- .portfolio-item {
49
- margin-bottom: 2rem;
50
  }
51
 
52
- .footer {
53
- background-color: #f2f2f2;
54
- padding: 1rem 0;
55
  }
56
 
57
- .social-link {
58
- margin-right: 1rem;
59
- font-size: 1.2
 
 
 
60
  }
61
 
62
- .nav-link {
63
- color: #333;
64
- transition: all 0.3s ease-in-out;
65
  }
66
 
67
- .nav-link:hover {
68
- color: #007bff;
69
  }
70
 
71
- .hero h1 {
72
- font-size: 2.5rem;
73
- font-weight: bold;
74
- margin-bottom: 1rem;
75
  }
76
 
77
- .hero p {
78
- font-size: 1.2rem;
79
- line-height: 1.5;
 
80
  }
81
 
82
- @media (max-width: 768px) {
83
- .col-md-6 {
84
- width: 100%;
85
- }
86
  }
87
 
88
-
89
- .social-link i {
90
- font-size: 1.5rem;
91
- color: #333;
92
- transition: all 0.3s ease-in-out;
93
  }
94
 
95
- .social-link:hover i {
96
- color: #007bff;
 
 
 
 
97
  }
98
 
99
- .footer {
100
- padding: 20px;
101
- background-color: #f5f5f5;
102
- }
 
 
 
 
 
 
 
1
+ /* General styles */
2
+ body {
3
+ font-family: Arial, sans-serif;
4
+ margin: 0;
5
+ padding: 0;
6
+ }
7
 
8
+ .container {
9
+ max-width: 960px;
10
+ margin: 0 auto;
11
+ padding: 20px;
12
  }
13
 
14
+ /* Header styles */
15
  .header {
16
+ background-color: #f5f5f5;
 
 
 
 
 
17
  }
18
 
19
  .navbar {
20
+ padding: 0 20px;
21
  }
22
 
23
+ .navbar-brand {
24
+ font-size: 20px;
25
+ font-weight: bold;
 
 
 
 
 
 
26
  }
27
 
28
+ .hero {
29
+ height: 100vh;
30
+ background-image: url("images/background.jpg"); /* Replace with your background image path */
31
+ background-position: center;
32
+ background-size: cover;
33
+ color: #fff;
34
+ text-align: center;
35
  }
36
 
37
+ .profile-img {
38
+ width: 200px;
39
+ height: 200px;
40
+ border-radius: 50%;
41
+ margin: 0 auto;
 
42
  }
43
 
44
+ /* About section styles */
45
+ .about {
46
+ padding-top: 50px;
47
  }
48
 
49
+ .about p {
50
+ line-height: 1.5;
51
  }
52
 
53
+ /* Skills section styles */
54
+ .skills {
55
+ padding-top: 50px;
56
  }
57
 
58
+ .skill-card {
59
+ background-color: #f0f0f0;
60
+ border-radius: 5px;
61
+ padding: 20px;
62
+ margin: 10px;
63
+ text-align: center;
64
  }
65
 
66
+ /* Portfolio section styles */
67
+ .portfolio {
68
+ padding-top: 50px;
69
  }
70
 
71
+ .portfolio-item {
72
+ margin-bottom: 20px;
73
  }
74
 
75
+ .card-img-top {
76
+ height: 250px;
77
+ object-fit: cover;
 
78
  }
79
 
80
+ /* Contact section styles */
81
+ .contact {
82
+ padding-top: 50px;
83
+ text-align: center;
84
  }
85
 
86
+ .social-media {
87
+ display: flex;
88
+ justify-content: center;
89
+ gap: 10px;
90
  }
91
 
92
+ .social-link {
93
+ font-size: 20px;
94
+ color: #333;
 
 
95
  }
96
 
97
+ /* Footer styles */
98
+ .footer {
99
+ background-color: #333;
100
+ color: #fff;
101
+ padding: 10px;
102
+ text-align: center;
103
  }
104
 
105
+ /* Responsive adjustments */
106
+ @media (max-width: 768px) {
107
+ .hero {
108
+ height: auto;
109
+ }
110
+
111
+ .card-img-top {
112
+ height: 200px;
113
+ }
114
+ }