• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Floating video

New Here ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

I have created inserted a video as a layer, but can't align it with the text or have it move dynamically when the window is resized. Any tips? 

 

Thanks

Views

105

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

Copy/paste the entire page's code (html and css) into a forum response so we have a better understanding of what you're seeing and what you're going for.

Someone will be able to point you in the right direction pretty quickly with that.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

This is the code. I am NOT an HTML programmer! The bold shows the video I have added.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Engineering</title>
<style type="text/css">
 
a:link {text-decoration: underline; color:#444444;}
a:visited {text-decoration: none; color:#444444;}
a:active {text-decoration: none; color:#444444;}
a:hover {text-decoration: underline; font-weight: bold; color:#444444;}
a img { border: none; }
 
#container {
background-color: #FFF;
width: 87%;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;}
 
#content {
font-family: "Calibri","sans-serif";
color:#444444;
background-color: #FFF;
text-align: justify;
font-size: 18px;
height: 80%;
line-height: 1.5;
padding-top: 24px;
padding-left: 44px;
padding-right: 44px;
padding-bottom: 44px;}
 
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
 
<body bgcolor="#0F243E">
 
<div id="container">
<div id="content">
    <p style='font-size:18.0pt'><strong>ENGINEERING</strong></p>
    <p align="center"><strong><font color="#400040" size="+2">PROJECTS DELIVERED 
      </font></strong></p>
    <p align="center"><em><font color="#400040">I have a wide range of practical 
      skills in <strong>electronics</strong>, <strong>mechanical </strong>engineering 
      and <strong>software </strong>from design to production, test and delivery. 
      </font></em></p>
    <p><font color="#400040"><strong><em>Robotics</em></strong></font> <br />
      • Walking robot (1st year degree team project). Transistor controlled, wired 
      PC interface, mechanical design. <br />
      • Walking robot (BEng project). 12 DOF robot with servo controlled legs, 
      ultrasound range-finding, digital compass, autonomous navigation, RF remote 
      controller. Awarded UK Tektronics Engineering Prize. <br />
      • Line following robot mouse. PIC microcontroller controlled, IR and colour 
      sensors, featured on local BBC News as part of a schools competition. <br />
      • Robot football. Mobile robots that represented the UK internationally. 
      I re-designed and miniaturised the motor, sensor and comms. boards using 
      surface-mount components.<br />
      • Maze solving robot. PIC microcontroller controlled, sensors, motor controller. 
      Developed as a commercial kit for schools. <br />
      • Robotic survey vessel to survey UK coastal waters. With onboard side-scan 
      sonar, GPS, Wireless WAN, chemical sensor pod and winch. <br />
      • Development of lunar rovers for the <a href="https://www.surrey.ac.uk/surrey-space-centre">Surrey 
      Space Centre </a> </p>
    <p><em><strong><font color="#400040">Medical </font></strong></em><br />
      • Implant controller and wireless power transmitter for a bone distractor 
      implant <br />
      • 16-channel electro-tactile stimulator. PC controlled FES stimulator with 
      array of sensory stimulation electrodes <br />
      • Vibration feedback device. For haptic feedback, potentially for stroke 
      patients <br />
      • Real-time gait analysis software. The first biomechanical application 
      using real-time data from the <a href="https://www.qualisys.com">Qualysis</a> 
      motion capture system<br />
      • Dynamic Vestibular Acuity Test for Guy's and St Thomas' Physiotherapy 
      Department<br />
      • WiiFit Balance Assessment Widget, for Guy's and St Thomas' Physiotherapy 
      Department<br />
      • Direct cable input for neonatal ABR test, for the St George's Hospital 
      Newborn hearing screening programme <br />
      • Thermoluminescent dosimeter prototype for <a href="https://www.trueinvivo.co.uk">TRUEInvivo 
      Ltd </a> </p>
    <p><em><strong><font color="#400040">Other </font></strong></em><br />
      • Air quality measurement system for the<a href="https://www.surrey.ac.uk/global-centre-clean-air-research"> 
      Global Centre for Clearn Air Research</a>, UniS<br />
      • Logic Tutor for the Department of Electrical and Electronic Engineering, 
      UniS<br />
      • Reaction time box for School of Psychology, UniS<br />
      • Wind Tunnel development of the <a href="https://www.surrey.ac.uk/centre-aerodynamics-environmental-flow/facilities">aerothermal 
      and environmental flow tunnels </a><br />
      • Electric ducted fan development for the <a href="https://www.surrey.ac.uk/centre-aerodynamics-environmental-flow/research/electric-ducted-fan-propuls...">Centre 
      for Aerodynamics and Flow </a><br />
      • Design of lunar surface tribology, orbital assembly and planetary rover 
      labs. for the UK Fair-Space Programme in collaboration with <a href="https://www.310studio.co.uk/university-of-surrey-fairspace-research-laboratory">3|10 
      studios</a> <br />
      • Software: Data aquisition, EMG, metronomes, filtering and gap filling 
      apps. for various MSc/PhD students </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p align="center"><strong><font color="#400040" size="+2">SKILLS </font></strong></p>
    <p align="center"><em><font color="#400040">I am mostly self-taught and will 
      pick up and learn any tool needed for the task, whether it's a new piece 
      of software, technical widget or a JCB</font></em></p>
    <p>&nbsp;</p>
    <p><strong><em><font color="#400040">Software and Programming Skills</font></em> 
      </strong>in rough order of proficiency<br />
      • Windows (from v 2.1 to date)<br />
      • Microsoft tools (Word, Excel, Outlook, Powerpoint, Visio, Access, Onenote) 
      <br />
      • LabVIEW (from v 7.1 to 2020) - preferred high-level language<br />
      • Embedded C compilers for PIC and Atmel microcontroller families <br />
      • Assembly languages for PIC and Atmel microcontroller families <br />
      • Proteus Virtual System Modelling, Electronics Workbench and Autodesk Eagle 
      (Electronics CAD) <br />
      • Visual3D and Qualisys Track Manager (Motion analysis and biomechanical 
      modelling)<br />
      • GitHub, VPNs, VNC and other general networking tools like wireshark etc<br />
      • Case tools, Endnote Reference Manager<br />
      • Matlab (Simulink and Stateflow)<br />
      • Microsoft C, Ada, Basic, Python, HTML<br />
      • MathCad, Derive and SPSS (maths and stats packages)<br />
      • LINUX and DOS<br />
      • AutoCAD and ProDesktop (Mechanical CAD)<br />
      • Currently learning Dreamweaver for web design - needs practice! </p>
    <p><strong><font color="#400040"><em>Electronics Design, Development and Repair 
      Skills </em></font><br />
      </strong> • Analogue and Digital circuit design - more confidence with digital 
      <br />
      • Microcontroller systems design (PIC, Atmel, 68000, 8051, Arduino, Raspberry 
      Pi) <br />
      • Bluetooth, RF, RS232, SCI, I2C, TCP/IP, DC and stepper motor control, 
      wireless power transmission, real-time data logging<br />
      • Medical instrumentation, design for electromagnetic compatibility, GUI 
      design and human-computer interaction<br />
      • PCB Design: Through-hole, surface mount and multi-layer board design with 
      Proteus or Eagle <br />
      • PCB Printing: Wet etching with FeCl, milling and drilling, lacquers <br />
      • PCB Assembly: Very confident soldering, de-soldering, use of heat guns, 
      ovens, pick and place<br />
      • PCB testing: Own PC-based oscilloscope, familiar with current clamps etc 
    <div id="Layer1" style="position:absolute; width:271px; height:257px; z-index:3; left: 767px; top: 2243px;"> 
      <p align="center">Soldering surface mount LEDs onto a prototype logic demonstrator 
        board </p>
      <p> 
        <embed src="content/papers/surface%20mount%20soldering.mp4" width="271" height="266" name="Test board"></embed></p>
    </div>
    <p><strong><em><font color="#400040">Mechanical Craft Skills </font></em></strong>gained 
      from a traditional toolmakers apprentice <br />
      • Turning and milling (mannual and CNC) <br />
      • Mechanical fitting incl agricultural machinery <br />
      • Sheet metal work, bending and welding (oxyacetylene and arc)<br />
      • Surface treatments (anodising, poweder coating)<br />
      • Grinding, Jig boring and Gear-cutting<br />
      • Heat Treatments (hardening etc)<br />
      • Laser sheet metal cutting<br />
      • Conventional and NC/CNC planning and operation <br />
      • Forging (dabbled)
    <p><strong><em><font color="#400040">Craft and DIY Skills </font></em></strong><br />
      • Woodworking, residential plumbing, mains electrical installation <br />
      • PAT Testing and the management of PAT testing systems <br />
      • Ground work <br />
      • Painting, decorating </p>
    <p><strong><em><font color="#400040">Space Design </font></em></strong><br />
      • Workshop, office and laboratory layout and design<br />
      • Project management using the RIBA Plan of Work (Royal Institiute of British 
      Architects). For example: <a href="content/papers/enflo_layout.PNG"> </a></p>
    <p><a href="content/papers/fairpsacelabs.PNG"><img src="content/papers/jpg.PNG" width="31" height="40" border="0" /> 
      </a><a href="content/papers/enflo_layout.PNG"><img src="content/papers/jpg.PNG" width="31" height="40" border="0" /></a></p>
  </div>
</div>
</body>
</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

It looks like the APDiv button from a pre-mobile-aware version of DW was used to add the video. 

Unless the desired effect is to have the video sit at an exact position, in pixels, from the top/left of the browser window at all times, the APDiv button can't be used.

Pre-CC versions of DW aren't going to be of much help when trying to create responsive or mobile-friendly pages. They came out before those concepts became the internet standard.

You should be able to use a standard container, then change the settings of that container to get the video back into the remainder of your content using float:left or float:right, margin and padding settings in your CSS.

The following is a bandaid on a compound fracture of your site's femur (but it will work). Change your bold text to:

<div style="float:right; margin:10px">
<p align="center">Soldering surface mount LEDs onto a prototype logic demonstrator
board </p>
<p>
<embed src="content/papers/surface%20mount%20soldering.mp4" width="271" height="266" name="Test board"></embed></p>
</div>


Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

@Jon Fritz : Embed is a self-closing element. This should read

 

<embed src="content/papers/surface%20mount%20soldering.mp4" width="271" height="266" name="Test board">

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

This page is really showing its age. 

  • Macromedia has been gone since 2006.
  • Netscape ended life in 2008.
  • HTML5 replaced XHTML in 2014.
  • Embed tag is deprecated.  We no longer use it.
  • Absolute positioning is absolutely wrong here. 

I'm guessing this site was built with very old software.

 

I don't know if you're ready for future shock but here goes...  If you don't have a modern code editor yet, get one. See list below.

 

This is a sample Bootstrap layout with YouTube videos in different aspect ratios. First we determine which aspect ratio most closely resembles your video.  Copy & paste this into a new, blank HTML5 document. 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.2.3 Responsive Video</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!--Bootstrap JS Bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>

<body>
<div class="container-fluid">
<div class="row">

<!--REPEAT THIS COL AS MANY TIMES AS NEEDED-->
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 1:1</h2>
<!--ADJUST ASPECT RATIO TO SUIT VIDEO: 1x1, 4x3, 16x9 or 21x9--> 
<div class="ratio ratio-1x1">
<!--USE PUBLICLY AVAIL YOUTUBE VIDEOS-->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>

<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 4:3</h2>
<div class="ratio ratio-4x3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>

<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 16:9</h2>
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>

<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 21:9</h2>
<div class="ratio ratio-21x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div><!--/END ROW-->

<hr>
<div class="row">
<div class="col mx-auto text-center">
<footer>Footer goes here.... </footer>
</div>
</div><!--/END ROW-->
</div><!--/CONTAINER-->
</body>
</html>

 Once we know your video's aspect ratio, we can feed your content into a modern layout that works on all devices.


CODE EDITORS (FREE & PAID):
-- Adobe Dreamweaver CC - https://www.adobe.com/products/dreamweaver.html
-- Codespaces (free, browser-based) - https://github.com/features/codespaces
-- Nova (Mac only, formerly called Coda) - https://nova.app/
-- Pinegrow - https://pinegrow.com/
-- Sublime Text - http://www.sublimetext.com/
-- Visual Studio Code (free) - https://code.visualstudio.com/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 23, 2024 Apr 23, 2024

Copy link to clipboard

Copied

LATEST

Copy the following code and paste it in a new document to see what I have created. It may need some more styling.

 

 

<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
</head>

<body is="dmx-app" id="test">
    <main>
        <div class="container">
            <div class="row mb-4">
                <div class="col">
                    <h1 class="h4 text-uppercase fw-bold">Engineering</h1>
                </div>
            </div>
            <div class="row nb-4">
                <div class="col text-center">
                    <h2 class="h4 text-uppercase fw-bold">Projects Delivered</h2>
                    <p class="fst-italic">I have a wide range of practical skills in <span class="fw-bold">electronics, mechanical </span>engineering and <span class="fw-bold">software </span> from design to production, test and delivery.</p>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col">
                    <h3 class="h6 fst-italic fw-bold">Robotics</h3>
                    <ul>
                        <li> Walking robot (1st year degree team project). Transistor controlled, wired PC interface, mechanical design.</li>
                        <li>Walking robot (BEng project). 12 DOF robot with servo controlled legs, ultrasound range-finding, digital compass, autonomous navigation, RF remote controller. Awarded UK Tektronics Engineering Prize</li>
                        <li>Line following robot mouse. PIC microcontroller controlled, IR and colour sensors, featured on local BBC News as part of a schools competition.</li>
                        <li>Robot football. Mobile robots that represented the UK internationally. I re-designed and miniaturised the motor, sensor and comms. boards using surface-mount components.</li>
                        <li>Maze solving robot. PIC microcontroller controlled, sensors, motor controller. Developed as a commercial kit for schools.</li>
                        <li>Robotic survey vessel to survey UK coastal waters. With onboard side-scan sonar, GPS, Wireless WAN, chemical sensor pod and winch.</li>
                        <li> Development of lunar rovers for the <span class="text-decoration-underline">Surrey Space Centre</span></li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h3 class="h6 fst-italic fw-bold">Medical</h3>
                    <ul>
                        <li>Implant controller and wireless power transmitter for a bone distractor implant</li>
                        <li> 16-channel electro-tactile stimulator. PC controlled FES stimulator with array of sensory stimulation electrodes</li>
                        <li>Vibration feedback device. For haptic feedback, potentially for stroke patients</li>
                        <li>Real-time gait analysis software. The first biomechanical application using real-time data from the Qualysis motion capture system</li>
                        <li>Dynamic Vestibular Acuity Test for Guy's and St Thomas' Physiotherapy Department</li>
                        <li>WiiFit Balance Assessment Widget, for Guy's and St Thomas' Physiotherapy Department</li>
                        <li>Direct cable input for neonatal ABR test, for the St George's Hospital Newborn hearing screening programme</li>
                        <li>Thermoluminescent dosimeter prototype for <span class="text-decoration-underline">TRUEInvivo Ltd</span></li>
                    </ul>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col">
                    <h3 class="h6 fst-italic fw-bold">Other</h3>
                    <ul>
                        <li>Air quality measurement system for the <span class="text-decoration-underline">Global Centre for Clearn Air Research</span>, UniS</li>
                        <li>Logic Tutor for the Department of Electrical and Electronic Engineering, UniS</li>
                        <li>Reaction time box for School of Psychology, UniS</li>
                        <li>Wind Tunnel development of the <span class="text-decoration-underline">aerothermal and environmental flow tunnels</span></li>
                        <li>Electric ducted fan development for the <span class="text-decoration-underline">Centre for Aerodynamics and Flow</span></li>
                        <li>Design of lunar surface tribology, orbital assembly and planetary rover labs. for the UK Fair-Space Programme in collaboration with <span class="text-decoration-underline">3|10 studios</span></li>
                        <li>Software: Data aquisition, EMG, metronomes, filtering and gap filling apps. for various MSc/PhD students</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col text-center">
                    <h2 class="h4 text-uppercase fw-bold">Skills</h2>
                    <p class="fst-italic">I am mostly self-taught and will pick up and learn any tool needed for the task, whether it's a new piece of software, technical widget or a JCB</p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h3 class="h6"><span class="fst-italic fw-bold">Software and Programming Skills</span><span class="text-body-secondary"> in rough order of proficiency</span>
                    </h3>
                    <ul>
                        <li>Windows (from v 2.1 to date)</li>
                        <li>Microsoft tools (Word, Excel, Outlook, Powerpoint, Visio, Access, Onenote)</li>
                        <li>LabVIEW (from v 7.1 to 2020) - preferred high-level language</li>
                        <li>Embedded C compilers for PIC and Atmel microcontroller families</li>
                        <li>Assembly languages for PIC and Atmel microcontroller families</li>
                        <li>Proteus Virtual System Modelling, Electronics Workbench and Autodesk Eagle (Electronics CAD)</li>
                        <li>Visual3D and Qualisys Track Manager (Motion analysis and biomechanical modelling)</li>
                        <li>GitHub, VPNs, VNC and other general networking tools like wireshark etc</li>
                        <li>Case tools, Endnote Reference Manager</li>
                        <li>Matlab (Simulink and Stateflow)</li>
                        <li>Microsoft C, Ada, Basic, Python, HTML</li>
                        <li>MathCad, Derive and SPSS (maths and stats packages)</li>
                        <li>LINUX and DOS</li>
                        <li>AutoCAD and ProDesktop (Mechanical CAD)</li>
                        <li>Currently learning Dreamweaver for web design - needs practice!</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h3 class="h6 fst-italic fw-bold">Electronics Design, Development and Repair Skills</h3>
                    <ul>
                        <li>Analogue and Digital circuit design - more confidence with digital</li>
                        <li>Microcontroller systems design (PIC, Atmel, 68000, 8051, Arduino, Raspberry Pi)</li>
                        <li>Bluetooth, RF, RS232, SCI, I2C, TCP/IP, DC and stepper motor control, wireless power transmission, real-time data logging</li>
                        <li>Medical instrumentation, design for electromagnetic compatibility, GUI design and human-computer interaction</li>
                        <li>PCB Design: Through-hole, surface mount and multi-layer board design with Proteus or Eagle</li>
                        <li>PCB Printing: Wet etching with FeCl, milling and drilling, lacquers</li>
                        <li>PCB Assembly: Very confident soldering, de-soldering, use of heat guns, ovens, pick and place</li>
                        <li>PCB testing: Own PC-based oscilloscope, familiar with current clamps etc</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-7">
                    <h3 class="h6"><span class="fst-italic fw-bold">Mechanical Craft Skills</span><span class="text-body-secondary"> gained from a traditional toolmakers apprentice</span></h3>
                    <ul>
                        <li>Turning and milling (mannual and CNC)</li>
                        <li>Mechanical fitting incl agricultural machinery</li>
                        <li>Sheet metal work, bending and welding (oxyacetylene and arc)</li>
                        <li>Surface treatments (anodising, poweder coating)</li>
                        <li>Grinding, Jig boring and Gear-cutting</li>
                        <li>Heat Treatments (hardening etc)</li>
                        <li>Laser sheet metal cutting</li>
                        <li>Conventional and NC/CNC planning and operation</li>
                        <li>Forging (dabbled)</li>
                    </ul>
                </div>
                <div class="col text-lg-center">
                    <p>Soldering surface mount LEDs onto a prototype logic demonstrator board</p>
                    <embed src="content/papers/surface-mount-soldering.mp4" type="video/mp4">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h3 class="h6 fw-bold fst-italic">Craft and DIY Skills</h3>
                    <ul>
                        <li>Woodworking, residential plumbing, mains electrical installation</li>
                        <li>PAT Testing and the management of PAT testing systems</li>
                        <li>Ground work</li>
                        <li>Painting, decorating</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h3 class="h6 fw-bold fst-italic">Space Design</h3>
                    <ul>
                        <li>Workshop, office and laboratory layout and design</li>
                        <li>Project management using the RIBA Plan of Work (Royal Institiute of British Architects). For example</li>
                    </ul>
                </div>
            </div>
            <div class="row mb-lg-4">
                <div class="col">
                    <a href="content/papers/fairpsacelabs.png"><img src="content/papers/jpg.jpg" width="31" height="48" alt="[This is required]" loading="lazy"></a>
                    <a href="content/papers/enflo_layout.png"><img src="content/papers/jpg.png" width="31" height="48" alt="[This is required]" loading="lazy"></a>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>

 

 

 

Notes:

  • This page uses Bootstrap 5.3.3
  • A main element has been introduced to make it easier for assistive technology and search engines to find the main content
  • A heading (H tags) hierarchy has been used to create a proper document outlineBenPleysier_5-1713925889846.png

     

  • CSS has been used to convert capiltalised words. Capitals in the code are a no-no for assistive technology
  • Filenames should not contain spaces. Hence I have replaced spaces with a dash (-)
  • Consistantly use lower case for image extensions. I have done so in the above code
  • This is what a mobile view looks like

    BenPleysier_3-1713925621476.png

 

I hope this helps.

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines