Skip to content
This repository was archived by the owner on Jul 13, 2025. It is now read-only.

Commit 9ab6d90

Browse files
IJustDevIJustDev
committed
further design
1 parent 0fe66e7 commit 9ab6d90

File tree

6 files changed

+399
-341
lines changed

6 files changed

+399
-341
lines changed

‎alex.png‎

717 KB
Loading

‎automatisierung.png‎

106 KB
Loading

‎index.html‎

Lines changed: 15 additions & 341 deletions
Original file line numberDiff line numberDiff line change
@@ -4,343 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>RoyalZSoftware - Ihre Softwarelösung</title>
7+
<link rel="stylesheet" href="style.css" type="text/css"/>
78
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
89
<link rel="icon" type="image/png" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1674204340726/48niDOH6D.png?auto=compress,format&amp;format=webp&amp;fm=png"/>
910
<style>
1011
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
1112
</style>
12-
<style>
13-
@font-face {
14-
font-family: 'Proxima Nova';
15-
src: url('./regular.woff2') format('woff2');
16-
}
17-
@font-face {
18-
font-family: 'Proxima Nova Black';
19-
src: url('./black.woff2') format('woff2');
20-
}
21-
.why a {
22-
color: #d8b573;
23-
}
24-
* {
25-
box-sizing: border-box;
26-
}
27-
/* Base Styles */
28-
body {
29-
font-family: 'Ubuntu', sans-serif;
30-
background-color: #202932;
31-
color: white;
32-
margin: 0;
33-
padding: 0;
34-
}
35-
36-
main {
37-
display: flex;
38-
flex-direction: column;
39-
align-items: center;
40-
width: 100%;
41-
margin: 0 auto;
42-
position: relative;
43-
}
44-
45-
h1, h2, h3 {
46-
font-family: 'Proxima Nova', sans-serif;
47-
color: #d8b573;
48-
}
49-
50-
h1 {
51-
font-weight: 900;
52-
font-family: 'Proxima Nova Black', sans-serif;
53-
font-size: 3rem;
54-
background: -webkit-linear-gradient(-75deg, #d8b573, #e55100);
55-
-webkit-background-clip: text;
56-
-webkit-text-fill-color: transparent;
57-
}
58-
59-
h2 {
60-
font-weight: bold;
61-
text-transform: uppercase;
62-
font-size: 1.8rem;
63-
}
64-
65-
h3 {
66-
font-weight: bold;
67-
text-transform: uppercase;
68-
font-size: 1.2rem;
69-
}
70-
71-
p {
72-
font-size: 1rem;
73-
line-height: 1.6;
74-
}
75-
76-
section {
77-
padding: 50px 20px;
78-
width: 100%;
79-
justify-content: center;
80-
display: flex;
81-
}
82-
83-
.section-content {
84-
max-width: 1000px;
85-
width: 100%;
86-
}
87-
88-
/* Navbar */
89-
.navbar {
90-
width: 100%;
91-
width: 100%;
92-
background-color: #1b232a;
93-
border-bottom: 1px solid #4e5f6e;
94-
padding: 8px 0;
95-
position: sticky;
96-
top: 0;
97-
z-index: 1000;
98-
display: flex;
99-
justify-content: center;
100-
}
101-
.navbar-content {
102-
align-items: center;
103-
width: 100%;
104-
display: flex;
105-
display: flex;
106-
justify-content: space-between;
107-
max-width: 1000px;
108-
}
109-
110-
.navbar a {
111-
color: white;
112-
margin: 0 15px;
113-
text-decoration: none;
114-
font-size: 1.0rem;
115-
}
116-
.cta-button:after {
117-
content: '>';
118-
}
119-
.cta-button {
120-
color: white;
121-
width: fit-content;
122-
text-decoration: none;
123-
padding: 12px 16px;
124-
display: block;
125-
font-size: 1.0rem;
126-
background: -webkit-linear-gradient(70deg, #d8b573, #e55100);
127-
}
128-
.navbar a:hover:not(.kontakt) {
129-
transition: 0.1s all;
130-
background: -webkit-linear-gradient(70deg, #d8b573, #e55100);
131-
-webkit-background-clip: text;
132-
-webkit-text-fill-color: transparent;
133-
}
134-
135-
.navbar .kontakt {
136-
background: -webkit-linear-gradient(70deg, #d8b573, #e55100);
137-
padding: 12px 20px;
138-
}
139-
140-
.navbar-nav {
141-
margin-right: 20px;
142-
}
143-
144-
.hero {
145-
background-color: #1b232a;
146-
padding: 100px 20px;
147-
height: 100vh;
148-
}
149-
150-
.hero > img {
151-
width: 100%;
152-
}
153-
154-
.hero .team-photos {
155-
display: flex;
156-
justify-content: center;
157-
gap: 20px;
158-
margin-top: 20px;
159-
}
160-
161-
.hero .team-photos img {
162-
width: 100px;
163-
height: 100px;
164-
border-radius: 50%;
165-
border: 2px solid #d8b573;
166-
}
167-
168-
.about, .services, .testimonials, .contact, .portfolio, .why {
169-
background-color: #2a313b;
170-
// border-radius: 8px;
171-
}
172-
.about {
173-
color: white !important;
174-
background-color: #d8b573;
175-
}
176-
177-
.about h2 {
178-
color: #202932 !important;
179-
font-weight: bolder;
180-
}
181-
182-
.about .section-content {
183-
border: 2px solid black;
184-
border-radius: 16px;
185-
padding: 16px;
186-
}
187-
188-
.services li {
189-
margin: 10px 0;
190-
padding: 10px;
191-
border-radius: 4px;
192-
}
193-
194-
.testimonials blockquote {
195-
font-style: italic;
196-
border-left: 4px solid #d8b573;
197-
padding-left: 20px;
198-
margin-left: 0;
199-
}
200-
201-
.testimonials .customer {
202-
display: flex;
203-
align-items: center;
204-
gap: 15px;
205-
margin-top: 20px;
206-
}
207-
208-
.testimonials .customer img {
209-
width: 50px;
210-
height: 50px;
211-
border-radius: 50%;
212-
object-fit: cover;
213-
}
214-
.split {
215-
display: flex;
216-
flex-direction: row;
217-
width: 100%;
218-
}
219-
.split > div {
220-
flex-basis: 50%;
221-
flex-grow: 1;
222-
}
223-
.contact form {
224-
flex-grow: 1;
225-
display: flex;
226-
flex-direction: column;
227-
}
228-
229-
.contact label {
230-
margin-top: 10px;
231-
}
232-
233-
.contact input, .contact textarea, .contact button {
234-
padding: 10px;
235-
margin-top: 5px;
236-
border: none;
237-
border-radius: 4px;
238-
font-size: 1rem;
239-
}
240-
241-
.contact button {
242-
background-color: #d8b573;
243-
color: #202932;
244-
cursor: pointer;
245-
}
246-
247-
.contact button:hover {
248-
background-color: #b69259;
249-
}
250-
251-
footer {
252-
background-color: #1b232a;
253-
text-align: center;
254-
padding: 20px;
255-
width: 100%;
256-
}
257-
258-
.social-media a {
259-
color: #d8b573;
260-
margin: 0 10px;
261-
text-decoration: none;
262-
}
263-
264-
.fade-in {
265-
opacity: 1;
266-
transform: translateY(0);
267-
transition: opacity 1s ease-out, transform 1s ease-out;
268-
}
269-
270-
section {
271-
opacity: 0;
272-
}
273-
.projects {
274-
padding: 0;
275-
display: flex;
276-
flex-direction: row;
277-
width: 100%;
278-
gap: 16px;
279-
overflow-x: auto;
280-
}
281-
.project {
282-
width: 300px;
283-
flex-basis: 300px;
284-
min-width: 300px;
285-
display: flex;
286-
flex-direction: column;
287-
288-
}
289-
.project > .cta-button {
290-
align-self: flex-end;
291-
}
292-
293-
.project > img {
294-
border-radius: 8px;
295-
height: 300px;
296-
width: 300px;
297-
}
298-
299-
/* Responsive Design */
300-
@media (max-width: 768px) {
301-
.split {
302-
flex-direction: column;
303-
}
304-
.hero .split {
305-
flex-direction: column-reverse;
306-
}
307-
h1 {
308-
font-size: 2rem;
309-
}
310-
311-
.hero .team-photos img {
312-
width: 80px;
313-
height: 80px;
314-
}
315-
316-
.navbar a {
317-
font-size: 1rem;
318-
margin: 0 10px;
319-
}
320-
321-
.navbar-logo {
322-
font-size: 1.2rem;
323-
}
324-
}
325-
326-
@media (max-width: 900px) {
327-
.navbar a {display: none}
328-
h1 {
329-
font-size: 1.5rem;
330-
}
331-
332-
.hero .team-photos img {
333-
width: 60px;
334-
height: 60px;
335-
}
336-
337-
.navbar a {
338-
font-size: 0.9rem;
339-
margin: 0 5px;
340-
}
341-
}
342-
343-
</style>
34413
</head>
34514
<body>
34615
<main>
@@ -370,10 +39,10 @@ <h1>Softwarelösungen für kleine und mittelständische Unternehmen</h1>
37039
<a class="cta-button" href="#about">Mehr erfahren </a>
37140
</div>
37241
<div>
373-
<img src="hero.png" width="100%"/>
37442
</div>
37543
</div>
37644
</div>
45+
<img src="alex.png" width="100%"/>
37746
</section>
37847

37948
<!-- Über uns Section -->
@@ -388,13 +57,18 @@ <h2>Über uns</h2>
38857
<section class="services" id="services">
38958
<div class="section-content">
39059
<h2>Das machen wir</h2>
391-
<ol>
392-
<li>Automatisierung - Effizienzsteigerung durch Prozessautomatisierung.</li>
393-
<li>Individuelle Softwareentwicklung - maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen.</li>
394-
<li>Mobile App-Entwicklung - innovative Apps für Android und iOS.</li>
395-
<li>IT-Beratung und Support - umfassende Beratung für Ihre IT-Projekte.</li>
396-
<li>Cloud-Lösungen - Skalierbare und sichere Cloud-Services.</li>
397-
</ol>
60+
<ul class="cards">
61+
<li class="card card-l">
62+
<img src="automatisierung.png" style="height: 327px"/>
63+
<h3>Automatisierung</h3> Effizienzsteigerung durch Prozessautomatisierung.</li>
64+
<li class="card card-l">
65+
66+
<img src="webapp.png" style="height: 327px"/>
67+
<h3>Individuelle Softwareentwicklung</h3> maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen.</li>
68+
<li class="card card-l">
69+
<img src="smartphone.png" style="height: 327px"/>
70+
<h3>Mobile App-Entwicklung</h3> innovative Apps für Android und iOS.</li>
71+
</ul>
39872
</div>
39973
</section>
40074

@@ -434,7 +108,7 @@ <h2>Das sagen unsere Kunden</h2>
434108
<div class="section-content">
435109
<h2>Portfolio</h2>
436110
<ul class="projects">
437-
<div class="project">
111+
<div class="project card-m">
438112
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1697573466036/cb00f8e1-e86f-48ad-98c2-1a6f4dbc150b.png?auto=compress,format&format=webp" alt="Preview"/>
439113
<h3>
440114
Versicherungsberichte App

‎smartphone.png‎

451 KB
Loading

0 commit comments

Comments
 (0)