"Untitled"
Bootstrap 4.1.1 Snippet by nileshkardate

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="options"> <label for="font-size">Font Size:</label> <input type="range" id="font-size" min="12" max="48" value="24"> <label for="font-color">Font Color:</label> <input type="color" id="font-color" class="color-picker" value="#000000"> <label for="background-color">Background Color:</label> <input type="color" id="background-color" class="color-picker" value="#ffffff"> <input type="text" id="preview-text-input" placeholder="Enter preview text" value="Blocked !"> <button id="reset-btn">Reset</button> <button id="apply-btn">Apply</button> </div> <div class="browser-container"> <div id="browser-bar"> <input type="text" readonly value="https://www.example.com"> </div> <div class="main-content"> <div id="web-preview-container"> <h1 id="preview-text">Blocked !</h1> <p>This Website is Blocked in your country</p> </div> </div> </div> <script src="script.js"></script> </body> </html>
body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } .browser-container { display: flex; flex-direction: column; align-items: center; width: 80%; max-width: 800px; background-color: #f1f1f1; margin-top: 20px; padding: 20px; } #browser-bar { display: flex; justify-content: center; background-color: #f1f1f1; padding: 8px; width: 100%; } #web-preview-container { display: flex; flex-direction: column; align-items: center; width: 100%; background-color: black; color: white; margin-top: 20px; padding: 30px; } #preview-text { font-size: 24px; text-align: center; margin-bottom: 20px; } #web-preview-container p { font-size: 18px; } #browser-bar input { width: 100%; border: none; padding: 5px; } .main-content { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .options { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #f1f1f1; padding: 10px; box-sizing: border-box; } .options label { margin-right: 10px; } @media (max-width: 768px) { .options { width: 100%; } }
const webPreview = document.getElementById('web-preview-container'); const previewText = document.getElementById('preview-text'); const fontSizeSlider = document.getElementById('font-size'); const fontColorPicker = document.getElementById('font-color'); const backgroundColorPicker = document.getElementById('background-color'); const previewTextInput = document.getElementById('preview-text-input'); const resetBtn = document.getElementById('reset-btn'); const applyBtn = document.getElementById('apply-btn'); function applyOptions() { const fontSize = fontSizeSlider.value + 'px'; const fontColor = fontColorPicker.value; const backgroundColor = backgroundColorPicker.value; const customText = previewTextInput.value; previewText.style.fontSize = fontSize; previewText.style.color = fontColor; webPreview.style.backgroundColor = backgroundColor; if (customText.trim() !== '') { previewText.innerText = customText; } else { previewText.innerText = 'Blocked !'; } } fontSizeSlider.addEventListener('input', applyOptions); fontColorPicker.addEventListener('change', applyOptions); backgroundColorPicker.addEventListener('change', applyOptions); previewTextInput.addEventListener('input', applyOptions); resetBtn.addEventListener('click', () => { fontSizeSlider.value = 24; fontColorPicker.value = '#000000'; backgroundColorPicker.value = '#ffffff'; previewTextInput.value = 'Blocked !'; applyOptions(); }); applyBtn.addEventListener('click', applyOptions); applyOptions();

Related: See More

Argon Design System

Questions / Comments: