лр 4

У цьому завданні нам потрібно було відредагувати домашню сторінку, код JavaScript та SCSS.
По
закінченню треба було виконати такі завдання:
Видалиии атрибути даних -* з кнопки резервна таблиця і посилання входу в Navbar, які керують
двома модулятами.
Оновити кнопку і посилання так, щоб при натисканні вони активували відповідний код JavaScript.
У комплект входить відповідний код JavaScript з використанням модальних методів для

перемикання показу і приховування модалів при натисканні на дві кнопки.
Додати SCSS-код для моделювання модального з кольорами.
Такі завдання нам було надано:
Завдання 1
У цьому завданні ви вилучете атрибути даних -* з кнопки резервна таблиця у Jumbotron, які
уможливлять токання модальної резервної таблиці. Аналогічно, ви також вилучите атрибути даних
-* з посилання Login у Navbar, що запускає модал реєстрації.
Завдання 2
У цьому завданні ви додасте відповідний код JavaScript на сторінку таким чином, щоб програма
reserve Table Modal була увімкненою, коли буде натиснуто кнопку резервної таблиці:
До скрипту буде додано відповідний код JavaScript.
Ви оновите кнопку так, щоб програма увімкнула модал, коли ви натиснете кнопку.
Завдання 3
У цьому завданні ви додасте відповідний код JavaScript на сторінку таким чином, щоб модал входу
був увімкнутим, коли ви клацнете посилання Login:
До скрипту буде додано відповідний код JavaScript.
Ви оновите посилання Login таким чином, щоб модал запускавсь після натискання посилання.
Завдання 4
У цьому завданні ви додасте відповідний код SCSS до стилів.scss , відповідно кольори Modal
будуть відповідним чином стильні. Ці кольори вже налаштовано у файлі stales.scss.
Ви можете встановити модальний заголовок на темне тло і змінити колір тексту на floralwhite, а
потім скористатися вкладенням для зміни кольору кнопки close на floralwhite.
<!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">

<title>Ristorante Con Fusion</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">



</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img
src="img/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span
class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="aboutus.html"><span class="glyphicon glyphicon-
info-sign"
aria-hidden="true"></span> About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown"
role="button" aria-haspopup="true" aria-
expanded="false"><span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span> Menu <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Appetizers</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
<li><a href="#">Drinks</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li><a href="#">Lunch Buffet</a></li>
<li><a href="#">Weekend Brunch</a></li>
</ul>
</li>
<li>
<a href="contactus.html">
<i class="fa fa-envelope-o"></i> Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="modal" data-target="#loginModal">
<span class="glyphicon glyphicon-log-in"></span>
Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="loginModal" class="modal fade" role="dialog">

<div class="modal-dialog">

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputEmail">Email
address</label>
<input type="email" class="form-control input-sm"
id="InputEmail" placeholder="Email">
</div>
<label class="sr-only"
for="InputPassword">Password</label>
<input type="password" class="form-control input-sm"
id="InputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
<button type="submit" class="btn btn-info btn-sm">Sign
in</button>
<button type="button" class="btn btn-default btn-sm"
data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>

<header class="jumbotron">

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title">Reserve Table</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<label for="numberOfGuests-id" class="col-xs-12 col-
sm-2 control-label">Number of Guests</label>
<div class="radio radio-inline col-xs-12 col-sm-10">

<label class="radio-inline">
<input type="radio" name="numberOfGuests"
id="numberOfGuests-id" value="1guest">1
</label>
id="numberOfGuests-id" value="2guests">2
</label>
id="numberOfGuests-id" value="3guesrs">3
</label>
id="numberOfGuests-id" value="4guesrs">4
</label>
</label>
</label>
</div>
</div>
<label for="date" class="col-xs-12 col-sm-2 control-
label">Section</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" class="btn btn-danger"
name="options" id="option_non_smoking" autocomplete="off" checked>Non-Smoking
</label>
<label class="btn btn-danger">
<input type="radio" name="options"
id="option_smoking" autocomplete="off">Smoking
</label>
</div>
</div>

<div class="form-group has-feedback">
<label for="date" class="col-xs-12 col-sm-2 control-
label">Date and Time</label>
<input type="text" class="form-control"
id="date" name="date" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-
control-feedback" aria-hidden="true"></span>
</div>
<div class="col-xs-6 col-sm-offset-1 col-sm-3">
<input type="text" class="form-control"
id="time" name="time" placeholder="Time">
<span class="glyphicon glyphicon-time form-
control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-
primary">Reserve</button>
<button type="button" class="btn btn-default"
data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
<div class="alert alert-warning alert-dismissible"
role="alert">
<button type="button" class="close" data-dismiss="alert"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Warning:</strong>: Please <a href="tel:
+85212345678" class="alert-link">call</a> us to reserve for more than six
guests.
</div>
</div>
</div>
</div>
</div>

<div class="row row-content">
<div class="col-xs-12">
<div id="mycarousel" class="carousel slide" data-
ride="carousel">

<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"
class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner" role="listbox">


<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive"
src="img/uthappizza.png" alt="Uthappizza">
<div class="carousel-caption">
<h2>Uthappizza <span class="label label-
danger">Hot</span> <span class="badge">$4.99</span></h2>
<p>A unique combination of Indian Uthappam
(pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry
tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs"
href="#">More »</a></p>
</div>
</div>
<div class="item">
src="img/buffet.png" alt="Buffet">
<h2>Weekend Grand Buffet <span class="label
label-danger label-xs">New</span></h2>
<p>Featuring mouthwatering combinations with
a choice of five different salads, six enticing appetizers, six main entrees and
five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99
per person </p>
<p><a class="btn btn-primary btn-xs" href="#">More
»</a></p>
</div>
</div>
<div class="item">
src="img/alberto.png" alt="Alberto
Somayya">
<h2 class="media-heading">Alberto
Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef
with wide International experience having worked closely with whos-who in the
culinary world, he specializes in creating mouthwatering Indo-Italian fusion
experiences.
</p>
<p><a class="btn btn-primary btn-xs"
href="#">More »</a></p>
</div>
</div>
</div>
</div>

<a class="left carousel-control" href="#mycarousel"
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-
hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel"
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-
hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-3 col-sm-push-9">
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
src="img/uthappizza.png" alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">Uthappizza <span class="label
label-danger">Hot</span> <span class="badge">$4.99</span></h2>
<p>A unique combination of Indian Uthappam (pancake)
and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
»</a></p>
</div>
</div>
</div>
</div>

<h3 align=center>This Month's Promotions</h3>
</div>
<div class="media">
<h2 class="media-heading">Weekend Grand Buffet <span
class="label label-danger">New</span></h2>
<p>Featuring mouthwatering combinations with a choice of
five different salads, six enticing appetizers, six main entrees and five
choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per
person </p>
»</a></p>
</div>
<div class="media-right">
<a href="#">
src="img/buffet.png" alt="Buffet">
</a>
</div>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-3 col-sm-push-9">
<h3 align=center>Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
src="img/alberto.png" alt="Alberto Somayya">
</a>
</div>
<h2 class="media-heading">Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide
International experience having worked closely with whos-who in the culinary
world, he specializes in creating mouthwatering Indo-Italian fusion experiences.
</p>
»</a></p>
</div>
</div>
</div>
</div>
</div>
<footer class="row-footer">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a
href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus"
href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook"
href="http://www.facebook.com/profile.php?id="><i class="fa fa-
facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin"
href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter"
href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube"
href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i
class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></
script>

<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Рис.1 Загальний вигляд коду

.row-header{
margin:0px auto;
padding:0px auto;
}
.row-content {
margin:0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: #7986CB ;
color:floralwhite;
}
address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}
body{
padding:50px 0px 0px 0px;
z-index:0;
}
.navbar-inverse {
background: #303F9F;
}
.navbar-inverse .navbar-nav > .active > a,

.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #fff;
background: #1A237E;
}
.navbar-inverse .navbar-nav > .open > a,

.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #fff;
background: #1A237E;
}
.navbar-inverse .navbar-nav .open .dropdown-menu> li> a,

.navbar-inverse .navbar-nav .open .dropdown-menu {
background-color: #303F9F;
color:#eeeeee;
}
.navbar-inverse .navbar-nav .open .dropdown-menu> li> a:hover {

color:#000000;
}
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.affix {
top:100px;
}
.carousel {
background:#1A237E;
}
.carousel .item {
height: 300px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
.modal-header {
background-color: #512DA8;

}
.modal-title {
color: #D1C4E9;
}
.modal-body {
background-color: #9575CD;
}
Рис.2 вигляд файлу SCSS-коду

лр 4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

лр 4

Uploaded by

Copyright:

Available Formats

У цьому завданні нам потрібно було відредагувати домашню сторінку, код JavaScript та SCSS.

У комплект входить відповідний код JavaScript з використанням модальних методів для

Додати SCSS-код для моделювання модального з кольорами.

Такі завдання нам було надано:

До скрипту буде додано відповідний код JavaScript.

До скрипту буде додано відповідний код JavaScript.

<div id="loginModal" class="modal fade" role="dialog">

<div id="reserveModal" class="modal fade" role="dialog">

<div class="radio radio-inline col-xs-12 col-sm-10">

<div class="row row-content">

<div class="row row-content">

Рис.1 Загальний вигляд коду

.navbar-inverse .navbar-nav > .active > a,

.navbar-inverse .navbar-nav > .open > a,

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a,

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a:hover {

You might also like