Ayo38 commited on
Commit
69261f7
·
verified ·
1 Parent(s): 47c5b41

Update styless.css

Browse files
Files changed (1) hide show
  1. styless.css +122 -36
styless.css CHANGED
@@ -1,62 +1,148 @@
1
  body {
2
- font-family: Arial, sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  display: flex;
4
- justify-content: center;
5
  align-items: center;
6
- height: 100vh;
7
- background-color: #f0f0f0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  margin: 0;
9
  }
10
 
11
- .card {
12
- background-color: #fff;
13
- border-radius: 10px;
14
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
15
- overflow: hidden;
16
- width: 350px;
 
 
 
 
 
 
17
  text-align: center;
18
- margin: 20px;
19
  }
20
 
21
- .logo-container {
22
- background-color: #f7f7f7;
23
  padding: 20px;
 
 
24
  }
25
 
26
- .logo {
27
- width: 100px;
28
- height: 100px;
29
- border-radius: 50%;
30
- object-fit: cover;
31
  }
32
 
33
- .content {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  padding: 20px;
 
 
35
  }
36
 
37
- .company-name {
38
- margin: 0;
39
- font-size: 1.5em;
40
- color: #333;
41
  }
42
 
43
- .description {
44
- font-size: 1em;
45
- color: #666;
46
- margin: 10px 0;
 
 
 
 
 
 
47
  }
48
 
49
- .social-media {
50
- margin-top: 15px;
 
 
 
 
51
  }
52
 
53
- .social-icon {
54
- width: 30px;
55
- height: 30px;
56
- margin: 0 5px;
57
- transition: transform 0.2s;
 
 
 
58
  }
59
 
60
- .social-icon:hover {
61
- transform: scale(1.2);
 
 
 
 
62
  }
 
1
  body {
2
+ font-family: 'Roboto', sans-serif;
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ color: #333;
7
+ }
8
+
9
+ header {
10
+ background-color: #333;
11
+ color: white;
12
+ padding: 20px 0;
13
+ }
14
+
15
+ nav {
16
  display: flex;
17
+ justify-content: space-between;
18
  align-items: center;
19
+ max-width: 1200px;
20
+ margin: 0 auto;
21
+ padding: 0 20px;
22
+ }
23
+
24
+ nav .logo {
25
+ font-size: 1.5em;
26
+ font-weight: bold;
27
+ }
28
+
29
+ nav ul {
30
+ list-style: none;
31
+ display: flex;
32
+ gap: 20px;
33
+ }
34
+
35
+ nav ul li {
36
  margin: 0;
37
  }
38
 
39
+ nav ul li a {
40
+ color: white;
41
+ text-decoration: none;
42
+ font-size: 1em;
43
+ }
44
+
45
+ #hero {
46
+ background: url('hero-bg.jpg') no-repeat center center/cover;
47
+ height: 100vh;
48
+ display: flex;
49
+ justify-content: center;
50
+ align-items: center;
51
  text-align: center;
52
+ color: white;
53
  }
54
 
55
+ .hero-content {
56
+ max-width: 600px;
57
  padding: 20px;
58
+ background: rgba(0, 0, 0, 0.5);
59
+ border-radius: 10px;
60
  }
61
 
62
+ .hero-content h1 {
63
+ font-size: 2.5em;
64
+ margin-bottom: 20px;
 
 
65
  }
66
 
67
+ .hero-content p {
68
+ font-size: 1.2em;
69
+ margin-bottom: 20px;
70
+ }
71
+
72
+ .cta-button {
73
+ background-color: #f04a4a;
74
+ color: white;
75
+ padding: 10px 20px;
76
+ text-decoration: none;
77
+ border-radius: 5px;
78
+ font-size: 1em;
79
+ }
80
+
81
+ #features, #team, #contact {
82
+ padding: 50px 20px;
83
+ text-align: center;
84
+ }
85
+
86
+ h2 {
87
+ font-size: 2em;
88
+ margin-bottom: 20px;
89
+ }
90
+
91
+ .features-container, .team-container {
92
+ display: flex;
93
+ justify-content: center;
94
+ gap: 20px;
95
+ flex-wrap: wrap;
96
+ }
97
+
98
+ .feature, .team-member {
99
+ background-color: white;
100
+ border-radius: 10px;
101
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
102
  padding: 20px;
103
+ width: 300px;
104
+ margin: 10px;
105
  }
106
 
107
+ .feature img, .team-member img {
108
+ width: 100%;
109
+ border-radius: 10px;
 
110
  }
111
 
112
+ form {
113
+ display: flex;
114
+ flex-direction: column;
115
+ max-width: 600px;
116
+ margin: 0 auto;
117
+ }
118
+
119
+ form label {
120
+ font-weight: bold;
121
+ margin-top: 10px;
122
  }
123
 
124
+ form input, form textarea {
125
+ padding: 10px;
126
+ margin-top: 5px;
127
+ border: 1px solid #ccc;
128
+ border-radius: 5px;
129
+ font-size: 1em;
130
  }
131
 
132
+ form button {
133
+ margin-top: 20px;
134
+ padding: 10px;
135
+ background-color: #333;
136
+ color: white;
137
+ border: none;
138
+ border-radius: 5px;
139
+ font-size: 1em;
140
  }
141
 
142
+ footer {
143
+ background-color: #333;
144
+ color: white;
145
+ text-align: center;
146
+ padding: 20px 0;
147
+ margin-top: 50px;
148
  }