I'm making a simple website (HTML & CSS only) consisting of an svg file (blob) with text inside of it, both items centered on the left side of the page. To the right of the page the word "Company" should be displayed centered this is what is suppossed to look like. Another issue I have is the text inside the blob not stretching all the way when the webpage is in full view (admittedly, it does fix itself when I decrease font-size but I feel like it could be fully stretched at the current 4.2em). This is the result of my code.
html body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
body {
background-color: #121212;
}
svg {
max-width: 100%;
object-fit: scale-down;
}
p {
color: white;
font-size: 4rem;
}
.container {
position: absolute;
text-align: center;
color: white;
padding-left: 4%;
padding-right: 4%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.2em;
}
.company {
position: right absolute;
text-align: center;
}<!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 href="styles.css" rel="stylesheet"/>
<title>Coming Soon</title>
</head>
<body>
<main>
<div >
<svg xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008">
<path id="Path_1" data-name="Path 1" d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131" transform="translate(-181.759 -170.1)" fill="#bf4040"/>
</svg>
<div >Coming Soon</div>
</div>
<div >
<p >Company</p>
</div>
</main>
</body> 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 href="styles.css" rel="stylesheet"/>
<title>Coming Soon</title>
</head>
<body>
<main>
<div >
<svg xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008">
<path id="Path_1" data-name="Path 1" d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131" transform="translate(-181.759 -170.1)" fill="#bf4040"/>
</svg>
<div >Coming Soon</div>
</div>
<div >
<p >Company</p>
</div>
</main>
</body>
CSS:
html body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
body {
background-color: #121212;
}
svg {
max-width: 100%;
object-fit: scale-down;
}
p {
color: white;
font-size: 4rem;
}
.container {
position: absolute;
text-align: center;
color: white;
padding-left: 4%;
padding-right: 4%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.2em;
}
.company {
position: right absolute;
text-align: center;
}
My first thought was to split the page in half, this way I could center the blob and text on the left and "Company" on the right. While I did manage to center everything and match the design, when resizing the window, the background from the right side would cover the blob and text so I had to scrap that idea. Any help would be great!
CodePudding user response：
There are several ways to do this, but one way is to do the following:
- Use flexbox layout
- Use a relative container div with absolute centered div
I added background colors to show you layout better. You still need some code cleanup here, but this should be close to what you are looking for.
html body {
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
body {
background-color: #121212;
}
svg {
max-width: 100%;
object-fit: scale-down;
}
p {
color: white;
font-size: 4rem;
}
.container {
position: relative;
text-align: center;
color: white;
padding-left: 4%;
padding-right: 4%;
flex: 50%;
background-color: green;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4.2em;
}
.company {
text-align: center;
flex: 50%;
background-color: blue;
align-self: center;
}
main {
display: flex;
}<!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 href="styles.css" rel="stylesheet"/>
<title>Coming Soon</title>
</head>
<body>
<main>
<div >
<svg xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008">
<path id="Path_1" data-name="Path 1" d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131" transform="translate(-181.759 -170.1)" fill="#bf4040"/>
</svg>
<div >Coming Soon</div>
</div>
<div >
<p >Company</p>
</div>
</main>
</body>CodePudding user response：
I used flex containers to achieve this look you want. I left borders around the div containers so you could see where the div's are that I positioned. You can play with the padding and what not to get the desired look you want. This code is responsive to screen size as well.
* {
padding: 0;
margin: 0;
}
html body {
height: 100vh;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 16px;
}
body {
background-color: #121212;
}
.wrapper {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: 50px 0 0 0;
border: 1px solid red;
}
/* LEFT SIDE */
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 300px;
padding: 10px;
border: 1px solid blue;
}
.svg-container {
border: 1px solid green;
object-fit: contain;
}
svg {
width: 100%;
height: 100%;
}
.coming-soon {
color: white;
font-size: 2rem;
}
.coming-soon-container {
position: absolute;
border: 1px solid white;
z-index: 1000;
}
/*RIGHT SIDE */
.company {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid azure;
padding: 20px;
}
p {
color: white;
font-size: 2rem;
}<!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 href="style.css" rel="stylesheet" />
<title>Coming Soon</title>
</head>
<body>
<main>
<div >
<div >
<div >
<svg
xmlns="http://www.w3.org/2000/svg"
width="600"
height="600"
viewBox="0 0 638.673 621.008"
>
<path
id="Path_1"
data-name="Path 1"
d="M500,170.963c67.589,4.626,132.75,31.976,182.124,78.365,45.711,42.948,55.831,107.484,78.093,166.122,23.716,62.466,75.065,123.258,56.095,187.326-19.022,64.243-87.325,101.559-149.224,127.2-52.76,21.856-110.546-4.191-167.088,3.831-71.47,10.139-140.841,81.139-205.49,49.025-63.083-31.336-59.973-122.575-79.066-190.375-18.212-64.672-44.091-128.9-29.3-194.435,15.654-69.353,55.066-133.255,112.67-174.929,57.536-41.625,130.336-56.98,201.184-52.131"
transform="translate(-181.759 -170.1)"
fill="#bf4040"
/>
</svg>
</div>
<div >
<div >Coming Soon</div>
</div>
</div>
<div >
<p>Company</p>
</div>
</div>
</main>
</body>
</html>