HTML-CSS-Coursework-Week3/javier.html at master · javisanchez29/HTML-CSS-Coursework-Week3 · GitHub

163 lines (150 loc) · 7.44 KB

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script src="https://kit.fontawesome.com/286b7e7657.js" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link rel="stylesheet" href="javier.css">

<title>Pasteleria</title>

</head>

<body>

<header>

<nav class="navegacion">

<div class="row imagenlogo">

<div class="col col-sm-4 col-md-4 pt-4 ">

<p class="sabores1 titulo">Saborés</p>

</div>

<div class="col col-sm-4 col-md-4 ">

<div class="dropdown">

<button type="button" class=" botondemenu" data-bs-toggle="dropdown"><img src="https://png.pngtree.com/element_our/20190601/ourmid/pngtree-menu-icon-image_1344445.jpg" width="30" height="30"></button>

<ul class="dropdown-menu menudown ">

<li><a class="dropdown-item" href="">Casa</a></li>

<li><a class="dropdown-item" href="">Contacto</a></li>

<li><a class="dropdown-item" href="">Ordenes</a></li>

</ul>

</div>

<p class="sabores1 eslogan" >Los mejores pasteles de la ciudad<br>

entregados en tu puerta.</p>

</div>

</nav>

<div class="col col-sm col-md order-first columnaprincipal movil">

<h2 style="text-align: center; font-size: 30px;">Bienvenido</h2>

<p style="text-align: center; font-size: 20px; font-family:Verdana, Geneva, Tahoma, sans-serif;">Ven y disfruta de los mejores pasteles, una variedada y delicia creados con la receta de mamá.</p>

</div>

<div class=" col col-sm col-md columna2 order-last">

<div class="container-sm container-md container-lg p-0 my-5 border shadow-sm contenedor1 movil">

<img class="ms-5 movil" src="https://cdn7.kiwilimon.com/recetaimagen/16297/8238.jpg" width="400" height="400" >

<p>Pastel rosa</p>

<p>5.50 €</p>

<p>Domicilio 7.00 €</p>

</div>

</div>

<nav class="nav2">

<div class="row">

<div class="col-lg-4">

<img class="mx-auto d-block" src="https://img.freepik.com/foto-gratis/vista-frontal-concepto-delicioso-pastel_23-2148769309.jpg" alt="" width="70" height="70">

<p class="sabores1 titulo">Saborés</p>

</div>

<div class="col-lg-8">

<p>Los mejores pasteles de la ciudad entregados en tu puerta.</p>

</div>

</div>

<menu class="shadow">

<ul>

<li><a href="">Casa</a></li>

<li><a href="">Contacto</a></li>

<li><a href="">Ordenes</a></li>

<li><a href="">Lección</a></li>

<li><a href="">sobre</a></li>

</ul>

</menu>

</nav>

</header>

<main>

<div class="row grandep">

<div class="col-lg col-xl-6 col-xxl-6 order-last columnaprincipal">

<h2>Bienvenido</h2>

<p>Ven y disfruta de los mejores pasteles, una variedada y delicia creados con la receta de mamá.</p>

</div>

<div class="col-lg col-xl-6 col-xxl-6 columna2 grandep order-first">

<div class="container-sm container-lg p-0 my-5 border shadow-sm contenedor1 ">

<img class="ms-5 imagePrincipal" src="https://cdn7.kiwilimon.com/recetaimagen/16297/8238.jpg" width="500" height="400" >

<p>Pastel rosa</p>

<p>5.50 €</p>

<p>Domicilio 7.00 €</p>

</div>

</div>

</div>

<div class="row m-0 ">

<div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">

<div class="container container-sm container-md container-lg container-xl container-xxl p-0 my-5 border shadow-sm contenedor1">

<img class="ms-3 coffe pasteltodos" src="https://cdn.colombia.com/gastronomia/2012/04/13/pastel-de-cafe-3058.jpg" width="250" height="230" >

<p>Pastel coffe</p>

<p>6.00 €</p>

<p>Domicilio 7.50 €</p>

</div>

</div>

<div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">

<div class="container container-sm container-md container-lg container-xl container-xxl p-0 my-5 border shadow-sm contenedor1">

<img class="ms-3 pasteltodos" src="https://www.wikichef.net/content/uploads/recipes/363d42_pastel-de-naranja_w1000.jpg" width="250" height="230" >

<p>Pastel amarillo</p>

<p>5.50 €</p>

<p>Domicilio 7.00 €</p>

</div>

</div>

<div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">

<div class="container container-sm container-md container-lg container-xl container-xxl p-0 my-5 border shadow-sm contenedor1">

<img class="ms-3 pasteltodos" src="https://lacocinadefrabisa.lavozdegalicia.es/wp-content/uploads/2020/11/bundt-cake-de-mandarina-para-Navidad..jpg" width="250" height="230" >

<p>Pastel naranja</p>

<p>5.50 €</p>

<p>Domicilio 7.00 €</p>

</div>

</div>

<div class="col-6 col-sm-6 col-md-6 col-lg-3 col-xl-3">

<div class="container container-sm container-md container-lg container-xl container-xxl p-0 my-5 border shadow-sm contenedor1">

<img class="ms-3 pasteltodos" src="https://cocina-casera.com/wp-content/uploads/2018/01/Tarta-de-oreo-2.jpg" width="250" height="230" >

<p>Pastel oreo</p>

<p>8.00 €</p>

<p>Domicilio 9.50 €</p>

</div>

</div>

</div>

</main>

<footer>

<div class="row movil">

<div class="col">

<ul>

<li> <a href="">Casa</a></li>

<li> <a href="">Contacto</a></li>

<li> <a href="">Ordenes</a></li>

</ul>

</div>

<div class="col">

<ul>

<li> <a href=""><i class="fa-brands fa-twitter-square"></i></a></li>

<li> <a href=""><i class="fa-brands fa-instagram-square"></i></a></li>

<li> <a href=""><i class="fa-brands fa-twitter-square"></i></a></li>

</ul>

</div>

<p style="text-align: center; color: #C7F936;">Saborés a tu antojó</p>

</div>

<menu class="grandefooter">

<ul>

<li> <a href="">Casa</a></li>

<li> <a href="">Contacto</a></li>

<li> <a href="">Ordenes</a></li>

</ul>

<p>Saborés a tu antojó</p>

</menu>

</footer>

</body>

</html>