#HTML-Tag nimmt nicht ganze Seite ein

12 messages · Page 1 of 1 (latest)

silent haven
#

Thanks for your question :clap:, if someone gives you an answer it would be great if you thanked them with a :white_check_mark: in response. This response will earn you both points for special roles on this server.

You can also use /ai to get help from the bot ·
arctic obsidian
#

Frage steht im Titel. Hier steht ihr was ich meine:

image.png
marble umbra
#

@arctic obsidian bitte dein code hier senden

#

am besten formatiert

arctic obsidian
# 
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500;700&display=swap');

:root {
    --text-color: #252525;
    --circle-color: #72777e;
}
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-drag: none}
body { overflow-x: hidden; font-family: "Jost", sans-serif; min-height: 100svh; display: flex; justify-content: center}
body h1 {font-size: 64px; line-height: 1; margin-bottom: 1rem}
body h3 {font-size: 48px}
.wrapper {width: 95%}
.circle { background-color: var(--circle-color); width: 600px; height: 600px; border-radius: 50%; position: absolute; top: -250px; right: -250px; z-index: -2}
.hero-section { padding: 7rem 10%;}
.gallery { display: grid; grid-template-columns: repeat(4, minmax(100px, 400px)); justify-content: center; gap: 5%; position: absolute; width: 100%; top: 45%; left: 0; padding: 2rem}
.gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid #bbb}

@media only screen and (max-width: 1200px) { 
body {overflow: scroll} 
.hero-section {position: relative; display: block; text-align: center} 
.gallery {position: relative; grid-template-columns: repeat(auto-fill, minmax(350px, 100%))} 
.circle {visibility: hidden}
}
# 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="circle"></div>
        <div class="hero-section">
            <span>
                <h1>Test Text</h1>
                <h3>abcdefg hijklmnop</h3>
            </span>
        </div>
        <div class="gallery-section">
            <div class="gallery">
                <img src="assets/images/pexels-takeshi-arai-7206075.jpg">
                <img src="assets/images/pexels-mohamed-abdelsadig-3735455.jpg">
                <img src="assets/images/pexels-geni-hoka-18708839.jpg">
                <img src="assets/images/pexels-jonathan-borba-3818628.jpg">
            </div>
        </div>
    </div>
</body>
</html>
#

@marble umbra

#

Wenn du allgemein Tipps zu CSS hast wäre ich dir super dankbar. Fange grade damit an dass ein wenig zu lernen

clear orchid
arctic obsidian
#

Hab ich schon

clear orchid
#

Dann mach ein Project