News:

Welcome to RetroCoders Community

Main Menu

Mobile Friendly HTML

Started by electricwalrus, Sep 23, 2022, 01:07 AM

Previous topic - Next topic

electricwalrus

Hi guys

I've been doing some html/css lately. So I thought I'd share with you a very simple website that is intended for mobile browsers. It's all in one file, the css and script all in the html. I find that makes it easier to read. If you want help with building simple websites I am certainly able to help. Let me know what you think of this simple site.

<head>
	<title>Mobile Friendly</title>

<style>
/* css style sheet properties */
body {
	background-color:rgb(0,50,0);
	color: white;

	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;

/*	font-family: verdana;	*/

	/* new thing i picked up */
	display:flex;
	justify-content: center;
	align-items: center;
}

#container {
	background-color:rgb(0,100,0);
	width: 720px;
}

h1 {
	color: yellow;
	text-align: center;
	font-size: 38px;
}

p {
	text-align: center;
	font-size: 22px;
}
</style>

<script>
// Javascript Script
</script>

</head>
<body>
	<div id="container">
	<h1>This is mobile first<br />(Intended for mobile)</h1>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	<p>And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text. And this is some text.</p>
	</div>
</body>