Jump to content

Verbavolantscriptamane

Members
 View Profile  See their activity

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Everything posted by Verbavolantscriptamane

  1. Verbavolantscriptamane
    Aici voi da un simplu exemplu de o baza,de la care poate porni oricine pentru a face un site reusti de prezentare: <!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } /* Style the body */ body { font-family: Arial, Helvetica, sans-serif; margin: 0; } /* Header/logo Title */ .header { padding: 80px; text-align: center; background: #1abc9c; color: white; } /* Increase the font size of the heading */ .header h1 { font-size: 40px; } /* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */ .navbar { overflow: hidden; background-color: #333; position: sticky; position: -webkit-sticky; top: 0; } /* Style the navigation bar links */ .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } /* Right-aligned link */ .navbar a.right { float: right; } /* Change color on hover */ .navbar a:hover { background-color: #ddd; color: black; } /* Active/current link */ .navbar a.active { background-color: #666; color: white; } /* Column container */ .row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; } /* Create two unequal columns that sits next to each other */ /* Sidebar/left column */ .side { -ms-flex: 30%; /* IE10 */ flex: 30%; background-color: #f1f1f1; padding: 20px; } /* Main column */ .main { -ms-flex: 70%; /* IE10 */ flex: 70%; background-color: white; padding: 20px; } /* Fake image, just for this example */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Footer */ .footer { padding: 20px; text-align: center; background: #ddd; } /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 700px) { .row { flex-direction: column; } } /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } } </style> </head> <body> <div class="header"> <h1>My Website</h1> <p>A <b>responsive</b> website created by me.</p> </div> <div class="navbar"> <a href="#" class="active">Home</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#" class="right">Link</a> </div> <div class="row"> <div class="side"> <h2>About Me</h2> <h5>Photo of me:</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> <h3>More Text</h3> <p>Lorem ipsum dolor sit ame.</p> <div class="fakeimg" style="height:60px;">Image</div><br> <div class="fakeimg" style="height:60px;">Image</div><br> <div class="fakeimg" style="height:60px;">Image</div> </div> <div class="main"> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <br> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> <div class="footer"> <h2>Footer</h2> </div> </body> </html> !!!NU ESTE UN EXEMPLU FACUT DE MINE!!! Toti trebuie sa plecam de la o baza,ceva deja scris,e mult mai usor din toate punctele de vedere,desigur noi trebuie pe acesta baza,sa ii adaugam ceea ce consideram.De exemplu sa mai lucram la CSS sau sa editam paragrafe sau imagini.Exemplul acesta este unul responsiv,deci chiar este un inceput bun pentru orice site de prezentare.
  2. Verbavolantscriptamane
    tu crezi ca poti invata sa programezi atat de repede,pentru a face un joc?😂 aici vorbim de C,nu de gameconstruct,unde practic programul in sine e ca un joc😂
  3. Verbavolantscriptamane
    Nu ti-as recomanda sa incerci sa "spargi" un site.Practic te mananca curuletul,ce vrei tu sa faci,e ilegal😂 Sunt multiple metode,dar pot sa iti dau un sfat,mereu este o usa,in spate,iar daca usa este inchisa,ai nevoie de niste soricei😉
  4. Verbavolantscriptamane
    Salut!Voi posta un sir de tutoriale despre web development.De la inceperea proiectului,pana la alegerea hostingului,etc.O voi lua usor,pe pasi simplii.Sper sa gasiti util ce scriu aici! Pentru inceput,o mica discutie.Un client te pune sa faci de exemplu un site de prezentare pentru un restaurant.In primul rand trebuie sa intelegi ca uneori clientii au multe idei,pe care le vad implementate in alte site-uri si pe care si le doresc si ei.Daca el te roaga de exemplu sa faci ceva mai complicat,de exemplu sa faci acest site in 5 limbi(am patit:)))),trebuie sa te gandesti clar la ce poti sa faci si ce nu poti sa faci!NU face promisiuni pe care nu le poti tine!!!Clientii nu inteleg ca unele cereri pe care le au sunt stupide si greu de pus in aplicare,tu trebuie sa ii explici acest lucru,nu sa ii spui ca faci,iar tu sa nu ai habar! Ce faci cand vrei sa incepi lucrul? In primul rand trebuie sa intelegi ca in 2021 ai multe programe la dispozitie pentru a te ajuta sa realizezi un website.Si NU,sa nu aud de Wix sau mai stiu eu ce,site urile facute pe acele platforme,sunt o TAMPENIE.Pur si simplu sunt un fel de poze foarte frumos facute!😂 Deci aici am dat exemplul de un site de prezentare.Ce utilizam?Sipmlu,HTML.Acum proiectul NU se scire in Notepad😅,cum tind sa mai faca cei care sunt la inceput,incearca niste editoare avansate,de exemplu Notepad++,sau preferatul meu,NetBeans.Acum ai editorul,acum trebuie sa iti vizualizezi proiectul,instaleaza XAMPP,acest program creeaza un server local,cu ajutorul caruia poti sa vizionezi proiectul.Dupa ce instalezi XAMPP,porneste Apache,incarca proiectul in folderul Htdocs,si in browser,scire /localhost.Acolo vei putea viziona prioectul. Acum ca ai tot ce iti trebuie pentru a scrie acest site...trebuie sa inveti sa il si faci:) Pentru incepatori,si nu numai , https://www.w3schools.com/ Este pita lui Dumnezeu:) Utilizeaza acest site pentru orice!Are tutoriale de la punere titlului,la aranjarea paragrafeleor,pana la instalare Bootstrap. Acum ceva foarte important in orice site.Acum toata lumae vizioneaza site uri de pe telefon,or tableta,nu doar pe calculator.In acest caz ai nevoie de un design responsiv.Dar Dumnezeu e baiat de treaba si i a pus pe baietii astia finuti pe pamant,care au creeat Bootstrap.Cu o simpla instalare in proiect sau daca esti lenes ca mine,il faci cu CDN.uri:))))),totusi mai bine il instalezi:) Deci cam acestia sunt pasii pentru incepatori,vom vorbi despre mai multe,sper ca am fost de ajutor!
      • 2
      • Upvote
  5. Verbavolantscriptamane
    Multumesc!
  6. Verbavolantscriptamane
    Ma bucur,sa ma reîntorc aici:) Vad câțiva oameni,care inca mai sunt activi,si asta ma bucura!
×
×
  • Create New...