Создаю копию данного сайта https://codepen.io/freeCodeCamp/full/RKRbwL
. Хочу разместить картинку ниже в левом верхнем углу, как показано на сайте, с сохранением соотношении сторон. Параметры width и height не имеют эффекта в разделе class или img. Как можно сделать? Спасибо большое.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Product Landing Page</title>
</head>
<body>
<div class="container">
<!--Top Section-->
<div class="logo">
<img src="trombones.png" alt="trombones">
</div>
<div class="navbar">
<ul>
<li>Features</li>
<li>How It Works</li>
<li>Pricing</li>
</ul>
</div>
<!--Main Section-1-->
<div class="intro">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="#">
<input type="email" class="email" placeholder=" Enter your email address">
<button type="submit" class="primary_btn">Get Started</button>
</form>
</div>
<div class="main">
<div class="line-1">
<i class="fa fa-fire fa-3x"></i>
<div class="text-container-1">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="line-2">
<i class="fa fa-truck fa-3x"></i>
<div class="text-container-2">
<h2>Fast Shipping</h2>
<p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied</p>
</div>
</div>
<div class="line-3">
<i class="fa fa-battery-full fa-3x"></i>
<div class="text-container-3">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults
and we will check and test the pitch of your instument.
</p>
</div>
</div>
</div>
<div class="video">
</div>
<!--Main Section-2-->
<div class="offer">
<div class="offer1">
<div class="offer-title1">
<h3>TENOR TROMBONE</h3>
</div>
<div class="price1">
$600
</div>
<div class="info1">
Lorem ipsum. <br>
Lorem ispum. <br>
Lorem Ipsum dolor. <br>
Lorem ipsum. <br>
</div>
<button class="secondary_btn1">Select</button>
</div>
<div class="offer2">
<div class="offer-title2">
<h3>BASS TROMBONE</h3>
</div>
<div class="price2">
$900
</div>
<div class="info2">
Lorem ipsum. <br>
Lorem ispum. <br>
Lorem Ipsum dolor. <br>
Lorem ipsum. <br>
</div>
<button class="secondary_btn2">Select</button>
</div>
<div class="offer3">
<div class="offer-title3">
<h3>VALVE TROMBONE</h3>
</div>
<div class="price3">
$1200
</div>
<div class="info3">
Plays similar to a Trumpet. <br>
Great for Jazz Bands. <br>
Lorem Ipsum dolor. <br>
Lorem ipsum. <br>
</div>
<button class="secondary_btn3">Select</button>
</div>
</div>
<!--End-->
<footer>
<div class="terms">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
</div>
<div class="copyright">
© 2016, Original Trombones
</div>
</footer>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
*{
margin: 0;
padding: 0;
}
body {
background-color:#eee;
font-family: 'Lato';
color: #000000;
}
.container {
height: 100%;
width:95%;
margin: 0 auto;
}
.container .logo {
width:50%;
}
.container .logo. img{
height: 50%;
width:50%;
}
'Имя класса'{width: 100px !important; height: 100px !important; }
– Арман 26 авг '19 в 11:41!important
– Арман 26 авг '19 в 11:41