HTML (responsive + transparent + digital) Uhr einbinden

[Ruffyg]

Hallo ihr da draußen,
ich baue mir derzeit eine eigene kleine Homepage auf, diese könnt ihr unter ruffyg.de (keine Werbung, sondern nur damit ihr wisst was ich gerne machen möchte) erreichen. Ich bin ein blutiger Anfänger was HTML, CSS, JS, JQuerie und so weiter an geht. Ich wollte nun in der rechten Hälfte meines Sektor-Hintergrundbildes eine digitale, responsive, transparente Uhr einbinden. Am liebsten nur mit HTML und CSS. Ich bekomme es leider aber nicht hin 1. eine passende Uhr zu finden und 2. diese entsprechend zu positionieren. Es wäre cool wenn jemand mir da einen HTML Code schicken könnte.

Hier ist noch meine CSS, wäre schön wenn ihr mir mit dem HTML-Code noch dazu schreibt was ich in meine CSS reinschreiben soll.

html, body {
margin: 0;
padding: 0;
width: 100%;
}

body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}

header {
width: 100%;
height: 100vh;
background: url(hintergrund.jpg) no-repeat 50% 50%;
background-size: cover;
}

.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}

.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}

nav {
position: fixed;
width: 100%;
line-height: 60px;
}

nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}

nav.black ul {
background: #000;
}

nav ul li {
display: inline-block;
padding: 16px 40px;;
}

nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}

.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}

@media(max-width: 786px) {

.logo {
position: fixed;
top: 0;
margin-top: 16px;
}

nav ul {
max-height: 0px;
background: #000;
}

nav.black ul {
background: #000;
}

.showing {
max-height: 34em;
}

nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}

.menu-icon {
display: block;
}

}

[moni]

Hallo ...

http://ruffyg.de/

hab mir deine HP angeschaut und die hat paar Fehler schon drin...

was das Uhr betrifft da kann dir einen Link hier lassen wo du dir ein Uhr generieren kannst, falls das deinen Vorstellung entspricht

https://www.uhr-homepage.de/

wen du dein Design in Ordnung bringst da, denk dir nach wo das Uhr genau hin soll und dem dementsprechend zu positionieren ..

[thaileben]

Hallo ruffyg

vielleicht findest bei uns etwas passenden
https://homepagehelfer.net/tools/uhren/kat_comics1.php

Jürg

[Ruffyg]

Hallo ...

http://ruffyg.de/

hab mir deine HP angeschaut und die hat paar Fehler schon drin...

was das Uhr betrifft da kann dir einen Link hier lassen wo du dir ein Uhr generieren kannst, falls das deinen Vorstellung entspricht

https://www.uhr-homepage.de/

wen du dein Design in Ordnung bringst da, denk dir nach wo das Uhr genau hin soll und dem dementsprechend zu positionieren ..

Hey könntest du mir vielleicht ein paar meiner Fehler nennen? Das es nicht 100% validate ist war mir klar, aber grobe Fehler?

[moni]

Hallo ...


Hey könntest du mir vielleicht ein paar meiner Fehler nennen? Das es nicht 100% validate ist war mir klar, aber grobe Fehler?

Hey wie wär´s danke fürs nachschauen und Tipps

OK und zu deine Frage ...

1)Du hast in Design ein wrapper welche keine angaben in CSS besitze https://abload.de/img/cats33jzs.jpg
2)Auf mobil ist das Design zerrissen https://abload.de/img/catsjtktr.jpg
3) Du schreibst vom, Hinterrundbild ...das Body hat keins ,das sichtbare bild- ist in hedaer drin ..sollte das so sein ?
4) in @media fehlen angaben vom halben Design
5) Content ist nach unter gerutscht
6) kein footer vorhanden aber in HTML ein werbe Link und JS zwischen den den div Container geschoben
7 ) https://abload.de/img/catsrmkje.jpg

das sind ein paar Fehler was mir so auf den ersten blick eingefallen sind..

[Ruffyg]

Hallo ...


Hey könntest du mir vielleicht ein paar meiner Fehler nennen? Das es nicht 100% validate ist war mir klar, aber grobe Fehler?

Hey wie wär´s danke fürs nachschauen und Tipps

OK und zu deine Frage ...

1)Du hast in Design ein wrapper welche keine angaben in CSS besitze https://abload.de/img/cats33jzs.jpg
2)Auf mobil ist das Design zerrissen https://abload.de/img/catsjtktr.jpg
3) Du schreibst vom, Hinterrundbild ...das Body hat keins ,das sichtbare bild- ist in hedaer drin ..sollte das so sein ?
4) in @media fehlen angaben vom halben Design
5) Content ist nach unter gerutscht
6) kein footer vorhanden aber in HTML ein werbe Link und JS zwischen den den div Container geschoben
7 ) https://abload.de/img/catsrmkje.jpg

das sind ein paar Fehler was mir so auf den ersten blick eingefallen sind..

Na dann dankeschön

Das Design sollte in mobiler Ansicht nun etwas besser sein. Ein Footer war bisher noch nicht geplant, aber ich setze mich mal die nächsten Tag daran.
Ich habe für den Wrapper keine css, da ich keine Ahnung hab was ich in die css reinschreiben könnte.

Die Website ist so gestaltet das wenn man Sie öffnet auf 100vh mit meinem Bild begrüßt wird und wenn man weiter nach unten scrollt zum eigentlichen content kommt (content ist derzeit nur durch Platzhalter gefüllt).

@media ist für mich noch komplettes Neuland. Ich habe bis vor 5 Tagen noch nicht mal gewusst was eine css Datei ist und jetzt muss ich alles irgendwie responsive machen was mich schon etwas überfordert.

Es wäre toll wenn du meinen HTML & CSS Quellcode an ein paar Stellen etwas ausbessern könntest, da mir einfach die Erfahrung fehlt und man vom Profi am schnellsten lernen kann. Also nur wenn du die Zeit hast

Mfg Ruffyg

[Ruffyg]

Achja, damit du auch rechtlich abgesichert bist. Ich übernehme die volle Verantwortung wenn du meinen Code veränderst und ich ihn auf meiner Website einbinde. Sollte es dadurch zu Problemen kommen trifft dich daran keine Schuld

[moni]

Guten Abend ..

Ich habe für den Wrapper keine css, da ich keine Ahnung hab was ich in die css reinschreiben könnte.

Auf die gleiche weise wie du die andere CSS Elemente geschrieben hast

Es wäre toll wenn du meinen HTML & CSS Quellcode an ein paar Stellen etwas ausbessern könntest, da mir einfach die Erfahrung fehlt und man vom Profi am schnellsten lernen kann. Also nur wenn du die Zeit hast

Mus dich leider enttäuschen,bin hier seit paar Wochen nur auf Sparflamme ....

Achja, damit du auch rechtlich abgesichert bist. Ich übernehme die volle Verantwortung wenn du meinen Code veränderst und ich ihn auf meiner Website einbinde. Sollte es dadurch zu Problemen kommen trifft dich daran keine Schuld

Bitte ? Hab selten so gelacht

Mein Tipp für dich wäre besorge, dir eine fehlerfreie fertige Template und auf ihre Basis Baue dir die HP auf.

Kannst natürlich auch weiter fragen stellen ,kann sein das einer oder anderen dir mehr helfen kann

[moni]

ich bin noch mal heute ist dein Glücks Tag morgen haben unseren 10 jährigen Forum Jubiläen und habe mir gedacht das es schön wäre einen kleinen Überraschung jemandem machen .. Sonst sind wir auch immer nett und hilfsbereit

OK hier dein HD Bild mit angepasste fertig Bootstrap Template ...

http://demo.homepagehelfer.net/ruffyg-demo/index.html

so stellst du dir sicherlich auch deine HP vor ... hab das zumindest so verstanden

das ist diese freie Template welche man gut anpassen kann ...

https://startbootstrap.com/templates/scrolling-nav/

[Kathrina]

Bitte ans Copyright denken.