Boston Middle Passage Profile Gallery Beta
How do I make an boston middle passage profile gallery beta?
What is a boston middle passage profile gallery beta? How do you make a boston middle passage profile gallery beta? This script and codes were developed by Emily K on 09 September 2022, Friday.
Boston Middle Passage Profile Gallery Beta - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Boston Middle Passage Profile Gallery Beta</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Boston Middle Passage Profile Gallery Beta</h1>
<a href="https://codepen.io/Emnk/pen/emKXjw"> Alternative Gallery for this is here</a>
<section id="gallery"> <figure> <a href="profile01"> <img src="https://dl.dropboxusercontent.com/u/22541255/MP_Profile_Images/Prince_hall_portrait.jpg" alt="Prince Hall"> </a> <figcaption>Prince Hall</figcaption> </figure> <figure >
<a href="profile02"> <img src="https://dl.dropboxusercontent.com/u/22541255/MP_Profile_Images/Crispus_Attucks.jpg" alt="Crispus Attucks"> </a> <figcaption>Crispus Attucks, <time>1723</time> - <time>1770</time></figcaption> </figure> <figure> <a href="profile03"> <img src="https://dl.dropboxusercontent.com/u/22541255/MP_Profile_Images/Mumbett70.jpg" alt="Elizabeth Mumbett Freeman"> </a> <figcaption>Elizabeth Mumbett Freeman</figcaption> </figure> <figure> <a href="profile04"> <img src="https://dl.dropboxusercontent.com/u/22541255/MP_Profile_Images/Phillis_Wheatley_frontispiece.jpg" alt="Phillis Wheatley"> </a> <figcaption>Phillis Wheatley</figcaption> </figure> <figure> <a href=""> <img src="http://placehold.it/150x150" alt=""></a> <figcaption>Place Holder</figcaption> </figure> <figure> <a href=""> <img src="http://placehold.it/150x150" alt=""></a> <figcaption>Place Holder</figcaption> </figure>
</section> <!-- Profile 01 based on Balkan Style https://codepen.io/MightyShaban/pen/eGaCf --> <div id="profile01" class="port"> <div class="row"> <div class="description"> <h1>Prince Hall</h1> <p>Prince Hall was an activist and leader in Boston’s Revolutionary Era black community. A freeman by at least 1770, he is best known for founding associations and schools for African Americans who were excluded from white civic organizations. In 1775, along with fourteen members, he founded the first African American Masonic Lodge. During the Revolutionary War, he petitioned the Massachusetts legislature to abolish slavery. After the Revolution, he argued that state government had to provide schools for black children. Though African Americans were taxpayers, the state only provided schools for white pupils. Hall’s activism also pushed the legislature to outlaw the international slave trade and the abduction of African American citizen into slavery. After a 1788 petition campaign led by Hall, the legislature outlawed the slave trade and provided support for black citizens who had been kidnapped into slavery. Hall’s youth and personal life are difficult to recover from the historical record but his activism created a lasting presence. He was buried in Copp’s Hill Burying Ground after his death in 1807.</p> </div> <img src="http://placehold.it/150x150" alt="Link to Map">
<img src="https://dl.dropboxusercontent.com/u/22541255/MP_Profile_Images/Prince_hall_portrait.jpg" alt="Prince Hall"> </div> </div> <!-- / row -->
</section>
<section class="text">
<h2>Notes</h2> <p>Next step: make profile page appear when it is touched</p> <p>Gallery of people profiled. Images of subject. Click on image. There is an expansion of information. </p> <p>Will remove borders later - this is just to keep trakck of things.Colors will be altered later, too. </p> <p>Questions:</p> <ul> <li>Images: need to decide what to do with the multiple subjects lacking portraits. Should we use a silhouette, reminicent of Kara Walker, an object/site associated with the subject?</li> <li> In addition to the expansion, do we link to a longer biography with map? Draft this at the bottom of the page</li> </ul>
<h2>Citations</h2>
<h3>Models for CSS</h3>
<ul> <li>https://codepen.io/cabrera/pen/KFaJs</li> <li>https://codepen.io/furfoxsnakes/pen/zwluC</li> <li>https://codepen.io/MightyShaban/pen/eGaCf</li> <li>http://www.responsivegridsystem.com/calculator/</li>
</ul>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Boston Middle Passage Profile Gallery Beta - Script Codes CSS Codes
![Boston Middle Passage Profile Gallery Beta - Script Codes](http://shots.codepen.io/Emnk/pen/EaRMZB-512.jpg)
Developer | Emily K |
Username | Emnk |
Uploaded | September 09, 2022 |
Rating | 3 |
Size | 3,388 Kb |
Views | 34,408 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by Emily K | 6,961 Kb |
BOMP Test for WCC feedback | 166,822 Kb |
Fluid layout practice v3 with map | 8,749 Kb |
A taste of jQuery UI with dragging | 3,408 Kb |
Practice using Wixel | 3,057 Kb |
Done - Monster Mash | 1,953 Kb |
PHPiggy Bank | 1,693 Kb |
Bonus Features | 5,994 Kb |
BOMP Test | 5,138 Kb |
Pick a texture | 2,284 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Ball physics | Blackkbot | 3,874 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Loading... | Adamjacob | 2,384 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!