Hello friends:
I was fascinated with the website www.amaliyaFoundation.com. When I looked at the source code, it refers .php files as well. I am trying with what I know. I have attached my code. Right now, I am struggling with having to show the text inside the images. I used the guidance of How To Position Text Over an Image. To position the three circles the way it was, it required position:absolute. To overcome this, I am using
transform: translate(155px, 150px); . Unless, I moved the cursor to the image, it doesn't show my text. I tried only with first image to the left. I am sure that you guys may know a way to force it to show. Thanks for all the inputs.
I was fascinated with the website www.amaliyaFoundation.com. When I looked at the source code, it refers .php files as well. I am trying with what I know. I have attached my code. Right now, I am struggling with having to show the text inside the images. I used the guidance of How To Position Text Over an Image. To position the three circles the way it was, it required position:absolute. To overcome this, I am using
transform: translate(155px, 150px); . Unless, I moved the cursor to the image, it doesn't show my text. I tried only with first image to the left. I am sure that you guys may know a way to force it to show. Thanks for all the inputs.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Document</title>
<style>
body{font-family: 'Muli', sans-serif; color:#292a2b; font-size:13px; padding:0; margin:0 auto;}
#main_cont{ width:100%; min-width:1024px;}
.clearit{ clear:both;}
.floatleft{ float:left;}
.floatright{ float:right;}
.centerit{ margin:0 auto;}
.home_shadow{ width:922px; height:42px; background: no-repeat; position:absolute; bottom:25px; left:40px; }
.home_slider{ width:100%; min-width:1024px; height:545px; background: repeat-x;}
.home_slider_sec{ width:1000px; height:545px; position:relative;}
.home_circles1{ width:325px; height:auto; background: no-repeat; position:absolute; left:61px; top:138px;
z-index:1;font-family: 'Playball', cursive; font-size:25px; color:#fff; padding:40px 8px 0 0px; text-align:right; line-height:22px;}
.home_circles1:hover{ opacity: .2; cursor: pointer;}
.home_circles2{width:325px; height:auto; background: repeat; position:absolute; left:340px; top:70px;
z-index:2;font-family: 'Playball', cursive; font-size:25px; color:#fff; padding:12px 100px 0 0px; line-height:22px; text-align:right;}
.home_circles2 span{font-family: 'Muli', sans-serif; font-size: 18px;line-height: 20px;}
.home_circles2:hover{ opacity: .3;}
.home_circles3{width:325px; height:auto; background: no-repeat; position:absolute; left:617px; top:138px;
z-index:1;font-family: 'Playball', cursive; font-size:25px; color:#fff; padding:40px 80px 0 0; text-align:right; line-height:22px;}
.home_circles3 span{font-family: 'Muli', sans-serif; font-size: 18px;line-height: 20px;}
.home_circles3:hover{ opacity: .3;}
.home_circles6{ width:266px; height:65px; background: no-repeat; position:absolute; left:370px; top:450px;z-index:3;font-family: 'Playball', cursive; font-size:22px; color:#fff; line-height:65px; text-align:center;}
.home_circles6 span{font-family: 'Muli', sans-serif; font-size: 18px;line-height: 20px;}
.home_circles6:hover{ opacity: .3;}
.inside_header{ height:145px; width:100%; min-width:1024px; background:url(top.jpg) bottom repeat-x;}
.inside_header_line{ height:4px; width:100%; min-width:1024px; }
.inside_header_sec{ height:141px; width:100%; min-width:1024px;}
.inside_main_logo{ width:1000px; height:83px;}
.inside_logo{ width:228px; height:107px; position:relative; padding:5px 0 13px 0;}
.inside_navi{width: 615px;height: 42px;padding: 15px 0 0 385px;font-size: 11px; background-color: gray;}
.inside_navi a{ text-decoration:none !important;}
.inside_underline{ width:268px; height:13px; background:url(../images/underline.png) no-repeat; position:absolute; left:-33px; bottom:-6px; z-index:2;}
.selec_PG{ color:#fff; background:#f0a120; padding:7px 15px; text-decoration:none; cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; text-transform:uppercase; text-decoration:none;}
.selec_NPG{ color:#2f3030; text-decoration:none; cursor:pointer; padding:7px 15px; text-transform:uppercase; }
.selec_NPG:hover{ color:#fff; background:#f0a120; padding:7px 15px; text-decoration:none; cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }
.selec_SEP{ width: 4px;
color: #2f3030; padding: 7px 0px 0 0px; }
.home_shadow{ width:922px; height:42px; background:url(shadow_home.png) no-repeat; position:absolute; bottom:25px; left:40px; }
.home_bott{ width:100%; min-width:1024px; background:url(../images/Nwtext_back2.jpg) center top no-repeat;}
.home_bott_sec{width:1000px; padding:60px 0px 40px 0px; height:289px;}
.home_bott_header{ width:485px; height:30px; color:#292a2b; font-size:30px;margin-bottom:9px; padding-bottom:9px; text-align:center;font-family: 'Playball', cursive; margin:0 257px 0px 257px;}
.home_bott_cont{ width:485px; text-align:center; margin:15px 257px 9px 257px; line-height:20px;}
.home_bott_cont2{ width:750px; text-align:center; margin:15px 125px 0 125px; line-height:20px;}
.home_footer{ width:100%; min-width:1024px;}
.home_footer_sec{ width:100%; min-width:1024px; background:#292929; height:35px;}
.home_footer_text{ color:white; text-align:center; text-align:center; font-size:11px; line-height:35px;}
.home_footer_text a{ color:#5b5c5d; text-decoration:none;}
.home_footer_line{ width:100%; min-width:1024px; background:#333333; height:10px;}
.container {
position: relative;
text-align: center;
color: white;
}
.top-right {
position: absolute;
font-family: 'Playball', cursive; font-size:18px; color: black;
transform: translate(155px, 150px);
}
</style>
</head>
<body>
<div id="main_cont" class="centerit">
<div class="inside_header centerit">
<div class="inside_header_line centerit"></div>
<div class="inside_header_sec centerit">
<div class="inside_main_logo centerit">
<div class="inside_logo floatleft"><a href="index.php"><img src="Nwlogo.png" border="0" title="Amaliya Logo"
alt="Amaliya Logo" /></a></div>
</div>
<div class="inside_navi centerit">
<a href="index.php"><div class="selec_PG floatleft">Home</div></a>
<div class="selec_SEP floatleft">.</div>
<a href="about.php"><div class="selec_NPG floatleft">About</div></a>
<div class="selec_SEP floatleft">.</div>
<a href="encore.php"><div class="selec_NPG floatleft">Encore </div></a>
<div class="selec_SEP floatleft">.</div>
<a href="enable.php"><div class="selec_NPG floatleft"> Enable</div></a>
<div class="selec_SEP floatleft">.</div>
<a href="empower.php"><div class="selec_NPG floatleft">Empower</div></a>
<div class="selec_SEP floatleft">.</div>
<a href="contact.php"><div class="selec_NPG floatleft">Contact</div></a></div>
</div>
</div>
<div class="home_slider centerit">
<div class="home_slider_sec centerit">
<div class="container" ><img src="encore_circle.png" class="home_circles1 floatleft" >
<div class="top-right">Top <br>Left<br>Mama</div>
</div>
<div><img src="hearing_circle.png" class="home_circles2 floatleft" ></div>
<div><img src="youth_circle.png" class="home_circles3 floatleft"></div>
<div><img src="upcomming-events.png" class="home_circles6 floatleft" ></div>
<div class="home_shadow floatleft"></div>
</div>
</div>
<div class="home_bott centerit">
<div class="home_bott_sec centerit">
<div class="home_bott_header floatleft">Fulfilling the promise</div>
<div class="home_bott_cont floatleft">The Amaliya Foundation works to advance two basic principles:<br /><br />
<img src="bullet1.png" border="0" />All people deserve to live with dignity.<br />
<img src="bullet1.png" border="0" />All people are able to contribute meaningfully to society
and must be given the means and opportunity to do so.
</div>
<div class="home_bott_cont2 floatleft">
We believe that education is the key to unlocking the full potential of each and every individual. It helps
a person to make sense of the world and to find an active role in society, whether young, old or differently-abled. <br/><br/><br/>
<span>The Amaliya Foundation has been established to develop and implement a series of innovative programmes
centred around education. They target certain segments of the population – in particular the youth,
the differently-abled and the elderly. </span>
</div>
<div class="clearit"></div>
</div>
<div class="home_footer centerit">
<div class="home_footer_sec centerit">
<div class="home_footer_text centerit">© 2023 Amaliya Foundation. All Rights Reserved. </div>
</div>
<div class="home_footer_line centerit"></div>
<div class="clearit"></div>
</div>
</body>
</html>Attachments
Last edited:
