HTML (responsive + transparent + digital) Uhr einbinden

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
Ruffyg
Foren Anfänger
Foren Anfänger
Beiträge: 6
Registriert: Do 24. Okt 2019, 09:51
Mein Vorname: Fritz

HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von 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;
}

}
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von 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 ..
Viele Grüße ...Monika
Benutzeravatar
thaileben
Moderator
Moderator
Beiträge: 7770
Registriert: So 26. Sep 2010, 03:47
Mein Vorname: Jürg
Wohnort: nahe Ubon Ratchathani / Thailand
Kontaktdaten:

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von thaileben »

Hallo ruffyg

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

Jürg :X
Benutzeravatar
Ruffyg
Foren Anfänger
Foren Anfänger
Beiträge: 6
Registriert: Do 24. Okt 2019, 09:51
Mein Vorname: Fritz

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von Ruffyg »

moni hat geschrieben: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?
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von moni »

Ruffyg hat geschrieben: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 :D

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..
Viele Grüße ...Monika
Benutzeravatar
Ruffyg
Foren Anfänger
Foren Anfänger
Beiträge: 6
Registriert: Do 24. Okt 2019, 09:51
Mein Vorname: Fritz

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von Ruffyg »

moni hat geschrieben:
Ruffyg hat geschrieben: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 :D

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
Benutzeravatar
Ruffyg
Foren Anfänger
Foren Anfänger
Beiträge: 6
Registriert: Do 24. Okt 2019, 09:51
Mein Vorname: Fritz

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von 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
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von 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 ....
Ruffyg hat geschrieben: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 :G :u23 :DA

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
Viele Grüße ...Monika
Benutzeravatar
moni
Held des Forums
Held des Forums
Beiträge: 8335
Registriert: Mo 16. Nov 2009, 20:56
Mein Vorname: Monika
Wohnort: Borken
Kontaktdaten:

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von moni »

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

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/
Viele Grüße ...Monika
Benutzeravatar
Kathrina
Grosser Webmaster Alt Meister
Grosser Webmaster Alt Meister
Beiträge: 1590
Registriert: Do 3. Nov 2011, 13:13
Mein Vorname: Kathrina
Kontaktdaten:

Re: HTML (responsive + transparent + digital) Uhr einbinden

Beitrag von Kathrina »

Bitte ans Copyright denken.
Lieben Gruß von Kathrina
https://kreativegrafiken.de
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 19 Gäste