PackDevs · Dannydaniel1231 · Aug 24, 2022 · Aug 25, 2022 · Aug 26, 2022
diff --git a/Coca-Cola.png b/Coca-Cola.png
diff --git a/Orange2.png b/Orange2.png
diff --git a/cocktail-logo.png b/cocktail-logo.png
diff --git a/cocktail_left.png b/cocktail_left.png
diff --git a/cocktail_right.png b/cocktail_right.png
diff --git a/dry_ martini.jpg b/dry_ martini.jpg
diff --git a/image2.png b/image2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!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">
+
+<!-- Latest compiled and minified CSS -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+
+<!-- Latest compiled JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+<title>Document</title>
+</head>
+<body>
+
+
+
+    <img src="logo.png">  
+    <div class="head">
+        <div class="home">Home</div>
+        <div class="API">API</div>
+        <div class="rt">Form</div>
+        <div class="ty">F</div>
+        <div class="ut">#</div>
+        <input type="text" placeholder="search" width="50px">
+    </div>
+        <form action="/action_page.php">
+
+
+
+  <div class="first">
+                 <div class="image">
+                            <img src="cocktail_left.png" width="200px;" height="250px"> 
+                           <img src="cocktail_right.png" width="200px;" height="250px"> 
+                  </div>
+        <h2>  Welcome to TheCocktailDB</h2>
+        <p>An open, crowd-sourced database of drinks and cocktails from around the world.<br>
+            We also offer a free JSON API for anyone wanting to use it.<br>
+            If you like the site, please consider supporting us on Patreon by clicking the link below...</p>
+        <div class="logo">
+            <img src="patreon_logo (1).png" width="250px" height="70px"><br><a >Click to Support: Currently 750 supporters</a>
+        </div>
+    </div>
+    <input type="text" placeholder="search for a cocktail...."><input type="search"></button><br><img src="cocktail-logo.png"> Total Drinks: 635 c<img src="ingredient-logo.png">Total Ingredients: 489<img src="image2.png">Drink Images: 635(90cc)
+    <div id="root">
+
+    </div>
+</body>
+<script src="index.js">
+
+</script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,63 @@
+const images=[
+    {
+        name:"lemone",
+         image:'lemone.jpg',
+
+     },
+    {
+        name:"orange",
+        image:'./orange.jpg'
+    },
+    {
+        name:"oranges",
+        image:'./orange.jpg'
+    },
+    {
+        name:"coca-cola",
+        image:'./Coca-Cola.png',
+    },
+    {
+        name:"mandalene",
+        image:"mandalene.jpg",
+    },
+    // {
+    //     // name:"orange",
+    //     // image:"orange2.jpg",
+    // },
+    {
+        name:"margarita",
+        image:"margarita.jpg",
+    },
+    // {
+    //     // name:"martini",
+    //     // image:"martini.jpg",
+    // }
+];
+
+
+// console.log(alpha);
+// const root=document.getElementById('root');
+// const names=document.getElementById('name')
+// root.innerHTML=`<h1>${images[0].name}</h1>`
+// {images.map((image)=>{
+//     root.innerHTML +=`<img src= '${image.image}' >`;
+
+// } )}
+
+const photo=(image,name)=>{
+
+const photos=`
+
+<div class="card">
+  <div class="card-body"><img src=${image}> </div>
+  <div class="card-footer">${name}</div>
+</div>
+`
+root.innerHTML+=photos;
+}
+
+
+// images.map((photo)=>{ root.innerHTML +=`<img src= ` ${image.photo}})
+images.map(data=>{
+    photo(data.image,data.name);
+})
diff --git a/ingredient-logo.png b/ingredient-logo.png
diff --git a/lemone.jpg b/lemone.jpg
diff --git a/logo.png b/logo.png
diff --git a/mandalene.jpg b/mandalene.jpg
diff --git a/margarita.jpg b/margarita.jpg
diff --git a/orange.jpg b/orange.jpg
diff --git a/patreon_logo (1).png b/patreon_logo (1).png
diff --git a/style.css b/style.css
@@ -0,0 +1,75 @@
+.head {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: rgb(44, 4, 4);
+  background-color: rgb(35, 3, 18);
+  color: white;
+}
+
+.image {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-left: 200px;
+}
+
+.first {
+  display: flex;
+  align-items: center;
+  gap: 20rem;
+  color: white;
+  width: 100%;
+  height: 6rem;
+  padding-left: 15rem;
+  padding-top: 1rem;
+  background-color: rgb(35, 3, 18);
+}
+
+body {
+  background-color: rgb(35, 3, 18);
+}
+
+#root {
+  border-right: none;
+  border-left: none;
+  border: solid white;
+  align-items: center;
+  justify-content: center;
+  grid-gap: 10px;
+  height: 800px;
+  width: 1000px;
+  background-color: rgb(35, 3, 18);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.logo img {
+  margin-left: 500px;
+}
+
+#root img {
+  background-color: rgb(35, 3, 18);
+  color: rgb(35, 3, 18);
+  widows: 330px;
+  height: 300px;
+}
+
+a {
+  color: green;
+}
+
+.first p {
+  margin-top: -10px;
+  width: 500px;
+  margin-left: 400px;
+  color: white;
+}
+
+.first h2 {
+  margin-left: 500px;
+  margin-top: -250px;
+  color: white;
+}/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
diff --git a/style.map b/style.map
diff --git a/style.scss b/style.scss
@@ -0,0 +1,91 @@
+$color:rgb(35,3,18);
+$dcolor:white;
+$bspan:orange;
+$span:rgb(68,61,64);
+
+.head{
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: rgb(44,4,4);
+    // width: 100%;
+    // height: 6rem;
+
+
+    // grid-template-columns: repeat(5,1fr);
+    background-color:$color ;
+    color: $dcolor;
+    // grid-gap:10px;
+
+
+}
+.image{display: grid;
+    grid-template-columns: repeat(2,1fr);
+
+    margin-left: 200px;
+    // margin-top: px;
+}
+ .first{display: flex;
+    align-items:center ;
+    gap: 20rem;
+    color:white;
+    // width: 100%;
+    height: 6rem;
+    // padding-left: 15rem;
+    padding-top: 1rem;
+
+    // grid-gap:10px;
+
+     background-color: $color;
+    // display: grid;
+    // grid-template-columns: repeat(4,1fr);
+
+}
+body{
+    background-color:$color ;
+}
+#root{
+    border-right: none;
+    border-left: none;
+    border:solid $dcolor;
+    align-items: center;
+    justify-content: center;
+    grid-gap: 10px;
+    height: 800px;
+    width: 1000px;
+    background-color: $color;
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+}
+.logo img{
+    margin-left: 500px;
+}
+#root img{
+    background-color:  $color;
+    color: $color;
+    widows: 330px;
+    height: 300px;
+}
+a{
+    color:green;
+}
+
+.first p{
+    margin-top: -10px;
+    width: 500px;
+
+    margin-left: 400px;
+    color:$dcolor ;
+
+}
+.first h2{
+    margin-left: 500px;
+    margin-top: -250px;
+    color:$dcolor ;
+
+
+
+}
diff --git a/tea.jpg b/tea.jpg
diff --git a/vdka tonic.jpg b/vdka tonic.jpg