Hi,
I do a FrontendMentor chllenge ( I suggest to see their site it’s amazing after FCC) and I have some problem on how To insert a col-6 in top , next to the image ( I put the screenshot about project)
I create a skecth (I don’t draw very well lol)
I wish that col-6 went exactly higher. I tried to col-6 the following from the developer tool:
.col-6{
position: relative;
bottom: 300;
top: -300;
}
and works but when I refresh page return like before.
I left HTML file to check :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <!--Link CSS file-->
<!--CDN CSS Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container"> <!--Qui conterrà tutti i blocchi , nel container non si può usare margin e padding?--->
<div class="row mr-3 mt-4">
<div class="col-12">
<!--Questo è il navbar-->
<nav class="navbar navbar-expand-sm">
<img src="images\logo.svg"><!-- il logo bisogna inserirlo dentro al navbar?-->
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link">Product</a></li>
<li class="nav-item"><a class="nav-link">Features</a></li>
<li class="nav-item"><a class="nav-link">Pricing</a></li>
<li class="nav-item"><a class="nav-link" id="login">Login</a></li>
</ul>
</div>
</nav>
<div class="background">
<img src="images\illustration-devices.svg" id="img-device" alt="some different devices">
</div>
</div>
</div>
<div class="row mr-3 mt-4">
<div class="col-6 mb-5 div-text">
<span>New</span>
<h4 class="text-h4">Monograph Dashboard</h4>
<p class="text-h1">Powerful insights into your team</p>
<p class="text-h5">Project planning and time tracking for agile teams</p>
<button class="btn-demo">Schedule a Demo</button>
<span class="text-preview">To see a preview</span>
</div>
</div>
</body>
</html>
and my CSS file:
/**Impostiamo i font che servono*/
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&display=swap');
@media (min-width: 992px){
.nav-link{
text-transform: uppercase;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
color: hsl(230, 29%, 20%);
font-size: 18px;
}
#login{
color:hsl(231, 7%, 65%);
}
/**Quando l'utente scorre sul link dovrebbe cambiare colore e visualizzare una barra sotto il link*/
/**Aggiungere colore nel navbar + aggiustare l'immagine **/
.background{
background-color: hsl(207, 33%, 95%);
width: 800px;
height: 350px;
border-bottom-left-radius: 25px;
position: relative;
left: 550px;
bottom: 50px;
z-index:-1;
}
/**Aggiustare l'immagine in modo che non crei ulteriore spazio alla finestra*/
#img-device{
position: relative;
top: 100px;
}
/**Text**/
.text-h4{
font-family: 'Barlow Condensed', sans-serif;
font-size: 22px;
font-weight: 400;
color: hsl(231, 7%, 65%);
text-transform: uppercase;
letter-spacing: 2px;
}
.text-h1{
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
color:hsl(230, 29%, 20%);
text-transform: uppercase;
font-size: 60px;
margin-right: 20px;
}
/**Button**/
.btn-demo{
background-color: hsl(0, 100%, 68%);
color:white;
text-transform: uppercase;
border:none;
border-radius: 5px;
height: 50px;
width: 200px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 18px;
}
.text-preview{
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 2px;
margin-left: 20px;
color: hsl(231, 7%, 65%);
}
.text-div{
position: relative;
top:-300;
bottom: 300;
}
}
Thanks,
CamCode