{% extends 'layout.html.twig' %}

{% block title %}Ephone{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('/css/home.css') }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}

{% endblock %}

{% block content %}
    <main class="container-md">
        <h1 class="company-name">Ephone</h1>
        <p class="sloggan">The phone store you've always dreamed of.<br/>Now it's a reality!</p>
        <div class="iphonex">
			<div class="front">
				<div class="screen">
					<div class="screen__view">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="70" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                        </svg>
						<div class="hello">
							<p>Hello</p>
						</div>
					</div>
					<div class="screen__front">
						<div class="screen__front-speaker"></div>
						<div class="screen__front-camera"></div>
					</div>
				</div>
				<div class="front__line"></div>
				<div class="front__line front__line-second"></div>
			</div>
			<div class="phoneButtons phoneButtons-right"></div>
			<div class="phoneButtons phoneButtons-left"></div>
			<div class="phoneButtons phoneButtons-left2"></div>
			<div class="phoneButtons phoneButtons-left3"></div>
			<div class="back"></div>
		</div>
    </main>
{% endblock %}