[Résolu] cv en html et css par oliviermessii - page 1

Bonjour,

Je suis actuellement en formation, et je dois réaliser un cv en html et css.

Et je ne parviens pas a la faire exactement pareille.

Je vous partage mon css ainsi que mon html

Je ne cherche pas que l'on me donne la solution mais qu'on m'aiguille

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap");

@font-face {
    font-family: "Raleway";
    src: url(assets\fonts\Raleway-VariableFont_wght.woff),
    url(assets/fonts/Raleway-VariableFont_wght.ttf) format("truetype");
}

@font-face {
    font-family: "Raleway";
    font-style: italic;
    src: url(assets/fonts/Raleway-Italic.woff),
    url(assets/fonts/Raleway-Italic.ttf), format("truetype");
}

@font-face {
    font-family: "Raleway";
    font-weight: bold;
    src: url(assets/fonts/Raleway-Bold.woff),
    url("assets/fonts/Raleway-Bold.ttf"), format("truetype");
}

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 1160px;
    margin: auto;
    border-right: 1px solid black;
}

h1,
h2,
h3 {
    font-family: "Lato", sans-serif;
}

p,
a,
ul,
small {
    font-family: "Raleway", sans-serif;
}

ul {
    margin-left: 30px;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header {
    background-color: #782221;
    color: white;
    display: flex;
    flex-direction: column;

}

header img {
    height: 250px;
    width: 250px;
    margin: 20px auto auto;

}

header img:hover {
    cursor: zoom-in;
}

.infos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-bottom: 30px;
    line-height: 60px;
}

.contact {
    background-color: #2c1d27;
    display: flex;
    justify-content: space-between;
    padding: 20px;;
}

main {
    display: flex;
}

.side-bar {
    background-color: #782221;
    color: white;
}

.side-bar p,
.side-bar ul {
    padding: 25px;
}

.side-bar h2 {
    margin-top: 10px;
    margin-right: 10px;
    padding-left: 10px;
    background-color: #dbc2a4;
    color: black;
}

.about_me {
    text-indent: 30px;
}

.content {
    padding: 25px;
}

.title {
    display: flex;
    margin-top: 15px;
    background-color: #dbc2a4;
}

.content h2 {

    padding-left: 10px;
    width: 100%;
}

.insertion {
    width: 8px;
    height: 30px;
    background-color: #782221;
}

.title:hover .insertion {
    background-color: #782221;
}

.content h3,
.content p,
.content ul {
    padding: 10px;
}

footer {
    background-color: #782221;
    color: white;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 130px;
    padding: 20px;
    justify-content: center;
    align-items: center;
}

.logo img {
    height: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

.logo img:hover {
    opacity: 0.7;
}

#social_media {
    display: flex;
    justify-content: space-between;
    width: 200px;
}

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CV - Olivier Piganiol</title>
    <link rel="shortcut icon" type="image/png" href="assets\icons\favicon.png">
    <link rel="stylesheet" href="assets\css\style.css">
    <meta name="description" content="Mon CV en HTML et CSS">
</head>

<body>
<header>
    <div class="infos">
        <a href="assets/image/image_jane_doe.png" target="_blank">
            <img src="assets/image/image_jane_doe.png" alt="image Jane Doe"></a>
        <h1>Olivier Piganiol</h1>
        <h2>Développeur web junior</h2>
    </div>
    <div class="contact">
        <div class="adresse">
            <a href="https://www.google.fr/maps/place/12+Rue+des+Oliviers,+53200+La+Roche-Neuville/@47.8746148,-0.754611,17z/data=!3m1!4b1!4m6!3m5!1s0x4808f12c7939a8a7:0xaefceff0de598651!8m2!3d47.8746112!4d-0.7520307!16s%2Fg%2F11c1fvm555?entry=ttu"
               target="_blank">
                <p id="adresse">12 Rue des Oliviers</p>
                <p>53200 La Roche_Neuville</p>
            </a>
        </div>
        <a href="mailto:jane.doe@gmail.com">jane.doe@gmail.com</a>
        <a href="tel:0606060606">0606060606</a>
    </div>
</header>

<main>
    <div class="side-bar">
        <section class="about_me">
            <h2>A propos</h2>
            <p>Après ma formation en cours, je cherche une entreprise qui va me donner ma chance</p>
        </section>
        <section>
            <h2>Langues parlés</h2>
            <ul>
                <li>Français - Langue maternelle</li>
                <li>Anglais - Débutant (A1)</li>
            </ul>
        </section>
        <section>
            <h2>Centres d'intérêt</h2>
            <ul>
                <li>Jeu d'echecs</li>
                <li>Football</li>
                <li>Voyages</li>
            </ul>
        </section>
    </div>
    <div class="content">
        <section>
            <div class="title">
                <div class="insertion"></div>
                <h2>Expérience professionnelle</h2>
            </div>
            <div>
                <h3>Conseiller client</h3>
                <p>De 2018 à Actuel</p>
                <ul>
                    <li>Réception d'appels entrants</li>
                    <li>Traitement back office</li>
                </ul>
            </div>
        </section>
        <section>
            <div class="title">
                <div class="insertion"></div>
                <h2>Diplômes/Formations</h2>
            </div>
            <div>
                <h3>Brevet des collèges</h3>
                <p>2008</p>
                <p>Lycée professionel de Gelos</p>
            </div>
            <div>
                <h3>Formation développeur web (en cours)</h3>
                <p>2024</p>
                <p>Centre européen de formations</p>
            </div>
        </section>
        <section>
            <div class="title">
                <div class="insertion"></div>
                <h2>Compétences</h2>
            </div>
            <ul>
                <li>HTML 5 - Intermédiaire</li>
                <li>CSS 3 - Intermédiaire</li>
                <li>Javascript - Débutant</li>
                <li>GitHub - Débutant</li>
            </ul>
        </section>
    </div>
</main>

<footer>
    <div class="social_media">
        <a class="logo" href="https://www.linkedin.com/in/olivier-piganiol-561775a3/" target="_blank"><img
                src="assets/icons/linkedin.png" alt="logo linkedin"></a>
        <a class="logo" href="https://twitter.com/olivierpgl" target="_blank"><img src="assets/icons/twitter.png"
                                                                                   alt="logo twitter"></a>
        <a class="logo" href="https://github.com/Olivier6431" target="_blank"><img src="assets/icons/github.png"
                                                                                   alt="logo GitHub"></a>
    </div>
    <small>Dernière mise à jour le
        <time datetime="2024-02-14">14 Février 2024</time>
    </small>
</footer>

</body>

</html>