Trying to match my HTML/CSS to my Figma layout
Question
I'm fairly new to CSS/HTML however I'm trying to take my Figma Design and write the code for it. I'd need the website to be responsive to different screen-sizes. I have the image to what I believe is the right place, however I can't seem to get my text into the right places, and I don't know how to change button size or color.
I've included my Figma Design and my code.
HTML:
<docType html!>
<html>
<head>
<title>Arriving soon...</title>
<link rel=stylesheet href="Stylesheets/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="logo">
<img src="Transparent%20Logo.png">
</div>
<div id="logo-text">
<p1>Split Shield</p1>
</div>
<div id="slogan">
<p>The next generation of internet security is arriving soon...</p>
</div>
<div id="content-button">
<button>Check out our concept</button>
</div>
</body>
</html>
</docType>
CSS:
body {
background-color: #2F2F41;
}
#logo:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
#logo img {
max-width: 31.2%;
vertical-align: middle;
display: inline-block;
margin-left: 8.6%;
}
#logo-text p1 {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 700px;
font-size: 64px;
display: flex;
}
#slogan p {
font-family: 'Open Sans', sans-serif;
color: white;
font-weight: 400px;
font-size: 32px;
}
#button {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 24px;
text-align: center;
}
#button button {
background-color: #FFCC00;
}
1 answers
solution1
0 2023-01-26 23:44:13
There're many ways you can acheive your target, one of them is using grid, so in this case i'll show you how to go with grid-template, and how to make you're code equal to the figma design.
but you need to read more about the HTML5, and CSS so you can handle more in future,
at least i'll focus on some mistakes you have done, first, HTML5 declaration is used in this way <,doctype HTML>, the exclamation mark at the first, and there's no closure tag for it. so you just declare the doc type at the first, second. you need to target your parents / childs correctly at your css code.
anyway, here is an example to go through
body { background-color: #2F2F41; }.grid-container { display: grid; grid-template: "ab" auto "ac" auto "ad" auto; } #logo { grid-area: a; display: flex; position: relative; justify-content: center; align-items: center; } #logo-text { grid-area: b; } #slogan { grid-area: c; } #content-button { grid-area: d; } #logo img { max-width: 100%; vertical-align: middle; } #logo-text p1 { font-family: 'Open Sans', sans-serif; color: white; font-weight: 700px; font-size: 64px; display: flex; } #slogan p { font-family: 'Open Sans', sans-serif; color: white; font-weight: 400px; font-size: 32px; } #button { font-family: 'Open Sans', sans-serif; color: white; font-size: 24px; text-align: center; } #button { background-color: #FFCC00; width:80%; display:flex; border-radius:15px; height:3rem; justify-content:center; align-items:center; }
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="grid-container"> <div id="logo"> <img src="https://i.ibb.co/j5hXXVP/imgbin-macos-virtual-private.network-computer-icons-apple-png.png" alt="imgbin-macos-virtual-private.network-computer-icons-apple-png" border="0"> </div> <div id="logo-text"> <p1>Split Shield</p1> </div> <div id="slogan"> <p>The next generation of inte.net security is arriving soon...</p> </div> <div id="content-button"> <div id="button">Check out our concept</div> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.