https://flowuxdesign.com/redesign.html

URL inviato:
https://flowuxdesign.com/redesign.html
Report terminato:

Variabili JavaScript · 5 trovate

Messaggi di log della console · 1 trovati

HTML

<!--     
 **********************************************************************************************
 **********************************************************************************************
 **********************************************************************************************
 **********************************************************************************************
    
    Release Notes: 9/1/2024
    Author: Ryan P. Manning
    Tools Used: Visual Studio, Figma, Photoshop, Illustrator

    https://www.flowuxdesign.com

    This site was created and coded by Ryan Manning.  A design leader who understands
    code and has a strong working relationship with mobile first responsive design. This
    site is an example of the code we can deliver to help articulate design impact in a 
    responsive manner. This is not intended to be a front UI production level enterprise 
    solution.  The aim is to prove we know the technology and its limitations, to inform 
    better digital experiences.

 **********************************************************************************************
 **********************************************************************************************
 **********************************************************************************************
 **********************************************************************************************
 --><!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta property="og:title" content="FLOW UX Design LLC">
    <meta property="og:image" content="https://www.flowuxdesign.com/images/previewredesign.png">
    <title>Welcome to FLOW UX Design LLC</title>
    <link rel="stylesheet" href="stylesRedesign.css">
    <!--     
        <link rel="stylesheet" href="1200.css">
        <link rel="stylesheet" href="768.css">
        <link rel="stylesheet" href="400.css"> 
    -->

        
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

    <!-- CSS -->
    <link rel="stylesheet" href="css/sliderstyle.css">
</head>
<body>
    <div id="background">
        <div id="Desktop">
            <!-- Mobile Navigation -->
            <div class="off-screen-menu">
                <div id="menulogo"><img src="images/FlowLogoWhiteMastead.png" width="225"></div>
                <div id="mobileNavItem"><a href="#" style="color: #FFF; text-decoration: none;">SERVICES</a></div>
                <div id="mobileNavItem"><a href="#" style="color: #FFF; text-decoration: none;">INSIGHTS</a></div>
                <div id="mobileNavItem"><a href="#" style="color: #FFF; text-decoration: none;">INDUSTRIES</a></div>
                <div id="mobileNavItem"><a href="#" style="color: #FFF; text-decoration: none;">ABOUT FLOW</a></div>
                <div id="mobileNavItem"><a href="#" style="color: #FFF; text-decoration: none;">CLIENT LOGIN</a></div>
                <div id="contactmenu">Get In Touch</div>
              </div>
              <nav>
                <div class="ham-menu">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </nav>
            <!-- End Mobile Navigation -->
            <!-- Start Main Conetent -->
            <div id="page_content">
                <video id="bostonvideo" autoplay="" muted="" preload="auto"><source src="images/mov/boston.mp4" type="video/mp4">Your browser does not support the video tag.</video>
                <div id="bostonpng"><img src="images/boston.png" style="width: 100%; vertical-align: middle;"></div>
                
                <!-- Start Process Conetent -->
                <div id="processcontainer">
                    <div id="process">
                        <div id="processtitle">
                            The Process
                        </div>
                        <div id="processdescription">
                            Understanding user needs to create designs that deliver business value.
                            <ul style="font-size: 14px; padding-left: 40px; padding-bottom:0px; padding-top:16px; color:#e5f4ff;">
                                <li>Empathise</li>
                                <li>Define</li>
                                <li>Ideate</li>
                                <li>Prototype</li>
                                <li>Test</li>
                                <li>Implement &amp; Learn</li>
                            </ul>
                        </div>
                    </div>
                    <div id="processcontent868">
                        <div id="looptitle">Experiences that drive growth &amp; engagement </div>
                        <img src="images/process868.svg" style="align-self: right; width: auto; height: 317px; object-fit: cover; margin: 0px; padding: 0px; display: block;">
                    </div>
                    <div id="processcontent502">
                        <img src="images/process502.svg" style="width: 100%; height: 317px; object-fit: cover; margin: 0px; padding: 0px; display: block;">
                    </div> 
                    <div id="processcontent300">
                        <img src="images/process300.svg" style="width: 100%; height: 211px; object-fit: cover; margin: 0px; padding: 0px; margin-bottom: 16px; display: block;">
                        <div id="processlables">
                            
                                <div style="font-size: 14px; font-weight: 700; color: #666666; font-family: Avenir Next;">01 Empathize</div>
                                <div style="font-size: 14px; font-weight: 500; color: #999999; font-family: Avenir Next;">Conduct user research to gather insightful information about end-users' needs and problems.</div>
                                <div style="height:1px; background-color: #cccccc; margin-bottom: 8px; margin-top: 4px;"></div>

                                <div style="font-size: 14px; font-weight: 700; color: #bd1c1c; font-family: Avenir Next;">02 Define</div>
                                <div style="font-size: 14px; font-weight: 500; color: #999999; font-family: Avenir Next;">Clearly define the problem based on insights gathered during the first phase.</div>
                                <div style="height:1px; background-color: #cccccc; margin-bottom: 8px; margin-top: 4px;"></div>

                                <div style="font-size: 14px; font-weight: 700; color: #deb821; font-family: Avenir Next;">03 Ideate</div>
                                <div style="font-size: 14px; font-weight: 500; color: #999999; font-family: Avenir Next;">Brainstorm creative solutions and encourage divergent thinking &amp; possibilities </div>
                                <div style="height:1px; background-color: #cccccc; margin-bottom: 8px; margin-top: 4px;"></div>

                                <div style="font-size: 14px; font-weight: 700; color: #666666; font-family: Avenir Next;">04 Prototype</div>
                                <div style="font-size: 14px; font-weight: 500; color: #999999; font-family: Avenir Next;">Develop a tangible or visual representation of the solution to test its functionality and effectiveness.</div>
                                <div style="height:1px; background-color: #cccccc; margin-bottom: 8px; margin-top: 4px;"></div>

                                <div style="font-size: 14px; font-weight: 700; color: #E05708; font-family: Avenir Next;">05 Test</div>                            
                                <div style="font-size: 14px; font-weight: 500; color: #999999; font-family: Avenir Next;">Show your protype to users to see how they respond</div>
                                <div style="height:1px; background-color: #cccccc; margin-bottom: 8px; margin-top: 4px;"></div>

                                <div style="font-size: 14px; font-weight: 700; color: #23A13E; font-family: Avenir Next;">06 Implement</div>
                                <div style="font-size: 14px; font-weight: 500; color: #999999; font-family: Avenir Next;">Build and launch the solution, and monitor and analyse</div>  
                                <div style="height:1px; background-color: #cccccc; margin-bottom: 8px; margin-top: 4px;"></div>

                        </div>
                    </div>                              
                </div>
                <!-- End Process Conetent -->
                <!-- Start Industries Conetent -->
                <div id="industriescontainer">
                    <div id="industriescontent">
                        <div id="industriestitle">Services</div>
                        <!-- Start Slider  -->
                            <div class="slide-container swiper">
                                <div class="slide-content swiper-initialized swiper-horizontal swiper-backface-hidden">
                                    <div class="card-wrapper swiper-wrapper" style="cursor: grab;" id="swiper-wrapper-25fb1d7972cf8fb6" aria-live="polite">
                                        <div class="card swiper-slide swiper-slide-active" role="group" aria-label="1 / 4" data-swiper-slide-index="0" style="width: 216.667px; margin-right: 16px;">
                                        <div class="icon">
                                            <img src="images/designstrategy.svg" width="125">
                                        </div>
                                        <div class="card-content">
                                            <h2 class="name">Design Strategy</h2>
                                        </div>
                                        </div>
                                        <div class="card swiper-slide swiper-slide-next" role="group" aria-label="2 / 4" data-swiper-slide-index="1" style="width: 216.667px; margin-right: 16px;">
                                        <div class="icon">
                                            <img src="images/prototype.svg" width="125">
                                        </div>
                                        <div class="card-content">
                                            <h2 class="name">Rapid Prototyping</h2>
                                        </div>
                                        </div>
                                        <div class="card swiper-slide" role="group" aria-label="3 / 4" data-swiper-slide-index="2" style="width: 216.667px; margin-right: 16px;">
                                        <div class="icon">
                                            <img src="images/creative.svg" width="125">
                                        </div>
                                        <div class="card-content">
                                            <h2 class="name">Creative Execution</h2>
                                        </div>
                                        </div>
                                        <div class="card swiper-slide" role="group" aria-label="4 / 4" data-swiper-slide-index="3" style="width: 216.667px; margin-right: 16px;">
                                        <div class="icon">
                                            <img src="images/useranalysis.svg" width="125">
                                        </div>
                                        <div class="card-content">
                                            <h2 class="name">User Analysis</h2>
                                        </div>
                                        </div>
                                    </div>
                                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                                <div class="swiper-button-next swiper-navBtn" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-25fb1d7972cf8fb6"></div>
                                <div class="swiper-button-prev swiper-navBtn" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-25fb1d7972cf8fb6"></div>
                                <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal swiper-pagination-bullets-dynamic" style="width: 80px;"><span class="swiper-pagination-bullet swiper-pagination-bullet-active swiper-pagination-bullet-active-main" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true" style="left: 24px;"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active-next" tabindex="0" role="button" aria-label="Go to slide 2" style="left: 24px;"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active-next-next" tabindex="0" role="button" aria-label="Go to slide 3" style="left: 24px;"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4" style="left: 24px;"></span></div>
                            </div>
                        <!-- End Slider -->
                    </div>
                </div>
                <!-- End Industries Conetent -->
                <!-- Start Insights Conetent -->
                <div id="insightscontainer">
                    <div id="insightscontent">
                        <div id="insightstitle">Key Insights</div>
                        <div id="insightwrapper">
                            <div id="insightone">
                                <div id="insightshero"><img src="images/strategy.png" width="100%"></div>
                                <div id="insightssubhead">ARTICLE</div>
                                <div id="insightsheadline">Apple's Strategy &amp; Introduction of AI in iPhone 16</div>
                                <div id="insightscopy">
                                    A sound strategy emerges at the critical intersection of business impact, financial impact, and user needs. <a href="#" style="color: #1C75BC;">(more...)</a>
                                </div>
                            </div>
                            <div id="insighttwo">
                                <div id="insightssubhead">ARTICLE</div>
                                <div id="insightsheadlinelarge">How is AI changing the face of Design Systems?</div>
                                <div id="insightscopy">
                                    <div id="dsaiwrapper">
                                        <div id="dsaicontent">
                                            Generative AI (GenAI) is revolutionizing modern design systems by offering unprecedented opportunities for efficiency and scalability. This is where GenAI comes into play. <a href="#" style="color: #1C75BC;">(more)</a>                                
                                        </div>
                                        <div id="dsailogo">
                                            <img style="display: block; margin-left: auto; text-align: justify; float: right; margin: 8px; opacity: .5;" src="images/genai.png" width="150px">
                                        </div>
                                    </div>
                                    <div id="dsaiimage">
                                        <img id="dsai" src="images/dsai.png">
                                    </div>
                                </div>
                            </div> 
                            <div id="insightthree">
                                <img src="images/Headshottall.png" style="margin-left: 8px;" width="50%">
                                <div id="insightssubhead">Author: Ryan Manning</div>
                                <div id="insightsheadline" style="margin-top:6px;">About Key Insights</div>
                                <div id="insightscopy">
                                    Insights help to assess industry trends, understand user needs &amp; gain valuable information.
                                </div>
                            </div>    
                        </div>
                    </div>  
                </div>
                <div id="insightsgrad"></div>
                <!-- End Insights Conetent -->
                <!-- Start Testimonials Content -->
                <div id="testimonialscontainer">
                    <div id="testimonialscontent">
                        <div id="testimonialstitle">Testimonials</div>
                        <div id="testimonialswrapper">
                            <div id="testimonial">
                                <div id="quote">"A rare combination of technical expertise, strategic vision and interpersonal skills."</div>
                                <div id="partner">- Nikolai T. <br><span style="font-size: 12px;">(Lead iOS Engineer)</span></div>
                            </div>
                            <div id="pipe" style="width: 1px; height: 200px; background-color: #b3b3b3; margin-left: 16px; margin-right: 16px;"></div>
                            <div id="testimonial">
                                <div id="quote">"Well-rounded, the glue that holds the creative projects together."</div>
                                <div id="partner">- Elizabeth N. <br><span style="font-size: 12px;">(Executive Recruiter)</span></div>
                            </div>
                            <div id="pipe" style="width: 1px; height: 200px; background-color: #b3b3b3; margin-left: 16px; margin-right: 16px;"></div>
                            <div id="testimonial">
                                <div id="quote">"A true creative talent. Great at recruiting &amp; developing design talent and listens well for input from his partners"</div>
                                <div id="partner">- Fred L. <br><span style="font-size: 12px;">(Founding Director)</span></div>
                            </div>
                            <div id="pipe" style="width: 1px; height: 200px; background-color: #b3b3b3; margin-left: 16px; margin-right: 16px;"></div>
                            <div id="testimonial">
                                <div id="quote">"Always willing to tell it like it is for the best interest of the customer."</div>
                                <div id="partner">- Chris C. <br><span style="font-size: 12px;">(Mobile Product Owner)</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Testimonials Content -->
                <!-- Start Footer Conetent -->
                <div id="footercontainer">
                    <div id="footercontent">
                        <div id="footerlogocontainer">
                            <img id="footerlogo" src="images/footerlogo.png">
                        </div>
                        <div id="footerclientlogin">
                            <div id="footertest"></div>
                            <div id="footerloginlock"><img src="images/footerlock.png"></div>
                            <div id="footerclientlogintext">CLIENT LOGIN</div>
                        </div>
                        <div id="socialscontainer">
                            <div id="socialsspacer"></div>
                            <div id="linkedin"><img src="images/linkedin.svg"></div>
                            <div id="facebook"><img src="images/facebook.svg"></div>
                            <div id="instagram"><img src="images/instagram.svg"></div>
                            <div id="twitter"><img src="images/x.svg"></div>
                        </div>
                        <div id="contactinfo">
                            <div style="font-weight: 600;">FLOW UX Design LLC</div>
                            <div style="font-size: 12px;">9 Mercer Road <br>
                            Needham MA 02494<br>
                            (617) 800-4308<br>
                            <a href="#" style="color: #1C75BC;">[email protected]</a><br></div>
                        </div>
                        <div id="footernav">
                            <div id="footernavspacer"></div>
                            <div id="footeritem">Services</div>
                            <div id="footeritem">Insights</div>
                            <div id="footeritem">Industries</div>
                            <div id="footeritemlast">About FLOW</div>    
                        </div>
                        <div id="copywritecontainer">
                            <div id="copywrite">© Copywrite 2024 FLOW UX Design LLC All Rights Reserved</div>
                            <div id="copywritespacer"></div>
                        </div>
                        <div id="footerwave">
                            <img src="images/WavesLight.png" width="100%">
                        </div>
                    </div>                              
                </div>
                <!-- End Footer Conetent -->
            </div>
            <!-- Start Main Conetent -->
            <!-- Start Masthead Conetent -->
            <div id="login">
                    <div id="lockicon"><img src="images/lock.png"></div>
                    <div id="clientlogin">CLIENT LOGIN</div>
            </div> 
            <div id="logocontainer">
                <img id="logo" src="images/FlowLogoWhiteMastead.png">
            </div> 
            <div id="heroimagecontainer">
                <img src="images/WavesLight.png" id="heroimage" width="100%">
            </div>
            <div id="nav">
                <div id="item_one">About FLOW</div>
                <div id="item">Industries</div>
                <div id="item">Insights</div>
                <div id="item"><a href="services.html" style="color: #FFF; text-decoration: none;">Services</a></div>    
            </div>
            <div id="nav_mask"></div> 
            <div id="nav_grad"></div>
            <!-- End Masthead Conetent -->
           
            
              

        </div>
    </div>
    <script>
        const hamMenu = document.querySelector(".ham-menu");
        
        const offScreenMenu = document.querySelector(".off-screen-menu");
        
        hamMenu.addEventListener("click", () => {
          hamMenu.classList.toggle("active");
          offScreenMenu.classList.toggle("active");
        });
        </script>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- JavaScript -->
<script src="js/sliderscript.js"></script>



</body></html>