Project-3-build a-small-business-website

اوسمتي · #1 11-26-2024, 09:19 AM

a-small-business-website , project-3-build

Project-3-build a-small-business-website

PROJECT-3-BUILD A-SMALL-BUSINESS-WEBSITE

<!DOCTYPE html>
<head>
<link href="/normalize.css" rel="stylesheet">
<style>
header {
text-align: center;
background: url('http://dash.ga.co/assets/jeff-bg.png');
background-size: cover;
color: white;
}
a {
color: white;
}
h1 {# PROJECT-3-BUILD-A-SMALL-BUSINESS-WEBSITE
ESHA'S RESTAURANT

<!DOCTYPE html>
<head>
<script src="/assets/jquery.js"></script>
<link href='https://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'>
<style>
body {
font-family: helvetica, sans-serif;
margin: 0 auto;
max-width: 600px;
background: #232323;
}
div {
height: 200px;
background-size: cover;
position: relative;
margin: 40px 0 0 0;
border-radius: 12px;
}
h1 {
font-family: 'Londrina Shadow', cursive;
text-align: center;
font-size: 75px;
color: #aaaaaa;
margin: 60px 0 0 0;
}
h2 {
text-align: center;
color: #bbbbbb;
margin: 0px 0 70px 0;
}
p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: absolute;
bottom: 0;
margin: 0;
height: 30px;
transition: height .5s;
-webkit-transition: height .5s;
-moz-transition: height .5s;
}

small {
opacity: 0;
}

.show-description p {
height: 150px;
}

.show-description small {
opacity: 1;
}

.first{
background-image: url("http://dash.ga.co/assets/firstcourse.jpg");
}
.second{
background-image: url("http://dash.ga.co/assets/secondcourse.jpg");
}
.dessert{
background-image: url("http://dash.ga.co/assets/dessertcourse.jpg");
}
.price {
float: right;
}
@media (max-width: 500px) {
h1 {
font-size: 50px;
margin-top: 20px;
line-height: 40px;
}
h2 {
font-size: 20px;
margin: 20px 0 30px 0;
}
div {
margin: 20px 12px 0 12px;
}
p {
font-size: 20px;
line-height: 24px;
}
small {
font-size: 16px;
}
}

</style>

</head>

<body>
<h1>esha's restaurant</h1>
<h2>a New York City eatery</h2>
<div class="first">
<p>welsh onion soko <span class="price">$14</span><br />
<small>Mustard sierra leone bologi kale chard beet greens black-eyed pea sorrel amaranth garlic tigernut spring onion summer purslane asparagus lentil. </small></p>
</div>

<div class="second">
<p>pastrami boudin tongue <span class="price">$22</span><br />
<small>Tri-tip capicola kielbasa salami brisket chicken rump strip steak drumstick. Meatloaf chuck boudin ribeye pork jowl. Andouille bacon jowl meatloaf pork loin prosciutto bresaola.</small></p>
</div>

<div class="dessert">
<p>fruitcake marzipan pudding dragee <span class="price">$8</span><br />
<small>Lollipop tart cotton candy jelly-o carrot cake apple pie cupcake. Jelly-o bear claw ice cream candy canes.</small></p>
</div>

<script>
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
</script>

</body>

font-size: 70px;
}
img {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
}
ul {
padding: 10px;
background: rgba(0,0,0,0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
article {
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
@media (max-width: 500px) {
h1 {
font-size: 36px;
}
li {
display: block;
padding: 5px;
}
}
</style>
</head>
<body>
<header>
<img src="/assets/jeff.png">
<h1>Jeff's Blog</h1>
<ul>
<li><a href="#">About Me</a></li>
<li><a href="#">Best Poems</a></li>
<li><a href="#">Worst Poems</a></li>
</ul>
</header>
<article>
<h2>VHS umami pop-up trust fund</h2>
<p>Marfa church-key kitsch bicycle rights, 8-bit mixtape cardigan gentrify Echo Park. Street art swag brunch, next level roof party Schlitz hella organic keffiyeh selfies. You probably haven't heard of them polaroid hashtag +1, meggings biodiesel Portland High Life cray tumblr retro.</p>
<button>Like</button>
</article>
<article>
<h2>Sartorial synth Echo Park, roof party</h2>
<p>chambray you probably haven't heard of them pour-over viral selvage umami skateboard VHS post-ironic selfies. Wes Anderson gentrify fanny pack twee, bicycle rights bitters blog keffiyeh plaid flannel. Tonx irony cliche sustainable mlkshk bitters. Four loko leggings chambray Vice.</p>
<button>Like</button>
</article>
<article>
<h2>Forage food truck keytar master cleanse</h2>
<p>ethical thundercats sustainable locavore quinoa Neutra. Aesthetic tacky sweater single-origin coffee, bicycle rights organic lo-fi street art american apparel ennui four loko ethnic Brooklyn small batch. Forage YOLO polaroid</p>
<button>Like</button>
</article>
<script>
alert("Javascript works!");
$("button").on("click", function() {
alert("A button was clicked!")
});
</script>
</body>

المصدر: منتدى محبي أهل البيت عليهم السلام - من قسم: عالم البرمجة

Project-3-build a-small-business-website project-3-build

11-26-2024, 07:39 PM

احسنتم ويبارك الله بكم
شكرا لكم كثيرا

01-12-2025, 01:30 AM

شكرًا لك على مشاركتك هذا المشروع المميز! الكود منظم ويعطي تجربة رائعة للمستخدم، خاصة مع التصميم البسيط والمؤثرات التفاعلية. أعجبتني طريقة عرض القائمة والألوان المستخدمة التي تضفي جمالية خاصة على الموقع. بالتوفيق في مشاريعك القادمة!

تحياتي،

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

Project-3-build a-small-business-website

PROJECT-3-BUILD A-SMALL-BUSINESS-WEBSITE header { text-align: center; background: url('http://dash.ga.co/assets/jeff-bg.png'); background-size: cover;