Montreal studio of designer Maxim Aginsky
Menu
Composition with seven notes. HTML lego

Composition with seven notes. HTML lego

Published October 14th, 2013 by Maxim Aginsky

This is a series of design variants of front page I created in November 2010 for my personal web site.

Using the Lego principle

Each of the images bellow I actuality drew-organized using Dreamweaver’s visual (WYSIWYG) editor. All lines created in the editor, the only element I used that was not created by Dw is couple PNG images of different points diameter.
The ability to move using the mouse – Lego’s interlocking plastic bricks – the objects on page giving you chance to find the perfect position for each element of the page composition. This technique gives you more control over design and as a result more precise implementation of the idea.
But this incredible power of absolute positioning has a weakness – lots of code. In the end of this article you can see the code example of one of the versions. The massive of CSS code absolutely disappointing. But us you will see the Lego Technique still can be successfully used for a model creation and sketches of the website design.
Any way the technique allowed me to create this beautiful series, so for me it is prove itself. I am continuing to enjoy the final result of this work – HTML pages or images of the pages.

The Seven Notes Melody

Can the web page that we are looking at in our monitor sing? My answer is – Yes, it can and a beautiful song.

In this series I am working with lines and points – the notes of musical scale.

Composition 1

1 Composition with Seven Notes

2 Composition with Seven Notes

Composition 2

3 Composition with Seven Notes

4 Composition with Seven Notes

5 Composition with Seven Notes

Composition 3

6 Composition with Seven Notes

7 Composition with Seven Notes

Composition 4

8 Composition with Seven Notes

9 Composition with Seven Notes

Composition 5

10 Composition with Seven Notes

Composition 6

11 Composition with Seven Notes

12 Composition with Seven Notes

The archive of materials, ideas and versions of design for my personal website can be found on this page.

Drawing with WYSIWYG editor. Code example

There are different ways to create a beautiful web page, this one is not the right one and really not recommended. But I am continuing to repeat, that as an experiment it was very important to me and resultative.

Watch the CODE


<!DOCTYPE HTML>
<html>
<head>
<title>maxim aginsky. Official website. Archive</title>
<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 15px;
	letter-spacing: 1mm;
}
#apDiv1 {
	position:absolute;
	left:333px;
	top:92px;
	width:116px;
	height:143px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	left:889px;
	top:60px;
	width:26px;
	height:52px;
	z-index:2;
}
#apDiv3 {
	position:absolute;
	left:84px;
	top:171px;
	width:50px;
	height:33px;
	z-index:2;
}
#apDiv4 {
	position:absolute;
	left:410px;
	top:46px;
	width:791px;
	height:1px;
	z-index:2;
	background-color: #000000;
}
#apDiv5 {
	position:absolute;
	left:512px;
	top:88px;
	width:1px;
	height:150px;
	z-index:3;
	background-color: #000000;
}
#apDiv6 {
	position:absolute;
	left:125px;
	top:47px;
	width:226px;
	height:19px;
	z-index:4;
	background-color: #000000;
}
#apDiv7 {
	position:absolute;
	left:514px;
	top:31px;
	width:284px;
	height:73px;
	z-index:5;
}
#apDiv8 {
	position:absolute;
	left:236px;
	top:130px;
	width:506px;
	height:364px;
	z-index:5;
}
#apDiv9 {
	position:absolute;
	left:668px;
	top:193px;
	width:97px;
	height:91px;
	z-index:4;
}
#apDiv10 {
	position:absolute;
	left:580px;
	top:253px;
	width:27px;
	height:22px;
	z-index:4;
}
#apDiv11 {
	position:absolute;
	left:980px;
	top:60px;
	width:17px;
	height:15px;
	z-index:5;
}
#apDiv12 {
	position:absolute;
	left:144px;
	top:151px;
	width:27px;
	height:22px;
	z-index:6;
}
#apDiv13 {
	position:absolute;
	left:293px;
	top:191px;
	width:27px;
	height:22px;
	z-index:7;
}
#apDiv14 {
	position:absolute;
	left:651px;
	top:163px;
	width:20px;
	height:25px;
	z-index:8;
}
#apDiv15 {
	position:absolute;
	left:602px;
	top:432px;
	width:27px;
	height:22px;
	z-index:9;
}
#apDiv16 {
	position:absolute;
	left:545px;
	top:142px;
	width:12px;
	height:19px;
	z-index:10;
}
#apDiv17 {
	position:absolute;
	left:500px;
	top:60px;
	width:12px;
	height:19px;
	z-index:11;
}
#apDiv18 {
	position:absolute;
	left:500px;
	top:80px;
	width:12px;
	height:19px;
	z-index:12;
}
#apDiv19 {
	position:absolute;
	left:500px;
	top:100px;
	width:12px;
	height:19px;
	z-index:13;
}
#apDiv20 {
	position:absolute;
	left:714px;
	top:181px;
	width:12px;
	height:19px;
	z-index:14;
}
#apDiv21 {
	position:absolute;
	left:714px;
	top:213px;
	width:12px;
	height:19px;
	z-index:15;
}
#apDiv {
	position:absolute;
	left:500px;
	top:40px;
	width:12px;
	height:19px;
	z-index:10;
}
#apDiv22 {
	position:absolute;
	left:500px;
	top:200px;
	width:12px;
	height:19px;
	z-index:16;
}
#apDiv23 {	position:absolute;
	left:560px;
	top:271px;
	width:12px;
	height:19px;
	z-index:16;
}
#apDiv24 {	position:absolute;
	left:560px;
	top:271px;
	width:12px;
	height:19px;
	z-index:16;
}
#apDiv25 {
	position:absolute;
	left:500px;
	top:220px;
	width:12px;
	height:19px;
	z-index:17;
}
#apDiv26 {
	position:absolute;
	left:500px;
	top:240px;
	width:12px;
	height:19px;
	z-index:18;
}
#apDiv27 {
	position:absolute;
	left:500px;
	top:260px;
	width:12px;
	height:19px;
	z-index:19;
}
#apDiv28 {
	position:absolute;
	left:500px;
	top:280px;
	width:12px;
	height:19px;
	z-index:20;
}
#apDiv29 {
	position:absolute;
	left:500px;
	top:300px;
	width:12px;
	height:19px;
	z-index:21;
}
#apDiv30 {
	position:absolute;
	left:720px;
	top:319px;
	width:12px;
	height:19px;
	z-index:22;
}
#apDiv31 {
	position:absolute;
	left:717px;
	top:346px;
	width:12px;
	height:19px;
	z-index:23;
}
#apDiv32 {
	position:absolute;
	left:495px;
	top:272px;
	width:1px;
	height:176px;
	z-index:24;
	background-color: #000000;
}
#apDiv33 {
	position:absolute;
	left:758px;
	top:127px;
	width:66px;
	height:20px;
	z-index:25;
}
#apDiv34 {
	position:absolute;
	left:819px;
	top:313px;
	width:93px;
	height:20px;
	z-index:26;
}
#apDiv35 {
	position:absolute;
	left:332px;
	top:179px;
	width:753px;
	height:95px;
	z-index:27;
}
.style19 {
	font-size: 10px
}
#apDiv36 {
	position:absolute;
	left:973px;
	top:71px;
	width:140px;
	height:1px;
	z-index:28;
	background-color: #000000;
}
#apDiv37 {
	position:absolute;
	left:981px;
	top:686px;
	width:91px;
	height:20px;
	z-index:29;
}
#apDiv38 {
	position:absolute;
	left:296px;
	top:423px;
	width:262px;
	height:17px;
	z-index:30;
}
#apDiv39 {
	position:absolute;
	left:453px;
	top:263px;
	width:36px;
	height:15px;
	z-index:31;
}
#apDiv40 {
	position:absolute;
	left:430px;
	top:502px;
	width:56px;
	height:60px;
	z-index:32;
}
#apDiv41 {
	position:absolute;
	left:637px;
	top:408px;
	width:27px;
	height:29px;
	z-index:32;
}
#apDiv42 {
	position:absolute;
	left:342px;
	top:394px;
	width:25px;
	height:36px;
	z-index:33;
}
#apDiv43 {
	position:absolute;
	left:937px;
	top:678px;
	width:32px;
	height:40px;
	z-index:34;
}
#apDiv44 {
	position:absolute;
	left:254px;
	top:582px;
	width:19px;
	height:29px;
	z-index:35;
}
#apDiv45 {
	position:absolute;
	left:487px;
	top:357px;
	width:27px;
	height:29px;
	z-index:36;
}
#apDiv46 {
	position:absolute;
	left:522px;
	top:534px;
	width:30px;
	height:28px;
	z-index:37;
}
#apDiv47 {
	position:absolute;
	left:778px;
	top:100px;
	width:25px;
	height:28px;
	z-index:38;
}
#apDiv48 {
	position:absolute;
	left:500px;
	top:122px;
	width:12px;
	height:19px;
	z-index:39;
}
#apDiv49 {
	position:absolute;
	left:500px;
	top:140px;
	width:12px;
	height:19px;
	z-index:40;
}
#apDiv50 {
	position:absolute;
	left:500px;
	top:320px;
	width:12px;
	height:19px;
	z-index:41;
}
#apDiv51 {
	position:absolute;
	left:500px;
	top:340px;
	width:12px;
	height:19px;
	z-index:42;
}
#apDiv52 {
	position:absolute;
	left:516px;
	top:242px;
	width:1px;
	height:166px;
	z-index:43;
	background-color: #000000;
}
#apDiv53 {
	position:absolute;
	left:541px;
	top:416px;
	width:96px;
	height:20px;
	z-index:43;
}
#apDiv54 {
	position:absolute;
	left:293px;
	top:591px;
	width:72px;
	height:20px;
	z-index:44;
}
#apDiv55 {
	position:absolute;
	left:47px;
	top:739px;
	width:725px;
	height:99px;
	z-index:45;
}
#apDiv56 {
	position:absolute;
	left:759px;
	top:253px;
	width:33px;
	height:64px;
	z-index:46;
}
#apDiv57 {
	position:absolute;
	left:196px;
	top:706px;
	width:891px;
	height:1px;
	z-index:46;
	background-color: #333333;
}
#apDiv58 {
	position:absolute;
	left:500px;
	top:460px;
	width:12px;
	height:19px;
	z-index:47;
}
#apDiv59 {
	position:absolute;
	left:500px;
	top:480px;
	width:12px;
	height:19px;
	z-index:48;
}
#apDiv60 {
	position:absolute;
	left:500px;
	top:500px;
	width:12px;
	height:19px;
	z-index:49;
}
#apDiv61 {
	position:absolute;
	left:500px;
	top:520px;
	width:12px;
	height:19px;
	z-index:50;
}
#apDiv62 {
	position:absolute;
	left:500px;
	top:540px;
	width:12px;
	height:19px;
	z-index:51;
}
#apDiv63 {
	position:absolute;
	left:97px;
	top:594px;
	width:20px;
	height:252px;
	z-index:52;
}
#apDiv64 {
	position:absolute;
	left:500px;
	top:600px;
	width:12px;
	height:19px;
	z-index:53;
}
#apDiv65 {
	position:absolute;
	left:608px;
	top:656px;
	width:12px;
	height:19px;
	z-index:54;
}
#apDiv66 {
	position:absolute;
	left:500px;
	top:640px;
	width:12px;
	height:19px;
	z-index:55;
}
#apDiv67 {
	position:absolute;
	left:500px;
	top:660px;
	width:12px;
	height:19px;
	z-index:56;
}
#apDiv68 {
	position:absolute;
	left:500px;
	top:680px;
	width:12px;
	height:19px;
	z-index:57;
}
#apDiv69 {
	position:absolute;
	left:500px;
	top:700px;
	width:12px;
	height:19px;
	z-index:58;
}
#apDiv70 {
	position:absolute;
	left:500px;
	top:720px;
	width:12px;
	height:19px;
	z-index:59;
}
#apDiv71 {
	position:absolute;
	left:500px;
	top:620px;
	width:12px;
	height:19px;
	z-index:60;
}
#apDiv72 {
	position:absolute;
	left:131px;
	top:138px;
	width:104px;
	height:122px;
	z-index:61;
}
#apDiv73 {
	position:absolute;
	left:122px;
	top:36px;
	width:59px;
	height:105px;
	z-index:61;
}
#apDiv74 {
	position:absolute;
	left:866px;
	top:209px;
	width:243px;
	height:76px;
	z-index:61;
}
#apDiv75 {
	position:absolute;
	left:159px;
	top:724px;
	width:27px;
	height:106px;
	z-index:61;
}
#apDiv76 {
	position:absolute;
	left:187px;
	top:291px;
	width:40px;
	height:40px;
	z-index:61;
}
#apDiv77 {
	position:absolute;
	left:487px;
	top:214px;
	width:31px;
	height:45px;
	z-index:61;
}
#apDiv78 {
	position:absolute;
	left:167px;
	top:191px;
	width:24px;
	height:49px;
	z-index:61;
}
#apDiv79 {
	position:absolute;
	left:108px;
	top:713px;
	width:30px;
	height:154px;
	z-index:61;
	background-color: #000000;
}
#apDiv80 {
	position:absolute;
	left:254px;
	top:221px;
	width:1px;
	height:503px;
	z-index:62;
	background-color: #CCCCCC;
}
#apDiv81 {
	position:absolute;
	left:494px;
	top:208px;
	width:1px;
	height:163px;
	z-index:63;
	background-color: #999999;
}
#apDiv82 {
	position:absolute;
	left:465px;
	top:278px;
	width:27px;
	height:16px;
	z-index:64;
}
#apDiv83 {
	position:absolute;
	left:376px;
	top:436px;
	width:74px;
	height:1px;
	z-index:65;
	background-color: #999999;
}
#apDiv84 {
	position:absolute;
	left:542px;
	top:416px;
	width:109px;
	height:1px;
	z-index:66;
	background-color: #999999;
}
#apDiv85 {
	position:absolute;
	left:514px;
	top:486px;
	width:24px;
	height:89px;
	z-index:67;
}
#apDiv86 {
	position:absolute;
	left:712px;
	top:220px;
	width:1px;
	height:496px;
	z-index:67;
	background-color: #CCCCCC;
}
#apDiv87 {
	position:absolute;
	left:566px;
	top:218px;
	width:1px;
	height:542px;
	z-index:68;
	background-color: #CCCCCC;
}
#apDiv88 {
	position:absolute;
	left:141px;
	top:126px;
	width:95px;
	height:129px;
	z-index:69;
}
#apDiv89 {
	position:absolute;
	left:90px;
	top:221px;
	width:151px;
	height:30px;
	z-index:69;
}
#apDiv90 {
	position:absolute;
	left:546px;
	top:249px;
	width:539px;
	height:23px;
	z-index:69;
}
#apDiv91 {
	position:absolute;
	left:381px;
	top:403px;
	width:149px;
	height:20px;
	z-index:70;
}
#apDiv92 {
	position:absolute;
	left:840px;
	top:499px;
	width:165px;
	height:31px;
	z-index:71;
}
#apDiv93 {
	position:absolute;
	left:560px;
	top:544px;
	width:174px;
	height:28px;
	z-index:72;
}
#apDiv94 {
	position:absolute;
	left:430px;
	top:197px;
	width:1px;
	height:521px;
	z-index:73;
	background-color: #CCCCCC;
}
.style23 {
	font-size: 15px;
}
#apDiv95 {
	position:absolute;
	left:987px;
	top:138px;
	width:1px;
	height:514px;
	z-index:74;
	background-color: #CCCCCC;
}
#apDiv96 {
	position:absolute;
	left:215px;
	top:236px;
	width:664px;
	height:1px;
	z-index:75;
	background-color: #CCCCCC;
}
#apDiv97 {
	position:absolute;
	left:105px;
	top:353px;
	width:937px;
	height:1px;
	z-index:76;
	background-color: #CCCCCC;
}
#apDiv98 {
	position:absolute;
	left:342px;
	top:294px;
	width:770px;
	height:1px;
	z-index:77;
	background-color: #CCCCCC;
}
#apDiv99 {
	position:absolute;
	left:221px;
	top:470px;
	width:853px;
	height:1px;
	z-index:78;
	background-color: #CCCCCC;
}
#apDiv100 {
	position:absolute;
	left:417px;
	top:578px;
	width:316px;
	height:1px;
	z-index:79;
	background-color: #CCCCCC;
}
#apDiv101 {
	position:absolute;
	left:216px;
	top:667px;
	width:520px;
	height:1px;
	z-index:80;
	background-color: #CCCCCC;
}
#apDiv102 {
	position:absolute;
	left:242px;
	top:515px;
	width:797px;
	height:1px;
	z-index:81;
	background-color: #CCCCCC;
}
#apDiv103 {
	position:absolute;
	left:238px;
	top:210px;
	width:712px;
	height:1px;
	z-index:82;
	background-color: #CCCCCC;
}
#apDiv104 {
	position:absolute;
	left:47px;
	top:25px;
	width:193px;
	height:752px;
	z-index:83;
	background-color: #333333;
}
#apDiv105 {
	position:absolute;
	left:64px;
	top:74px;
	width:1149px;
	height:114px;
	z-index:84;
	background-color: #333333;
}
#apDiv106 {
	position:absolute;
	left:468px;
	top:271px;
	width:617px;
	height:73px;
	z-index:83;
}
#apDiv107 {
	position:absolute;
	left:799px;
	top:489px;
	width:33px;
	height:40px;
	z-index:84;
}
#apDiv108 {
	position:absolute;
	left:523px;
	top:535px;
	width:29px;
	height:40px;
	z-index:85;
}
.style32 {
	font-size: 14px; 
    color: #333333;
}
.style33 {
	font-size: 11px; 
}
</style>
</head>
<body>
    <div class="style19" id="apDiv35">
        <p align="right" class="style32">This space planned to show-to share the ongoing work on &quot;Vector. Novel without words&quot; and all, in my view, essential that this work is connected. </p>
    </div>
    <div class="style23" id="apDiv37">ðóññêèé</div>
    <div class="style19" id="apDiv38">
      <div align="right" class="style33">novel without words</div>
    </div>
    <div id="apDiv42"><img src="ukrashenie1/2.jpg" name="Image2" width="36" height="35" border="0"></div>
    <div id="apDiv43"><img src="ukrashenie1/2.jpg" name="Image1" width="36" height="35" border="0"></div>
    <div id="apDiv44"><img src="ukrashenie1/2.jpg" name="Image6" width="36" height="35" border="0"></div>
    <div class="style23" id="apDiv54">music</div>
    <div id="apDiv57"></div>
    <div id="apDiv80"></div>
    <div id="apDiv86"></div>
    <div id="apDiv87"></div>
    <div id="apDiv90">
      <div align="right" class="style32">Maxim Aginsky February 16,2010</div>
    </div>
    <div class="style23" id="apDiv91">vector</div>
    <div class="style23" id="apDiv92">forum</div>
    <div class="style23" id="apDiv93">contact</div>
    <div id="apDiv94"></div>
    <div id="apDiv95"></div>
    <div id="apDiv96"></div>
    <div id="apDiv97"></div>
    <div id="apDiv98"></div>
    <div id="apDiv99"></div>
    <div id="apDiv100"></div>
    <div id="apDiv101"></div>
    <div id="apDiv102"></div>
    <div id="apDiv103"></div>
    <div class="style32" id="apDiv106">What a feast for the people.What joy created.Andrei Rublev</div>
    <div id="apDiv107"><img src="ukrashenie1/2.jpg" name="Image9" width="36" height="35" border="0"></div>
    <div id="apDiv108"><img src="ukrashenie1/2.jpg" name="Image8" width="36" height="35" border="0"></div>
</body>
</html>
// Hot News

Come. Show. Win.

Your website can be the next winner!

Opinions, comments, jury reviews, new friends and customers and much more on Cssfox web designers' community.

Submit your work now
// Hot News
The heart. Logo concept for United States Holocaust Memorial Museum
USHMM branding
It is a challenge for anyone born a significant amount of time after a tragedy (I was born in 1979 - 34 years after the catastrophe) to create a visual symbol for that event which represents the emotions involved. On the other hand, I have a personal connection to the event.
Read the story

Join the Talk

WebTalkTo website design version 9 handcrafted with the greatest care in October 2016.
Find more about other design versions @ Site Design Archive.
Follow us on: