芝麻web文件管理V1.00

489495df

编辑当前文件:/home3/mandnweb/afrobeat.club/designingWithATemplate.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title>Designing with a Template</title>
        <meta name="description" content="AfroBeat Bar & Restaurant is a great place to have a delicious dinner or have drinks and meals with friends while sitting down and enjoying the best music in the city.">
    <meta name="keywords" content="club services, restaurant services, party services, night club, night events, vegan restaurants, Bar & Restaurant, local restaurants, local club, dance club , dance club in birmingham, local bar, food near me, places to eat near me, restaurants near my location, Birmingham club and restaurant, disco club, disco club near me, restaurant near me, night events near me, night club near me, gourmet restaurant, party venue , local bar near me, catering services, Reception venue, reception venue near me, restaurant in Birmingham, club in Birmingham, Bars in Birmingham, disco bar, Bar and Restaurant in birmingham, restaurant menu, drink menu, List of non-alcoholic mixed drinks, Food service industry, beverage industry, food services, event rentals, restaurants that deliver near me, restaurant menus, restaurants open now, find restaurants near me, best restaurant in Birmingham ">
 
</head>

<body>
        
        <div class="sec1">
        <style>
                .body-col{
                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                }
                .body-col2 h1{
                        font-size: 36px;
                        font-weight: 700;
                        color: #074969;
                        
                }
                .body-col2{
                        padding-left: 8%;
                        flex-basis: 50%;
                }
                .body-col1{
                        padding-top: 1%;
                        flex-basis: 20%;
                        background-color: #F7F8F8;
                }
                .body-col ul li{
                        list-style: none;
                        padding:5% 5% 5% 0%

}
                .body-col ul li a{
                        text-decoration: none;
                        font-size: 14px;
                        color: #074969;
                        
                }
                .body-col ul li a:hover{
                        text-decoration: none;
                        font-size: 14px;
                        color: #0985c4;
                        
                }
                .numlist{
                        display: flex;
                        flex-direction: row;
                }
                .social-icon li a{
                        transition: all ease-in-out 300ms;
                         border-radius: 50px;border: 0.5px solid #B4BFCD;padding:35%;
                }
                .social-icon li a:hover {
                        transition: all ease-in-out 300ms;
                       border: 0.5px solid #696969;
                }
                .social-icon li a i{
                        transition: all ease-in-out 300ms;
                        font-size: 18px;color: #B4BFCD;
                }
                .social-icon li a:hover i{
                        transition: all ease-in-out 300ms;
                       color:#696969;
                }
                .social{
                        display: flex;
                        align-items: center;
                }
                .social-icon{
                        display: flex;
                }
                .social-icon li{
                        width: 50px;
                }
                .social-col{
                        flex-basis: 100%;
                }
                @media only screen and (max-width: 580px){
                        .body-col ul li{
                        padding:2% 5% 2% 0%

} 
                .social{
                        flex-direction: column;
                        justify-content: center;
                }
                .social-col2{
                       margin-left: -50px;
                }
               
                }
                
               
        </style>
        <section class="body-col body-col1">

<ul>
                        <li><a href=""><i style="font-size: 10px;" class="fas fa-chevron-left"></i>  Back</a></li>
                       <li><a href="">How to Change Template</a></li>
                       <li><a href="">How to Delete Template</a></li>
                       <li><a href="">How to Design from Scratch</a></li>
                       <li><span style="font-weight: 700;border-left: 3px solid #074969 ;color: #074969;font-size: 14px;"> How to Design with a Template</span></li>
                       <li><a href="">How to Edit a Template</a></li>
               </ul> 
        </section>

<section class="body-col body-col2">
               <h1>How to Design with a Template?</h1>
               <p style="color: #6b7581; font-size: 13px;font-weight: 400;">Last updated on July 12, 2021</p>

<div class="numlist" style="margin-top: -1%;">
                        <p><span style="background-color: #EEF2F7; padding:5px 12px; border-radius: 20px;">1</span></p>
                        <div>
                        <p style="padding:0px 12px;">From the homepage, select from a variety of templates to choose from. </p>
                        </div>
                </div>
                <div class="numlist" style="margin-top: -1%;">
                        <p><span style="background-color: #EEF2F7; padding:5px 12px; border-radius: 20px;">2</span></p>
                        <div>
                        <p style="padding:0px 12px;">Click on the template that you’ve selected.</p>
                        <img src="https://afrobeat.club/images/brochure.jpg" alt="" style="width: 70%;margin-left: 9%;">
                        </div>
                </div>
                <div class="numlist" style="margin-top: -1%;">
                        <p><span style="background-color: #EEF2F7; padding:5px 12px; border-radius: 20px;">3</span></p>
                        <div>
                        <p style="padding:0px 12px;">A. If not logged in, you will be redirected to the M&N Web login page to sign up with a new account or to login with an existing one.</p>
                        <img src="https://afrobeat.club/images/ifNotLogin.jpg" alt="" style="width: 70%;margin-left: 9%;">
                        </div>
                </div>
                <div class="numlist" style="margin-top: -1%;">
                        <p><span style="background-color: #ffffff; padding:5px 12px; border-radius: 20px;"></span></p>
                        <div>
                        <p style="padding:0px 12px;">B. If already logged in, you will be redirected to the graphic editor page with a new blank canvas to work on.</p>
                        <img src="https://afrobeat.club/images/ifLogin2.jpg" alt="" style="width: 70%;margin-left: 9%;">
                        </div>
                </div>
                
                <hr style="height:1px;border-width:0;color:#EDEDED;background-color:#E7E9EB;margin-top: 5%;margin-bottom: 5%;">
                <div class="social">
                        <div class="social-col">
                                <p>Share it on social networks</p>
                        </div>
                        <div class="social-col social-col2">
                                <ul class="social-icon">
                                        <li><a href=""style=" " ><i class="fa fa-facebook"style="padding:0px 3px;"></i></a></li>
                                        <li><a href="https://www.linkedin.com/company/afrobeat-limited/" style=" " ><i class="fa fa-twitter"></i></a></li>
                                        <li><a href=""style=" " ><i class="fa fa-linkedin"></i></a></li>
                                        <li><a href=""style=" " ><i class="fa fa-envelope"></i></a></li>
                                        
                                </ul> 
                        </div>
                </div>
                <hr style="height:1px;border-width:0;color:#EDEDED;background-color:#E7E9EB;margin-top: 5%;margin-bottom: 5%;">

}
                        .submit-button:hover{
                                transition: all ease-in-out 300ms;
                                background-color:#0c7bb3 ;

}
                        .message-textArea{
                                margin-top: 5%;
                        }
                        .textArea-box{
                                margin-left: 0px; margin-right: 0px; width: 500px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;padding: 10px;border-radius: 5px;margin-bottom: 10px;
                        }
                        @media only screen and (max-width: 580px){
                        .textArea-box{
                               width: 400px;
                        }

} 
                }
                </style>

<div>
                        <h4>Was this article helpful?</h4>
                        <form action="">
                                <span>
                                        <input type="radio" value="Yes, thanks!" id="form-field-message-0" name="form_fields[message]" required="required" aria-required="true">
                                        <label for="form-field-message-0">Yes, thanks!</label>
                                </span>
                                <span class="">
                                        <input type="radio" value="Not Really" id="form-field-message-1" name="form_fields[message]" required="required" aria-required="true"> <label for="form-field-message-1">Not Really</label>
                                </span>
                                <div class="message-textArea">
                                        <label for="form-field-field_85fc9ed" class="elementor-field-label" >Can you tell us more about your experience?</label><br><br>
                                        <textarea name="form_fields[field_85fc9ed]" id="form-field-field_85fc9ed" rows="4" placeholder="Type here..." class="textArea-box" ></textarea>
                                        <button type="submit" class="submit-button">
						<span class="">Submit Feedback</span>	
					</button>
                                </div>
                        </form>
                </div>

<body>

</body>
</html>