БЛОГ НА HUSL


help!мне нужно сделать так,чтобы надпись "NVIDIA GeForce 9 Series" была слева от картинки видеокарты,не совсем понимаю как это сделать

Автор вопроса: Senya Volkoof 

body{
    font-family: 'Muli', sans-serif;
    margin: 0;
    padding: 0;
    background: rgb(210,210,210);
    background: linear-gradient(180deg, rgba(210,210,210,1) 20%, rgba(255,255,255,1) 100%);
}

.nvidia_logo{
    margin-left: 25px;
    margin-top: 25px;
}

.container{
    width: 970px;
    height: 470px;
    margin: 0 auto;
    margin-top: 20px;
    background: #000;
}

nav {
    margin-top: 8px;
}

.menu{
    padding: 0;
    display: flex;
    justify-content: center;
}

.menu li{
    float: left;
    display: block;
    text-align: left;
}

.menu a{
    color: #fff;
    text-decoration: none;
    margin: 20px;
    font-size: 11.9px;
}

.gradient{
    height: 370px;
    width: 420px;
    background: radial-gradient(190px 170px ,#106b2b, #000);
    margin: 0px 0px 0px 70px
}

.gradient img{
    margin-top:85px;
    transition: 1s transform; 
}

.gradient:hover img{
    transform: scale(1.2);
}

h1{
    color: #7faf28;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Nvidia</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <img src="img/nvidia_logo.png" class="nvidia_logo" width="175"> 
                <nav class="menu">
                    <li>
                        <a href="#">DRIVERS ►</a>
                    </li>
                    <li>
                        <a href="#">PRODUCTOS ►</a>
                    </li>
                    <li>
                        <a href="#">DEEP LEARNING Y AI ►</a>
                    </li>
                    <li>
                        <a href="#">COMUNIDAES ►</a>
                    </li>
                    <li>
                        <a href="#">SOPORTE ►</a>
                    </li>
                    <li>
                        <a href="#">COMPRAR ►</a>
                    </li>
                    <li>
                        <a href="#">ACERCA DE NVIDIA ►</a>
                    </li>
                </nav>
                <div class="gradient">
                    <img src="img/GeForce_9600_GT_3qtr_low.png" alt="video_card">
                </div>  
                <div class="card"><h1>NVIDIA GeForce 9 Series</h1></div>
            </div>
    </header>
    <section>
        <div class="opportunities">
            
        </div>
    </section>
</body>
</html>


Источник

Ответы (1 шт):

Автор решения: Иван иванов 

body{
    font-family: 'Muli', sans-serif;
    margin: 0;
    padding: 0;
    background: rgb(210,210,210);
    background: linear-gradient(180deg, rgba(210,210,210,1) 20%, rgba(255,255,255,1) 100%);
}

.nvidia_logo{
    margin-left: 25px;
    margin-top: 25px;
}

.container{
    width: 970px;
    height: 470px;
    margin: 0 auto;
    margin-top: 20px;
    background: #000;
  
}

nav {
    margin-top: 8px;
}

.menu{
    padding: 0;
    display: flex;
    justify-content: center;
  
}

.menu li{
    float: left;
    display: block;
    text-align: left;
}

.menu a{
    color: #fff;
    text-decoration: none;
    margin: 20px;
    font-size: 11.9px;
}

.gradient{
    height: 370px;
    width: 420px;
    background: radial-gradient(190px 170px ,#106b2b, #000);
    margin: 0px 0px 0px 70px;
      display:flex;
  flex-direction:row;
}

.gradient img{
    margin-top:85px;
    transition: 1s transform; 
}

.gradient:hover img{
    transform: scale(1.2);
}

h1{
    color: #7faf28;
}
<html lang="en">
<head>
    <title>Nvidia</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Muli:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <img src="img/nvidia_logo.png" class="nvidia_logo" width="175"> 
          
                <nav class="menu">
                    <li>
                        <a href="#">DRIVERS ►</a>
                    </li>
                    <li>
                        <a href="#">PRODUCTOS ►</a>
                    </li>
                    <li>
                        <a href="#">DEEP LEARNING Y AI ►</a>
                    </li>
                    <li>
                        <a href="#">COMUNIDAES ►</a>
                    </li>
                    <li>
                        <a href="#">SOPORTE ►</a>
                    </li>
                    <li>
                        <a href="#">COMPRAR ►</a>
                    </li>
                    <li>
                        <a href="#">ACERCA DE NVIDIA ►</a>
                    </li>
                </nav>
                <div class="gradient">
                  <h1 class="card">NVIDIA GeForce 9 Series</h1>
                    <img src="img/GeForce_9600_GT_3qtr_low.png" alt="video_card">
                  
                </div>  
                
            </div>
    </header>
    <section>
        <div class="opportunities">
            
        </div>
    </section>
</body>
</html>

Так ? если не так , то можете загрузить картинку логотипа из интернета , я так не могу понять как вам нужно

→ Ссылка

licensed under cc by-sa 3.0 with attribution.