Showing posts with label CSS english version. Show all posts
Showing posts with label CSS english version. Show all posts

Friday, March 1, 2019

Combining all material

Combining all material 

In this post you are invited to the specifics to understand the make pieces of a website, from the Header, Content, Menu, Right Menu, footers in a discussion which I have peeled one by one about the function of each command CSS. 

In the discussion this time you will combine the start of the header to footer for web pages into a single unit. Okay just give me my own HTML file join:

<html>
<head>
<title>Creating a Web Layout</title>
<link href="style.css" rel="stylesheet"
type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
<a href="index.html">HOME</a>
<a href="produk.html">PRODUK</a>
<a href="artikel.html">ARTIKEL</a>
<a href="member.html">MEMBER</a>
<a href="testimoni.html">TESTIMONIAL</a>
<a href="kontak.html">KONTAK</a>
<a href="about-us.html">ABOUT US</a>
</div>
<div id="content">
<h1>Protect Natural Resources,
Utilize Solar Electric Power</h1>
<p id="indent" class="indent">Solar
energy, wind energy, geothermal energy, hydropower and
biomass are some of the renewable sources of energy.
Using of renewable sources of energy is good because
these sources offer an environmentally friendly option
than utilizing fossil fuels. </p>
<p>There will be an improve energy
security and energy independence if people use renewable source of energy. Also renewable sources of energy are
the cleanest and safest energy sources.
<span class="rtk">The well-known
source of energy which is the solar energy is an
environment-friendly and endless renewable source of
energy. </span>.</p>
<p>Solar power doesn't result in
the emission of harmful carbon dioxide unlike the use of
fossil fuels. The sun will be the unlimited source of
energy and with right technologies can provide sufficient
electricity that could be used in every single household
or even in commercial and industrial properties. </p>
<p>The use of solar power has a
positive effect in the environment because taking
advantage of solar energy does not contribute to climate
change, acid rains or any kind of pollution. When
transformed from solar radiations, solar energy may
possibly be converted to thermal energy or electric
power. This may also be employed in a number of
applications like in agriculture and analysis. </p>
<blockquote>At present, solar power
is being utilized in two areas namely for the production
of thermal energy which can heat up water and producing
of electric power by utilizing the photovoltaic cell.
Photovoltaic cells or PV cells captures
solar energy then transforming it into electricity.
</blockquote>
<p>These cells convert sunlight
into electricity by employing the energy developed when
photons from sunlight push electrons into greater state
of energy. Yet solar power is not only limited to thermal
energy and electricity simply because currently, numerous
devices which are powered by solar energy exist in the
market.
Solar energy is an excellent source of
supplying power to homes and companies and by utilizing
solar power you're not merely protecting the environment
from becoming polluted but also you are saving the rest
of the earth’s natural resources. </p>
<p>Capturing solar energy does not
contribute any pollution and does not harm the
atmosphere. </p>
</div>
<div id="right">
<h2 class="member">Member
Login</h2>
<form name="memberLogin" action="#"
method="post">
<input type="text" name="name"
class="txtBox" value="-nama-anda-" />
<input type="password" name="name2"
class="txtBox" value="-password-" />
<a href="#">Register here</a>
<input type="submit" name="login"
value="" class="login" />
<br class="spacer" />
</form>
<p class="bawah"></p>
<h2
class="categories">Categories</h2>
<ul>
<li><a
href="#">Software</a></li>
<li><a
href="#">Hardware.</a></li>
<li><a href="#">Belajar
CSS </a></li>
<li><a href="#">Belajar
PHP </a></li>
<li><a href="#">Belajar
Wordpress </a></li>
<li><a href="#">Plugin
Wordpress </a></li>
<li><a href="#">WP
Themes </a></li>
<li><a
href="#">Download</a></li>
<li><a
href="#">Testimonial</a></li>
<li class="noImg"><a
href="#">Berita</a><br class="spacer" />
</li>
</ul>
</div>
<div id="footer">
<p id="bottom">
<a href="index.html">HOME</a>
<a href="produk.html">PRODUK</a>
<a href="artikel.html">ARTIKEL</a>
<a href="member.html">MEMBER</a>
<a href="testimoni.html">TESTIMONIAL</a>
<a href="kontak.html">KONTAK</a>
<a href="about-us.html">ABOUT US</a>
</p>
<p id="copy">
Copyright &copy; 2011 <a
href="http://rudydevianto.com">Rudy Devianto.com</a>
</p>
</div>
</div>
</body>
</html>

It is quite long because I have also included the contents of the content, Please copy into your favorite web management software, you can use Macromedia Dreamweaver 8 or Adobe Dreamweaver CS 3 and above, if you want the free version you can use notepad ++ or Coffe Cup , 

Name the index.html for the HTML file, and then try to open it ... Here if opened in the Browser:

Combining all material
It is still a mess because you do not make the CSS file merging. For this HTML I think there have to be discussed further, because my focus on the CSS file. 

The following CSS files that I join:

* {
margin: 0;
padding: 0;
}
body {
font-family:Verdana;
font-size:12px;
}
body #container{
width:1000px;
margin:0 auto;
background-color:#EBEBEB;
}
#header{
background-image:url(../images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#FFFF99;
width:1000px;
height:160px;
}
/*-------menu-----------*/
#menu{
background-color:#993300;
width:1000px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
#menu a:link{
background-color:#FFFF00;
color:#000099;
text-decoration:none;
font-size:14px;
}
#menu a:hover{
background-color:#0000CC;
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
font-size:16px;
}
#menu a:active{
color:#000000;
background-color:#FFFFFF;
font-weight:100;
}
/*-------menu-----------*/
/*-------content-----------*/
#content{
background-color:#FFFFFF;
width:675px;
float:left;
padding:15px 10px 15px 15px;
letter-spacing:1px;
word-spacing:10px;
text-align:justify;
}
h1 {
text-decoration:underline;
text-transform:uppercase;
font-family:Arial;
font-size:30px;
padding-bottom:20px;
}
.indent:first-letter {
font-size:70px;
color:#0000CC;
font-weight:bold;
float:left;
}
.rtk {
text-decoration:blink;
font-weight:bold;
color:#FF0000;
background-color:#CCCC00;
}
#content blockquote{
font-style:italic;
font-weight:bold;
width:600px;
margin:auto;
margin-top:15px;
margin-bottom:15px;
padding:5px;
border-color:#999999;
border-style:ridge;
border-width:1px;
background-color:#CCCCCC;
}
/*-------content-----------*/
/*-------colom Right-----------*/
#right{
width:299px;
background-color:#FFFFFF;
float:left;
}
.member{
width:264px;
height:67px;
background:url(../images/member_login.gif) 0
10px no-repeat;
margin: 0 auto;
font-size:20px;
color:#FFCC00;
text-indent:50px;
line-height:50px;
}
form{
background:url(../images/memberlogin_bg.gif)
repeat-y;
width:228px;
padding:0 18px 0 18px;
margin:0 auto;
}
form input.txtBox{
width:206px;
height:25px;
border-left:#808080 solid 1px;
border-top:#808080 solid 1px;
border-right:#D4D0C8 solid 1px;
border-bottom:#D4D0C8 solid 1px;
color:#000000;
background-color:#FFFFCC;
margin:5 0 17px 0;
padding:0 0 0 20px;
}
form a{
font-size:12px;
font-weight:bold;
color:#FF6600;
text-decoration:underline;
padding:0 0 0 14px;
float:left;
background:url(../images/register_here_bg.gif)
0 5px no-repeat;
}
form a:hover{
text-decoration:none;
}
form input.login{
background:url(../images/btn_login.gif) norepeat;
width:53px;
height:13px;
border:none;
cursor:pointer;
float:right;
}
.bawah{
background:url(../images/memberlogin_bot.gif)
no-repeat;
width:264px;
height:25px;
margin:0 0 5px 0;
margin:auto;
}
.categories{
font:bold;
line-height:40px;
font-size:24px;
color:#FFFFCC;
background-color:#FF9900;
width:265px;
padding:0 0 0 17px;
margin-top:30px;
margin-left:17px;
}
ul{
width:238px;
padding:0 0 0 17px;
}
ul li{
display:block;
background:url(../images/dot.gif) bottom
repeat-x;
height:25px;
width:238px;
}
ul li a{
background:url(../images/arrow.gif) 0 7px norepeat;
font-size:14px;
color:#000000;
text-decoration:none;
margin:0;
padding:3 0 3 14px;
display:block;
}
#right ul li a:hover{
color:#FFFFFF;
background-color:#FF9900;
}
/*-------colom Right-----------*/
/*-------footer----------*/
#footer{
background-image:url(../images/footer.gif);
width:1000px;
height:128px;
float:left;
}
#bottom{
text-align:center;
font-family:Geneva;
font-size:12px;
margin:25px 0 0 0;
font-weight:bold;
letter-spacing:1px;
word-spacing:8px;
}
#bottom a{
color:#FFFFFF;
}
#bottom a:link{
text-decoration:none;
}
#bottom a:hover{
text-decoration:underline;
color:#FFFF00;
}
#copy{
margin:25px 0 0 0;
font-family:verdana;
color:#FFFFCC;
font-size:10px;
text-align:center;
}
#copy a {
color:#FFFFCC;
}
#footer #copy a:link{
text-decoration:none;
}
#footer #copy a:hover{
text-decoration:underline;
}

Name the style.css

Explanation:
  • I incorporated directly across the CSS commands, and if there was I the same command, such as for the body, you do not need to repeat the command.
  • On each of my own CSS command flag for each explanation from the header to the footer, for example, the code with the comment / * ------- ----------- menu * /
  • For each of these explanations CSS commands in the previous post

Make another page that
you need to create another page that is:
  • Products (produk.html)
  • Article (artikel.html)
  • Member (member.html)
  • Contact (kontak.html)
  • Testimonial (testimoni.html)
  • About Us (about-us.html)
To make the product page is very easy, because you already have index.html. 

Before you try to give a link to the menu Home-Products-MemberTestimonial-Contact-About Us prior to the index.html file 

In the HTML file I already give a link, as a trailer, please see this:
<a href="index.html">HOME</a>
<a href="produk.html">PRODUK</a>
<a href="artikel.html">ARTIKEL</a>
<a href="member.html">MEMBER</a>
<a href="testimoni.html">TESTIMONIAL</a>
<a href="kontak.html">KONTAK</a>
<a href="about-us.html">ABOUT US</a>
Similarly to the footer you give the same links with the Menu Navigation up .. 

Copy the index.html file and rename it with the name produk.html, as well as another copy and rename the appropriate name in the Name menu. 

Or as below: 
Product = (produk.html) 
article = (artikel.html) 
Members = (member.html) 
Contacts = (kontak.html) 
Testimonials = (testimoni.html) 
About Us = (about-us.html) 

then you can change the page content on the Home page with the content as needed. Now you try to click 2 times on index.html 

Here are screenshots of the final results:

Combining all material
Now you try to link them.

To download the file please HERE





If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in fajaryusuf.com . :)

Reviewer: FajarYusuf.Com
ItemReviewed: Combining all material

Editing Footer

Editing Footer

After you create a layout, navigation, content and column right, now you need to edit footer. You must first create a folder named Chapter V Edit Footer , and in that folder create folder also images, because you need images for the footer.

Creating an HTML File Footer

Type the following HTML code in notepad ++

<html>
<head>
<title>Creating a Web Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="container">
        <div id="footer">
          <p id="bottom">
                  <a href="#">HOME</a> 
                  <a href="#">PRODUK</a> 
                <a href="#">ARTIKEL</a> 
                <a href="#">MEMBER</a> 
                <a href="#">TESTIMONIAL</a>
                <a href="#">ABOUT US</a> 
            </p>
              <p id="copy">
              Copyright &copy; 2011 <a href="http://fajaryusuf.com">Fajar Yusuf.com</a>
            </p>
        </div>
</div>
</body>
</html>

The explanation for the above code:
  • HTML file above I made the writing-HOME-PRODUCTS-ARTIKELMEMBER-ABOUT US TESTIMONIAL with each own I give the link "#"
  • I also give writing Copyright and code and copy the code to create the © symbol and its name with a link to fajaryusuf.com.
  • Each was I given selector. 
Save the file into the folder CHAPTER V Edit Footer , name footer.html.
Editing Footer

Create CSS Footer

Now is the time you create a CSS file so that the footer nicer to be presented to the user. 

Type the CSS code below on the software you use
#container{
        width:1000px;
        margin:0 auto;        
        }
#footer{
        background-image:url(images/footer.gif);
        width:1000px;
        height:128px;
        float:left;
        }
#bottom{
        text-align:center;
        font-family:Geneva;
        font-size:12px;
        margin:25px 0 0 0;
        font-weight:bold;
        letter-spacing:1px;
        word-spacing:8px;
        }
#bottom a{
        color:#FFFFFF;
        }
#bottom a:link{
        text-decoration:none;
        }
#bottom a:hover{
        text-decoration:underline;
        color:#FFFF00;
        }
#copy{
        margin:25px 0 0 0;
        font-family:verdana;
        color:#FFFFCC;
        font-size:10px;
        text-align:center;
        }
#copy a {
        color:#FFFFCC;
        }
#footer #copy a:link{
        text-decoration:none;
        }
#footer #copy a:hover{
        text-decoration:underline;

Explanation of the CSS code that you have created:
  • #container {...}create a page with a width of 100 px margin 0 with the placement of the middle (auto).
  • #footer {...}to set footer with 1000px width and height of 128 placements float: left
  • #bottom {...}for setting the writing placement test ditengan bottom menu (text-align: center), using the Geneva font, the font size 12px, we give a margin of over 25 px and the rest 0, made bold font (bold) with spacing between letters 1 px, and the spacing between words 8 px. 
  • #bottom a {...}to set the writing by link white (# FFFFFF).
  • #bottom a: link {...}to control the effects of bottom menu without underline text (text decoration: none).
  • #bottom a: hover {...}to give effect if the mouse hovers over the article by adding underline (textdecoration: underline) and text color change color to yellow (# FFFF00).
  • #copy {...}for setting copyright article, we give a margin of 25 0 0 0, using Verdana font, light yellow (#FFFFCC), 10 px font size, font placement center.
  • #copy a {...}provide font color setting by a link with the same color with the word copyright is light yellow (#FFFFCC)
  • #footer #copy a: link {...}give effect to underline the link without giving the value none (text-decoration: none)
  • #footer #copy a: hover {...}effect on the link if you mouse over the text with effects underline (textdecoration: underline)
Then you save this file to a folder CHAPTER V Edit Footer named style.css

Editing Footer

If you are correct then the folder view as above. 


Then you run the file footer.html to click 2 times, so the results are:


Editing Footer

Very interesting is not if you master CSS ...?

Conclusion: 
The HTML file is only used to create content and settings for the display settings using CSS.


You can continue to the end of the matter, namely CSS:  Combining Whole Matter CSS. 



If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in fajaryusuf.com . :)

Reviewer: FajarYusuf.Com
ItemReviewed: Editing Footer

Editing Column Right

Editing Colom Right
Previously you had a folder with the name created CHAPTER IV Edit Colom Right and therein you create another folder named images, then your copy of the image file which I have included in MATERIAL PRACTICE CSS into the images folder.

As there are 7 file image file:

Editing Colom Right


Create File HTML Column Right

Then you open the software Notepad ++ or another suitable both you and your tastes write html code below:

<html>
<head>
<title>Creating a Web Layout</title>
<link href="style.css" rel="stylesheet" type="text/css"
media="all" />

</head>
<body>
<div id="container">
<div id="content">
<p>&nbsp;</p>
</div>
<div id="right">
<h2 class="member">Member Login</h2>
<form name="memberLogin" action="#" method="post">
<input type="text" name="name" class="txtBox" value="-
nama-anda-" />
<input type="password" name="name2" class="txtBox"
value="-password-" />
<a href="#">Register here</a>
<input type="submit" name="login" value="" class="login"
/>
<br class="spacer" />
</form>
<p class="bottom"></p>
<h2 class="categories">Categories</h2>
<ul>
<li><a href="#">Software</a></li>
<li><a href="#">Hardware.</a></li>
<li><a href="#">Belajar CSS </a></li>
<li><a href="#">Belajar PHP </a></li>
<li><a href="#">Belajar Wordpress </a></li>
<li><a href="#">Plugin Wordpress </a></li>
<li><a href="#">WP Themes </a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Testimonial</a></li>
<li class="noImg"><a href="#">Berita</a><br
class="spacer" />
</li>
</ul>
</div>
</body>
</html>

This time a little bit complicated, because CSS is more complex arrangement, and description for the html code above is as follows:
  • To my right coloumn plan to create a login form at the top of the image that I have prepared, because if you rely solely on the color looks unattractive and this will make you will gain insight.
  • And below the login form will Categories I made to put some distance between word categories and categories will I make points.
  • I've made the last article Login H1 to input text fields with 2 and 1 the submit button without value.
  • Under the login form I have created Categories text using text Categories H2 with 8 each with a link "#".
  • Each one I have given selector, either ID or class. After that you save with the name colom-right.html.

Display results:


Creating a CSS file for the right coloumn

It looks not interesting at all is not it, but you do not worry, because once you give the CSS display will change at all. Now you create CSS file, type the following CSS code:

body {
font-family: Arial, Helvetica, sans-serif;
}
#container{
width:1000px;
margin:0 auto;
}
#content{
background-color:#EBEBEB;
width:700px;
height:521px;
float:left;
}
#right{
width:300px;
background-color:#EBEBEB;
float:left;
}
.member{
width:264px;
height:67px;
background:url(images/member_login.gif) 0 10px norepeat;
margin: 0 auto;
font-size:20px;
color:#FFCC00;
text-indent:50px;
line-height:50px;
}
form{
background:url(images/memberlogin_bg.gif) repeat-y;
width:228px;
padding:0 18px 0 18px;
margin:0 auto;
}
form input.txtBox{
width:206px;
height:25px;
border-left:#808080 solid 1px;
border-top:#808080 solid 1px;
border-right:#D4D0C8 solid 1px;
border-bottom:#D4D0C8 solid 1px;
color:#000000;
background-color:#FFFFCC;
margin:5 0 17px 0;
padding:0 0 0 20px;
}
form a{
font-size:12px;
font-weight:bold;
color:#FF6600;
text-decoration:underline;
padding:0 0 0 14px;
float:left;
background:url(images/register_here_bg.gif) 0 5px
no-repeat;
}
form a:hover{
text-decoration:none;
}
form input.login{
background:url(images/btn_login.gif) no-repeat;
width:53px;
height:13px;
border:none;
cursor:pointer;
float:right;
}
.bottom{
background:url(images/memberlogin_bot.gif) norepeat;
width:264px;
height:25px;
margin:0 0 5px 0;
margin:auto;
}
.categories{
font:bold;
line-height:40px;
font-size:24px;
color:#FFFFCC;
background-color:#FF9900;
padding:0 0 0 17px;
margin-top:30px;
}
ul{
width:238px;
padding:0 0 0 17px;
}
ul li{
display:block;
background:url(images/dot.gif) bottom repeat-x;
height:25px;
width:238px;
}
ul li a{
background:url(images/arrow.gif) 0 7px no-repeat;
font-size:14px;
color:#000000;
background-color:#EBEBEB;
text-decoration:none;
margin:0;
padding:3 0 3 14px;
display:block;
}
#right ul li a:hover{
color:#FFFFFF;
background-color:#FF9900;
}
It is rather a lot of settings of this right coloumn, and with it I will give an explanation:
  • Body {...}is if you do not set up specifically for the font type font settings will be arranged from here overall.
  • #container {...}as usual explanation as the previous chapter you create a web page with a width of 1000px width lies in the middle but this time I tried to set the default font is not from here but from the body.
  • #content {...}is the place to put content.
  • #right {...}setting of the right itself with the width of 300 px, background color gray (#ebebeb) and float: left.
  • .member {...}is the class of H2 text selector Login with setting 264 px wide and 67 pixels high and you select the background image of member_login.gif distance from the top of the left 0 10px without looping image (background: url (images / member_login. gif 0 10px no-repeat) and a margin of 0 placement center (auto) and on the size of the font sebasar 20 px yellow color (# FFCC00) with distance posts of the member login from the edge by 50 px (text-indent: 50px) and the distance between writing on 50 px (line-height: 50px).
  • #form {...}to form the background created by using images which are: memberlogin_bg.gif by looping just from the top down (background: url (images / memberlogin_bg.gif) repeat-y) 228 px width, padding on 0, padding-right 18px padding-bottom 0 18px left padding and margin of 0 auto.
  • input.txtBox form {...}The input form to set the username and password, you make the width of the text field width of 206 px and 25 px high, you do so more beautiful with border left border and the color (# 808080), border right and bottom color (# D4D0C8) type solid border border 1 px width and text color is black (# 000000), light yellow color text input (#FFFFCC) with a margin of 5 0 0 17px and padding 0 0 0 20px.
  • form a {...}to set on Register Here with the following settings font size 12 px, in bold (bold) text color orange (# FF6600) using underline, float left, padding 0 0 0 14 px and the left side of the writing we put the right picture on the left check posts (background: url (images / register_here_bg.gif) 0 5px no-repeat).
  • form a: hover {...}to give the effect on Register Here when you mouse over the article by removing the underline (text-decoration: none).
  • input.login form {...} This selector to organize and submit the login image on which the HTML code we do not provide paper login settings as follows: you give btn_login.gif background image without looping image (background: url (images / btn_login. gif) no-repeat), 53 px width, height 13 px, with no borders, float right, then we create a cursor display the hand symbol (cursor: pointer).
  • .bottom {...}to display the image the bottom of the form, that by giving memberlogin_bot.gif without looping background image (background: url (images / memberlogin_bot.gif) norepeat) 264 px width, height 25 px, and we gave the bottom margin 5px another margin of 0 (margin: 0 0 5px 0) and to show the middle margin we also give the value of auto (margin: auto). For setting the login form has been completed and this started we set the Categories section
  • .categories {...}section to set the writing Categories with bold font settings (bold), writing distance up and down 40 px (line-height: 40px), 24 px font size, text color yellow (# FFFF00) background color orange (# FF9900) padding you give the value 0 0 0 17px, then we give the distance from the top 30px.
  • ul {...}to set up a place to create a bullet that is 238 px wide with padding you give it a value of 0 0 017px.
  • ul li {...}to set the posts of the categories with the top down direction by setting (display: block), then you need to create dots between the posts is to provide an image dot.gif position just below the horizontal image repetition (background: url (images / dot.gif) bottom repeat-x), with a height of 25 pixels and a width of 238 px.
  • ul li a {...}then you make arrangements of text and we need to put an arrow in front of the logo text with images arrow.gif (background: url (images / arrow.gif) 0 7px no-repeat), font size 14 px, color black font (# 000000), background color gray (#ebebeb) is equated with the other, then we remove the first underline (text-decoration: none), 0 margin, padding 3 0 3 14px, then you create a display: block ( directions posts downhill). #right ul li a: hover {...} is to give effect when the mouse is directed to the article by giving a background color orange (# FF9900) and the text color changes to white (# FFFFFF).

Then you save it to a folder CHAPTER IV Right Editing Coloumn named style.css and later will be so


Editing Column Right

Then you run the file by clicking colom-right.html by 2 times and this is the result:
Editing Column Right
Has changed a lot is not it? More and more fun as well, now you can make other creations by changing the image and size. 

You need a little bit to understand photoshop!



You can further to material namely:  Edit Footer CSS.



If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in fajaryusuf.com wrote. :)

Reviewer: FajarYusuf.Com
ItemReviewed: Editing Column Right

TENTANG SITUS

SITUS INI ADALAH SITUS INFO GAME TERBARU DAN JUGA SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.