• 0

Need help with some CSS alignment

Asked by Mohammad_Khalid_Hussain,

 Share

Question

Collaborator

Mohammad_Khalid_Hussain

Posted
Posted

Hi there guys,

I wanted to create a simple page interface as an offline quiz interface for an event. What I want is for the choices to appear side by side and not one after another like in a list, so overall, it would resemble the Windows logo. Attached are the codes I've typed so far:

HTML:

<!DOCTYPE html>
<html>

<!--This was created by Khalid Hussain-->


<head>
	<title>Quiz System</title>
	<link rel="stylesheet" href="css/design.css"/>;/head>


<body>
	<h1>Heroes: Grand Quiz</h1>
	<h2>Question</h2>

	<div id="question">
	A really really long and tough question goes here ?
	</div>


	<div id="choices">

		<div id="choice1">
		Option 1
		</div>

		<div id="choice2">
		Option 2
		</div>

		<div id="choice3">
		Option 3
		</div>

		<div id="choice4">
		Option 4
		</div>

	</div>


</body>

</html>

CSS:

/*@ import 'reset.css';*/

/*Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/

h1
{
	font-size: 35px;
	margin-bottom: 0px;
}

h2
{
	font-size: 30px;
	margin-top: 0px;
	margin-bottom: 0px;
}

body
{
	width: 700px;
	margin: auto;
	text-align: center;
	font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
	color: white;
	background-color: black;
}

body #question
{
	font-size: 20px;
	padding: 20px;
	margin-top: 0px;
}

body #choices
{
	color: white;
	width: 700px;
	margin: auto;
}


body #choice1
{
	margin-left: 0px;
	width: 250px;
	padding: 20px 20px;
	background: blue;
	margin-bottom: 15px;
	border-radius: 20px;
}

body #choice2
{
	width: 250px;
	padding: 20px 20px;
	background: red;
	margin-bottom: 15px;
	border-radius: 20px;
}

body #choice3
{
	width: 250px;
	padding: 20px 20px;
	background: blue;
	margin-bottom: 15px;
	border-radius: 20px;
}

body #choice4
{
	width: 250px;
	padding: 20px 20px;
	background: blue;
	border-radius: 20px;
}

Any help or positive criticism is highly appreciated. Thanks.

Link to comment
https://www.neowin.net/forum/topic/1087853-need-help-with-some-css-alignment/
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Grand Master

Rigby

Posted
Posted

I'm still learning CSS so there is probably a better way, but this seems to work:


/*@ import 'reset.css';*/
/*Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/
h1
{
		font-size: 35px;
		margin-bottom: 0px;
}
h2
{
		font-size: 30px;
		margin-top: 0px;
		margin-bottom: 0px;
}
body
{
		width: 700px;
		margin: auto;
		text-align: center;
		font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
		color: white;
		background-color: black;
}
body #question
{
		font-size: 20px;
		padding: 20px;
		margin-top: 0px;
}
body #choices
{
		color: white;
		width: 700px;
		margin: auto;
}

body #choice1
{
		float: left;
		margin-left: 0px;
		width: 250px;
		padding: 20px 20px;
		background: blue;
		margin-bottom: 15px;
		border-radius: 20px;
}
body #choice2
{	  
		float: right;
		width: 250px;
		padding: 20px 20px;
		background: red;
		margin-bottom: 15px;
		border-radius: 20px;
}
body #choice3
{
		float: left;
		width: 250px;
		padding: 20px 20px;
		background: blue;
		margin-bottom: 15px;
		border-radius: 20px;
}
body #choice4
{
		float: right;
		width: 250px;
		padding: 20px 20px;
		background: blue;
		border-radius: 20px;
}
[/CODE]

  • Mohammad_Khalid_Hussain
  • Like 1
  • 0
Collaborator

Mohammad_Khalid_Hussain

Posted
  • Author
Posted

Update: I added some fancy buttons for the choices from CSS-Tricks and it messed up the arrangement. Anyway to resolve this, I already tried the float method though?

New code:

/*@ import 'reset.css';

Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/

h1
{
    font-size: 35px;
    margin-bottom: 0px;
}

h2
{
    font-size: 30px;
    margin-top: 0px;
    margin-bottom: 20px;
}

body
{
    width: 700px;
    margin: auto;
    text-align: center;
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
    color: white;
    background-color: black;
}

body #question
{
    font-size: 20px;
    padding: 20px;
    margin-top: 0px;
}

body #choices
{
    color: white;
    width: 900px;
    height: 500px;
    margin: auto;
    margin-top: 50px;
    background: yellow;
}

body #choice1
{    
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    /*margin: 0px 0 0 0px;
    overflow: hidden;
    display: block;*/
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice2
{
    float: right;
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    /*margin: 0px 0 0 0px;
    overflow: hidden;
    /*display: block;*/
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice3
{
    float: left;
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    margin: 50px 0 0 50px;
    overflow: hidden;
    display: block;
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice4
{
    float: right;
    background: #d11717;
    border: 2px solid #eee;
    height: 50px;
    width: 200px;
    margin: 50px 0 0 50px;
    overflow: hidden;
    display: block;
    text-align: center;
    line-height: 38px;

    /*Rounded Corners*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Shadow*/
    -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;
}

body #choice1:hover
{
  background-color: #ff3434;
}

body #choice2:hover
{
  background-color: #ff3434;
}

body #choice3:hover
{
  background-color: #ff3434;
}

body #choice4:hover
{
  background-color: #ff3434;
}

  • 0
Mentor

Guth

Posted
Posted

I'm by no means a CSS expert but what you did when you copy pasted those buttons was remove the "float" properties from the choice's div's.

Also the first way isnt the way I would do them, I would float them all LEFT and use a div inbetween the two with the css property clear:both

this gives you the two seperate lines you needed.

If you change the width of those buttons, or the borders, you need to change the width of #choicesInner to add up to two buttons plus their borders (in this case 408px) its the only way I could get them to centre as for margin: 0 auto; to work you need a width defined.

anyway, heres you'r html and CSS


<!DOCTYPE html>
<html>
<!--This was created by Khalid Hussain-->

<head>
	    <title>Quiz System</title>
	    <link rel="stylesheet" href="css/design.css"/>
</head>

<body>
	    <h1>Heroes: Grand Quiz</h1>
	    <h2>Question</h2>

	    <div id="question">
	    A really really long and tough question goes here ?
	    </div>


	    <div id="choices">
		 <div id="choicesInner">
			    <div id="choice1">
			    Option 1
			    </div>

			    <div id="choice2">
			    Option 2
			    </div>

		  <div id="clear">
			    </div>

			    <div id="choice3">
			    Option 3
			    </div>

			    <div id="choice4">
			    Option 4
			    </div>
		 </div>
	    </div>


</body>
</html>
[/CODE]

CSS:

[CODE]
/*@ import 'reset.css';
Khalid Hussain's first ever CSS written from scratch for an actual website.*/
/*This is probably not the best CSS you'll ever see.*/
h1
{
font-size: 35px;
margin-bottom: 0px;
}
h2
{
font-size: 30px;
margin-top: 0px;
margin-bottom: 20px;
}
body
{
width: 700px;
margin: 0 auto;
text-align: center;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif";
color: white;
background-color: black;
}
#question
{
font-size: 20px;
padding: 20px;
margin-top: 0px;
}
#choices
{
color: white;
height: 500px;
margin:0 auto;
background: yellow;
width: 700px;
}
#choicesInner{
margin: 0 auto;
width: 408px;;
}
#choice1
{
float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice2
{
float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice3
{ float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
overflow: hidden;
display: block;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice4
{
float: left;
background: #d11717;
border: 2px solid #eee;
height: 50px;
width: 200px;
overflow: hidden;
display: block;
text-align: center;
line-height: 38px;

/*Rounded Corners*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

/*Shadow*/
-webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);

/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#choice1:hover
{
background-color: #ff3434;
}
#choice2:hover
{
background-color: #ff3434;
}
#choice3:hover
{
background-color: #ff3434;
}
#choice4:hover
{
background-color: #ff3434;
}
#clear {
clear: both;
}
[/CODE]

ps. also removed the "body" from your CSS selectors as it is not needed and looked untidy.

  • Rigby and Stokkolm
  • Like 2
  • 0
Collaborator

Mohammad_Khalid_Hussain

Posted
  • Author
Posted

Thanks a lot guys for all the help. Just one more small thing. Let's say I have text which is longer than the buttons' width, it has text wrapping but the distance between the first and second line is pretty far. Any idea how to solve this?

  • 0
Neowinian

haz-gb

Posted
Posted
  On 30/06/2012 at 14:48, Mohammad_Khalid_Hussain said:

Thanks a lot guys for all the help. Just one more small thing. Let's say I have text which is longer than the buttons' width, it has text wrapping but the distance between the first and second line is pretty far. Any idea how to solve this?

Change the line-height.

Also, to make your markup more professional think about coding semantically. E.g. Your options could be in an unordered list which would make more sense.

Might want to show us your markup in a jsfiddle just so we don't have to make the files and run it ourselves. http://jsfiddle.net/

This topic is now closed to further replies.
 Share
Go to question listing

  • Posts

    • Windows 11 is getting a useful new audio feature

      By excalpius · Posted

      Yeah, I've looked at all of these. Dante is a pro and expensive program, of course. I'm just looking for simple audio/music sharing from one PC/device to another. Voicemeeter is a lovely bit of kit, but the interface is NOT user friendly to set up initially, unless you are an audio engineer who thinks the way the program does. It works though. I just didn't feel the juice was worth the squeeze on that one. The other ones you mention have problems, like no longer maintained/updated, etc. Spotify does this, but only for music played by Spotify. Multiplicity does this (but isn't free) for all audio on one PC (like you'd want) but hiccups the audio on the source PC if too much CPU is used (so you really can't use a very old PC as a music/video/youtube player). If the two machines are side by side, you can use analog line out to analog line in, but then you are getting analog noise/problems. It's the simplest and most solution, of course.
    • Windows 11 is getting a useful new audio feature

      By excalpius · Posted

      Well, one right off the top of my head is if you're playing music on one computer but you want it coming through another computer, which is hooked up to speakers, a TV with built-in audio, etc. If the two machines are side-by-side, then you can even just use an old analog line jack out to line jack in but that comes with analog problems, of course. But if the two computers aren't in the same room and you're using something like Multiplicity (not the best example because Multiplicity actually has this audio network feature built in) to control the other, then sending the audio across ethernet would be highest quality. Note that Spotify also already does this. If you have the app installed on multiple devices you can control not only the song playback but also which device the audio is outputting from. Like your phone telling your PC to play the audio on the PC out to speakers. Etc. So, there are solutions. But when I saw it called "Shared Audio" I hoped it was a MS standard built into the OS for just this usage case, and not just a badly named new feature being tested.
    • Apple is giving the upcoming iPad Pro a second front-facing camera

      By TarasBuria · Posted

      Apple is giving the upcoming iPad Pro a second front-facing camera by Taras Buria The M4-based iPad Pro brought a few significant changes to Apple's high-end tablet, such as tandem OLED displays, a much-thinner chassis, camera changes, and a much more powerful processor. Its successor, the M5-based iPad Pro, is rumored to retain the current form factor without major changes. However, there is one rather odd hardware update that is coming with the next iPad Pro. A new report says that a successor to the current iPad Pro lineup will offer a more powerful Apple M5 processor and more cameras on the front. While Apple experimented with a dual-camera setup on the back of the recent iPad Pros (this was killed in the M4 generation), the front of every iPad has always had a single camera, minus the original one, of course, which had none. With the M5 iPad Pro, Apple is rumored to double the number of front-facing cameras for a rather odd reason. No, Apple is not using a dual-camera setup for depth of field effects or a wider angle. According to Bloomberg's Mark Gurman, the logic is much simpler: satisfy fans of the portrait orientation. The problem is that in the 2024 iPad Pro, Apple moved the front-facing camera to the longer side of the tablet, where it makes much more sense for FaceTime calls, selfies, and everything else. However, that makes the iPad a bit awkward to use when in portrait mode, especially when it comes to FaceID. Now, it appears that Apple wants to make both camps happy by adding another front-facing camera to the shorter side of the screen. There is no information on whether we will see just one more front-facing camera or the entire FaceID module. Given Apple's nature of blaming users for some of its device shortcomings (the infamous "you are holding it wrong" line), it is quite interesting to see Apple addressing a seemingly minor concern with such an overkill solution.
    • Why is my Programs drive missing from the list in quick access?

      By Steven P. · Posted

      Hello! It's default behavior. I assume that F:\ and E:\ are external drives? My local drives are under This PC. So File Explorer is showing storage from different locations: This PC (under which are local drives) Mapped Network drives External USB drives The Network (under which, my NAS) You could drag the drive to Quick access to see it all the time, but in my case when I expand This PC, the local drives remain in view even when I close and reopen the window.
    • WhatsApp for Windows is ditching UWP for a web app

      By slinky333 · Posted

      It also lost Window Share support, so can no longer share websites from Edge to it or files from Explorer using the Share button or photos from Photos app. Mind you, not that this is impossible from a webappp since the new Outlook does support Share and that's a web app.

  • Recent Achievements

    • Rookie
      Snake Doc went up a rank
      Rookie
    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well

  • Popular Contributors

    1. 1
      +primortal
      496
    2. 2
      Michael Scrip
      206
    3. 3
      ATLien_0
      201
    4. 4
      Xenon
      136
    5. 5
      +FloatingFatMan
      117
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!