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
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 |
PHPiggy Bank | 1,693 Kb |
BOMP Test | 5,138 Kb |
Fluid layout practice v3 with map | 8,749 Kb |
Done - Monster Mash | 1,953 Kb |
Bonus Features | 5,994 Kb |
A taste of jQuery UI with dragging | 3,408 Kb |
Flagg CSS Practice | 2,597 Kb |
Map for event - simple | 5,111 Kb |
A Pen by Emily K | 6,961 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 |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Loading... | Adamjacob | 2,384 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Console fun | Dviate | 1,500 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!