Skip to content

Instantly share code, notes, and snippets.

@smuniza1

smuniza1/hand-embroidery-101-responsive-webpage.markdown

Created December 30, 2024 05:41
Show Gist options
  • Save smuniza1/2f61bd57e6cc26d173742ee8e7a7c3b9 to your computer and use it in GitHub Desktop.
Save smuniza1/2f61bd57e6cc26d173742ee8e7a7c3b9 to your computer and use it in GitHub Desktop.
Download ZIP
Hand Embroidery 101 Responsive Webpage
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.typekit.net/ptr6akc.css">
</head>
<body>
</section>
<nav id="navbar">
<header>Hand Embroidery 101</header>
<ul>
<li><a class="nav-link" href="#materials">Materials</a></li>
<li><a class="nav-link" href="#embroidery_hoop">Embroidery Hoop</a></li>
<li><a class="nav-link" href="#running_stitch">Running Stitch</a></li>
<li><a class="nav-link" href="#back_stitch">Back Stitch</a></li>
<li><a class="nav-link" href="#satin_stitch">Satin Stitch</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="materials">
<header>Materials</header>
<img id="materials" src="https://imgur.com/kcmWgYt.png">
<p>So you want to learn hand embroidery? Whether you're trying to pick up a new hobby or make a Christmas gift for a friend, this is the one guide you need to learn how to hand-stitch.</p>
<p>Here is what you'll need:</p>
<ul>
<li><code>Scrap fabric</code></li>
<li><code>Embroidery floss</code></li>
<li><code>Embroidery needle</code></li>
<li><code>Embroidery hoop</code></li>
<li><code>Scissors</code></li>
</ul>
</section>
<section class="main-section" id="embroidery_hoop">
<header>Embroidery Hoop</header>
<img id="embroidery_hoop_gif" src="https://imgur.com/a0KgaJN.gif">
<p>The first step of course is using the embroidery hoop. Now this may seem like a tough task and you may want to give up already, but fear not. I have some tips and tricks for you to successfully accomplish this first step.</p>
<p>Here's how to do it:</p>
<ol>
<li>First thing's first, we will take the inner hoop out and place our fabric on top of it.</li>
<li>Now we will place our outer hoop on top of the fabric and push down until the fabric tight and secure between the two hoop.</li>
<li>Lastly, we will tighten the screw at the top, and viola!</li>
</ol>
</section>
<section class="main-section" id="running_stitch">
<header>Running Stitch</header>
<img id="running_stitch_gif" src="https://imgur.com/7xGdGtf.gif">
<p>The running stitch is the most basic stitch you must know how to do to get started.</p>
<p>Here's how to do it:</p>
<ol>
<li>After putting the floss through the eye of the needle, knot one end of the floss.
<li>Push the needle from behind the fabric at point A until the knot gets stuck on the fabric.</li>
<li>Push the needle downwards from the front of the fabric at point B until you feel tension. There floss should be stuck on the fabric.</li>
<li>Repeat as desired. You'll be going in an up and downwards motion for this stitch.</li>
</ol>
</section>
<section class="main-section" id="back_stitch">
<header>Back Stitch</header>
<img id="back_stitch_gif" src="https://imgur.com/xwNnCBP.gif">
<p>The back stitch is a little bit more complication, but you can learn it with these short steps.</p>
<p>Here's how to do the back stitch:</p>
<ol>
<li>Start the stitch like a running stitch, from the back of the fabric through point A.</li>
<li>Bring the needle back down to point B.</li>
<li>Bring the needle back up to point C.</li>
<li>Bring the needle backwards to point B, and push the needle downwards.</li>
<li>Now push the needle through point D from behind the fabric.</li>
<li>Push the needle through point C in a downwards motion.</li>
<li>Repeat.</li>
</ol>
</section>
<section class="main-section" id="satin_stitch">
<header>Satin Stitch</header>
<img id="satin_stitch_gif" src="https://imgur.com/VO3UFGN.gif">
<p>The satin stitch is perfect for filling objects or shapes in.</p>
<p>Here's how to do it: </p>
<ol>
<li>Bring your needle up from the back of point A, and back down at point B making a straight stitch.</li>
<li>Bring your needle up again through point C. This point must be directly next to point B with very little space between the two.</li>
<li>Bring the needle down at point D.</li>
<li>Make another point directly next to point D, and repeat.</li>
</ol>
</section>
</main>
</body>
</html>
Raw
style.css
header, p, li {
font-family: "Lucida Console", "Monaco", monospace;
}
code {
font-family: "Lucida Console", "Monaco", monospace;
}
.main-section header {
font-weight: bold;
font-size: 24px;
}
#navbar {
margin: 0;
padding: 0;
top: 0px;
left: 0px;
min-width: 290px;
width: 300px;
background-color: #f2c4b5;
position: fixed;
height: 100%;
overflow: auto;
border-right: 3px solid #000;
}
#navbar header {
font-family: Benda;
font-size: 42px;
display: block;
padding: 20px 30px 5px;
}
nav {
display: block;
}
section {
display: block;
margin-bottom: 60px;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
* {
background-color: #f2c4b5;
}
#materials {
width: 100%;
}
#embroidery_hoop_gif {
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
}
#running_stitch_gif {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
#back_stitch_gif {
width: 65%;
display: block;
margin-left: auto;
margin-right: auto;
}
#satin_stitch_gif {
width: 45%;
display: block;
margin-left: auto;
margin-right: auto;
}
#navbar a {
display: block;
padding: 20px 0;
text-align: center;
cursor: pointer;
color: black;
box-sizing: border-box;
width: 100%;
}
a:hover {
background-color: #ffede7;
}
#navbar li {
list-style: none;
width: 100%;
border-top: 1px solid;
border-color: black;
position: relative;
padding: 0;
margin: 0;
}
ul {
padding-left: 0;
}
@media (max-width: 900px) {
#navbar {
width: 100%; /* Full width for mobile screens */
position: relative; /* Change position to avoid covering content */
height: auto; /* Adjust height to fit content */
border-right: none;
border-bottom: 3px solid #000;
padding-bottom: 0;
}
#navbar header {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#main-doc {
margin-left: 25px; /* Adjust main content margin to match navbar width */
margin-right: 25px;
}
#embroidery_hoop_gif {
width: 75%;
}
#running_stitch_gif {
width: 100%;
}
#back_stitch_gif {
width: 100%;
}
#satin_stitch_gif {
width: 75%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment