Antonio's Restaurant & Bar

<div class="row g-5"><!-- Left Column: Story --> <div class="col-lg-6"> <h2 class="fw-bold text-white mb-4">The Concept</h2> <p class="text-white-50 lead mb-5"><strong>Antonio's Restaurant/Bar &amp; Grill</strong> bridges the gap between traditional Italian warmth and modern digital convenience. The goal was to create an online presence that felt established yet approachable.</p> <h3 class="fw-bold text-white mb-3 mt-5">Visual Identity</h3> <p class="text-white-50 mb-4">We utilized rich, warm tones (maroons and deep golds) to evoke appetite and comfort, moving away from the sterile look of typical restaurant templates.</p> <div class="row g-3 mt-4"> <div class="col-auto"> <div class="p-3 border border-secondary bg-dark rounded-3 text-center" style="min-width: 100px;"><span class="d-block fw-bold text-white mb-1">HTML5</span> <small class="text-white-50">Semantic</small></div> </div> <div class="col-auto"> <div class="p-3 border border-secondary bg-dark rounded-3 text-center" style="min-width: 100px;"><span class="d-block fw-bold text-white mb-1">CSS3</span> <small class="text-white-50">Custom</small></div> </div> <div class="col-auto"> <div class="p-3 border border-secondary bg-dark rounded-3 text-center" style="min-width: 100px;"><span class="d-block fw-bold text-white mb-1">Flexbox</span> <small class="text-white-50">Layout</small></div> </div> </div> </div> <!-- Right Column: Mood Board / Highlight --> <div class="col-lg-6"> <div class="rounded-4 overflow-hidden border border-secondary shadow-lg position-relative group"><img class="w-100 h-100 object-fit-cover transition-transform duration-700 group-hover-scale" src="https://i.ibb.co/JR60F3gT/Mood-Boards.png" alt="Mood Board"> <div class="position-absolute bottom-0 start-0 w-100 p-4 bg-gradient-to-t from-black"> <h5 class="fw-bold text-white mb-0">Initial Mood Board</h5> <small class="text-white-50">Establishing the rustic aesthetic</small></div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25"><!-- Key Features Grid --> <h2 class="fw-bold text-white mb-5 text-center">Key Features</h2> <div class="row g-4 mb-5"> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Multi-Page Navigation</h4> <p class="text-white-50 mb-0">Seamless flow between Home, Menu, Drinks, and Contact sections for intuitive user browsing.</p> </div> </div> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Responsive Showcases</h4> <p class="text-white-50 mb-0">A Flexbox-powered image gallery that adapts perfectly to different screen sizes, highlighting food photography.</p> </div> </div> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Styled Forms</h4> <p class="text-white-50 mb-0">Custom input styling for reservations and contact forms to match the brand's dark, rustic theme.</p> </div> </div> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Theme Engine</h4> <p class="text-white-50 mb-0">Uniform typography and CSS variables used across all pages for complete visual cohesion.</p> </div> </div> </div> <!-- Process Timeline --> <div class="row justify-content-center"> <div class="col-lg-8"> <h2 class="fw-bold text-white mb-5 text-center">Design Process</h2> <div class="d-flex gap-4 mb-5 position-relative"><!-- Connecting Line --> <div class="position-absolute start-0 top-0 bottom-0 border-start border-secondary opacity-25" style="left: 25px !important;">&nbsp;</div> <div class="bg-dark border border-secondary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 position-relative z-2" style="width: 50px; height: 50px;"><span class="fw-bold text-white">01</span></div> <div class="pb-4"> <h4 class="fw-bold text-white">Research &amp; Discovery</h4> <p class="text-white-50">Analyzed competitor sites and Italian restaurant trends to identify key visual motifs like warm lighting and serif fonts.</p> </div> </div> <div class="d-flex gap-4 mb-5 position-relative"> <div class="position-absolute start-0 top-0 bottom-0 border-start border-secondary opacity-25" style="left: 25px !important;">&nbsp;</div> <div class="bg-dark border border-secondary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 position-relative z-2" style="width: 50px; height: 50px;"><span class="fw-bold text-white">02</span></div> <div class="pb-4"> <h4 class="fw-bold text-white">Logo &amp; Branding</h4> <p class="text-white-50">Iterated on sketches to create a timeless mark. Developed a full stationery suite including menus and business cards.</p> </div> </div> <div class="d-flex gap-4 mb-5 position-relative"> <div class="position-absolute start-0 top-0 bottom-0 border-start border-secondary opacity-25" style="left: 25px !important;">&nbsp;</div> <div class="bg-dark border border-secondary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 position-relative z-2" style="width: 50px; height: 50px;"><span class="fw-bold text-white">03</span></div> <div class="pb-4"> <h4 class="fw-bold text-white">Development</h4> <p class="text-white-50">Built the site using semantic HTML and custom CSS, focusing on clean code structure and fast loading times.</p> </div> </div> </div> </div>

<div class="row g-5"><!-- Left Column: Story --> <div class="col-lg-6"> <h2 class="fw-bold text-white mb-4">The Concept</h2> <p class="text-white-50 lead mb-5"><strong>Antonio's Restaurant/Bar &amp; Grill</strong> bridges the gap between traditional Italian warmth and modern digital convenience. The goal was to create an online presence that felt established yet approachable.</p> <h3 class="fw-bold text-white mb-3 mt-5">Visual Identity</h3> <p class="text-white-50 mb-4">We utilized rich, warm tones (maroons and deep golds) to evoke appetite and comfort, moving away from the sterile look of typical restaurant templates.</p> <div class="row g-3 mt-4"> <div class="col-auto"> <div class="p-3 border border-secondary bg-dark rounded-3 text-center" style="min-width: 100px;"><span class="d-block fw-bold text-white mb-1">HTML5</span> <small class="text-white-50">Semantic</small></div> </div> <div class="col-auto"> <div class="p-3 border border-secondary bg-dark rounded-3 text-center" style="min-width: 100px;"><span class="d-block fw-bold text-white mb-1">CSS3</span> <small class="text-white-50">Custom</small></div> </div> <div class="col-auto"> <div class="p-3 border border-secondary bg-dark rounded-3 text-center" style="min-width: 100px;"><span class="d-block fw-bold text-white mb-1">Flexbox</span> <small class="text-white-50">Layout</small></div> </div> </div> </div> <!-- Right Column: Mood Board / Highlight --> <div class="col-lg-6"> <div class="rounded-4 overflow-hidden border border-secondary shadow-lg position-relative group"><img class="w-100 h-100 object-fit-cover transition-transform duration-700 group-hover-scale" src="https://i.ibb.co/JR60F3gT/Mood-Boards.png" alt="Mood Board"> <div class="position-absolute bottom-0 start-0 w-100 p-4 bg-gradient-to-t from-black"> <h5 class="fw-bold text-white mb-0">Initial Mood Board</h5> <small class="text-white-50">Establishing the rustic aesthetic</small></div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25"><!-- Key Features Grid --> <h2 class="fw-bold text-white mb-5 text-center">Key Features</h2> <div class="row g-4 mb-5"> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Multi-Page Navigation</h4> <p class="text-white-50 mb-0">Seamless flow between Home, Menu, Drinks, and Contact sections for intuitive user browsing.</p> </div> </div> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Responsive Showcases</h4> <p class="text-white-50 mb-0">A Flexbox-powered image gallery that adapts perfectly to different screen sizes, highlighting food photography.</p> </div> </div> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Styled Forms</h4> <p class="text-white-50 mb-0">Custom input styling for reservations and contact forms to match the brand's dark, rustic theme.</p> </div> </div> <div class="col-md-6"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100"> <h4 class="fw-bold text-white mb-3">Theme Engine</h4> <p class="text-white-50 mb-0">Uniform typography and CSS variables used across all pages for complete visual cohesion.</p> </div> </div> </div> <!-- Process Timeline --> <div class="row justify-content-center"> <div class="col-lg-8"> <h2 class="fw-bold text-white mb-5 text-center">Design Process</h2> <div class="d-flex gap-4 mb-5 position-relative"><!-- Connecting Line --> <div class="position-absolute start-0 top-0 bottom-0 border-start border-secondary opacity-25" style="left: 25px !important;">&nbsp;</div> <div class="bg-dark border border-secondary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 position-relative z-2" style="width: 50px; height: 50px;"><span class="fw-bold text-white">01</span></div> <div class="pb-4"> <h4 class="fw-bold text-white">Research &amp; Discovery</h4> <p class="text-white-50">Analyzed competitor sites and Italian restaurant trends to identify key visual motifs like warm lighting and serif fonts.</p> </div> </div> <div class="d-flex gap-4 mb-5 position-relative"> <div class="position-absolute start-0 top-0 bottom-0 border-start border-secondary opacity-25" style="left: 25px !important;">&nbsp;</div> <div class="bg-dark border border-secondary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 position-relative z-2" style="width: 50px; height: 50px;"><span class="fw-bold text-white">02</span></div> <div class="pb-4"> <h4 class="fw-bold text-white">Logo &amp; Branding</h4> <p class="text-white-50">Iterated on sketches to create a timeless mark. Developed a full stationery suite including menus and business cards.</p> </div> </div> <div class="d-flex gap-4 mb-5 position-relative"> <div class="position-absolute start-0 top-0 bottom-0 border-start border-secondary opacity-25" style="left: 25px !important;">&nbsp;</div> <div class="bg-dark border border-secondary rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 position-relative z-2" style="width: 50px; height: 50px;"><span class="fw-bold text-white">03</span></div> <div class="pb-4"> <h4 class="fw-bold text-white">Development</h4> <p class="text-white-50">Built the site using semantic HTML and custom CSS, focusing on clean code structure and fast loading times.</p> </div> </div> </div> </div>