Skip to content

Commit 7622f00

Browse files
erpicodingerpicoding
committed
new hero banner design and technologies area
1 parent f7baac9 commit 7622f00

3 files changed

Lines changed: 80 additions & 147 deletions

File tree

‎index.html‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@
3333
</div>
3434
<button class="navbarButton" onclick="navbarToggle()">Menu</button>
3535
</nav>
36-
<div class="banner">
36+
<div class="banner animatedBorder">
3737
<h1>ERPI CODING</h1>
3838
<h2>Web-Developer</h2>
39-
<a href="#section3" class="bannerLink fancyBorder">Projekte &rarr;</a>
39+
<a href="#section3" class="bannerLink">Projekte &rarr;</a>
4040
</div>
4141
</header>
4242
<section class="contentSection" id="section1">
@@ -47,25 +47,23 @@ <h2 class="sectionHeading">Über Mich</h2>
4747
programmieren.
4848
</p>
4949
<h2>Programmiersprachen und andere Technologien</h2>
50-
<div class="languageSelector">
51-
<div id="languageSelectorBg"></div>
52-
<button class="language" onclick="selectLanguage(1)" id="select1">
53-
HTML
54-
</button>
55-
<button class="language" onclick="selectLanguage(2)" id="select2">
56-
CSS
57-
</button>
58-
<button class="language" onclick="selectLanguage(3)" id="select3">
59-
JavaScript
60-
</button>
61-
<button class="language" onclick="selectLanguage(4)" id="select4">
62-
node.js
63-
</button>
64-
</div>
65-
<div class="infotext">
66-
<img id="languageLogo" />
67-
<p id="languageText"></p>
68-
<p id="languageLogoSource"></p>
50+
<div class="technologies">
51+
<div class="technology">
52+
<img class="logo" src="./img/html.webp" />
53+
<p>HTML<br /><span>Markup Language</span></p>
54+
</div>
55+
<div class="technology">
56+
<img class="logo" src="./img/CSS_logo.svg" />
57+
<p>CSS<br /><span>Stylesheet Language</span></p>
58+
</div>
59+
<div class="technology">
60+
<img class="logo" src="./img/js_logo.svg" />
61+
<p>JavaScript<br /><span>Programming Language</span></p>
62+
</div>
63+
<div class="technology">
64+
<img class="logo" src="./img/node_logo.svg" />
65+
<p>node.js<br /><span>Runtime environment</span></p>
66+
</div>
6967
</div>
7068
</section>
7169
<section class="contentSection linksBg" id="section2">

‎script.js‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -41,45 +41,3 @@ function navbarToggle() {
4141
linkContainer.classList.toggle("showLinks");
4242
navbar.classList.toggle("showLinks");
4343
}
44-
45-
selectLanguage(3);
46-
47-
function selectLanguage(languageId) {
48-
if (languageId == 1) {
49-
//html
50-
document.getElementById("languageSelectorBg").style.left = "0%";
51-
52-
document.getElementById("languageLogo").src = "./img/html.webp";
53-
document.getElementById("languageText").innerHTML =
54-
"HTML (Hypertext Markup Language) bildet die Grundlage jeder Website. Es strukturiert Inhalte wie Texte, Bilder, Videos und Links in einer klaren, lesbaren Form für Browser. Durch eine saubere HTML-Struktur wird sichergestellt, dass Webseiten für Suchmaschinen optimiert sind und auf allen Geräten korrekt dargestellt werden. Eine gut organisierte HTML-Basis ist entscheidend für Performance, Barrierefreiheit und die spätere Erweiterbarkeit einer Website.<br><br>Diese Website benutzt auch HTML.";
55-
document.getElementById("languageLogoSource").innerHTML =
56-
"https://commons.wikimedia.org/wiki/File:HTML5_logo_and_wordmark.svg";
57-
} else if (languageId == 2) {
58-
//css
59-
document.getElementById("languageSelectorBg").style.left = "25%";
60-
61-
document.getElementById("languageLogo").src = "./img/CSS_logo.svg";
62-
document.getElementById("languageText").innerHTML =
63-
"CSS (Cascading Style Sheets) sorgt für das visuelle Erscheinungsbild einer Website. Es ermöglicht individuelle Designs, ansprechende Layouts und optimierte Darstellungen für verschiedene Bildschirmgrößen. Mit modernen CSS-Techniken wie Flexbox oder Grid können responsive Webseiten entwickelt werden, die auf Smartphones, Tablets und Desktops gleichermaßen gut aussehen. Eine durchdachte Gestaltung steigert die Benutzerfreundlichkeit und stärkt die Markenidentität.<br><br>Diese Website benutzt auch CSS.";
64-
document.getElementById("languageLogoSource").innerHTML =
65-
"https://commons.wikimedia.org/wiki/File:CSS3_logo.svg";
66-
} else if (languageId == 3) {
67-
//javascript
68-
document.getElementById("languageSelectorBg").style.left = "50%";
69-
70-
document.getElementById("languageLogo").src = "./img/js_logo.svg";
71-
document.getElementById("languageText").innerHTML =
72-
"JavaScript bringt Interaktivität und Dynamik in Websites. Es ermöglicht Funktionen wie Animationen, interaktive Formulare, Echtzeit-Datenaktualisierungen und vieles mehr. Durch die Integration von JavaScript entstehen reaktionsschnelle Webanwendungen, die ein besseres Nutzererlebnis bieten. Zudem ermöglicht es die Umsetzung komplexer Funktionen direkt im Browser, ohne zusätzliche Ladezeiten.<br><br>Diese Website benutzt auch Javascript.";
73-
document.getElementById("languageLogoSource").innerHTML =
74-
"https://commons.wikimedia.org/wiki/File:Unofficial_JavaScript_logo_2.svg";
75-
} else if (languageId == 4) {
76-
//node
77-
document.getElementById("languageSelectorBg").style.left = "75%";
78-
79-
document.getElementById("languageLogo").src = "./img/node_logo.svg";
80-
document.getElementById("languageText").innerHTML =
81-
"Node.js ist eine serverseitige JavaScript-Laufzeitumgebung, die schnelle und skalierbare Webanwendungen ermöglicht. Dank seiner effizienten Architektur eignet sich Node.js ideal für Echtzeitanwendungen, wie Chats oder Online-Tools. Es sorgt für kurze Reaktionszeiten, hohe Performance und eine nahtlose Verbindung zwischen Frontend und Backend. Damit wird eine moderne, zukunftssichere Weblösung geschaffen.";
82-
document.getElementById("languageLogoSource").innerHTML =
83-
"https://commons.wikimedia.org/wiki/File:Node.js_logo.svg";
84-
}
85-
}

‎style.css‎

Lines changed: 61 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@
99
--petrol-solid: hsl(182, 54%, 27%);
1010
--petrol-glow: hsl(182, 100%, 50%);
1111

12-
--gradient1a: hsl(56, 100%, 56%);
13-
--gradient1b: hsl(182, 100%, 50%);
14-
--gradient1c: hsl(111, 100%, 54%);
12+
--gradient1: hsl(56, 100%, 56%);
1513
}
1614
* {
1715
font-family: "Ubuntu", sans-serif;
@@ -199,7 +197,7 @@ header {
199197

200198
backdrop-filter: blur(5px);
201199
background-color: var(--petrol-ultra-transparent);
202-
box-shadow: inset 0 0 5px black;
200+
box-shadow: inset 0 2px 4px hsl(0, 0%, 30%);
203201

204202
border-radius: 25px;
205203
transition: 500ms;
@@ -217,34 +215,39 @@ header {
217215
border-radius: 20px;
218216
transition: 500ms;
219217
}
220-
.fancyBorder {
221-
background: linear-gradient(var(--petrol-solid), var(--petrol-solid))
222-
padding-box,
223-
linear-gradient(
224-
45deg,
225-
var(--gradient1a) 0%,
226-
var(--petrol-glow) 50%,
227-
var(--gradient1b) 100%
218+
219+
@property --angle {
220+
syntax: "<angle>";
221+
initial-value: 0deg;
222+
inherits: false;
223+
}
224+
.animatedBorder {
225+
background: linear-gradient(0deg, hsl(0, 0%, 5%), hsl(0, 0%, 10%)) padding-box,
226+
conic-gradient(
227+
from var(--angle),
228+
var(--invisible) 0%,
229+
var(--gradient1) 10%,
230+
var(--invisible) 20%,
231+
var(--invisible) 50%,
232+
var(--gradient1) 60%,
233+
var(--invisible) 70%
228234
)
229235
border-box;
230236
border: solid 2px transparent;
231-
}
232237

233-
.banner,
234-
.bannerLink {
235-
transition: transform 500ms ease;
238+
animation: 3s linear rotation infinite;
239+
animation-play-state: paused;
236240
}
237-
238-
.banner,
239-
.bannerLink {
240-
transition: transform 500ms ease;
241-
}
242-
243-
.banner:hover {
244-
transform: rotate(-180deg);
241+
.animatedBorder:hover {
242+
animation-play-state: running;
245243
}
246-
.banner:hover .bannerLink {
247-
transform: rotate(180deg);
244+
@keyframes rotation {
245+
from {
246+
--angle: 0deg;
247+
}
248+
to {
249+
--angle: 360deg;
250+
}
248251
}
249252

250253
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Header ende
@@ -281,75 +284,49 @@ h6 {
281284
overflow: hidden;
282285
}
283286

284-
div.languageSelector {
285-
display: flex;
286-
direction: row;
287-
justify-content: space-around;
288-
position: relative;
289-
290-
width: calc(100% - 50px);
291-
padding: 0px;
292-
margin: 25px;
287+
.technologies {
288+
display: grid;
289+
grid-template-columns: repeat(4, 1fr);
290+
grid-template-rows: repeat(1, 80px);
291+
grid-gap: 20px;
292+
padding: 20px;
293+
}
294+
.technology {
295+
height: 80px;
296+
gap: 20px;
293297

294-
border-radius: 29px;
295-
gap: 4px;
298+
display: flex;
299+
flex-direction: row;
296300

297-
background-color: var(--bg-grey);
298301
background: linear-gradient(0deg, hsl(0, 0%, 5%), hsl(0, 0%, 10%));
299302
box-shadow: inset 0 1px 2px hsl(0, 0%, 30%);
303+
border-radius: 20px;
300304
}
301-
#languageSelectorBg {
302-
position: absolute;
303-
width: calc(25% - 8px);
304-
height: 32px;
305-
margin: 4px;
306-
307-
border-radius: 30px;
308-
background-color: var(--petrol-solid);
309-
310-
transition: 500ms;
311-
}
312-
button.language {
313-
width: auto;
314-
height: 40px;
315-
min-width: 50px;
316-
width: 25%;
317-
318-
background-color: var(--invisible);
319-
320-
border: none;
321-
border-radius: 25px;
322-
323-
font-size: 16px;
305+
.technology p {
306+
margin: 10px;
307+
margin-left: 0px;
324308
font-weight: 500;
325-
326-
position: relative;
327-
z-index: 10;
328-
329-
transition: 500ms ease-in-out;
330309
}
331-
button.language:hover {
332-
cursor: pointer;
310+
.technology p span {
311+
color: hsl(0, 0%, 60%);
312+
font-weight: 400;
333313
}
334-
#languageLogo {
335-
width: 150px;
336-
height: 150px;
337-
338-
margin-right: 20px;
339-
margin-bottom: 20px;
340-
341-
float: left;
314+
.logo {
315+
width: 60px;
316+
height: 60px;
317+
margin: 10px;
342318
}
343-
@media (max-width: 400px) {
344-
#languageText {
345-
clear: left !important;
319+
@media (max-width: 900px) {
320+
.technologies {
321+
grid-template-columns: repeat(2, 1fr);
322+
grid-template-rows: repeat(2, 80px);
346323
}
347324
}
348-
349-
#languageLogoSource {
350-
clear: left;
351-
font-size: 12px;
352-
text-wrap: wrap;
325+
@media (max-width: 600px) {
326+
.technologies {
327+
grid-template-columns: repeat(1, 1fr);
328+
grid-template-rows: repeat(4, 80px);
329+
}
353330
}
354331
/* Linktree sction
355332
*/

0 commit comments

Comments
 (0)