When I got home from work, I decided to create a website similar to the attached image. However, I encountered an issue with styling the "TECHNOLOGY" div in the top right corner and making it responsive while staying within the parent div. Additionally, any advice on handling the text below the image that changes size on mobile would be greatly appreciated.
Thank you!
body, html{
margin: 0 auto;
padding: 0;
max-width: 960px;
align-items: center;
font-family: 'Lora', serif;
}
/* ****Start Nav******** */
nav ul{
margin: 5px auto;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: center;
}
li a{
display: flex;
text-decoration: none;
text-transform: uppercase;
padding: 20px 50px;
align-items: center;
text-align: center;
margin: 2px;
color: white;
background-color: rgb(34, 101, 169);
}
/* ************* End Nav *************** */
/* ******Start 2nd Row with Title********** */
.name{
max-width: 960px;
margin: 20px auto;
display: flex;
padding: 0px 40px;
align-items: center;
}
.title {
Flex: 0 1 auto;
font-size: 1.8rem;
border-right: 1px solid black;
padding-right: 10px;
font-weight: 500;
}
.title2{
padding-left: 10px;
flex: 1 1 auto;
font-size: 0.9rem;
font-weight: 600;
}
.contact{
margin-left: 0 auto;
line-height: 3px;
font-size: 0.7rem;
}
/* ******End 2nd Row with Title********** */
/* ********Start blue box with containers */
.blue {
position: relative;
z-index: 0;
display: flex;
max-width: 960px;
margin: 0px 40px;
height: 53vh;
background-color: rgb(189, 217, 254);
color: white;
align-items: center;
justify-content: center;
}
.tech{
padding: 0px 10px;
border-radius: 5px;
background-color: rgb(49, 137, 77);
text-align: justify;
transform: rotate(-15deg) skew(20deg) scaleX(6) scaleY(10);
}
.box1, .box2{
background-color: rgb(34, 101, 169);
color: white;
}
.box1{
position: absolute;
z-index: 1;
width: 316px;
top: 2em;
left: 2em;
font-size: 0.8rem;
text-align: justify;
padding: 10px;
}
.box1::first-line{
width: 220px;
border-bottom: 1px dashed white;
padding: 5px;
text-align: left;
font-size: 1.1rem;
}
.box2{
position: absolute;
z-index: 1;
padding: 10px 25px;
top: 31rem;
right: 22rem;
text-align: center;
font-size: 3.8rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap" rel="stylesheet">
<title>Implementing a Layout using HTML & CSS</title>
</head>
<body>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">about us</a></li>
<li><a href="">contact</a></li>
<li><a href="">company</a></li>
<li><a href="">services</a></li>
</ul>
</nav>
<div class="name">
<div class="title">TechCorporate</div>
<div class="title2">Free PSD Website Template</div>
<div class="contact">
<p>Tel: xxxxxxx xxxxxxxx</p>
<p>Mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0861666e67486c6765696166266b6765">[email protected]</a></p>
</div>
</div>
<div class="blue">
<div class="tech">TECHNOLOGY</div>
<div class="box1">
<p>Lorem ipsum dolor sit amet das</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, unde debitis quibusdam quas accusantium ipsa officia quo iste delectus modi voluptatibus harum rem saepe quod maxime quam. Velit, beatae quos ipsum dolor sit amet consectetur elit. Placeat, unde debitis.</p>
</div>
</div>
<div class="box2">Todays Technology »</div>
</body>
</html>