I am new to web, and this is my first project...
I feel as though i am doing something wrong layout wise,
am i possibly using too much divs?
my css is separate and i feel pretty confident with css however i want to now make this webpage responsive, what would be the easiest method for my self? i am guessing media queries?
i always have issues with layouts and positioning of things
thank you for your help, really appreciated
<!DOCTYPE html>
<html>
<head>
<title>Sounds UI Good</title>
<link rel="stylesheet" type="text/css" href="sounds.css">
</head>
<body>
<div id="top">
<div class="header">
<h1><span style="color:white;">SOUNDS</span> UI GOOD</h1>
</div>
<div class="info1">
<p><span style="color:white;">100</span>+</p>
</div>
<div class="soundcloud">
<iframe width="552" height="100" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/433398369&color=%23ffd500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<div class="desc">
<p>Clicks, pops, alerts, rings, chimes + more <br> in .wav format.</p>
</div>
<div class="info2">
<p>Professionaly created and processed using an SSL Mixer <br> - If you know what an SSL mixer is, you know it’s good!</p>
</div>
<img style="position:absolute; left:678px; top:180px; width:600px; padding: 1px; margin: 1px" src="synthesizer@2x.png">
<div class="old">
<p>$24</p>
</div>
<div class="new">
<p>$10</p>
</div>
<a href='#' class="button">BUY UI SOUNDS</a>
<div class="licensebtn">
<a href="#Link" class="jump">License</a>
</div>
<div class="copyright">
<p>Copyright 2018 Wingman Inc. All rights reserved.</p>
</div>
</div>
<div class="bottom">
<div class="licensetxt">
<h2>License</h2>
<a name="Link"></a>
<br>
<input type="button" id="btnx" style="background-image:url('arrowup.png')"/>
<!-- <img style="position:absolute; left:1100px; top:815px; width:40px; padding: 1px; margin: 1px" src="arrowup.png"> -->
<h4>License Agreement</h4>
<p>By purchasing these (“sounds”) you are granted a license to use these sounds for specific uses under the conditions set out below. Ownership remains with the creator Wingman Inc Ltd, and you are required to abide by the following licensing terms.</p>
<h4>Rights</h4>
<p>This license grants the purchaser an ongoing, non-exclusive, worldwide license.
You are licensed to use the sounds to create products for yourself or for your clients.
You may modify the sounds according to your requirements and use them royalty free in your personal and commercial projects. For example, you may use these sounds in an application, website or mobile app you will be designing for a client.</p>
<p>Wingman Inc Ltd will not be responsible for any outcome that may occur during the course of usage of these resources.</p>
<h4>Prohibitions</h4>
<p>This license prohibits the redistribution, resell, lease, license, sub-license or offer of the file downloaded to any third party.
For any resalable web applications or mobile software programs, you should not include these sounds as an additional attachment meant for purchase, such as In App Purchasing. This will be considered as a redistribution of our resources which is forbidden by us and pursuant under European Law.</p>
</div>
<div class="sound"><img style="position:absolute; left:620px; top:1400px; width:50px; padding: 1px; margin: 1px;" src="sound-icon-grey@2x.png">
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire