-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9297dc8
commit 43e6905
Showing
1 changed file
with
225 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,225 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <style> | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Arial; | ||
| padding: 10px; | ||
| background: #f1f1f1; | ||
| } | ||
|
|
||
| /* Header/Blog Title */ | ||
| .header { | ||
| padding: 30px; | ||
| text-align: center; | ||
| background: lightgrey; | ||
| font-style: oblique; | ||
| } | ||
|
|
||
| .header h1 { | ||
| font-size: 50px; | ||
| } | ||
|
|
||
| /* Style the top navigation bar */ | ||
| .topnav { | ||
| overflow: hidden; | ||
| background-color: #333; | ||
| position: sticky; | ||
| position: -webkit-sticky; /* Chrome */ | ||
| } | ||
|
|
||
| /* Style the topnav links */ | ||
| .topnav a { | ||
| float: left; | ||
| display: block; | ||
| color: #f2f2f2; | ||
| text-align: center; | ||
| padding: 14px 16px; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| /* Change color on hover */ | ||
| .topnav a:hover { | ||
| background-color: #ddd; | ||
| color: black; | ||
| } | ||
|
|
||
| /* Create two unequal columns that floats next to each other */ | ||
| /* Left column */ | ||
| .leftcolumn { | ||
| float: left; | ||
| width: 75%; | ||
| } | ||
|
|
||
| /* Right column */ | ||
| .rightcolumn { | ||
| float: left; | ||
| width: 25%; | ||
| background-color: #f1f1f1; | ||
| padding-left: 20px; | ||
| } | ||
|
|
||
| /* Fake image */ | ||
| .fakeimg { | ||
| background-color: #aaa; | ||
| width: 100%; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| /* Add a card effect for articles */ | ||
| .card { | ||
| background-color: white; | ||
| padding: 20px; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| /* Clear floats after the columns */ | ||
| .row:after { | ||
| content: ""; | ||
| display: table; | ||
| clear: both; | ||
| } | ||
|
|
||
| /* Footer */ | ||
| .footer { | ||
| padding: 20px; | ||
| text-align: center; | ||
| background: #ddd; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ | ||
| @media screen and (max-width: 800px) { | ||
| .leftcolumn, .rightcolumn { | ||
| width: 100%; | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| /* 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) { | ||
| .topnav a { | ||
| float: none; | ||
| width: 100%; | ||
| } | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="header"> | ||
| <h1>GEOPOLITICO</h1> | ||
| <p>Political & Economic Simulation</p> | ||
| </div> | ||
| <style> | ||
| body { | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| ul { | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| overflow: hidden; | ||
| position: -webkit-sticky; /* Chrome */ | ||
| position: sticky; | ||
| top: 0; | ||
| background-color: black; | ||
| } | ||
|
|
||
| li { | ||
| float: left; | ||
| } | ||
|
|
||
| li a, .dropbtn { | ||
| display: block; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 14px 16px; | ||
| text-decoration: none; | ||
| width: fit-content; | ||
| } | ||
|
|
||
| li a:hover, .dropbtn:hover .dropbtn { | ||
| background-color: #111; | ||
| } | ||
|
|
||
| .active, li.dropdown { | ||
| background-color: limegreen; | ||
| } | ||
|
|
||
| .dropdown-content { | ||
| display: none; | ||
| position: absolute; | ||
| background-color: lightgreen; | ||
| min-width: 160px; | ||
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .dropdown-content a:hover {background-color: limegreen;} | ||
|
|
||
| .dropdown:hover .dropdown-content{ | ||
| display: block; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <ul> | ||
| <li><a class="active" href="#home">Home</a></li> | ||
| <li><a class="inactive" href="#Peter Griffin">Peter Griffin</a></li> | ||
| <li><a href="#Actions">Actions</a></li> | ||
| <li><a href="#USA">USA</a></li> | ||
| <li><a href="#Parties">Parties</a></li> | ||
| <li><a href="#Messages">Messages</a></li> | ||
| <li><a href="#World Map">World Map</a></li> | ||
|
|
||
| </ul> | ||
| </body> | ||
| <div class="row"> | ||
| <div class="leftcolumn"> | ||
| <div class="card"> | ||
| <h2>Game Launch</h2> | ||
| <h5>Title description, 2 November 2024</h5> | ||
| <div class="fakeimg" style="height:200px;">Image</div> | ||
| <p>Game is in development, Estimated time to complete: 5 years</p> | ||
| <p>Geopolitico will be a unique geopolitical and economical game where players can roleplay as certain historical or non historical politicians making their way through the political sphere of influence and power.</p> | ||
| </div> | ||
| <div class="card"> | ||
| <h2>TITLE HEADING</h2> | ||
| <h5>Title description, Sep 2, 2017</h5> | ||
| <div class="fakeimg" style="height:200px;">Image</div> | ||
| <p>Some text..</p> | ||
| <p>...</p> | ||
| </div> | ||
| </div> | ||
| <div class="rightcolumn"> | ||
| <div class="card"> | ||
| <h2>Ads</h2> | ||
| <div class="fakeimg" style="height:100px;">Image</div> | ||
| <p>Some text about me in culpa qui officia deserunt mollit anim..</p> | ||
| </div> | ||
| <div class="card"> | ||
| <h3>Trending News</h3> | ||
| <div class="fakeimg"><p>Image</p></div> | ||
| <div class="fakeimg"><p>Image</p></div> | ||
| <div class="fakeimg"><p>Image</p></div> | ||
| </div> | ||
| <div class="card"> | ||
| <h3>Follow Me</h3> | ||
| <p>Some text..</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="footer"> | ||
| <h2>Footer</h2> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |