Scribd
Upload
3 views10 pages

Html exam

This document is a portfolio webpage for a digital designer named Moussa, featuring sections such as personal information, experiences, portfolio, about me, and a contact form. It includes details like date of birth, address, email, and phone number, along with a downloadable CV. The design is responsive and utilizes CSS for styling various elements, including a grid layout for the portfolio items.

Uploaded by

dialloabdallah0069
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views10 pages

Html exam

This document is a portfolio webpage for a digital designer named Moussa, featuring sections such as personal information, experiences, portfolio, about me, and a contact form. It includes details like date of birth, address, email, and phone number, along with a downloadable CV. The design is responsive and utilizes CSS for styling various elements, including a grid layout for the portfolio items.

Uploaded by

dialloabdallah0069
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Portfolio - Moussa</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="logo">logo</div>
<div class="menu-icon">&#9776;</div>
</header>

<main class="container">
<div class="info">
<p class="subtitle">I'm a digital designer</p>
<h1>Moussa</h1>
<p class="credit">Image by <a href="#">toi-même</a></p>

<div class="details">
<p><strong>Date of Birth:</strong> Aug 25, 2000</p>
<p><strong>Address:</strong> Dakar, Sénégal</p>
<p><strong>E-mail:</strong> moussa@example.com</p>
<p><strong>Phone:</strong> +221 77 000 00 00</p>
</div>

<a href="cv.pdf" class="btn" download>Download CV ↓</a>


</div>

<div class="photo">
<img src="ma_photo.jpg" alt="Photo de Moussa" />
</div>
</main>
</body>
</html>

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

body {
font-family: 'Segoe UI', sans-serif;
background-color: #2c2c36;
color: white;
}

header {
display: flex;
justify-content: space-between;
padding: 20px 40px;
background-color: #1e1e27;
}

.logo {
font-size: 24px;
font-weight: bold;
}

.menu-icon {
font-size: 28px;
cursor: pointer;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 60px 40px;
flex-wrap: wrap;
}

.info {
max-width: 500px;
}

.subtitle {
font-size: 20px;
font-weight: 500;
margin-bottom: 10px;
}

h1 {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
}

.credit {
font-size: 12px;
color: #bbb;
margin-bottom: 30px;
}

.details p {
margin-bottom: 10px;
}

a.btn {
display: inline-block;
margin-top: 20px;
padding: 12px 24px;
background-color: #ff914d;
color: white;
text-decoration: none;
border-radius: 5px;
}

.photo img {
width: 300px;
border-radius: 10px;
}

<section class="experiences">
<h2>Experiences</h2>
<p class="subtitle">
Nunc sed blandit libero volutpat sed cras. Risus quis varius quam quisque id.
Semper auctor neque vitae tempus quam pellentesque.
</p>

<div class="experience">
<p class="date">September, 2016 – May, 2017</p>
<h3 class="title">Junior Developer</h3>
<p class="desc">
Sed quia consequuntur magni dolores eos quira tione estera voluptatem sequi
nesciunt nuncera
permano nence of the stars from which we spring.
</p>
<p class="location"><strong>Lobrissa / Chicago</strong></p>
</div>

<div class="experience">
<p class="date">May, 2018 – Jun, 2019</p>
<h3 class="title">Senior Developer</h3>
<p class="desc">
Molestie a iaculis at erat pellentesque adipiscing. Porttitor eget dolor
morbi non arcu risus
quis varius quam.
</p>
<p class="location"><strong>Faucibuse / Seattle</strong></p>
</div>

<div class="experience">
<p class="date">Jun, 2019 – December, 2020</p>
<h3 class="title">Senior Developer</h3>
<p class="desc">
Etiam erat velit scelerisque in dictum non consectetur. Nisl purus in mollis
nunc sed id semper.
</p>
<p class="location"><strong>Reesturato / New York</strong></p>
</div>

<div class="experience">
<p class="date">Dec, 2020 – current</p>
<h3 class="title">CEO</h3>
<p class="desc">
Etiam erat velit scelerisque in dictum non consectetur. Nisl purus in mollis
nunc sed id semper.
</p>
<p class="location"><strong>Ercussa / San Francisco</strong></p>
</div>

<a href="#contact" class="btn contact">CONTACT ME</a>


</section>

.experiences {
padding: 60px 40px;
background-color: #2c2c36;
color: white;
text-align: center;
}

.experiences h2 {
font-size: 40px;
margin-bottom: 10px;
}

.experiences .subtitle {
font-style: italic;
color: #bbb;
margin-bottom: 40px;
font-size: 16px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.experience {
border-top: 1px solid #666;
padding-top: 20px;
margin-bottom: 40px;
text-align: left;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.experience .date {
color: #bbb;
font-size: 14px;
margin-bottom: 5px;
}

.experience .title {
color: orange;
margin-bottom: 10px;
font-size: 20px;
}

.experience .desc {
font-size: 15px;
margin-bottom: 10px;
color: #ccc;
}

.experience .location {
font-weight: bold;
color: white;
}

.btn.contact {
margin-top: 20px;
background-color: #ff914d;
padding: 12px 24px;
text-decoration: none;
border-radius: 5px;
color: white;
display: inline-block;
}

<section class="portfolio">
<h2>Portfolio</h2>
<p>Quam quisque id diam vel quam elementum. Vestibulum lectus mauris ultrices
eros in cursus turpis massa tincidunt. Pellentesque habitant morbi tristique
senectus et netus.</p>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="images/website.jpg" alt="Website Design">
<h3>Website Design</h3>
</div>
<div class="portfolio-item">
<img src="images/mobile1.jpg" alt="Mobile Application">
<h3>Mobile Application</h3>
</div>
<div class="portfolio-item">
<img src="images/corporate.jpg" alt="Corporate Design">
<h3>Corporate Design</h3>
</div>
<div class="portfolio-item">
<img src="images/mobile2.jpg" alt="Mobile Application">
<h3>Mobile Application</h3>
</div>
<div class="portfolio-item">
<img src="images/responsive.jpg" alt="Responsive Design">
<h3>Responsive Design</h3>
</div>
<div class="portfolio-item">
<img src="images/digital.jpg" alt="Digital Product">
<h3>Digital Product</h3>
</div>
</div>
</section>

/* Section Portfolio */
.portfolio {
text-align: center;
padding: 50px 20px;
background-color: #2c2836; /* couleur de fond */
color: white;
}

.portfolio h2 {
font-size: 36px;
margin-bottom: 20px;
}

.portfolio p {
max-width: 700px;
margin: 0 auto 40px auto;
font-size: 16px;
line-height: 1.6;
}

/* Grille */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

/* Carte individuelle */
.portfolio-item {
background-color: white;
border-radius: 8px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}

.portfolio-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.portfolio-item img {
width: 100%;
display: block;
}

.portfolio-item h3 {
margin: 0;
padding: 15px;
font-size: 18px;
color: #333;
}

<section class="about-me">
<div class="about-text">
<h2>About me</h2>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p>
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Nunc
lobortis mattis aliquam faucibus purus.
Accumsan sit amet nulla facilisi morbi tempus iaculis urna. Urna nunc
id cursus metus.
Consectetur a erat nam at lectus urna duis convallis.
Felis donec et odio pellentesque diam volutpat. Vestibulum morbi
blandit cursus risus at ultrices mi.
</p>
<button class="contact-btn">CONTACT ME</button>
</div>

<div class="skills">
<div class="skill">
<div class="circle">97%</div>
<span>HTML5 & CSS3</span>
</div>
<div class="skill">
<div class="circle">75%</div>
<span>WEB DESIGN</span>
</div>
<div class="skill">
<div class="circle">80%</div>
<span>JAVA</span>
</div>
<div class="skill">
<div class="circle">55%</div>
<span>PHP</span>
</div>
</div>
</section>

/* Section About Me */
.about-me {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding: 50px 20px;
background-color: #2c2836; /* couleur de fond */
color: white;
}

/* Texte */
.about-text {
flex: 1 1 500px;
max-width: 600px;
}

.about-text h2 {
font-size: 36px;
margin-bottom: 20px;
}

.about-text p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}

/* Bouton */
.contact-btn {
background-color: #ff8c42;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

.contact-btn:hover {
background-color: #ff7a29;
}

/* Skills */
.skills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 30px;
flex: 1 1 300px;
}
.skill {
text-align: center;
}

.circle {
width: 100px;
height: 100px;
background-color: #ff8c42;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
margin-bottom: 10px;
}

.skill span {
display: block;
font-weight: bold;
margin-top: 5px;
}

<section class="contact-form-section">
<div class="profile-image">
<img src="ton-image.jpg" alt="Profile Image">
</div>

<h2>Build your website<br>in record time</h2>


<p>Sample text. Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam
nunc justo sagittis suscipit ultrices.</p>

<form class="contact-form">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter a valid email address"
required>
<button type="submit">SUBMIT</button>
</form>

<p class="image-source">Image from <a href="#">Freepik</a></p>


</section>

/* Section Contact Form */


.contact-form-section {
text-align: center;
padding: 50px 20px;
background-color: #2c2836;
color: white;
}

.profile-image img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
}
.contact-form-section h2 {
font-size: 36px;
margin-bottom: 15px;
}

.contact-form-section p {
font-size: 16px;
color: #d3d3d3;
margin-bottom: 30px;
}

.contact-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
max-width: 400px;
margin: 0 auto 20px;
}

.contact-form label {
align-self: flex-start;
font-size: 14px;
color: #ff8c42;
}

.contact-form input {
width: 100%;
padding: 10px;
border: none;
border-bottom: 2px solid #ccc;
background: transparent;
color: white;
outline: none;
}

.contact-form input::placeholder {
color: #999;
}

.contact-form button {
background-color: #ff8c42;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

.contact-form button:hover {
background-color: #ff7a29;
}

.image-source {
font-size: 14px;
margin-top: 20px;
}

.image-source a {
color: white;
text-decoration: underline;
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy