can someone please help me? I don’t know what I’m doing wrong.
html>
<head>
<title>Angelica's Website Design System</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Angelica's Website Design System</h1>
<div class="box">
<h1>Colors</h1>
<div class="container">
<p>Blue</p>
<div class="container">
<p>Pink</p>
</div>
</div>
</div>
</body>
</html>
.box {
width: 700px;
height: 700px;
border: 1px solid black;
padding: 30px;
margin: 30px;
}
.container {
width: 50px;
height: 50px;
border: 1px solid black;
padding: 10px;
margin: 10px;
background-color: blue;
}
.container {
width: 50px;
height: 50px;
border: 1px dotted black;
padding: 10px;
margin: 10px;
background-color: pink;
}
This is my finished project of my website design. If you have any tips on how I can make it better, please let me know.
<html>
<head>
<title>Angelica's Website Design System</title>
<link rel="stylesheet" href="styles.css" />
<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=Merriweather:ital@0;1&family=Roboto&family=Space+Mono&family=Work+Sans:wght@400;500;800&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>Angelica's Website Design System</h1>
<div class="container">
<h1>Colors</h1>
<div class="box1">Blue #0000FF</div>
<div class="box2">Pink #FFC0CB</div>
<div class="box3">Yellow Green #9ACD32</div>
<div class="box4">Tan #D2B48C</div>
</div>
<div class="container 2">
<h1>Fonts</h1>
<span style="font-family:Roboto"><u>Roboto</u></span>
<br />
<br />
<span style="font-family:Roboto"
>The quick brown fox jumps over the lazy dog.</span
>
<br />
<br />
<span style="font-family:Roboto"
><b>The quick brown fox jumps over the lazy dog.</b></span
>
<br />
<br />
<span style="font-family:Roboto"
><i>The quick brown fox jumps over the lazy dog.</i></span
>
<br />
<br />
<span style="font-family:Merriweather"><u>Merriweather</u></span>
<br />
<br />
<span style="font-family:Merriweather"
>The quick brown fox jumps over the lazy dog.</span
>
<br />
<br />
<span style="font-family:Merriweather"
><b>The quick brown fox jumps over the lazy dog.</b></span
>
<br />
<br />
<span style="font-family:Merriweather"
><i>The quick brown fox jumps over the lazy dog.</i></span
>
<br />
<span style="font-family:Space Mono"><u>Space Mono</u></span>
<br />
<br />
<span style="font-family:Space Mono"
>The quick brown fox jumps over the lazy dog.</span
>
<br />
<br />
<span style="font-family:Space Mono"
><b>The quick brown fox jumps over the lazy dog.</b></span
>
<br />
<br />
<span style="font-family:Space Mono"
><i>The quick brown fox jumps over the lazy dog.</i></span
>
<br />
<br />
<span style="font-family:Work Sans"><u>Work Sans</u></span>
<br />
<br />
<span style="font-family:Work Sans">
The quick brown fox jumps over the lazy dog.</span
>
<br />
<br />
<span style="font-family:Work Sans"
><b>The quick brown fox jumps over the lazy dog.</b></span
>
<br />
<br />
<span style="font-family:Work Sans"
><i>The quick brown fox jumps over the lazy dog.</i></span
>
<br />
</div>
<div class="container 3">
<div class="Text Styles">
<h1>Text Styles</h1>
<h1>H1: Main page heading</h1>
<ul>
<li>Font-weight: 700(bold)</li>
<li>Font-size: 26px</li>
<li>Font-family: Work Sans</li>
</ul>
<h2>H2: Subheading</h2>
<ul>
<li>Font-weight: 500</li>
<li>Font-size: 18px</li>
<li>Font-family:Roboto</li>
</ul>
<h3>P:Paragraph text</h3>
<ul>
<li>Font-weight: 400(regular)</li>
<li>Font-size: 14px</li>
<li>Font-family:Space Mono</li>
</ul>
</div>
</div>
</body>
</html>
container {
width: 700px;
height: 700px;
border: 1px solid black;
padding: 30px;
margin: 30px;
}
.box1 {
width: 250px;
height: 65px;
border: 1px solid black;
padding: 10px;
margin: 10px;
float: center;
background-color: blue;
}
.box2 {
width: 250px;
height: 65px;
border: 1px solid black;
padding: 10px;
margin: 10px;
float: center;
background-color: pink;
}
.box3{
width: 250px;
height: 65px;
border: 1px solid black;
padding: 10px;
margin: 10px;
float: center;
background-color: yellowgreen;
}
.box4{
width: 250px;
height: 65px;
border: 1px solid black;
padding: 10px;
margin: 10px;
float: center;
background-color: tan;
}
.h1,ul{
font-weight: 700px bold;
font-size: 26px;
font-family: Work Sans;
}
.h2,ul{
font-weight: 500px;
font-size: 18px;
font-family: Roboto;
}
.p,ul{
font-weight: 400px;
font-size: 14px;
font-family: Space Mono;
}
system
Closed
3
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.