Skip to content

html and css structure added #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TokarzDawid wants to merge 1 commit into
base: master
Choose a base branch
from
Open

html and css structure added #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
134 changes: 134 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Montserrat">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header ">
<nav class="navbar">
<img src="./images/logo.svg" alt="" class="header__logo" />
<ul class="header__menu">
<li class="list__item"><a href="./#team" class="item__text">The Team</a></li>
<li class="list__item"><a href="./#pricing" class="item__text">Pricing</a></li>
<li class="list__item"><a href="./#features" class="item__text">Features</a></li>
</ul>
</nav>
<div class="div__text--container">
<div class="text__all">
<div class="text__h1">
<h1>Beautiful Free Nova template</h1>
<p>A top notch premium quality template for your next web project</p>
<button class="button__header">Download Free!</button>
</div>
<div class="img__container">
<img class="template__img" src="./images/screen.png" alt="screen">
</div>
</div>
</div>
</header>
<main class="main" id="main">
<section class="features" id="features">
<div class="features__container">
<div class="features__h2--text">
<h2>Features</h2>
</div>
<div class="features__container--items">
<div class="features__items--responsive">
<img src="./images/responsive.svg" alt="responsive">
<h3>Fully Responsive</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam dolores illo, consectetur aspernatur ipsam, nemo maiores eos </p>
</div>
<div class="features__items--customizable">
<img src="./images/customizable.svg" alt="responsive">
<h3>Customizable</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam dolores illo, consectetur aspernatur ipsam, nemo maiores eos </p>
</div>
<div class="features__items--slick">
<img src="./images/design.svg" alt="responsive">
<h3>Slick and beautiful design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam dolores illo, consectetur aspernatur ipsam, nemo maiores eos </p>
</div>
</div>
</section>
<section class="banners">
<div class="banner__container">
<img src="./images/logos.png" alt="banners">
</div>
</section>
<article class="imac-article">
<div class="imac__img">
<img class="imac__section-img" src="./images/imac.png" alt="imac">
</div>
<div class="imac__text">
<h2>SIMPLE AND BEAUTIFUL</h2>
<p>Use Nova theme for your next web project. It is completely cusotmiazable so you can chagne any of the sections to fit your needs. Noova Theme is free for any kind of use, personal and commercial. Have fun and good luck!</p>
</div>
</article>
<section class="pricing" id="pricing">
<div class="pricing__title">
<h2>CHOOSE YOUR PRICING PLAN</h2>
<P>Pick any of our super affordable pricing plans</P>
</div>
<div class="pricing__items">
<div class="pricing_item">
<h4>BASIC</h4>
<p class="pricing__price">15$</p>
<p>Up to 7 projects <br>2 Additional Developers</p>
<button class="pricing__button">Get Started</button>
</div>
<div class="pricing_item">
<h4>BASIC</h4>
<p class="pricing__price">55$</p>
<p>Up to 25 Projects <br> 2 Additional Developers <br> Unlimited Support</p>
<button class="pricing__button">Get Started</button>
</div>
<div class="pricing_item">
<h4>BASIC</h4>
<p class="pricing__price">75$</p>
<p>Up to 25 projects <br> 2 Additional Developers <br> Unlimited Support <br> 1.5GB Disk Space</p>
<button class="pricing__button">Get Started</button>
</div>
</div>
</section>
<section class="team" id="team">
<div class="team__h2">
<h2>THE TEAM</h2>
</div>
<div class="team__container">
<div class="team__cto">
<img src="./images/cto.png" alt="CTO">
<p>CTO</p>
<p class="team__paragraph">Johnny B Good</p>
<p>The brains behind the whole operation</p>
<img src="./images/team-twitter.svg" alt="twitter">
<img src="./images/team-facebook.svg" alt="facebook">
</div>
<div class="team__ceo">
<img src="./images/ceo.png" alt="CEO">
<p>CEO</p>
<p class="team__paragraph">Roll Over Beethoven</p>
<p>The one that puts it all together</p>
<img src="./images/team-twitter.svg" alt="twitter">
<img src="./images/team-facebook.svg" alt="facebook">
</div>
<div class="team__cfo">
<img src="./images/cfo.png" alt="CFO">
<p>CFO</p>
<p class="team__paragraph">Chuck Berry</p>
<p>The guy with his hand on the wallet</p>
<img src="./images/team-twitter.svg" alt="twitter">
<img src="./images/team-facebook.svg" alt="facebook">
</div>
</div>
</section>
</main>
<footer class="footer" id="footer">
<p>A free template by</p>
<img src="./images/webscope.svg" alt="webscope">
</footer>
</body>
</html>
205 changes: 205 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
html, body {
margin: 0;
padding: 0;
font-family: helvetica, Montserrat ;
}

.header {
background: radial-gradient(rgb(194, 74, 126), rgb(105, 86, 235));
width: 100%;
}

.navbar {
display: flex;
justify-content: space-between;
}

.header__logo {
margin-left: 20px;
}

.header__menu {
display: flex;
margin-bottom: 50px;
}

.list__item {
list-style: none;

}


.item__text {
margin-right: 70px;
text-decoration: none;
color: white;
}

.div__text {

}

.text__all {
display: flex;
justify-content: space-between;
align-items: center;
}

.text__h1 {
margin-left: 80px;
color: white;
}

.img__container {
margin-right: 70px;
}


.template__img {
transform: scale(0.8) rotate(-10deg);
}

.button__header {
background-color: #25f18b;
border-radius: 10px;
width: 150px;
height: 40px;
border-style: none;
color: white;
cursor: pointer;
}


.features {
background-color: #000000;
}

.features__container {
color: white;
}

.features__h2--text {
text-align: center;
margin: 0;
padding-top: 100px;
padding-bottom: 50px;
}

.features__items {
display: flex;
}

.features__container--items {
display: flex;
align-items: center;
text-align: center;
padding-bottom: 80px;
}

.banner__container {
width: 100%;
background-color: #f9fafa;
}

.banners {
padding: 40px 0;
text-align: center;
background-color: #f9fafa;

}

.banner__container img {
max-width: 100%;
height: auto;
}

.imac-article {
display: flex;
}

.imac__section-img {
transform: scale(0.8);
}

.imac__text {
text-align: center;
margin-top: 90px;
}

.pricing {
background-color: #f8f9f9;
}

.pricing__title {
text-align: center;
padding: 5px;

}

.pricing__items {
display: flex;
align-items: center;
justify-content: center;
gap: 300px;
}

.pricing_item {
text-align: center;
margin-bottom: 50px;
}

.pricing__price {
font-size: 26px;
font-weight: bold;
}

.pricing__button{
background-color: #0abceb;
color: white;
border-radius: 10px;
height: 50px;
width: 130px;
border: none;
}


.pricing_item:hover {
border: 1px solid white;
box-shadow: 0 0 5px rgb(224, 218, 218);
transition: 0.3s;
transform: scale(1.2);
}

/* Section TEAM */

.team__container {
display: flex;
text-align: center;
justify-content: center;
gap: 200px;
margin-top: 50px;
margin-bottom: 50px;
}

.team__h2 {
margin-left: 20px;
margin-bottom: 50px;
text-align: center;
}

.team__paragraph {
font-size: 16px;
font-weight: bold;
}



/* footer */

.footer {
display: flex;
justify-content: center;
gap: 10px;
color: white;
background-color: #464646;
}