MainMaster.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Pages/Site1.Master" AutoEventWireup="true" CodeBehind="MainMaster.aspx.cs" Inherits="YoadMadrid.Pages.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style>
        @font-face {
            font-family: 'RealMadrid2019';
            src: url('/Fonts/real-madrid-19-20.ttf');
        }

        @font-face {
            font-family: 'BragoFree';
            src: url('/Fonts/Bragofree-L3l8E.ttf');
        }

        body {
            background-image: url("/Images/mainteam.png");
            background-repeat: no-repeat;
            background-position: center +70px;
            background-size: cover;
            font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden;
            height: 100vh;
        }

        
        .gradient-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 30vh;
            background: linear-gradient(180deg, transparent, black); 
        }

       
        .gradient-content {
            position: absolute;
            top: 45vh;
            width: 100%;
            text-align: center;
            z-index: 2;
        }

        h1 {
            color: #0070c0;
            font-family: 'RealMadrid2019', sans-serif; 
            font-size: 75px;
            margin: 0;
            padding-top: 140px;
        }

        p.paragraph1 {
            color: yellow;
            font-family: 'BragoFree', sans-serif;
            font-size: 45px;
            margin: 20px 0; 
        }

        p.paragraph2 {
            color: red;
            font-family: 'BragoFree', sans-serif;
            font-size: 50px;
            margin: 20px 0; 
        }

        p.paragraph3 {
            color: blue;
            font-family: Bahnschrift, sans-serif;
            font-size: 20px;
            margin: 10px 0; 
        }

    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
    <div class="gradient-overlay"></div>
    
    <div class="gradient-content">
        <h1>Real Madrid</h1>
        <p class="paragraph1">Welcome to the real madrid website!</p>
        <p class="paragraph1">Here you can find different kinds of information about this magnificent club!</p>
        <p class="paragraph2">Join and Browse!</p>
        <p class="paragraph3">
            <a href="Aboutme.aspx" style="color: blue; font-family: Bahnschrift; margin: 10px 0; margin-bottom: 400px;">About the creator</a>
        </p>
    </div>
</asp:Content>