Artora Blog: December 2024

HTML Codes You can Use Part 14

Tuesday, December 31, 2024

Portfolio ShowcaseFloral IllustrationCreated for Spring Collection 2025
<div style="background:#f0f8ff; border:2px solid #32cd32; padding:15px; width:320px; text-align:center;">
  <img src="https://i.imgur.com/N1XzZrU.png" alt="Design Sample" style="width:100%; border:2px solid #000; margin-bottom:10px;">
  <h4>Floral Illustration</h4>
  <p>Created for Spring Collection 2025</p>
</div>
  
Hover Overlay Image
    View Artwork
  
<div style="position:relative; display:inline-block;">
  <img src="https://i.imgur.com/5Yd7GZP.png" style="width:300px; border:2px solid #000;">
  <div style="position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,105,180,0.7); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; opacity:0; transition:opacity 0.3s;" class="overlay">View Artwork</div>
</div>
<style>
.hoveroverlay:hover .overlay { opacity:1; }
</style>
  
Stylized Gallery
<div style="display:flex; flex-wrap:wrap; gap:10px;">
  <div style="flex:1 1 100px; border:2px solid #ff69b4; padding:5px;"><img src="https://i.imgur.com/N1XzZrU.png" style="width:100%;"></div>
  <div style="flex:1 1 100px; border:2px solid #32cd32; padding:5px;"><img src="https://i.imgur.com/5Yd7GZP.png" style="width:100%;"></div>
  <div style="flex:1 1 100px; border:2px solid #ffa500; padding:5px;"><img src="https://i.imgur.com/xhK5rJs.png" style="width:100%;"></div>
</div>
  
Creative Divider
  
  ✨ Portfolio Section ✨
  <hr style="border:none; height:4px; background:linear-gradient(to right, #ff69b4, #ffa500, #32cd32, #00f); width:70%; margin:auto;">
<span style="position:relative; top:-25px; background:#fff; padding:0 10px; font-weight:bold;">✨ Portfolio Section ✨</span>
  
Creative Tips Widget
  Quick Tips:
  Use complementary color palettes
Always save layered files
Label all your sketches
Test patterns in small swatches first

  <div style="background:#fffaf0; border:2px solid #ffa500; padding:15px; max-width:300px; text-align:left;">
  <h4>Quick Tips:</h4>
  <ul>
    <li>Use complementary color palettes</li>
    <li>Always save layered files</li>
    <li>Label all your sketches</li>
    <li>Test patterns in small swatches first</li>
  </ul>
</div>
  

HTML Codes You can Use Part 13

Wednesday, December 25, 2024

Interactive Sketch PadDraw your design here!
<div style="background:#fffaf0; border:2px solid #ff69b4; padding:15px; text-align:center;">
  <canvas id="sketchpad" width="300" height="200" style="border:1px solid #000; cursor:crosshair;"></canvas>
  <p style="font-size:12px;">Draw your design here!</p>
</div>
<script>
const canvas = document.getElementById('sketchpad');
const ctx = canvas.getContext('2d');
let drawing = false;
canvas.addEventListener('mousedown',()=>drawing=true);
canvas.addEventListener('mouseup',()=>drawing=false);
canvas.addEventListener('mousemove',(e)=>{
  if(!drawing) return;
  ctx.fillStyle = '#ff1493';
  ctx.beginPath();
  ctx.arc(e.offsetX, e.offsetY, 2, 0, Math.PI*2);
  ctx.fill();
});
</script>
  
Glitter Divider
  ✨✨✨✨✨✨
  <div style="text-align:center;">
  <span class="glitterdivider">✨✨✨✨✨✨</span>
</div>
<style>
@keyframes glitterflash {0%,100%{opacity:0.3;}50%{opacity:1;}}
.glitterdivider { animation: glitterflash 1s infinite; font-size:20px; }
</style>
  
Layered Mood BoardFabric Swatch
Pattern Sketch
Color Palette
<div style="background:#fffaf0; border:3px solid #ffa500; padding:15px; text-align:center; position:relative; width:320px;">
  <div style="background:#fff0f5; border:2px dashed #ff69b4; padding:10px; position:absolute; top:10px; left:10px; width:90%;">Fabric Swatch</div>
  <div style="background:#f0fff0; border:2px solid #32cd32; padding:10px; position:absolute; top:40px; left:20px; width:85%;">Pattern Sketch</div>
  <div style="background:#f5f5dc; border:2px dotted #ff4500; padding:10px; position:absolute; top:70px; left:30px; width:80%;">Color Palette</div>
</div>
  
Y2K Styled Button
  
  <div style="text-align:center;">
  <button class="y2kbutton">View Pattern</button>
</div>
<style>
.y2kbutton {
  background:#ff69b4; color:#fff; border:2px solid #ff1493; padding:10px 20px; font-weight:bold; cursor:pointer; font-family:'Courier New';
  box-shadow:2px 2px 5px #000;
  transition: all 0.3s ease;
}
.y2kbutton:hover {background:#ff1493; transform:scale(1.05);}
</style>
  
Collapsible Sketch Tips
  Start with rough outlines
Use light strokes first
Experiment with texture shading

  <button onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none';">Show/Hide Sketch Tips</button>
<div style="display:none; background:#fff0f5; border:2px dashed #ff69b4; padding:15px;">
  <ul>
    <li>Start with rough outlines</li>
    <li>Use light strokes first</li>
    <li>Experiment with texture shading</li>
  </ul>
</div>
  

5 Fashion Shows to Binge ON

Tuesday, December 24, 2024

HTML Codes You can Use Part 12

Monday, December 23, 2024

Hover Portfolio BoxArt SampleHover to zoom image!
<div class="hoverportfolio" style="background:#fff0f5; border:2px solid #ff69b4; padding:15px; text-align:center; width:250px;">
  <img src="https://i.imgur.com/N1XzZrU.png" alt="Art Sample" style="width:100%; transition: transform 0.3s;">
  <h4 style="margin:10px 0;">Art Sample</h4>
  <p>Hover to zoom image!</p>
</div>
<style>
.hoverportfolio img:hover {
  transform: scale(1.1);
}
</style>
  
Collapsible Tutorial Box
  Always measure twice
Use muslin before final fabric
Label each piece carefully

  <button onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none';">Show/Hide Pattern Drafting Tips</button>
<div style="display:none; background:#fffaf0; border:2px solid #ffa500; padding:15px;">
  <ul>
    <li>Always measure twice</li>
    <li>Use muslin before final fabric</li>
    <li>Label each piece carefully</li>
  </ul>
</div>
  
Animated Pattern Swatches
<div style="display:flex; gap:10px; justify-content:center;">
  <div class="swatch" style="width:40px; height:40px; border:2px solid #000; background:#ff0000;"></div>
  <div class="swatch" style="width:40px; height:40px; border:2px solid #000; background:#00ff00;"></div>
  <div class="swatch" style="width:40px; height:40px; border:2px solid #000; background:#0000ff;"></div>
</div>
<style>
@keyframes swatchflash {0%,100%{opacity:1;}50%{opacity:0.5;}}
.swatch { animation: swatchflash 1.5s infinite alternate; }
</style>
  
Resources Box
  Helpful Tools:
  Canva – Fashion Design
Pattern Maker
Behance – Inspiration

  <div style="background:#f0fff0; border:2px solid #32cd32; padding:15px; text-align:left; max-width:300px;">
  <h4>Helpful Tools:</h4>
  <ul>
    <li><a href="https://www.canva.com/" target="_blank">Canva – Fashion Design</a></li>
    <li><a href="https://www.makefabricpatterns.com/" target="_blank">Pattern Maker</a></li>
    <li><a href="https://www.behance.net/" target="_blank">Behance – Inspiration</a></li>
  </ul>
</div>
  
Designer Quote Box
  "Fashion is the art, designers are the artists." ✨
  <div style="background:#fff0f5; border:3px dashed #ff69b4; padding:20px; text-align:center; font-style:italic;">
  "Fashion is the art, designers are the artists." ✨
</div>
  
Pattern Showcase Box
    
    
    
  
<div style="background:#fffaf0; border:2px solid #ffa500; padding:15px; text-align:center;">
  <div style="display:flex; justify-content:center; gap:10px; overflow-x:auto;">
    <img src="https://i.imgur.com/5Yd7GZP.png" style="width:80px; height:auto; border:1px solid #000;">
    <img src="https://i.imgur.com/7RaYwfa.png" style="width:80px; height:auto; border:1px solid #000;">
    <img src="https://i.imgur.com/N1XzZrU.png" style="width:80px; height:auto; border:1px solid #000;">
  </div>
</div>
  

5 Coco Chanel Fashion Shows to Binge On

Thursday, December 19, 2024

HTML Codes you can Use Part 11

Sunday, December 15, 2024

Featured Design BoxSpring Collection 2025Check out the latest patterns and textures!
✨🖌️✨<div style="background:#fffaf0; border:3px solid #ff69b4; padding:20px; text-align:center; width:300px;">
  <h4>Spring Collection 2025</h4>
  <p>Check out the latest patterns and textures!</p>
  <span>✨🖌️✨</span>
</div>
  
Pattern Preview BoxRetro Floral Pattern
<div style="background:#f5f5dc; border:2px dashed #ff4500; padding:15px; text-align:center;">
  <img src="https://i.imgur.com/5Yd7GZP.png" alt="Pattern Sample" style="width:200px; height:auto; margin-bottom:10px;">
  <p>Retro Floral Pattern</p>
</div>
  
Artist Portfolio BoxIllustration Portfolio
    
    
    
  
<div style="background:#fff0f5; border:3px solid #ff69b4; padding:15px; text-align:center;">
  <h4>Illustration Portfolio</h4>
  <div style="display:flex; justify-content:center; gap:10px; flex-wrap:wrap;">
    <img src="https://i.imgur.com/N1XzZrU.png" alt="Art1" style="width:80px; height:auto; border:2px solid #000;">
    <img src="https://i.imgur.com/xhK5rJs.png" alt="Art2" style="width:80px; height:auto; border:2px solid #000;">
    <img src="https://i.imgur.com/ZtL6HnX.png" alt="Art3" style="width:80px; height:auto; border:2px solid #000;">
  </div>
</div>
  
Sketch Divider
  
  ✏️
  <hr style="border:none; height:3px; background:#ff69b4; width:70%; margin:auto; position:relative;">
<span style="position:relative; top:-18px; background:#f0f8ff; padding:0 10px;">✏️</span>
  
Pattern Drafters Info Box
  Pattern Drafting Tips
  Use accurate measurements
Test muslin fabrics first
Label all pattern pieces

  <div style="background:#fffaf0; border:2px solid #ffa500; padding:15px; text-align:center;">
  <h4>Pattern Drafting Tips</h4>
  <ul style="text-align:left; padding-left:20px;">
    <li>Use accurate measurements</li>
    <li>Test muslin fabrics first</li>
    <li>Label all pattern pieces</li>
  </ul>
</div>
  
Color Swatch Box
<div style="background:#fff0f5; border:2px dashed #ff1493; padding:15px; display:flex; justify-content:center; gap:10px;">
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1' style='text-align: center;      margin-right: 0px; '>
<span class='post-comment-link'>
<a class='comment-link' href='https://artorablog.blogspot.com/2024/12/html-codes-you-can-use-part-11.html#comment-form' onclick=''>
No comments:
  </a>
</span>
<div id='fawesomeicons1'>
<a class='facebook' href='https://www.blogger.com/share-post.g?blogID=3242395250413510482&postID=497420246296632421&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'></i></a>
<a class='twitter' href='https://www.blogger.com/share-post.g?blogID=3242395250413510482&postID=497420246296632421&target=twitter' target='_blank' title='Tweet This'><i class='fa fa-twitter'></i></a>
<a class='pint-er-est' href='https://www.blogger.com/share-post.g?blogID=3242395250413510482&postID=497420246296632421&target=pinterest' target='_blank' title='Pin it'><i class='fa fa-pinterest-p'></i></a>
</div>
<span class='post-labels'>

         Category:
          
<a href='https://artorablog.blogspot.com/search/label/HTML' rel='tag'>HTML</a>,
<a href='https://artorablog.blogspot.com/search/label/HTML%20Codes' rel='tag'>HTML Codes</a>,
<a href='https://artorablog.blogspot.com/search/label/HTML%20Resources' rel='tag'>HTML Resources</a>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div>
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='3242395250413510482' itemprop='blogId'/>
<meta content='8356172525763902690' itemprop='postId'/>
<a name='8356172525763902690'></a>
<h3 class='post-title entry-title' itemprop='name'>
<a href='https://artorablog.blogspot.com/2024/12/html-codes-you-can-use-part-10.html'>HTML Codes you can Use Part 10</a>
</h3>
<div class='post-header'>
<div class='post-header-line-1'></div>

          </div></div>
        

          <div class="date-outer">
        
<h2 class='date-header'><span>Saturday, December 14, 2024</span></h2>

          <div class="date-posts">
        
</div>
<div class='post-body entry-content' id='post-body-8356172525763902690' itemprop='articleBody'>
<div style="font-family:'Courier New', monospace;">

<!-- ====================== Glitter GIF Background Box ====================== -->
<h3>Glitter GIF Background Box</h3>
<div style="background:url('https://i.imgur.com/glitter.gif') no-repeat center center; background-size:cover; border:3px solid #ff69b4; padding:20px; margin-bottom:20px; text-align:center; color:#fff; font-weight:bold;">
  ✨ Glitter Box Background ✨
  <textarea readonly style="width:100%; height:100px;">
<div style="background:url('https://i.imgur.com/glitter.gif') no-repeat center center; background-size:cover; border:3px solid #ff69b4; padding:20px; text-align:center; color:#fff; font-weight:bold;">
  ✨ Glitter Box Background ✨
</div>
  
Nested Marquee + Icons Box💖✨ Welcome to My Retro Box Collection ✨💖✨⭐✨⭐✨⭐
<div style="background:#fffaf0; border:3px dashed #ff4500; padding:15px; text-align:center;">
  <marquee behavior="scroll" direction="left" scrollamount="5">💖✨ Welcome to My Retro Box Collection ✨💖</marquee>
  <div style="margin-top:10px;">✨⭐✨⭐✨⭐</div>
</div>
  
Hover Sparkle Box✨ Hover Over Me! ✨
<div class="hoversparkle">✨ Hover Over Me! ✨</div>
<style>
.hoversparkle {
  padding:10px;
  border:2px solid #32cd32;
  display:inline-block;
  transition: all 0.3s ease-in-out;
}
.hoversparkle:hover {
  box-shadow:0 0 20px #32cd32;
  transform:scale(1.1);
  color:#ff1493;
}
</style>
  
Card-Style Retro BoxRetro CardThis is a Y2K-style content box for posts or widgets.
✨💖✨<div style="background:#fff0f5; border:2px solid #ff69b4; padding:15px; width:300px; text-align:center; display:inline-block; box-shadow:5px 5px 15px rgba(0,0,0,0.3);">
  <h4 style="margin:5px 0;">Retro Card</h4>
  <p style="margin:5px 0;">This is a Y2K-style content box for posts or widgets.</p>
  <span>✨💖✨</span>
</div>
  
Gradient + Glitter Box
  ✨ Shiny Retro Gradient Box ✨
  <div style="background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet); border:3px dashed #ff1493; padding:20px; text-align:center; color:#fff; font-weight:bold;">
  ✨ Shiny Retro Gradient Box ✨
</div>
  
Icon + Divider Fancy Box
  🌟 Featured Retro Content 🌟
  
  Check out this flashy content box!
  <div style="background:#fffacd; border:2px solid #ffa500; padding:15px; text-align:center;">
  🌟 Featured Retro Content 🌟
  <hr style="border:2px dotted #ff4500; width:70%; margin:10px auto;">
  Check out this flashy content box!
</div>
  
Animated Glitter Text Box
  ✨💖 Flashing Retro Text 💖✨
  <div style="background:#fff0f5; border:3px dashed #ff69b4; padding:20px; text-align:center;">
  <span class="glittertext">✨💖 Flashing Retro Text 💖✨</span>
</div>
<style>
@keyframes glitterflash {0%,100%{opacity:0.3;}50%{opacity:1;}}
.glittertext { animation: glitterflash 1s infinite; font-weight:bold; font-size:20px; color:#ff1493;}
</style>
  
Multi-Layered Nested Box
  Outer Box
  
    Inner Box
    
      Innermost Box
    
<div style="background:#f0fff0; border:2px solid #32cd32; padding:15px; text-align:center;">
  Outer Box
  <div style="background:#fffacd; border:2px dashed #ffa500; padding:10px; margin-top:10px;">
    Inner Box
    <div style="background:#fff0f5; border:2px dotted #ff69b4; padding:10px; margin-top:10px; text-align:center;">
      Innermost Box
    </div>
  </div>
</div>
  

HTML Codes You can Use Part 9

Friday, December 6, 2024

Scrolling Text Box
  ✨ Welcome to My Retro Box Collection! ✨
  <div style="background:#fffaf0; border:3px dashed #ff69b4; padding:15px; text-align:center;">
  <marquee behavior="scroll" direction="left" scrollamount="5">✨ Welcome to My Retro Box Collection! ✨</marquee>
</div>
  
Patterned Background Box
  Retro Pattern Box
  <div style="background: repeating-linear-gradient(45deg, #ffebcd, #ffebcd 10px, #ff69b4 10px, #ff69b4 20px); border:2px solid #000; padding:15px; text-align:center;">
  Retro Pattern Box
</div>
  
3D Embossed Box
  Embossed Retro Box
  <div style="background:#f0fff0; border:2px solid #32cd32; padding:15px; text-align:center; box-shadow: inset 3px 3px 5px rgba(0,0,0,0.2), inset -3px -3px 5px rgba(255,255,255,0.5);">
  Embossed Retro Box
</div>
  
Icon & Divider Box
  🌟 Featured Content 🌟
  
  Check out this cool retro box!
  <div style="background:#fffacd; border:2px solid #ffa500; padding:15px; text-align:center;">
  🌟 Featured Content 🌟
  <hr style="border:2px dashed #ff4500; width:70%; margin:10px auto;">
  Check out this cool retro box!
</div>
  
Blinking Icon Box
  ✨💖✨ Retro Sparkle 💖✨
  <div style="background:#fff0f5; border:3px dotted #ff69b4; padding:15px; text-align:center;">
  <span class="blinkicon">✨💖✨ Retro Sparkle 💖✨</span>
</div>
<style>
@keyframes blink {0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}
.blinkicon { animation: blink 1s infinite; font-weight:bold; font-size:20px; color:#ff1493;}
</style>
  
Rainbow Gradient Box
  🌈 Rainbow Box 🌈
  <div style="background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet); border:3px solid #000; padding:15px; text-align:center; color:#fff; font-weight:bold;">
  🌈 Rainbow Box 🌈
</div>
  
Sparkle Pattern Divider
  ✨⭐✨⭐✨⭐✨
  <p style="text-align:center;">✨⭐✨⭐✨⭐✨</p>
  
Animated Gradient Box
  ✨ Flashing Retro Box ✨
  <div style="border:3px solid #ff4500; padding:15px; text-align:center;">
  <span class="animategrad">✨ Flashing Retro Box ✨</span>
</div>
<style>
@keyframes gradientflash {0%{background:linear-gradient(135deg, red, orange);}50%{background:linear-gradient(135deg, yellow, green);}100%{background:linear-gradient(135deg, blue, violet);}}
.animategrad { animation: gradientflash 2s infinite; padding:5px; font-weight:bold; color:#fff;}
</style>
  

Fashion Schools in the United States

Fashion Design Schools in the U.S.

Fashion Institute of Technology (FIT), New York, NY — known for fashion design and business.
Parsons School of Design, New York, NY — leader in fashion and textile design.
Rhode Island School of Design (RISD), Providence, RI — strong in apparel and textiles.
Academy of Art University, San Francisco, CA — offers a major fashion design program.
Drexel University, Philadelphia, PA — combines fashion design and merchandising.

Visual Design Schools

Photography & Visual Design Schools in the U.S.

School of the Art Institute of Chicago (SAIC), Chicago, IL — major photography program.
New York University (NYU), New York, NY — photography and visual arts programs.
California Institute of the Arts (CalArts), Valencia, CA — top photography department.
Rhode Island School of Design (RISD), Providence, RI — photography & imaging arts.
Rochester Institute of Technology (RIT), Rochester, NY — photography and imaging sciences.