HTML/CSS Steam Website rebuild?

Hallo,

ich möchte gerne die aktuelle Webseite von Steam nachbauen, jedoch habe ich Schwierigkeiten mit dem Hintergrund der Seite. Obwohl die Pixel-Art am Anfang vorhanden ist, fehlt mir der untere Teil der Seite, insbesondere die Darstellung der Steine und Fische. Es wäre am besten, wenn ihr selbst auf die Seite geht, um mich besser zu verstehen.

Ich benötige das zweite Bild von der Seite, das als Hintergrund verwendet wird. Ich habe bereits versucht, es über den Source Code zu finden, war aber leider nicht erfolgreich. Ich zeige euch ein Bild, das ich bereits habe, und benötige lediglich den unteren Teil davon, den ihr auf der Steam-Seite sehen könnt. Dort werden Fische und Steine abgebildet.

Vielen Dank für eure Unterstützung!

Bild zum Beitrag

2 Antworten

flyaquarius

01.07.2023, 20:33

Steam_Summer_Sale_pattern-04-day_lighter.gif (800×800) (steamstatic.com)

Soeldner2310

Fragesteller

01.07.2023, 20:34

Lol danke!!! Woher?

flyaquarius

01.07.2023, 20:41

@Soeldner2310

Über die Dev-Tools vom Browser kannst du ja die Elemente untersuchen. Habe da ein bisschen rumgeklickt und es beim body tag gefunden.

body.v6.sale_summer2023 {
    background: url(https://cdn.cloudflare.steamstatic.com/store/promo/summer2023/Steam_Summer_Sale_pattern-04-day_lighter.gif?v=2) repeat center top, #010404;
}

Soeldner2310

Fragesteller

01.07.2023, 20:57

@flyaquarius

Dachte Steam haut alles unter die background divs, der war aber ein wenig versteckt XD Danke dir

NackterGerd

01.07.2023, 18:43

Du weißt aber schon dass dies illegal ist - und recht teuer werden kann - wenn du deine Kopie veröffentlicht.

Schon alleine 1 Bild klauen wäre strafbar

Texte natürlich auch

Also lass das besser

Soeldner2310

Fragesteller

01.07.2023, 18:46

Ich veröffentliche nichts XD, bloß ein privates Projekt zum lernen und weiterbilden XD.
Keine Sorge ich kenne mich mit der rechtlichen Lage aus.

NackterGerd

01.07.2023, 18:54

@Soeldner2310

Ok dann kein Problem.

Bilder sollte man aber im Browser immer über den Code herausfinden können.

Zumindest am PC (ich schau mal später)

Soeldner2310

Fragesteller

01.07.2023, 18:58

@NackterGerd

Konnte ich auch beim regulären Hintergrundbild, jedoch nicht bei dem Hintergrund Bild vom unteren Teil der Seite. Habe auch schon nach url und img rausgefiltert und die einzelnen Bilder rausgepickt kam aber dabei nichts rum.

NackterGerd

01.07.2023, 18:59

@Soeldner2310

meinst du diese

https://cdn.cloudflare.steamstatic.com/steam/clusters/sale_autumn2019_assets/54b5034d397baccb93181cc6/home_header_bg_night_german.gif?t=1688069940

NackterGerd

01.07.2023, 19:18

@NackterGerd

oder dies:

https://cdn.cloudflare.steamstatic.com/steam/clusters/sale_autumn2019_assets/54b5034d397baccb93181cc6/home_header_bg_day_german.gif

Ich benötige Hilfe für ein Projekt, bei dem Zustände grafisch abgebildet werden sollen, siehe das Bild im Anhang. Es geht darum, dass wenn sich Zustände und Variablen in Javascript ändern, dies grafisch dargestellt werden soll.

Bis jetzt habe ich es so gemacht, dass es für alle möglichen Zustände ein Bild gibt. Das Problem ist, wenn das System expandiert, läuft das immer mehr aus dem Ruder, was die Erstellung der jeweiligen Zustände angeht. Das heißt, für jeden Zustand, muss ich 2^n Bilder erstellen.

Das Bild zeigt eine vereinfachte und minimalistische Darstellung, wie der Prozess abgebildet werden sollte. Dabei sollten dann, je nach Zustand, die jeweiligen Aktoren dargestellt werden.

Meine Frage ist, ob es einfachere oder elegantere Möglichkeiten gibt, dieses Prozessabbild für HTML mittels JS oder CSS zu animieren?

An SVG hatte ich auch schon gedacht, damit wird es aber noch viel komplizierter, wenn man damit noch nicht so viel Erfahrung hat.

...zur Frage

Tabelle nach SQL-Eintrag aktualisieren?

Hallo!

Ich habe mir ein Tool gebaut, welches Namen von einem SQL-Server holt und anzeigt. Das ganze habe ich schon verwendet, aber dann habe ich mir gedacht, dass es besser wäre wenn ich die Namen auch anhaken könnte. Das hab ich so programmiert aber dann ist mir etwas aufgefallen. Um die Daten aus dem SQL-Server zu aktualisieren habe ich folgendes verwendet:

<meta http-equiv="refresh" content="30">

Dadurch werden die Häkchen jetzt immer wieder gelöscht. Wie könnte man dieses Problem lösen?

...zur Frage

Was ist <input> bei html?

für was braucht man <input> bei html

...zur Frage

Beste AI zum Programmieren?

Hallo

Kennt von euch jemand eine AI welche gut zum Programmieren ist? Ich benötige eine AI welche mithilfe eines Bildes zb mit ein CSS code ausgeben kann mit welchem ich meine Webseite so gestalten kann sodass ws gleich wie auf dem Bild aussieht.

...zur Frage

Wird HTMX JavaScript nutzlos machen?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Wie diese Funktion mit HTML-Code nachbauen?

Guten Abend zusammen ich programmiere eine kleine Seite und mir ist eine Funktion auf ebay aufgefallen; Wenn ihr auf dir Startseite geht dann gibt es etwas unten eine Art: Werbungsvorschläge. Beispielsweise steht da: Handys und Smartphones und direkt dadrunter befinden sich mehrere Bilder von verschiedenen Produkten. Wenn man darauf klickt wird man dementsprechend weitergeleitet. Rechts und links gibt es eine Pfeiltaste, wenn man sie drückt geht es nach links/rechts und es werden weitere Bilder/Produkte angezeigt. Es geht hierbei um die Funktion: Persönliche Empfehlung bei Ebay. Mir ist bereits bewusst, dass ich eine Scriptsprache brauche. Mir geht es jedoch hierbei nur um die Struktur und nicht um die Funktionen. Ich habe mir gedacht, dass ich diesen Code verwenden könnte: <button>←</button> -> Das ist ein Button mit der Pfeiltaste rechts und ich füge einige Bilder hinzu mit dem Code <img> .

Habt ihr vlt. einen Code mit dem es einfacher geht oder würdet ihr es anders machen. Ich bin dankbar für jede Hilfe und jeden Code :)

...zur Frage

HTML Tag als Text darstellen?

Hallo. Ich möchte den Tag <h1> nicht als Tag darstellen, sondern als Text. Wie geht das und macht man das in HTML selber oder in CSS?

Hintergrund: Ich versuche gerade eine Seite zu schreiben, wo HTML erklärt wird. Dort gibt es dann einen Satz bzw. Absatz, der wie folgt lautet:

"Die Sprache HTML beschreibt, wie der Browser (oder ein anderes Programm, wie z. B. ein Text-Editor) die Auszeichnungen des Textes zu „verstehen“ hat, nicht, wie er sie dann in der Darstellung umsetzt. So besagt <h1> zwar, dass eine Überschrift folgt, nicht aber, in welcher Schriftgröße oder Schriftschnitt diese darzustellen ist – hier haben sich nur gewisse übliche Standardeinstellungen eingebürgert, die aber nicht Teil der HTML-Spezifikation sind."

Das Problem ist nun, dass im zweiten Satz ab <h1> alles danach als Überschrift groß und fett geschrieben wird (und in einer neuen Zeile), weil er das alles, was danach folgt, als "Überschrift" kennzeichnet bzw. tagt. Das will ich aber nicht. Ich will, dass es als normaler Text dargestellt wird und alles danach auch. Wie genau mache ich das?

...zur Frage

CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

...zur Frage

Sollte man nach HTML/CSS nicht lieber PHP lernen, weil man damit die Formulare auf einer Webseite funktionstüchtig machen kann?

Weiß gerade nicht, was ich nach HTML und Css lernen soll... PHP oder Javascript.

Mit dem HTML und CSS kurs bin ich ja bald fertig. Aber wenn man zum Beispiel Formulare in die Seite einbaut, kann man sie doch ohne eine Programmiersprache nicht wirklich benutzen...

Ich hoffe ihr habt verstanden, was ich meine... Danke :)

...zur Frage

HTML und CSS lernen?

Wie lang braucht man, um HTML und CSS zu lernen und macht es Sinn das anzufangen, obwohl man gerade erst Grundkenntnisse in Java hat?

...zur Frage

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

CSS Button und collapsible nebeneinander bekommen?

Hey, wie bekommt man den Button und das collapsible nebeneinander ?

Hier der HTML Code:

<div class="fach" id ="${nameDesFachs}"> <button type="button" class="collapsible">${nameDesFachs}</button><div class="content hidden"></div></div>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen