about

Question

davy_yg 2 Posting Whiz

9 Years Ago

Hello,

Can anyone help me fix this code for about page:

http://www.innovation.web.id/One/about.php

Cek the part that has 4 circle and that grey areas. I would like to be able to work both in desktop and android.

about.php

    <!DOCTYPE html>
<html>
<head> 
<title>About</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1">  

   <link rel="stylesheet" type="text/css" href="css/style.css">
   <link rel="stylesheet" type="text/css" href="css/animate2.css">

   <link rel="stylesheet" media="all" href="css/main.css" />
   <script src="js/modernizr.custom.37797.js"></script> 

   <link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-3.3.5/css/custom.css">
   <script src="bootstrap-3.3.5/js/jquery.min.js"></script>
   <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary --> 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
   <script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
   <script src="js/parallax.js"></script>

   <style>
    #space {
        height: 100px;
    }   

    </style> 

</head>



<body>


<?php include('nav.php');  ?>

<div id="space"></div>

<div class="row">

<div class="col-xs-12 col-sm-6">

   <div id="aboutimage"><br><img src="Images/About/person.jpg" alt="person"></div>

</div>

<div class="col-xs-12 col-sm-6">

<div id="about">

   <br><br>
<div id="bounce">

    <p><b>ABOUT</b></p>
    <br>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>


</div>

</div>

</div>

<br><br><br>



<br><br><br>
<!-- <img src="Images/About/benchmarks.jpg"> -->
<br><br><br><br><br><br><br><br>

<br>

<div id="nextrow">

<div class="row">

<div class="col-xs-12 col-sm-6">

   <div id="paragraph1">
    <p><b>WHO WE ARE</b></p>

   <br>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   </div>


</div>


<br>

<div class="col-xs-12 col-sm-6">

   <div id="paragraph2">

   <p><b>WHAT WE DO</b></p>

   <br>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>

   </div>   

</div>

</div>

</div>   

</div>

<!--
<div class="row">

                <!-- <div style="z-index: 2;"> -->
<!--             <div class="col-sm-3"><img id="bg2-1" src="circle/circle1.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
<!--             <div class="col-sm-3"><img id="bg2-2" src="circle/circle2.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
<!--             <div class="col-sm-3"><img id="bg2-3" src="circle/circle3.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
<!--             <div class="col-sm-3">
                <img id="bg2-4" src="circle/circle4.png" alt="cloud"/></div>
                <!-- </div> --> 

<!--</div>-->



<div id="row">
<div class="col-xs-12 col-sm-12">    

<div style="margin-top: 600px; position: relative;"> 
<div id="wrapper">


            <header id="branding">
                <h1></h1>
            </header>

            <nav id="primary">
                <ul>             
                </ul>
            </nav>


            <div id="content">

                <article id="manned-flight">
                </article>

                <article id="frameless-parachute">               
                </article>

                <article id="english-channel">                   
                </article>

            </div> 

            <!-- Parallax foreground -->

            <div id="parallax-bg3">

                <div class="row">
                <div style="margin-left: -300px;">
                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3"><img src="circle/circle1.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3"><img src="circle/circle2.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3"><img src="circle/circle3.png" alt="cloud"/></div>
                <!-- </div> -->

                <!-- <div style="z-index: 2;"> -->
                <div class="col-sm-3">
                <img src="circle/circle4.png" alt="cloud"/></div>
                <!-- </div> --> 
                </div>
                </div>


                <div style="margin: -350px 0 0 -330px; height: 100px; width: 1100px; background-color: #989898; position: absolute;">
                <div style="margin: 250px 0 0 0; height: 100px; width: 1100px; background-color: #989898; position: absolute;"> 

                <!--
                <img id="bg2-5" src="circle/Borderwhite.jpg" alt="cloud"/>
                <img id="bg2-6" src="circle/Borderwhite.jpg" alt="cloud"/>
                -->     
            </div>
            </div>


            <!-- Parallax  background clouds --> 
            <div id="parallax-bg1">

                <!--
                <img id="bg1-1" src="circle/laptop.png" alt="cloud"/> --> 

                <div style="margin: 800px 0 0 180px; height: 200px; width: 1100px; background-color: #cdcbc5;">  
                </div>
            </div>



            </div>   

</div>
</div>

</div>  
</div>

<br>





<div class="row">
<div class="col-xs-12">

<div style="margin-top: 300px;"></div>
<div id="testimonial"><br>

   <div id="bounceInRight">

   <div style="text-align: center">
   <div id="text-align=center"><b>TESTIMONIAL</b><br><br>
   Lorem ipsum dolor sit amet, euismod consectetuer adipiscing<br> elit, sed diam nonummy nibh euismod tincidunt<br> ut laoreet dolore magna aliquam erat volutpat.<br><br>


   <img src="Images/About/left.jpg" alt="leftarrow">
   <img src="Images/About/testperson.jpg" alt="person">
   <img src="Images/About/right.jpg" alt="rightarrow">

   <br>
   Lorem ipsum dolor sit</div>

   </div>
   </div>

</div>

</div>
</div>


<?php include('footer.php'); ?>


</body>

</html>

css-bootstrap web-design

Edited 9 Years Ago by davy_yg

2 Contributors
4 Replies
193 Views
1 Week Discussion Span
Latest Post 9 Years Ago Latest Post by davy_yg

diafol

9 Years Ago

Your breakpoint at around 768px makes the circles go vertical, after which point they gradually move off screen to the left. not usre if this:

<div style="margin-left: -300px;">

Has something to do with it. Why are you applying a negative margin to the containing div? Doesn't make sense to me. The circles won't fit across a 320px width anyway - so what are you actually trying to do?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2015-09-03T03:42:14+00:00

What about this:

I try to place the laptop as a background and it does not work yet. I wonder why? I already place that div to set the laptop to the background.

I also expect the grey bar liquizy as its container if I narrow down the web browser.

about.php

<div style="margin: 600px 0 0 -1400px; z-index: -99;">
                    <img id="bg1-1" src="circle/laptop.png" alt="cloud"/> 
                </div>

diafol · Answer 2 · 2015-09-03T10:06:29+00:00

Sorry leaving you to it, not getting anywhere with this.

davy_yg 2 Posting Whiz · Answer 3 · 2015-09-10T08:49:11+00:00

Anyone has any clue how to place the laptop to the back of the background?

I try this and it does not work yet:

about.php

<div style="margin: 600px 0 0 -1600px; z-index: -99;">
                    <img style="z-index: -99;" id="bg1-1" src="circle/laptop.png" alt="cloud"/> 
                </div>