SA:MP Landing page

Avgust 11, 2024, 19:28:58 POSLE PODNE

Opis rada: Simple landing page za SAMP Servere
Funkcionalnosti i karakteristike: Bootstrap, responsive (valjda, moguce)
Slike i/ili video:https://nouddy.github.io/samp-landing-page/
Github link:https://github.com/nouddy/samp-landing-page
Credits: Bootstrap Docs - https://getbootstrap.com/docs/5.3/getting-started/introduction/

Avgust 11, 2024, 20:30:36 POSLE PODNE

very good and simple

Avgust 11, 2024, 22:24:19 POSLE PODNE

Ovako, tvoj rad kao rad je solidan, struktura je tu, ali response je prelos, kao i odredjene stavke nisu uklopljene kako treba.

Ovo je ispravka.

HTML :

Kod [Izaberi]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SA:MP</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #1b2f43;">
    
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid justify-content-center">
      <a class="nav-link active text-white" href="#">FORUM</a>
      <img src="img/logo.png"  id="server-logo" class="navbar-brand" alt="Server Logo">
      <a class="nav-link text-white" href="#">DISCORD</a>
    </div>
  </nav>

  <header id="slide-main">
    <div id="main-container" class="container text-center text-white">
      <h1 class="fst-italic">Miami House - RPG</h1>
      <p class="fst-italic fs-4">
        Dobrodošli na Miami House SA:MP Server <br>
        Upoznajte se sa raznolikostima i unikatnostima sistema, opusti se i poveži na server.
      </p>
      <a class="btn btn-primary btn-lg text-uppercase" href="samp://127.0.0.1:7777" role="button">Poveži Se</a>
    </div>
  </header>

  <section id="second-section" class="py-5">
    <div class="container d-flex flex-wrap justify-content-center gap-4">
      
      <div class="card text-center bg-light shadow-lg p-3 mb-5 rounded" style="width: 18rem;">
        <img src="img/logo.png" class="card-img-top" alt="SA:MP Server">
        <div class="card-body">
          <h5 class="card-title text-black">SA:MP Server</h5>
          <p class="card-text text-black">Trenutno Igraca: 50/100</p>
          <div class="progress mb-3">
            <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <a class="btn btn-primary text-uppercase" href="samp://127.0.0.1:7777" role="button">
            <i class="bi bi-play"></i> samp.miami-house.com:7777
          </a>
        </div>
      </div>

      <div class="card text-center bg-light shadow-lg p-3 mb-5 rounded" style="width: 18rem;">
        <img src="img/logo.png" class="card-img-top" alt="RageMP Server">
        <div class="card-body">
          <h5 class="card-title text-black">RageMP Server</h5>
          <p class="card-text text-black">Trenutno Igraca: 120/150</p>
          <div class="progress mb-3">
            <div class="progress-bar w-75" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <a class="btn btn-primary text-uppercase" href="samp://127.0.0.1:7777" role="button">
            <i class="bi bi-play"></i> rage.miami-house.connect
          </a>
        </div>
      </div>

      <div class="card text-center bg-light shadow-lg p-3 mb-5 rounded" style="width: 18rem;">
        <img src="img/logo.png" class="card-img-top" alt="Discord Server">
        <div class="card-body">
          <h5 class="card-title text-black">Discord</h5>
          <p class="card-text text-black">Members: 120</p>
          <a class="btn btn-primary text-uppercase" href="https://discord.gg/server-link" role="button">
            <i class="bi bi-discord"></i> Join Discord
          </a>
        </div>
      </div>

    </div>
  </section>

  <section id="third-section" class="py-5 text-white" style="background-image: url('img/slider2.jpg'); background-size: cover;">
    <div class="container">
      <div class="row">

        <div class="col-lg-6 mb-5">
          <ol class="list-group list-group-numbered">
            <li class="list-group-item d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
                <div class="fw-bold">GTA: San Andreas</div>
                Kako biste pristupili serveru morate imati GTA: San Andreas.<br>
                Klikom na gumb ispod možete skinuti GTA: San Andreas i SA:MP Client.
                <br>
                <a class="btn btn-primary mt-3 text-uppercase" href="https://gta-multiplayer.cz/downloads/sa-mp-0.3.7-R5-1-MP-install.exe" role="button">
                  <i class="bi bi-controller"></i> Preuzmi
                </a>
              </div>
              <span class="badge bg-success rounded-pill">1</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
                <div class="fw-bold">SA:MP Client</div>
                Kada ste instalirali GTA: San Andreas na vaš računar, <br>
                potrebno je da instalirate SA:MP Client koji će biti u folderu od instalacije igre.<br>
                Dodajte naš server klikom na gumb ispod.
                              <br>

                <a class="btn btn-primary mt-3 text-uppercase" href="samp://127.0.0.1:7777" role="button">
                  <i class="bi bi-bookmark-star"></i> Add to Favorites
                </a>
              </div>
              <span class="badge bg-success rounded-pill">2</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-start">
              <div class="ms-2 me-auto">
                <div class="fw-bold">Povezivanje na server</div>
                Nakon instalacije SA:MP Clienta, pokrenite aplikaciju (client).<br>
                Dodajte IP servera: samp.miami-house.com:7777.<br>
                Kliknite Connect i uživajte u igri na serveru.
              </div>
              <span class="badge bg-success rounded-pill">3</span>
            </li>
          </ol>
        </div>

        <div class="col-lg-6">
          <div class="card bg-light shadow-lg text-center p-4 rounded">
            <img src="img/logo.png" class="card-img-top" alt="RageMP Server">
            <div class="card-body">
              <h5 class="card-title text-black">RageMP Server</h5>
              <p class="card-text text-black">Trenutno Igraca: 120/150</p>
              <div class="progress mb-3">
                <div class="progress-bar w-75" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <a class="btn btn-primary text-uppercase" href="samp://127.0.0.1:7777" role="button">
                <i class="bi bi-play"></i> rage.miami-house.connect
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <footer class="bg-dark text-white text-center py-3">
    <p>&copy; 2024 Miami House RPG. All Rights Reserved.</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JzZ8nGfAFYo3AJkXrWxskKj84/zI9F6eTcmZ3IMg0iC4uDFnBP5t5nYp95cjNGN2" crossorigin="anonymous"></script>
</body>
</html>

CSS :

Kod [Izaberi]

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

body {
    font-family: "Oswald", sans-serif;
    background-color: #1b2f43;
    color: #fff;
    margin: 0;
    padding: 0;
}

.navbar-dark {
    background-color: #12192c;
}

#server-logo {
    height: 80px;
}

#main-container {
    padding: 100px 0;
}

#main-container h1 {
    font-size: 4rem;
}

#main-container p {
    font-size: 1.5rem;
}

#slide-main {
    background: url('img/slider1.jpg') no-repeat center center/cover;
    position: relative;
    padding: 150px 0;
}

#second-section .card {
    width: 18rem;
    transition: transform 0.3s;
}

#second-section .card:hover {
    transform: translateY(-10px);
}

#third-section {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 50px 0;
}

#third-section .card {
    transition: transform 0.3s;
}

#third-section .card:hover {
    transform: translateY(-10px);
}

footer {
    background-color: #12192c;
    padding: 20px 0;
    font-size: 0.9rem;
}

.btn-primary {
    background-color: #1b74e4;
    border-color: #1b74e4;
}

.btn-primary:hover {
    background-color: #165ba3;
    border-color: #165ba3;
}

Izmene koje sam uradio su buttons, pozicije, dodao na par mesta line-break element.
Sve u svemu imas potencijala, samo nastavi.

Ovo je moj rework cisto da ti prikazem sta mozes napraviti ukoliko si uporan.

Desktop Preview: https://imgur.com/a/hHspCqM

HTML :

Kod [Izaberi]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SA:MP</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="img/logo.png" id="server-logo" alt="Logo">
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="#">Forum</a>
                <a class="nav-link" href="#">Discord</a>
            </div>
        </div>
    </nav>

    <header id="hero-section" class="d-flex align-items-center justify-content-center text-center text-light">
        <div>
            <h1 class="display-4 mb-3">Miami House - RPG</h1>
            <p class="lead mb-4">Welcome to Miami House SA:MP Server. Explore our unique system, relax, and connect to the server.</p>
        </div>
    </header>

    <section id="cards-section" class="container my-5">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card border-light shadow-sm">
                    <img src="img/logo.png" class="card-img-top" alt="SA:MP Server">
                    <div class="card-body text-center">
                        <h5 class="card-title">SA:MP Server</h5>
                        <p class="card-text">Players: 50/100</p>
                        <a class="btn btn-primary" href="samp://127.0.0.1:7777">Connect</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card border-light shadow-sm">
                    <img src="img/logo.png" class="card-img-top" alt="RageMP Server">
                    <div class="card-body text-center">
                        <h5 class="card-title">RageMP Server</h5>
                        <p class="card-text">Players: 120/150</p>
                        <a class="btn btn-primary" href="samp://127.0.0.1:7777">Connect</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card border-light shadow-sm">
                    <img src="img/logo.png" class="card-img-top" alt="Discord">
                    <div class="card-body text-center">
                        <h5 class="card-title">Discord</h5>
                        <p class="card-text">Members: 120</p>
                        <a class="btn btn-primary" href="https://discord.gg/server-link">Join Our Discord</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="guide-section" class="container my-5">
      <div class="row justify-content-center">
          <div class="col-md-8">
              <ol class="list-group">
                  <li class="list-group-item d-flex justify-content-between align-items-start">
                    <span class="badge bg-primary">1</span>
                      <div>
                          <div class="fw-bold">GTA: San Andreas</div>
                          <p>To connect to the server, you need to have GTA: San Andreas. Click the button below to download GTA: San Andreas and SA:MP Client.</p>
                          <a class="btn btn-primary" href="https://gta-multiplayer.cz/downloads/sa-mp-0.3.7-R5-1-MP-install.exe">Download</a>
                      </div>
                  </li>
                  <li class="list-group-item d-flex justify-content-between align-items-start">
                    <span class="badge bg-primary">2</span>
                      <div>
                          <div class="fw-bold">SA:MP Client</div>
                          <p>After installing GTA: San Andreas, install the SA:MP Client found in the game's installation folder. Add our server by clicking the button below.</p>
                          <a class="btn btn-primary" href="samp://127.0.0.1:7777">Add to Favorites</a>
                      </div>
                  </li>
                  <li class="list-group-item d-flex justify-content-between align-items-start">
                    <span class="badge bg-primary">3</span>
                      <div>
                          <div class="fw-bold">Connecting to the Server</div>
                          <p>After installing the SA:MP Client, start the application and add the server IP: samp.miami-house.com:7777. Click connect and enjoy the game.</p>
                          <a class="btn btn-primary" href="samp://127.0.0.1:7777">Connect</a>
                      </div>
                  </li>
              </ol>
          </div>
      </div>
  </section>

    <!-- Footer -->
    <footer class="bg-dark py-4">
        <div class="container text-center">
            <p class="mb-0">© 2024 Miami House - SA:MP Server. All rights reserved.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQ93owFICQfZQK9keB4t4gEXeB5HAt+p7p3iD91lFzT0rFbFbPzUZx6m5TR3gZm2w" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

CSS :

Kod [Izaberi]

body {
    font-family: 'Ubuntu Sans', sans-serif;
    background-color: #ddd;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    padding: 0;
    background: url('img/slider2.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#server-logo {
    width: 100px;
    height: auto; 
}

#hero-section {
    background: url('img/slider2.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 6rem 2rem;
    text-align: center;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
    background-color: rgba(255, 255, 255, 0.8); 
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 20px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    transition: box-shadow 0.3s ease;
    margin-bottom: 2rem;
    animation: fadeIn 1s ease-in-out forwards;
    background-color: rgba(255, 255, 255, 0.8); 
}

.card-img-top {
    width: 100px;
    height: auto;
    object-fit: cover;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    opacity: 0;
    animation: fadeIn 2s ease-in-out 0.5s forwards;
}

.card-body {
    padding: 1.5rem;
    text-align: center;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
    pointer-events: none;
}

.card:hover {
    background: #f9f9f9;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-primary {
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    animation: fadeIn 2s ease-in-out 1s forwards;
}

.btn-primary:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.navbar {
    padding: 0.5rem 1rem;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-link {
    color: #fff;
    padding: 0.5rem 1rem;
}

.nav-link:hover {
    color: #ddd;
}

footer {
    color: #ffffff;
}

#guide-section {
    background: #ddd;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
    background-color: rgba(255, 255, 255, 0.8); 
}

#guide-section .list-group-item {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    padding: 1rem;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
    background-color: rgba(255, 255, 255, 0.5); 
}

#guide-section .list-group-item:hover {
    background: #f9f9f9;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#guide-section .list-group-item .badge {
    margin-right: 1rem;
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

@media (max-width: 768px) {
    #hero-section {
        padding: 2rem 1rem;
    }

    .card-img-top {
        width: 150px;
    }

    .card-body {
        padding: 1rem;
    }

    #guide-section {
        padding: 1.5rem;
    }

    .list-group-item {
        padding: 0.75rem;
    }
}

@media (max-width: 576px) {
    #hero-section h1 {
        font-size: 2rem;
    }

    #hero-section p {
        font-size: 1rem;
    }

    .card-img-top {
        width: 150px;
    }

    .list-group-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem;
    }

    .list-group-item .badge {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Nisam podugo radio HTML/CSS sajtove ali izdvojio sam vreme da ti pokazem sta mislim.

Ovaj code neka ti bude primer koliko toga moze da se izvede, kako da to funkcionise, sta kako treba biti i gde treba biti.
Bio sam raspolozen za ubaciti neke animacije i hovere, izbacio sam neke stvari.

@noddy_ ukoliko update uradis na githubu, sav credits ostavljam tebi, nemas potrebe da postavljas bilo sta vezano za mene, pogotovo sto je ovo daleko ispod mog nivoa sajtova kakve zapravo pravim.

Avgust 12, 2024, 22:12:22 POSLE PODNE

Hvala za rework, na gitu ce ostati sad takvo kakvo je, imam u planu odraditi neki game store dok savladam HTML / CSS i kasnije bootstrap sa SCSS, pa bi kasnije mozda mogao kombinovati sa PHP-om.

Hvala svakako znaci mi.

Avgust 12, 2024, 22:14:52 POSLE PODNE

Citat: noddy_ poslato Avgust 12, 2024, 22:12:22 POSLE PODNEHvala za rework, na gitu ce ostati sad takvo kakvo je, imam u planu odraditi neki game store dok savladam HTML / CSS i kasnije bootstrap sa SCSS, pa bi kasnije mozda mogao kombinovati sa PHP-om.

Hvala svakako znaci mi.

Preskocio bih to sve i direktno presao na reactjs, laksi je, moze se dosta lakse manipulisati sa njime.

Septembar 06, 2024, 22:00:47 POSLE PODNE

Nije loše, pohvale za trud 8/10 neka

Septembar 07, 2024, 13:18:54 POSLE PODNE

Hvala

SA:MP Landing page

noddy_

Denmla

markosimic

noddy_

markosimic

ivodev45

noddy_