Graphics

D.O.A

Project of a fictional antique weapons dealer.

Creation of a logo, a brand identity, a newsletter, a Facebook & Instagram publication.

(photos not mine and mockup from Freepik :D)

***

Projet d’un antiquaire d’arme fictif créant :

Un logo, une marque et sa charte graphique, une newsletter, une publication Facebook & Instagram.

(photos pas de moi et mockup de Freepik :D)

Page Progress...

Le FrouFrou

Creation of a LookBook and a flyer for the opening of their new shop!

(mockup from Freepik :D)

***

Création d’un LookBook et d’un flyer a l’occasion de l’ouverture de leur nouvelle boutique !

(mockup de Freepik :D)

le froufrou couture

10%

K6 Auto École

End-of-year project for a fictional driving school in Dijon, specially designed for university students, students, in order to promote the opening of their new shop. I used crash test dummys to appeal to the younger age group, to make the company seem fun, to differentiate the company from its competitors.

Creation of a visual identity, logo, flyer, application landing page, entire site in HTML5 & CSS3.

(photos not mine and mockup from Freepik :D)

***

Projet de fin d’année pour une auto-école fictive à Dijon, spécialement pensée pour un public jeune, étudiants, afin de promouvoir l’ouverture de leur nouvelle boutique.

Création d’une identité visuelle, logo, charte graphique, flyer, landing page d’application, site entier en HTML5 & CSS3.

(photos pas de moi et mockup de Freepik :D)

A little bit of code ! ... ( Un Peu de code ! )

html5 sample

				
					<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Crash Test</title>
    <link rel="stylesheet" href="home.css">
    <link rel="icon" type="img/png" href="images/icone.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="wrapper">
        <header>
            <nav>
                <div class="logo">
                    <a href="home.html"><img decoding="async" src="images/logo_jaune2.png" data-lazy-src="http://images/logo_jaune2.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img data-lazy-fallback="1" decoding="async" src="images/logo_jaune2.png" /></noscript></a>
                </div>

                <div class="menu-links">
                    <ul>
                        <li><a href="programmes.html">PROGRAMMES</a></li>
                        <li><a href="inscription.html">INSCRIPTION</a></li>
                        <li><a href="mentionslegales.html">PLUS</a></li>
                    </ul>
                </div>
            </nav>

            <div class="text-box">
                <h1>Avant de conduire ça...</h1>
                <p>Il vous faut un permis ! Avec K6 expert du permis rapide découvrez "la liberté en accéléré" </p>
                <a href="inscription.html" class="hero-btn">ici !</a>
            </div>
        </header>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script>

        $(window).scroll(function(){
            if($(window).scrollTop()){
                $("nav").addClass("black");
                }
                else{
                    $("nav").removeClass("black");
                   
                }

        });
    </script>

<!-------Course--------->

<section class="course">
    <h2>K6 AUTO ECOLE DIJON</h2>
    <!---<p>Helen Keller, née le 27 juin 1880 à Tuscumbia et morte le 1er juin 1968 à Easton, est une autrice, conférencière et militante politique américaine.</p>---->
    <div class="row">
        <div class="course-col">
            <h3>Stage Code Accéléré en 5 jours à 490€</h3>
            <p>Stage rapide et efficace !
                <br>Possibilité de paiement jusqu'à 4 fois sans frais !</p>
        </div>
        <div class="course-col">
            <h3>Nos Avantages</h3>
            <p>Permis Accéléré
                <br>Permis Rapide
                <br>Meilleur taux de réussite
                <br>Code de la route accéléré
                <br>Inscription rapide
                <br>Suivi par un moniteur expérimenté
                <br>Places d'examens rapides
                <br>Formules adaptées</p>
        </div>
        <div class="course-col">
            <h3>Conduite en accéléré de 10 jours a partir de 590€</h3>
            <p>Sur une période de 10 jours 
                <br>vous suivrez 38h de cours selon le Programme de Formation Initiale</p>
        </div>
    </div>
</section>


<!------campus------->

<section class="campus">
    <h2>Programmes</h2>
    <p>K6 vous proposes plusieurs programmes a petits prix !</p>
     
    <div class="row">
         <div class="campus-col">
             <img decoding="async" src="images/dummy4.png" alt="couverture_de_livre_the_story_of_my_life" data-lazy-src="http://images/dummy4.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img data-lazy-fallback="1" decoding="async" src="images/dummy4.png" alt="couverture_de_livre_the_story_of_my_life" /></noscript>
             <div class="layer">
                 <h3>meilleur taux de reussite</h3>
             </div>
         </div>
         <div class="campus-col">
            <img decoding="async" src="images/dummy3.png" alt="couverture_de_livre_the_world_i_live_in" data-lazy-src="http://images/dummy3.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img data-lazy-fallback="1" decoding="async" src="images/dummy3.png" alt="couverture_de_livre_the_world_i_live_in" /></noscript>
            <div class="layer">
                <h3>moniteurs experimenté</h3>
            </div>
        </div>
        <div class="campus-col">
            <img decoding="async" src="images/dummy6.png" alt="couverture_de_livre_journal" data-lazy-src="http://images/dummy6.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img data-lazy-fallback="1" decoding="async" src="images/dummy6.png" alt="couverture_de_livre_journal" /></noscript>
            <div class="layer">
                <h3>formules adaptées</h3>
            </div>
        </div>
    </div>
</section>




<!-------call to action------->
<section class="cta">
    <h4>K6 CLUB</h4>
    <a href="inscription.html" class="hero-btn1">S'inscrire</a>
</section>


<!--------footer------->

<section class="footer">
    <img decoding="async" src="images/logo_jaune2.png" alt="logo_k6" data-lazy-src="http://images/logo_jaune2.png?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img data-lazy-fallback="1" decoding="async" src="images/logo_jaune2.png" alt="logo_k6" /></noscript>
    <p>Mentions legales</p>
    <div class="icons">
        <i class="fa fa-facebook"></i>
        <i class="fa fa-twitter"></i>
        <i class="fa fa-instagram"></i>
        <i class="fa fa-clipboard" href="mentionslegales.html"></i>
    </div>
    <p>Made with <i class="fa fa-heart"></i> Raimbault Manon </p>
</section>



<!------JavaScript pour Menu Burger------>
    
    <script>
        var navLinks = document.getElementById("navLinks");
        function showMenu()
        {
           navLinks.style.right = "0";
        }
        function hideMenu()
        {
           navLinks.style.right = "-200px";
        }
    </script>
</body>
</html>

Css3 sample

				
					*
{
margin: 0;
padding: 0;
font-family: 'Bebas Neue', cursive;
}


body
{
    font-family: 'Bebas Neue', cursive;
    color: #ffed00;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/road2.png);
    background-attachment: fixed;
}


header
{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/mustang3.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.header_inscription
{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/car.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


.header_programmes
{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/crashfordummys.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


.content
{
    width: 100%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}


.logo
{
    position: fixed;
    float: left;
    margin: 10px 30px;
}


.logo img
{
    width: 30px;
}


nav
{
  position: fixed;
  width: 100%;
  z-index: 10;
}

nav ul
{
    list-style: none;
    background: rgba(0,0,0,0);
    overflow: hidden;
    color: #ffed00;
    padding: 0;
    text-align: center;
    margin: 0;
    transition: 1s;

}


nav.black ul
{
    background: rgba(0, 0, 0, 0.800);
}


nav ul li
{
    display: inline-block;
    padding: 20px;  
}


nav ul li a
{
    text-decoration: none;
    color: #ffed00;
    font-size: 18px;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.menu-links ul li::after
{
content: '';
width: 0%;
height: 2px;
background: #ffffff;
display: block;
margin: auto;
transition: 0.5s;
}


.menu-links ul li:hover::after
{
    width: 100%;
}


.text-box
{
    width: 90%;
    color: #ffed00;
    position: absolute;
    top: 45%;
    left: 5%;
    font-size: large;
}


.text-box h1
{
    font-size: 60px;
}


.text-box p
{
    margin: 10px 0 10px;
    font-size: 30px;
    color:#ffed00;
}



.hero-btn
{
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid #ffed00;
    padding: 12px 34px; 
    font-size: 30px;
    background: #00000060;
    position: relative;
    cursor: pointer;
}


.hero-btn:hover
{
    border: 1px solid #ffffff;
    background: #ffee0080;
    transition: 2s;
}


@media(max-width: 700px)
{
    .text-box h1 
    {
        font-size: 20px;
    }
    .nav-links ul li
    {
        display: block;
    }
    .nav-links
    {
         position: absolute;
         background: #ffed00;
         height: 100vh;
         width: 200px;
         top: 0;
         right: 0;
         text-align: left;
         z-index: 2;
    }
}


.text-box
{
    width: 90%;
    color:aliceblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}


.text-box h1
{
    font-size: 62px;
}


.text-box p
{

    font-size: 14px;
    color: aliceblue;
    text-align: center;
}


.hero-btn
{
    display: inline-block;
    text-decoration: none;
    color: gold;
    border: 1px solid yellow;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor:pointer;

}


.hero-btn:hover
{
    border: 1px solid white;
    color: aliceblue;
    background: gold;
    transition: 1s;

}


nav .fa
{
    display:none;
}



@media(max-width:700px)
{
    .text-box h1
    {
        font-size: 20px;
    }
    .nav-links ul li
    {
      display: block;
    }
    .nav-links
    {
        position: absolute;
        background: #172d44;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;

    }
    nav .fa
    {
        display:block;
        color: yellow;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul
    {
        padding: 30px;
    }
}

15%

Magic Bus Tours

Project for a fictitious travel agency.

Creation of a visual identity, logo, flyer, gif, advertising poster, Instagram ad post.

(original photos not mine and mockup from Freepik :D)

***

Projet pour une agence de voyage fictive.

Création d’une identité visuelle, logo, flyer, gif, affiche publicitaire, annonce Instagram.

(photos pas de moi et mockup de Freepik :D)

20%

Avellann

Creation of a special Facebook logo and banner for the st. Valentin’s day following the company’s graphic codes.

And photo editing work.

***

Création d’un logo et bannière Facebook spécial pour la st. Valentin suivant les codes graphiques de l’entreprise.

Plus travail de retouche photo.

20%

Happii

Creation of an explanatory PDF for clients detailing the strengths of the company and its activity.

***

Création d’un PDF explicatif pour les clients afin de détailler les points forts de l’entreprise et son activité.

25%

I.S.S

Creation of an electronic book of the International Space Station history with photos taken by French astronaut Thomas Pesquet during his trip to the station.

(photos not mine and mockup from Freepik :D)

***

Création d’un livre électronique sur l’histoire de la Station Spatial International avec les photos prise par l’astronaute Français Thomas Pesquet durant son voyage sur la station.

(photos pas de moi et mockup de Freepik :D)