I recently created a vibrant red SVG shape that resembles this:
https://i.sstatic.net/E3P3O.jpg
My goal is to incorporate these shapes into a design that looks like the following:
https://i.sstatic.net/8Yf8L.jpg
I attempted to embed the SVG file in an img tag and position it using absolute/relative positioning, resulting in the following outcome:
https://i.sstatic.net/hZB1r.jpg
Initially, it appeared perfect. However, upon resizing my browser, I encountered this issue:
https://i.sstatic.net/FfJes.jpg
Being new to HTML/CSS, it's clear that I still have much to learn and may not be approaching this task correctly...
Below is the snippet of my HTML code:
<section id="whatwedo">
<div class="hat"><img src="img/hat.svg" alt="Startup" style="img-responsive;"></div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">what we do</h1>
<p class="text-center">We offer a wide range of software development and design options from a simple web development to more complicated information systems. We ensure our customers get the right thing, done the right way.</p>
</div>
<!--end col-md-8 col-md-offset-2-->
</div>
<!--end row-->
<div class="row fields">
<div class="col-sm-4 development-field">
<img src="img/development.svg" alt="Development" style="width:90px;height:90px;" class="img-responsive center-block">
<h2 class="text-center">develop</h2>
<p class="small text-center">We take pride in our experience in developing Java and PHP applications with different technologies and frameworks.</p>
<button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
</div>
<div class="col-sm-4 design-field">
<img src="img/design.png" alt="Design" style="width:90px;height:90px;" class="img-responsive center-block">
<h2 class="text-center">design</h2>
<p class="small text-center">Beauty. Simplicity. Delight. We create beautiful user experiences to solve our customers’ business problems.</p>
<button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
</div>
<div class="col-sm-4 startup-field">
<img src="img/startup.svg" alt="Startup" style="width:90px;height:90px;" class="img-responsive center-block">
<h2 class="text-center">startup</h2>
<p class="small text-center">We love being a part of new innovation and help your startup succeed by developing the technology you need to push forward.</p>
<button type="button" class="btn btn-link center-block blue" role="link" type="submit" name="op" value="Link 2">more</button>
</div>
</div>
<!--end row fields-->
</div>
<!--end container-->
</section>
<!--end whatwedo-->
Here's the CSS styling I've applied:
/*what we do*/
.fields {
margin-top: 64px;
}
.development-field img,
.design-field img,
.startup-field img {
margin-bottom: 32px;
}
#aboutprocess {
margin-top: 64px;
padding: 64px 0;
background: url(../img/tech_bg.jpg) repeat center center fixed;
width: 100%;
height: 344px;
background-size: contain;
}
#aboutprocess p {
color: #ffffff;
padding-top: 60px;
}
.hat {
width: 100%;
position: absolute;
left: 0;
top: -110px;
}
#whatwedo {
position: relative;
}
If anyone can assist me with resolving this issue, I would greatly appreciate it. I've spent hours on this project already and could really use some guidance. You can also check out the demo page for reference. Thank you.