WEB DESIGN AND DEVELOPMENT class8

Web design and development all video tutorial links:

https://bit.ly/2JuRdmw

Topic 14: HTML, CSS template নিয়ে website এর design তৈরি করা ৷
Template হচ্ছে সুধু মাত্র plain design করা, কোন development করা কিছু নাই।সুধুমাত্র বাইরের ডিজাইন।

Color code:
for understanding.


new or, changed


erase

...<div class="link1">             
....................
</div>...

link1 এর height এবং width change করা হলো।
.link1{height:100%; width:100%; background:BurlyWood;}

link1 এর ভিতরে link2 নেয়া হলোঃ

⇒...<div class="link1">...
<div class="link2">link2</div>    
</div>...

.link2{height:350px; width:100%; background:red; border:1px solid black; float:left; }

⇒...<div class="link1">... 

link1 থেকে padding উঠিয়ে দেয়া হলোঃ
.link1{padding:100px;}

link2 এর ভিতরে link3 নেয়া হলোঃ
⇒...<div class="link2">
<div class="link3">link3</div>        </div>...

.link3{height:100%; width:30%; background:orange; float:left; border-right:1px solid black;}

⇒...<div class="link1">
............
<div class="link3">link3</div>
<div class="link4">link4</div>
</div>...

.link4{height:50px; width:100%; background:green; border:1px solid black; float:left;}

⇒...<div class="link1">

............

<div class="link4">link4</div>

<div class="link5">link5</div>

</div>...

.link5{height:300px; width:100%; background:deepskyblue; border:1px solid black; float:left; }

⇒...<div class="link1">link1
          ..............
<div class="link5">link5
<div class="link6">link6</div>
</div>.......
</div>...

.link6{height:100%; width:40%; background:BurlyWood ; border:1px solid black; float:left; border-left:1px solid black;}

⇒...<div class="link1">link1
    .........
<div class="link5">link5
<div class="link6"></div>
</div>
<div class="link7">link7</div>
</div>...

.link7{height:50px; width:100%; background:lightgreen; float:left;}

⇒...<div class="link1">link1
<div class="link8">link8</div>
<div class="link2">link2
..............link3.........
</div>
</div>...

.link8{height:50px; width:100%; background:lightgreen; border:1px solid black; position:fixed;}

link7কেlink2 এর ভিতরে আবার copy past:

⇒...<div class="link2">
<div class="link7">link7</div>
link2
<div class="link3">link3</div>
</div>...

.link7{height:49px; width:100%; background:lightgreen; float:left;}

⇒...<div class="link5">
link5
<img src="../N/web.jpg" height="100%" width="59.9%">
<div class="link6">link6</div>
</div>.......
</div>...

⇒<div class="link6">
link6 
<embed class="vid" src="web.mp4"> </embed>
</div>

  .vid{height:100%; width:100%;}

⇒...<div class="link2">
<div class="link7">link7</div>
link2 
<img src="../N/technical.png" height="100%" width="69.9%">
<div class="link3">link3</div>
</div>...              

⇒...<div class="link2">
<div class="link7">link7</div>
...........
<div class="link3">
link6 <img src=" ../N/smart.png" height="100%" width="100%">
</div>
</div>...

⇒...<div class="link4">
link4 
<p class="para">ENGINEERING SOLUTION</p>
</div>... 

.para{background:green; color:red; font-size:45px; font-weight:1000; text-align:center;}

⇒...<div class="div5">
..........class="link6".....
</div>

<div class="div7">
link7
<p class="contact">
Contact with us:
Mobile: 01991804660, 
&nbsp &nbsp &nbsp
Facebook: 
https://www.facebook.com/te.faahad
</p>
</div>

.contact{background:black; color:red; font-weight:1000; font-size:30px; text-align:center;}


.link7{height:49px; width:100%; background:black; float:left;}

⇒...

সমস্তধরনের border মুছে দিলামঃ

border:1px solid black; 

border-left:1px solid black; 

border-right:1px solid black; 

⇒...<div class="link2">
<div class="link8">
link8

<p class="manu">HOME &nbsp &nbsp &nbsp 
GALLERY &nbsp &nbsp &nbsp
SERVICES: &nbsp &nbsp &nbsp
ABOUT US:
</p>

</div>

.manu{background:lightgreen; font-size:40px; font-weight:800; color:dark-red;}

     

YouTube Link: https://bit.ly/2Yr4nGy