Author Topic: Web design megathread (Read 2537 times)

Steve5451² · October 26, 2015, 04:37:28 PM

Quote from: Foxscotch on October 26, 2015, 04:08:30 PM

do you use the font tag?
like, <font size="3" color="red">whatever</font>

Font is deprecated in html5.

Ad Bot · Advertisement

espio100 · October 26, 2015, 04:43:46 PM

Quote from: Foxscotch on October 26, 2015, 04:08:30 PM

do you use the font tag?
like, <font size="3" color="red">whatever</font>

No. I tag my stuff and stylize it in a .css instead.

Anyhow I decided to start a little project by myself to make the website from some comic store decent I frequently buy stuff at because its looks ugly as forget. Honestly they should fire the guy who made that.

Becquerel · October 26, 2015, 05:36:54 PM

Quote from: espio100 on October 26, 2015, 10:01:57 AM

Quote from: espio100 on October 26, 2015, 03:59:52 PM

Are you like loving serious? Thats what Im trying to tell you the whole time.I know nothing about PHP or JS. Doesnt mean I know nothing about web design/development to make a thread about it.

PHP is NOT a Web Design Language
PHP is a SERVER SIDED language that can be embedded into HTML and needs to be processed by the server before it can be displayed on an HTML page to add features to a site. It does NOT have anything to do with web design. Its also meant for Back-end purposes

Javascript is built into being tied with HTML and is supposed to add interactivity and other features like forms onto HTML files and can be either in a seperate file or written directly into the HTML document

Foxscotch · October 26, 2015, 05:40:38 PM

Quote from: Steve5451² on October 26, 2015, 04:37:28 PM

Font is deprecated in html5.

exactly........... why did you say it STEVE that was the POINT

espio show us something you've made

espio100 · October 26, 2015, 05:44:13 PM

Quote from: Foxscotch on October 26, 2015, 05:40:38 PM

exactly........... why did you say it STEVE that was the POINT

espio show us something you've made

I have a website but unfortunely its too cringy to post

Foxscotch · October 26, 2015, 05:44:41 PM

Quote from: espio100 on October 26, 2015, 05:44:13 PM

I have a website but unfortunely its too cringy to post

of course :////

espio100 · October 26, 2015, 05:45:41 PM

Quote from: Foxscotch on October 26, 2015, 05:44:41 PM

of course :////

Ill post it once I replace everything with placeholders.
But cant do that stuff right now.

Zeblote · October 26, 2015, 06:07:52 PM

This topic is a disaster lmao

Headcrab Zombie · October 26, 2015, 07:43:11 PM

javascript is kind of in the middle whether it's design or development.
Development and design kinda blur together, and javascript is the means by which that blurring happens.
Designers need to know a bit to make the interface work nicely, and developers need to use it to for the client-side programming part, especially if you don't want stuff to resubmit every time you click a button.

And that's without considering node.js, a framework for server-side javascript apps

Steve5451² · October 26, 2015, 08:43:29 PM

Quote from: Foxscotch on October 26, 2015, 05:40:38 PM

exactly........... why did you say it STEVE that was the POINT

espio show us something you've made

I thought you were suggesting he use it I DON'T KNOW LEAVE ME ALONE. :(

espio100 · October 27, 2015, 11:19:15 AM

Quote from: Foxscotch on October 26, 2015, 05:40:38 PM

espio show us something you've made

Code: [Select]

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" conten="###" />
<title>title</title>
<link rel="shortcut icon" href="img/icon.ico">
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="topbar"></div>
	<div class="sidebarleft">
		<ul>
			<li><a href="#"><div>Home</div></a></li>
			<li><a href="#"><div>Placeholder</div></a></li>
			<li><a href="#"><div>Placeholder</div></a></li>
			<li><a href="#"><div>Placeholder</div></a></li>
		</ul>
	<div class="sidebarleft2">
		<h2>Have you seen...</h2>
		<a href="http://kissanime.com/Anime/One-Punch-Man" target="_blank"><img src="http://kissanime.com/Uploads/Etc/8-28-2015/57733554572533l.jpg"></a>
		<h2>One punch man?</h2>
		<p>Placeholder but this has to be pretty long to soo the max width 'n stuff so yeah...</p>
	</div>
	</div>
	<div class="textintro">
		<h1>Intro</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilCIA eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante. Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui. Ut tincidunt tortor. Donec nonummy, enim in lacinia pulvinar, velit tellus scelerisque augue, ac posuere libero urna eget neque. Cras ipsum. Vestibulum pretium, lectus nec venenatis volutpat, purus lectus ultrices risus, a condimentum risus mi et quam. Pellentesque auctor fringilla neque. Duis eu massa ut lorem iaculis vestibulum. Maecenas facilCIA elit sed justo. Quisque volutpat malesuada velit. </p>
	</div>
		<div class="titlebar"><h1>Title</h1></div>
		<div class="youtube">
			<iframe width="400" height="300" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0">
			</iframe>
			<p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, suscipit in, erat. Sed malesuada, enim ut congue pharetra, massa elit convallis pede, ornare scelerisque libero neque ut neque. In at libero. Curabitur molestie. Sed vel neque. Proin et dolor ac ipsum elementum malesuada. Praesent id orci. Donec hendrerit. In hac habitasse platea dictumst. Aenean sit amet arcu a turpis posuere pretium. </p>
	</div>
</div>
</body>
</html>

Code: [Select]

html {
	min-width: 980px;
	font-family: sans-serif;
}
body {
	background-color: white;
	background-size: 100%;
	padding: 0px;
	margin: 0px;
}
.topbar {
	width: 1920px;
	height: 35px;
	padding: 0px;
	margin: 20px 0px;
	border: 0px;
	color: #AB0000;
	border-bottom: 1px #000000;
	background-color: #AB0000;
	box-shadow: 5px 0px 2px;
}
.sidebarleft {
	margin: 0px;
	padding: 10px 50px 10px 40px;
	border: 0px;
	width: 250px;
	float: left;
}
.sidebarleft li {
	margin: 0px;
	padding: 0px;
	border: 0px;
	list-style: none;
}
.sidebarleft a {
	background: #AB0000;
	border-bottom: 1px solid #000000;
	color: #ffffff;
	display: block;
	margin: 0px;
	text-decoration:none;
	padding: 8px 12px;
}
.sidebarleft a:hover {
	background: #292929;
	padding-bottom: 8px;
}
.sidebarleft2 {
	width: 210px;
	padding: 0px;
	background-color: #AB0000;
	border: 0px;
	float: left;
	margin: 10px 50px 10px 40px;
}
.sidebarleft2 p {
	padding: 5px 5px 5px 15px;
	margin: 0px;
	border: 0px;
	color: white;
}
.sidebarleft2 h2 {
	padding: 5px 5px 5px 15px;
	margin: 0px;
	border: 0px;
	max-width: 250px;
	color: white;
}
.sidebarleft2 img {
	max-width: 180px;
	padding: 0px;
	border: 0px;
	text-decoration:none;
	margin: 0px 0px 0px 3px;
}
.sidebarleft2 a {
	text-decoration:none;
	background-color: #AB0000;
}
.sidebarleft2 a:hover {
	background-color: #AB0000;
}
.textintro {
	padding: 0px;
	margin: 26px;
	border: 0px;
	position: absolute;
	left: 400px;
	background-color: black;
	color: white;
	background-color: rgba(41, 41, 41, 0.9);
}
.textintro p {
	border: 0px;
	padding: 0px 25px 25px 25px;
	margin: 0px;
	color: white;
	max-width: 800px;
	position: relative;
}
.textintro h1 {
	padding: 25px 0px 10px 25px;
	margin: 0px;
	border: 0px;
}
.titlebar {
	position: absolute;
	top: 324px;
	left: 426px;
	padding: 0px;
	background-color: rgba(171, 0, 0, 0.9);
	width: 850px;
	height: 50px;
	margin: 0px 0px 20px 0px;
}
.titlebar h1 {
	color: #292929;
	margin: 6px 0px 5px 20px;
	padding: 0px;
}
.youtube {
	position: absolute;
	left: 426px;
	top: 374px;
	padding: 0px;
	margin: 0px;
	min-width: 850px;
	width: 850px;
	max-width: 850px;
	color: white;
	background-color: rgba(41, 41, 41, 0.9);
}
.youtube p {
	color: white;
	margin: 20px 40px 20px 20px;
	padding: 0px;
}
.youtube iframe {
	float: left;
	margin: 20px 20px 20px 20px;
	padding: 0px;
}

Also there normally is some space between title and the text from the intro but it somehow got removed. w/e

Lego lad · October 27, 2015, 06:13:17 PM

that pagestretch aaaa

TheBlackParrot · October 27, 2015, 06:21:48 PM

web design megathread v2 when

but seriously

0 classes

PurpleMetro · October 27, 2015, 06:35:13 PM

i'm going to sell my laptop for a chromebook sometime soon