css FCC：Tribute Page
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css FCC：Tribute Page相关的知识，希望对你有一定的参考价值。
FCC: Tribute Page
-----------------
A [Pen](https://codepen.io/Seibas/pen/zepyJx) by [sebastiano](https://codepen.io/Seibas) on [CodePen](https://codepen.io).
[License](https://codepen.io/Seibas/pen/zepyJx/license).<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<title>Document</title>
</head>
<body>
<div id="main">
<h1 id="title">THE GORGEOUS RED</h1> <hr>
<div>Casa automobilistica italiana a Maranello in provincia di Modena.</div>
<div id="img-div">
<img id="image" src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/1701197/ferrari.jpeg alt="pic-from-pexel">
<div id="img-caption">Il marchio Ferrari è un cavallino rampante.</div>
<span> <img src="https://img.icons8.com/material/48/000000/ferrari-badge.png"></span>
</div><p><strong>*Below Italian lenguage only*</strong></p>
</div>
<div id="tribute-info">
<ul>
<li><strong>Ferrari 125 C (1947)</strong> è un'autovettura monoposto da competizione prodotta dalla Ferrari nel 1947 in un solo esemplare</li><br>
<li><strong>Ferrari 159 C (1947)</strong>La 159 C è un'autovettura da competizione prodotta dalla Ferrari nel 1947.</li><br>
<li><strong>Ferrari 166 FL (1949)</strong>La 166 FL è un'autovettura monoposto da competizione prodotta dalla Ferrari dal 1949 al 1952 in tre esemplari[1][2]. È
anche conosciuta come 166 C</li><br>
<li><strong>Ferrari 125 F1 (1950)</strong>La Ferrari 125 F1 (inizialmente denominata GPC, ossia Gran Premio Compressore) è stata la prima monoposto costruita dalla
scuderia di Maranello. Progettata secondo le specifiche della Formula Grand Prix, servì da base allo sviluppo delle
future Formula 1 prendendo anche parte a tre GP iridati nel Campionato mondiale di Formula 1 1950.</li><br>
<li><strong>Ferrari 166 F2 (1950)</strong>La 166 F2 fu la prima delle autovetture da competizione Ferrari della serie 166, seguita dalla 166 S, dalla 166 Inter,
dalla 166 Inter C, dalla 166 Inter S e dalla 166 MM. Debuttò il 26 settembre 1948 al Gran Premio di Firenze, dove vinse
con il pilota Raymond Sommer.</li><br>
<li><strong>Ferrari 275 F1 (1950)</strong>La Ferrari 275 F1 è una vettura che ha preso parte a due gare del Campionato mondiale di Formula 1 1950. Essa ha
rappresentato il primo passo verso la realizzazione della 375 F1 con motore di 4 500 cm³.</li>
</ul>
<blockquote>
<p>"Enzo Ferrari fondò la Scuderia Ferrari, che è tuttora la divisione principale del reparto corse della Ferrari, nel 1929 a
Modena. Fino al 1932 la Scuderia Ferrari ricoprì il ruolo di filiale tecnico-agonistica dell'Alfa Romeo, mentre a
partire dal 1933 ne divenne il reparto corse iniziando a occuparsi di progettazione e di gestione delle vetture da
competizione. Tale impegno proseguì con successo fino alla fine del 1937, quando la scuderia fu sciolta e l'Alfa Romeo
allestì un nuovo reparto corse con a capo Ferrari."</p>
<div>-- Questa la cronotassi dei presidenti di Ferrari S.p.A.:
Enzo Ferrari (1947-1977)
Nicola Tufarelli (1977-1980)
Giovanni Sguazzini (1980-1984)
Vittorio Ghidella (1984-1988)
Piero Fusaro (1988-1991)
Luca Cordero di Montezemolo (15 novembre 1991- 13 ottobre 2014)
Sergio Marchionne (13 ottobre 2014 - 21 luglio 2018)
John Elkann (dal 21 luglio 2018</div>
</blockquote>
<h3>If you have time, you should read more about this incredible Italian Company. <a id="tribute-link"
href="https://it.wikipedia.org/wiki/Ferrari#" target="_blank">Wikipedia entry</a>.</h3>
</div>
<script src="js.js"></script>
</body>
</html>// coded by @ChaituVR
const projectName = 'tribute-page';
localStorage.setItem('example_project', 'Tribute Page');
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
body {
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgba(0, 0, 0, 0.84);
background-color: rgb(230, 230, 230);
}
#title{
position: relative;
text-align: center;
font-weight: 400;
font-size: 45px;
letter-spacing: 0.4em;
word-spacing: -0.2rem;
}
#main{
max-width: 940px !important;
margin-left: auto;
margin-right: auto;
text-align: center;
font-weight: 400;
font-size: 25px;
letter-spacing: 0.4em;
word-spacing: 0.5rem;
}#img-div{
margin:-5px;
margin-top:20px;
width:100%;
border:5px solid white;
background:white;
}
#image{
max-width: 100%;
display: block;
}
#tribute-info{
margin-top: 30px;
max-width: 740px !important;
margin-left: auto;
margin-right: auto;
text-align: center;
font-weight: 100;
font-size: 20px;
text-align: left;
padding: 20px;
}以上是关于css FCC：Tribute Page的主要内容，如果未能解决你的问题，请参考以下文章
FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed
FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed