centered video

This commit is contained in:
miggymofongo2 2024-04-23 21:25:25 -07:00
parent f5a5cbb13f
commit e4ef2c22ea

View file

@ -167,6 +167,25 @@ src: url(./fonts/KHGummi.otf);
font-weight:400; font-weight:400;
} }
video {
max-width: 100%; /* Ensure video doesn't exceed the container width */
height: auto; /* Maintain aspect ratio */
}
.video-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.video-container video {
max-width: 100%;
height: auto;
}
</style> </style>
</head> </head>
@ -197,7 +216,37 @@ font-weight:400;
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="text-center">
<div class="d-inline-block text-center">
<img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!"
style="width: 300px; height: 300px; object-fit: cover;" alt="Headshot of Miguel"></img>
<br>
<h2>Public Interest Communications </h2>
<a href="mailto:contact@miguelalmodo.com"><img src="./img/email.png" alt="mail icon" style="width: 50px; height: 50px;"></a>
<a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"><img src="./img/running-nostr.gif" alt="running nostrich gif" style="width: 50px; height: 50px;"></a>
<a href="https://www.linkedin.com/in/miguelalmodo/"><img src="./img/LinkedIN.png" alt="linkedin logo" style="width: 50px; height: 50px;"></a>
<a href="https://www.github.com/miggymofongo/"><img src="./img/Github.png" alt="github logo" style="width: 50px; height: 50px;"></a>
<img src="./img/lightning.png" style="width: 80px; height: 80px; align-items: center;">
<br><br>
<h6>Zap me Bitcoin!<br>ancientwildflower33459@getalby.com</h6> <img src="./img/code.png" style="width: 100px; height:100px;">
<div style= "text-align: end;">
</div>
<!--
<button class="btn btn-secondary" href="#" disabled>View biography &raquo;</button>
-->
</div>
</div>
<br>
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
@ -210,7 +259,7 @@ font-weight:400;
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Blog</a> <a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
</li> </li>
@ -242,6 +291,7 @@ font-weight:400;
</a> </a>
<ul class="dropdown-menu dropdown-menu-dark"> <ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">Bookshelf</a></li> <li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">Bookshelf</a></li>
<li><a class="dropdown-item" href="https://migs.uber.space/blog">Chronicles</a></li>
<li><a class="dropdown-item" href="https://github.com/miggymofongo/asteroid/blob/main/scripts.js">Quote Shuffler</a></li> <li><a class="dropdown-item" href="https://github.com/miggymofongo/asteroid/blob/main/scripts.js">Quote Shuffler</a></li>
</ul> </ul>
</li> </li>
@ -251,32 +301,7 @@ font-weight:400;
</ul> </ul>
<div class="text-center">
<div class="d-inline-block text-center">
<img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!"
style="width: 300px; height: 300px; object-fit: cover;" alt="Headshot of Miguel"></img>
<br>
<h2>Public Interest Communications </h2>
<a href="mailto:contact@miguelalmodo.com"><img src="./img/email.png" alt="mail icon" style="width: 50px; height: 50px;"></a>
<a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"><img src="./img/running-nostr.gif" alt="running nostrich gif" style="width: 50px; height: 50px;"></a>
<a href="https://www.linkedin.com/in/miguelalmodo/"><img src="./img/LinkedIN.png" alt="linkedin logo" style="width: 50px; height: 50px;"></a>
<a href="https://www.github.com/miggymofongo/"><img src="./img/Github.png" alt="github logo" style="width: 50px; height: 50px;"></a>
<img src="./img/lightning.png" style="width: 80px; height: 80px; align-items: center;">
<br><br>
<h6>Zap me Bitcoin!ancientwildflower33459@getalby.com</h6> <img src="./img/code.png" style="width: 100px; height:100px;">
<div style= "text-align: end;">
</div>
<!--
<button class="btn btn-secondary" href="#" disabled>View biography &raquo;</button>
-->
</div>
</div>
</div> </div>
</div> </div>
@ -291,7 +316,7 @@ font-weight:400;
<div class="container py-5"> <div class="container py-5">
<h1 class="text-body-emphasis quote-banner">All aboard the Gummi Ship!</h1> <h1 class="text-body-emphasis quote-banner">All aboard the Gummi Ship!</h1>
<p class="col-lg-8 mx-auto lead" style="color: black;"> <p class="col-lg-8 mx-auto lead">
Thanks for visiting my asteroid. Explore the depths of uberspace Thanks for visiting my asteroid. Explore the depths of uberspace
while we battle space pirates and save worlds from corporate tech! while we battle space pirates and save worlds from corporate tech!
</p> </p>
@ -306,82 +331,146 @@ font-weight:400;
</div> </div>
</section> </section>
<div class="b-example-divider"></div>
<!--
<h2 class="title-h2 ">L'horloge</h2>
<div class="french">Dont le doigt nous menace et nous dit : <em>" Souviens-toi !</em></div>
<div class="english">whose hand threatens us and says <em>"Remember!</em></div>
<div class="french">Les vibrantes Douleurs dans ton coeur plein d'effroi</div>
<div class="english">Vibrating pains will soon pierce</div>
<div class="french">Se planteront bientôt comme dans une cible,</div>
<div class="english">your heart like a bulls-eye,</div>
<div>&nbsp;</div>
<div>
<em>Charles Baudelaire</em></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<h2 style="text-align: right;">
<span class="button2"
onclick="changecss2('.english','display','none', 'block')">
english</span> <span class="button2" onclick="changecss2('.french','display','block', 'none')">
french</span></h2>
-->
<section> <section>
<div class="video-container">
<div class="container px-4 py-5" id="featured-3"> <video src="https://v.nostr.build/7GeB3.mp4" style="align-items: center;" controls>
<h2 class="pb-2 border-bottom" style="font-family: KHGummi;">Communication for the public interest.</h2> Carta de Presentacion para PlenitudPR
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> </video>
<div class="feature col"> </div>
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> </section>
</div>
<h3 class="fs-2 text-body-emphasis">Community Building</h3>
<p>Communication is key to every relationship! <section style="background-color: #23272b;">
Cut through the noise with web-based instances of tools like Nostr Relays
or ActivityPub Servers to build connective tissue in your community.</p>
<div class="container px-4 py-5" style="background-color: #23272b;">
<h2 class="pb-2 border-bottom" style="color: aliceblue; font-family: KHGummi;">Let's collaborate.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&#160;&#160;&#160;&#160;
&nbsp;&nbsp;&nbsp;&#160;&#160;&#160;&#160;
<img src="img/leroy_opt.png" alt="pic of leroy from the movie leroy and stich"> </h2>
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="d-flex flex-column align-items-start gap-2">
<h3 class="fw-bold" style="color: aliceblue;">Communications for the Public Good</h3>
<p style="color: rgb(255, 255, 255);">The <a
href="https://migs.uber.space/blog/corporate-social-media-is-killing-us">
corporate social media landscape looks grim.</a>
They are tearing our society apart apart with the constant
bombardment of advertising and antagonizing algorithms.
Movements in 2024 need a robust communication strategy and the power of a
decentralized internet. It's on us to take back the digital commons once and for all.
</a></p>
<!-- <div class="container">
<form onsubmit="sendEmail()" style="color: rgb(255, 255, 255);">
<h4 style="color: rgb(255, 255, 255);">Send me an email and get a response back
within 48 hours! </h4>
<label for="text">Your Name:</label>
<input type="text" id="name" placeholder="Your name" required>
<label for="email">Email ID:</label>
<input type="email" id="email" placeholder="Email id" required>
<label for="message">Your Message:</label>
<textarea id="message" rows="4" placeholder="What are your thoughts?" required></textarea>
<button type="submit">Send Message</button>
</form>
<script src="./smtp.js"></script>
<script>
function sendEmail(){
Email.sendEmail({
Host: "smtppro.zoho.com",
Username : "contact@miguelalmodo.com",
Password : "EUfnEQ47d7iM",
To : "recipient@example.com",
From : document.getElementById("email").value,
Subject: "We met at the protest",
Body : "Free Palestine!"
}).then(
message => alert(message)
);
}
</script>
</div>-->
<a href="mailto:contact@miguelalmodo.com" class="btn btn-light btn-lg">
Click to open a self - addressed email message in your favorite
client.</a>
</div> </div>
<div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="d-flex flex-column gap-2">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Move beyond strategic sharing.</h4>
<p style="color: rgb(255, 255, 255);">
Craft your message with intention and authenticity. Find
the right medium and multiply its impact with tech.
</div>
<div class="feature col"> <div class="d-flex flex-column gap-2">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Open source strategy.</h4>
<p style="color: rgb(255, 255, 255);">Break the tech monopoly with open source software.
Power map your "big bosses" and chart your path to sustainable change.
</p>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Engaging Content</h3>
<p>What's your medium? Audio, Visual, or Social? Craft authentic messages with a<a href="https://opportunityagenda.org/our-tools/vpsa/"> Values, Problem, Solution, Action framework</a> content to activate your community.</p> <div class="d-flex flex-column gap-2">
</div> <h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Cocreate meaning with your community.</h4>
<div class="feature col"> <p style="color: rgb(255, 255, 255);">Rally your
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> community around shared values using a VPSA (Values, Problem, Solution, Action)
framework.</p>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Training</h3>
<p>The Internet is evolving. Have questions about <div class="d-flex flex-column gap-2">
alternative social media protocols like Nostr?
Request a training to stay ahead of the curve.</p>
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Training</h4>
<p style="color: rgb(255, 255, 255);">It seems like there's a new thing every couple months.
Have questions about crypto or decentralized social media?
Request a training to stay ahead of the curve.</p>
</div></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<div class="b-example-divider"></div>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<span class="text-muted">© 2024 Miguel Almodóvar</span> <span style="font-weight: bolder;"><a href="https://uberspace.de/en/about/";>This website is hosted on an asteroid in uberspace!</a></span> <span class="text-muted">© 2024 Miguel Almodóvar</span> <span style="font-weight: bolder;"><a href="https://uberspace.de/en/about/";>This website is hosted on an asteroid in uberspace!</a></span>
@ -389,6 +478,7 @@ font-weight:400;
</p> </p>
</div> </div>
</footer> </footer>