XD resources


Go to letsxd.com to get XD info, tutorials, news & freebies. Check out the getting started in Adobe XD video series, and grab the Quickstart File Downlaod.

Also here’s the example code from Today’s lecture:

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel=”preconnect” href=”https://fonts.gstatic.com”>
<link href=”https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap” rel=”stylesheet”>
<title> Hello World </title>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”style.css”>
</head>

<body>

<header>
<h1> your name</h1>
<h2>Contact info:</h2>
<h3>555-345-0343</h3>
</header>

<section class=”summary”>
<h2>Bio</h2>
<p >Some info about how awesome you you are.</p>
</section>

<header>
<h2>SEcont header</h2>
</header>

<section class=”education”>
<h2>Edu</h2>
<ol>
<li>preschool</li>
<li>College</li>
<li>Prison</li>
<li>President</li>
</ol>
</section>

<footer>
<p>text in a footer dont read me I am boring</p>
</footer>

</body>
</html>

CSS:

body{
padding: 0;
color: #3c3c3c;
font-family: ‘Open Sans’, sans-serif;
}

h1{
font-weight: 100;
text-transform:uppercase;
}

h2{
font-weight: 100;

}

header {
padding-bottom: 5px;
border-bottom: 1px solid #a0a0a0;

}

header h1{
margin: 0;
}

header h2 {
margin: 0;
padding: 0;
display: inline-block;
font-size: 18px;
}

header h3 {
margin: 0;
display: inline-block;
font-size: 18px;
letter-spacing: 0.05em
}

section h2{
color: pink;
margin-bottom: 0;
}

.education h2{
color: orange;
}

section ol{
list-style:decimal-leading-zero

}

footer{
position: fixed;
bottom: 0;
left: 0;
padding:2px 20px;
background: #fafafa;
width: 100%;
}

 


Leave a Reply