Skip to content

Instantly share code, notes, and snippets.

@Jeremy-san

Jeremy-san/digifactory.css

Last active October 11, 2019 18:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jeremy-san/fdd0fa09cdd31d5f71838b2ee84900a2 to your computer and use it in GitHub Desktop.
Save Jeremy-san/fdd0fa09cdd31d5f71838b2ee84900a2 to your computer and use it in GitHub Desktop.
Download ZIP
test technique
Raw
digifactory.css
header{
background-color: #FEFEFE;
width: 100%;
z-index: 1;
border-bottom: 0.5px solid grey;
}
h2{
border-bottom: 0.5px solid grey;
}
h1{
font-size: 35px;
}
.image{
overflow: hidden;
background-color: #FEFEFE;
}
.title{
color: #82A815;
}
.menu{
display: flex;
justify-content: space-between;
}
.menu p{
width: 11%;
padding: 5%;
white-space: nowrap;
}
.container{
display: flex;
justify-content: space-around;
width: 94%;
}
.menu2{
display: flex;
justify-content: space-between;
margin-top: -4%;
opacity: .4;
width: 100%;
}
.menu2 p{
display: flex;
}
.titleFlex{
margin-left: 11%;
}
.litleFlex2{
display: flex;
justify-content: space-around;
width: 25%;
margin-right: 3%;
}
.litleFlex2 p{
font-size: 13px;
margin-top: 28px;
}
.navBarre{
list-style: none;
margin: 0;
font-size: 1.4rem;
width: 93%;
}
a:focus{
color: black;
}
a{
color: black;
text-decoration: none;
}
li{
list-style: none;
border-bottom: 0.5px solid grey;
width: 18%;
padding-top: 2%;
padding-bottom: 1%;
}
span{
color: #BAC368;
}
section{
margin-top: -20%;
margin-left: 20.5%;
}
.sizeTitle{
border-bottom: 0.5px solid grey;
}
.content{
border-left: .5px solid black;
}
.box{
margin-left: 1%;
width: 90%;
text-align: justify;
}
.citation{
text-align: center;
}
.name{
text-align: right;
}
.more{
color: #82A815;
}
.footer-icons{
margin-top: 25px;
width: 100% auto;
}
.footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
border-radius: 2px;
font-size: 20px;
color: #FFFFFF;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}
.littleTitle{
display: flex;
white-space: nowrap;
margin-left: 10%;
}
.littleTitle p{
margin-right: 4%;
}
.block{
display: flex;
justify-content: space-between;
width: 93%;
}
@media screen and (max-width: 700px) {
#menu-icon {
display: inline-block;
}
.menu{
flex-direction: column;
text-align: center;
align-items: center;
margin-right: 10%;
}
.navBarre{
overflow: hidden;
display: none;
}
.menu2{
display: none;
}
section{
margin: 0 auto;
font-size: 20px;
}
header{
border: none;
}
.container{
display: flex;
flex-direction: column;
}
.title{
text-align: center;
}
.content{
border: none;
}
.addLetter{
white-space: nowrap;
}
.block{
display: contents;
}
.littleTitle{
margin: 0% auto;
}
}
Raw
digifactory.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
<link rel="stylesheet" href="Digifactory.css">
</head>
<body>
<header>
<div class="container">
<div class="title">
<h1 class="digiColor">Digi<span>factory</span></h1>
</div>
<div class="menu">
<p>Acceuil</p>
<p>Notre expertise</p>
<p>Nos références</p>
<p class="title">L'entreprise</p>
<p>Les actualités</p>
<p>Nous contacter</p>
<i class="icon"></i>
</div>
</div>
<div class="menu2">
<div class="titleFlex">
<p><span>Creating Smarte-Business</span></p>
</div>
<div class="litleFlex2">
<p>Acceuil</p>
<p>L'entreprise</p>
</div>
</div>
</header>
<nav>
<ul class="navBarre">
<li><a href="#" class="navTitle">Historique</a></li>
<li><a href="#" class="navTitle">L'équipe</a></li>
<li><a href="#" class="navTitle">Ethique</a></li>
<li><a href="#" class="navTitle">Nos partenaires</a></li>
</ul>
</nav>
<section>
<div class="content">
<div class="box">
<div class="sizeTitle">
<h1><span>L'</span>entreprise</h1>
</div>
<p>Accedat huc suavitas quaedam oportet sermonum atque morum,
haudquaquam mediocre condimentum amicitiae.
Tristitia autem et in omni re severitas habet illa quidem gravitatem,
sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.
</p>
<div class="citation">
<i><< Duae portuosam multiplici fundamento Paphus. >></i>
</div>
<div class="name">
<p>Maecenas Quam Urna, co-fondateur Wgta Inc</p>
</div>
</div>
<div class="box">
<h2><span>H</span>istorique</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus non commodo sapien. Mauris eget nunc quis nunc porta consequat.
Cras feugiat nulla gravida, tempor justo eget,
lacinia dui. Etiam molestie urna ipsum, in ultricies enim eleifend eget.
Nullam in tortor aliquam, hendrerit tortor id,
vulputate leo. Aenean at leo eget lorem malesuada consequat eget eget metus. Nullam semper quis purus non laoreet.
Cras et lacinia risus. Sed ut dapibus orci, nec finibus turpis.
Sed odio enim, tempor ut libero ut, tincidunt pellentesque urna.
Nullam eu ligula porttitor, malesuada nibh nec, auctor elit.
<a href="#" class="more">en savoir +</a>
</p>
</div>
<div class="box">
<h2><span>L'</span>equipe</h2>
<p>Proin tincidunt mollis nunc,
vel porttitor neque ultricies non.
Sed quis accumsan sem. Curabitur quis metus luctus,
interdum tortor in, volutpat turpis.
Donec eu egestas nulla. Aliquam erat volutpat.
In hac habitasse platea dictumst.
Donec elementum velit id sodales iaculis.
Pellentesque a sodales risus.
Suspendisse sed orci aliquet, egestas arcu id,
interdum turpis. Nam dapibus nulla sit amet mi ullamcorper convallis.
Phasellus sodales at mauris non interdum.
Sed semper ante vitae ante accumsan sollicitudin at a lacus.
Pellentesque eget eros tellus. Cras in pharetra erat.
Vivamus et est est. Aliquam erat volutpat.
<a href="#" class="more">en savoir +</a>
</p>
</div>
<div class="box">
<h2><span>E</span>thnique</h2>
<p>Vivamus vel semper diam,
quis vestibulum dolor.
Vivamus risus nulla, congue ut imperdiet non, efficitur vel nunc.
Nam vehicula mattis odio, ac euismod neque.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
In gravida ligula nibh. Nulla quis ligula ultricies,
ultricies felis sed, ullamcorper metus. Fusce sagittis faucibus nunc luctus egestas. Maecenas at risus erat.
Maecenas non feugiat tortor.
<a href="#" class="more">en savoir +</a>
</p>
</div>
<div class="box">
<h2><span>N</span>os partenaires</h2>
<p>Donec tempor luctus lorem, non venenatis orci rutrum sed.
Vivamus lobortis dictum arcu ac euismod.
Nunc iaculis sapien a quam blandit pretium.
Donec venenatis nisi diam, non fringilla nibh rutrum et.
Nam a viverra odio. Nam et pharetra augue. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur egestas velit ut lorem aliquet, vitae pharetra quam ornare.
In hac habitasse platea dictumst.
Praesent viverra laoreet turpis, sed lobortis dolor vestibulum ac.
Curabitur commodo pretium justo eu feugiat. Praesent gravida,
massa vitae imperdiet faucibus, nibh diam auctor nisi,
sed suscipit velit nibh vel odio. Sed felis ex, pharetra vitae purus non, rutrum varius leo.
Nam pellentesque bibendum mi, efficitur ultricies enim.
Donec varius dui at est viverra, ut rutrum justo aliquet. Sed eu varius nibh.
<a href="#" class="more">en savoir +</a>
</p>
</div>
</div>
</section>
<footer>
<div class="block">
<div class="littleTitle">
<p>Mention légales</p>
<p>Digifactory</p>
</div>
<div class="footer-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
</div>
<div class="addLetter">
<input type="text" placeholder="Sinscrire à la newletter">
<button class="plus">+</button>
</div>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment