<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
div{text-align: right;margin-top: 20px }
.defaultTitle{margin-left: 30px;font-size: 20px;font-weight: bold}
.defaultMessage{margin-left: 30px;font-size: 10px; width: 1000px;}
.backgroundTheme1{background-color: lightcoral}
.backgroundTheme2{background-color:lightseagreen}
.backgroundTheme3{background-color:limegreen}
.titleTheme1{font-size: 40px;color: purple}
.titleTheme2{font-size: 60px;color:red}
.titleTheme3{font-size: 80px;color:blue}
.messageTheme1{font-size: 20px;color: purple}
.messageTheme2{font-size: 30px;color:red}
.messageTheme3{font-size: 40px;color:blue}
</style>
</head>
<body>
<div class=' container-fluid'> <label for="theme">Select theme</label>
<select id="theme">
<option value='theme1'>Theme 1</option>
<option value='theme2'>Theme 2</option>
<option value='theme3'>Theme 3</option>
</select>
</div>
<p class="defaultTitle" id='title'>Cristiano Ronaldo</p>
<p class='defaultMessage' id='message'>Cristiano Ronaldo dos Santos Aveiro GOIH ComM (European Portuguese: [kɾiʃˈtjɐnu ʁoˈnaɫdu]; born 5 February 1985) is a
Portuguese professional footballer who plays as a forward for Italian club Juventus and captains the Portugal national team.
Often considered the best player in the world and regarded by many as one of the greatest players of all time,[4][5][6] Ronaldo
has a record-tying five Ballon d'Or awards,[note 2] the most for a European player, and is the first player to win four European
Golden Shoes. He has won 27 trophies in his career, including five league titles, five UEFA Champions League titles and one UEFA
European Championship. A prolific goalscorer, Ronaldo holds the records for most official goals scored in Europe's top-five leagues
(414), the UEFA Champions League (124), the UEFA European Championship (9), as well as those for most assists in the UEFA Champions
League (34) and the UEFA European Championship (6). He has scored 700 senior career goals for club and country.</p>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script>
$('#theme').bind('change keyup',function(){
let theme = $('#theme').val();
if(theme==='theme1')
{
$('body').addClass('backgroundTheme1')
$('#title').addClass('titleTheme1')
$('#message').addClass('messageTheme1')
}
else if(theme==='theme2')
{
$('body').addClass('backgroundTheme2')
$('#title').addClass('titleTheme2')
$('#message').addClass('messageTheme2')
}
else if(theme==='theme3')
{
$('body').addClass('backgroundTheme3')
$('#title').addClass('titleTheme3')
$('#message').addClass('messageTheme3')
}
})
</script>
</body>
</html>
Load balance : Server 03
