Skip to content

Instantly share code, notes, and snippets.

@Alterlapsus

Alterlapsus/diseno-de-pagina-web-en-vivo.markdown

Created March 11, 2021 23:54
Show Gist options
  • Save Alterlapsus/cfa4fd0a816a1f805dfff379d66926bd to your computer and use it in GitHub Desktop.
Save Alterlapsus/cfa4fd0a816a1f805dfff379d66926bd to your computer and use it in GitHub Desktop.
Download ZIP
Diseño de página web en vivo
Raw
index.html
<body>
<header class="main-header">
<div class="container container--flex">
<h1 class="main-title"><span class="color-span">ROOM</span> DESIGN</h1>
<nav class="main-nav">
<span class="icon-menu" id="btn-menu"><i class="fas fa-bars"></i></span>
<ul class="menu" id="menu">
<li class="menu__item"><a href="" class="menu__link menu__link--select"><span>Home</span></a></li>
<li class="menu__item"><a href="" class="menu__link"><span>Services</span></a></li>
<li class="menu__item"><a href="" class="menu__link"><span>Gallery</span></a></li>
<li class="menu__item"><a href="" class="menu__link"><span>Contact</span></a></li>
<div class="nav-social">
<a href="" class="nav-social__item"><i class="fab fa-facebook-f"></i></a>
<a href="" class="nav-social__item"><i class="fab fa-twitter"></i></a>
<a href="" class="nav-social__item"><i class="fab fa-dribbble"></i></a>
</div>
</ul>
</nav>
</div>
</header>
<div class="banner">
<div class="banner__content">
<div class="container">
<h2 class="banner__title">01</h2>
<p class="banner__txt">THIS YEAR I’VE COMPLETED MORE COMPLEX DESIGN PROJECTS.</p>
</div>
</div>
</div>
<main class="main">
<section class="welcome">
<h2 class="section__title">WELCOME</h2>
<p class="welcome__txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. ever since the 1500s.Itaque earum rerum hic tenetur a sapiente delectus reiciendis maiores hasellusMaecenas ac hendrerit purus. Lorem ipsum dolor sit amet.Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<a href="" class="welcome__btn">READ MORE</a>
</section>
<section class="container-design">
<div class="design__item">
<h3 class="design__title">Commercial Interiors</h3>
<img src="https://images.pexels.com/photos/584399/living-room-couch-interior-room-584399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="design__img">
</div>
<div class="design__item">
<h3 class="design__title">Hospitality Interiors</h3>
<img src="https://images.pexels.com/photos/1457842/pexels-photo-1457842.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" class="design__img">
</div>
<div class="design__item">
<h3 class="design__title">Kitchen Design</h3>
<img src="https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="design__img">
</div>
<div class="design__item">
<h3 class="design__title">Bedroom Design</h3>
<img src="https://images.pexels.com/photos/1643383/pexels-photo-1643383.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="design__img">
</div>
</section>
<section class="container-testimonials">
<h3 class="section__title">WHAT PEOPLE ARE SAYING</h3>
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="testimonials__img">
<p class="testimonials__txt">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
<p class="testimonials__name">Richard Doe</p>
</section>
<section class="container-tips">
<div class="design__item">
<h3 class="design__title">Home decor & design tips</h3>
<img src="https://images.pexels.com/photos/1909791/pexels-photo-1909791.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="design__img">
</div>
<div class="container-box">
<div class="box">
<div class="box__icon"><i class="fas fa-cog"></i></div>
<div class="box__content">
<h3 class="box__title">BEDROOM DESIGN</h3>
<p class="box__txt">Maecenas bibendum nisi purus, in ullamcorper nisl aliquam id.</p>
</div>
</div>
<div class="box">
<div class="box__icon"><i class="fas fa-university"></i></div>
<div class="box__content">
<h3 class="box__title">KITCHEN DESIGN</h3>
<p class="box__txt">Maecenas bibendum nisi purus, in ullamcorper nisl aliquam id.</p>
</div>
</div>
<div class="box">
<div class="box__icon"><i class="fas fa-wrench"></i></div>
<div class="box__content">
<h3 class="box__title">KIDS ROOM DESIGN</h3>
<p class="box__txt">Maecenas bibendum nisi purus, in ullamcorper nisl aliquam id.</p>
</div>
</div>
</div>
</section>
<section class="newsletter">
<h2 class="section__title">NEWSLETTER</h2>
<form action="" method="post" class="form">
<input type="email" placeholder="Email" class="form__mail">
<input type="submit" class="form__submit" value="Suscribe">
</form>
</section>
</main>
<footer class="main-footer">
<div class="container">
<div class="column column--50-25">
<h2 class="footer__title">Company</h2>
<p class="footer__txt">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of Latin at Hampden-Sydney College in Virginia from a Lorem Ipsum passage, undoubtable source</p>
<cite class="footer__author">- Adam Rose, MD</cite>
</div>
<div class="column column--50-25">
<h2 class="footer__title">Tweets</h2>
<p class="footer__txt"><i class="fab fa-twitter"></i>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus.</p>
<a href="" class="footer__link">http//example.com</a>
<p class="footer__date">About 15 minutes ago</p>
<p class="footer__txt"><i class="fab fa-twitter"></i>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus.</p>
<a href="" class="footer__link">http//example.com</a>
<p class="footer__date">About 15 minutes ago</p>
</div>
<div class="column column--50-25">
<h2 class="footer__title">Connect</h2>
<div class="footer__socials">
<div class="social-icon">
<i class="fab fa-facebook-f"></i>
<a class="social__link" href="">Like us on Facebook</a>
</div>
<div class="social-icon">
<i class="fab fa-twitter"></i>
<a class="social__link" href="">Like us on Twiter</a>
</div>
<div class="social-icon">
<i class="fab fa-dribbble"></i>
<a class="social__link" href="">Follow us on Dribbble</a>
</div>
<div class="social-icon">
<i class="fab fa-pinterest"></i>
<a class="social__link" href="">Follow us on Pinterest</a>
</div>
</div>
</div>
<div class="column column--50-25">
<h2 class="footer__title">Contact</h2>
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
<p class="contact__txt">The company name</p>
</div>
<div class="contact-icon">
<i class="fas fa-phone-alt"></i>
<p class="contact__txt">123456789</p>
</div>
<div class="contact-icon">
<i class="fas fa-envelope"></i>
<p class="contact__txt">[email protected]</p>
</div>
</div>
</div>
<p class="copy">© 2017 Room Design. All Rights Reserved | Design by <span class="color-span">W3layouts</span></p>
</footer>
Raw
script.js
let btnMenu = document.getElementById('btn-menu');
let menu = document.getElementById('menu');
btnMenu.addEventListener('click', function(){
menu.classList.toggle('mostrar');
});
Raw
style.css
/*Esto es solo para codepen*/
@import url(https://fonts.googleapis.com/css?family=Frauces);
@import url(https://fonts.googleapis.com/css?family=Bitter);
/*Las fuentes originales son estas*/
@font-face {
font-family: "Frauces";
src: url(../fonts/Frauces.ttf);
}
@font-face {
font-family: "Roboto-Regular";
src: url(../fonts/Roboto-Regular.ttf);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Roboto";
}
h1, h2, h3, h4, h5, h6 {
font-family: "Bitter";
}
img {
display: block;
max-width: 100%;
}
p {
line-height: 25px;
}
.container--flex{
display: flex;
justify-content: space-between;
align-items: center;
}
/*Estilos del header*/
.main-header {
padding: 0 15px;
}
.main-title {
color: white;
}
.color-span{
color: #EEAD33;
}
/*Estilos del menu*/
.icon-menu{
font-size: 1.5em;
color: #EEAD33;
border: 1px solid white;
display: block;
padding: 5px 12px;
border-radius: 5px;
cursor: pointer;
}
.menu{
position: absolute;
top: 80px;
left: 0;
background: #212121;
width: 100%;
list-style: none;
padding: 20px;
margin: 0;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
}
.menu__item {
padding: 20px;
text-align: center;
width: 150px;
margin: auto;
}
.menu__link {
color: white;
text-decoration: none;
position: relative;
display: block;
}
.menu__link:before {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-right: 2px solid #EEAD33;
border-top: 2px solid #EEAD33;
top: 0;
right: 0;
opacity: 0;
}
.menu__link:after {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-left: 2px solid #EEAD33;
border-bottom: 2px solid #EEAD33;
left: 0;
bottom: 0;
opacity: 0;
}
.menu__link span:before {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-left: 2px solid #EEAD33;
border-top: 2px solid #EEAD33;
top: 0;
left: 0;
opacity: 0;
}
.menu__link span:after {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-bottom: 2px solid #EEAD33;
border-right: 2px solid #EEAD33;
bottom: 0;
right: 0;
opacity: 0;
}
.menu__link span{
padding: 10px;
font-size: 1.1em;
display: block;
}
.menu__link--select:before, .menu__link--select:after, .menu__link--select span:before, .menu__link--select span:after {
opacity: 1;
}
.menu__item:hover .menu__link:before, .menu__item:hover .menu__link:after, .menu__item:hover .menu__link span:before, .menu__item:hover .menu__link span:after {
opacity: 1;
}
.nav-social{
display: flex;
justify-content: center;
}
.nav-social__item{
width: 35px;
height: 35px;
display: block;
text-align: center;
padding: 10px;
border-radius: 50%;
margin: 10px;
}
.nav-social__item:first-child{
background: #3b5998;
}
.nav-social__item:nth-child(2){
background: #1da1f2;
}
.nav-social__item:nth-child(3){
background: #ea4c89;
}
.nav-social__item i{
color: white;
}
.mostrar{
opacity: 1;
visibility: visible;
}
/*Estilos del banner*/
.banner {
background: url(https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
min-height: 400px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -999;
}
.banner:before {
content: "";
width: 100%;
min-height: 400px;
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
left: 0;
}
.banner__content{
width: 100%;
padding: 15px;
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
font-size: 1.3em;
}
/*Estilos de Main*/
.main{
margin-top: 350px;
}
.section__title {
font-size: 2em;
position: relative;
text-align: center;
}
.section__title:before {
content: "";
width: 200px;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
height: 3px;
background: #EEAD33;
}
.welcome{
text-align: center;
padding: 20px;
max-width: 750px;
margin: auto;
}
.welcome__txt{
font-size: 1.2em;
color: #777;
}
.welcome__btn {
display: block;
border: 2px solid #EEAD33;
width: 200px;
margin: auto;
padding: 10px;
text-decoration: none;
color: #EEAD33;
font-size: 1.2em;
font-weight: bold;
margin-top: 30px;
transition: all 0.5s;
}
.welcome__btn:hover {
background: #EEAD33;
color: white;
}
.container-design {
margin: 20px 0;
}
.design__item{
position: relative;
}
.design__item:before {
content: "";
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
left: 0;
}
.design__title{
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
font-size: 1.8em;
width: 100%;
text-align: center;
}
.design__title:before {
content: "";
width: 200px;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
height: 3px;
background: #EEAD33;
}
.design__title:after {
content: "";
width: 200px;
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
height: 3px;
background: #EEAD33;
}
.container-testimonials {
margin: 60px auto;
max-width: 650px;
}
.testimonials__img{
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin: auto;
}
.testimonials__txt{
text-align: center;
padding: 20px;
}
.testimonials__name{
text-align: center;
font-size: 1.4em;
color: #EEAD33;
font-weight: bold;
text-transform: uppercase;
}
.box{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 30px 0;
}
.box__content{
width: 70%;
}
.box__icon{
width: 100px;
height: 100px;
border: 2px solid #999;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #EEAD33;
}
.box__icon:hover{
color: black;
}
.box__title{
color: #EEAD33;
margin: 0;
}
.box__txt {
color: #999;
}
.newsletter{
margin: 50px 0;
}
.form{
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
max-width: 600px;
}
.form__mail{
display: block;
background: #ddd;
padding: 15px;
width: 75%;
border: none;
font-size: 1em;
}
.form__submit{
display: block;
background: #EEAD33;
border: none;
padding: 15px;
width: 20%;
color: white;
font-size: 1em;
}
.main-footer{
background: #282828;
color: #828282;
}
.main-footer .container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer__title{
font-size: 1.8em;
color: white;
text-transform: uppercase;
}
.column--50-25 {
width: 49%;
padding: 20px;
}
.footer__author{
text-align: right;
color: #EEAD33;
display: block;
}
.footer__txt .fa-twitter{
color: #3bbef5;
margin-right: 5px;
}
.footer__link{
color: #EEAD33;
}
.footer__date{
font-size: .8em;
border-bottom: 1px solid #888;
padding-bottom: 10px;
color: white;
}
.social-icon{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.social-icon i {
margin-right: 10px;
width: 35px;
height: 35px;
text-align: center;
color: white;
padding: 10px;
border-radius: 50%;
}
.social-icon .fa-facebook-f{
background: #3b5998;
}
.social-icon .fa-twitter{
background: #3bbef5;
}
.social-icon .fa-dribbble{
background: #f7659b;
}
.social-icon .fa-pinterest{
background: #e23139;
}
.social__link{
display: block;
text-decoration: none;
color: #828282;
}
.contact-icon{
display: flex;
align-items: center;
}
.contact-icon .fas{
color: white;
display: block;
margin-right: 10px;
}
.copy{
background: #211E1E;
padding: 20px;
color: white;
text-align: center;
width: 100%;
}
@media screen and (min-width: 768px) {
.menu{
position: static;
opacity: 1;
visibility: visible;
width: auto;
display: flex;
background: none;
font-size: .8em;
}
.menu__item {
width: auto;
}
.icon-menu{
display: none;
}
.banner {
min-height: 500px;
}
.banner:before {
min-height: 500px;
}
.main{
margin-top: 400px;
}
.box{
justify-content: center;
}
.box__icon{
margin-right: 30px;
}
}
@media screen and (min-width: 1024px) {
.container {
width: 1000px;
margin: auto;
}
.main-title{
font-size: 2.5em;
}
.menu {
font-size: 1em;
}
.banner {
min-height: 600px;
}
.banner:before {
min-height: 600px;
}
.banner__title, .banner__txt {
font-size: 1.5em;
padding: 10px;
}
.main{
margin-top: 500px;
}
.design__item{
height: 400px;
}
.container-design .design__img{
height: 100%;
width: 100%;
object-fit: cover;
}
.container-design, .container-tips{
display: flex;
flex-wrap: wrap;
}
.design__item{
width: 50%;
}
.container-box{
width: 50%;
}
.container-tips {
height: 500px;
}
.container-tips .design__item{
height: 100%;
}
.container-tips .design__img {
height: 100%;
width: 100%;
object-fit: cover;
}
.column--50-25 {
width: 24%;
}
}
@media screen and (min-width: 1280px) {
.container {
width: 1200px;
}
.design__title{
font-size: 2.5em;
}
.design__item{
height: 500px;
}
}
@media screen and (min-width: 1600px) {
.container {
width: 1400px;
}
.banner__title, .banner__txt {
font-size: 2em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment