Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created November 27, 2020 14:55
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 codecademydev/4150e9fad026d18ffa4c8104ab9d871a to your computer and use it in GitHub Desktop.
Save codecademydev/4150e9fad026d18ffa4c8104ab9d871a to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta lang= "en" charset="utf-8">
<title>Tea Cozy</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="header__wrapper">
<!--Основний контейнер хедера-->
<div class="header__inner">
<!--Логотип-->
<div class="logo">
<img class="logo" src="images/Tea Cozy logo.jpg" alt="Tea Cozy logo">
</div>
<!--Навігаційний блок-->
<nav class="nav">
<a class="nav__link" href="#mission">Mission</a>
<a class="nav__link" href="#services">Featured Tea</a>
<a class="nav__link" href="#location">Locations</a>
</nav>
</div>
</div>
</header>
<main>
<section id="mission">
<div class="wrapper">
<div class="banner">
<div class="intro">
<div class="title_1">
<h2 class="title">Our Mission</h2>
</div>
<div class="sub_title">
<h4 class="title">Handpicked</h4>
<h4 class="title">Artisanally Curated</h4>
<h4 class="title">Free Range</h4>
<h4 class="title">Sustainable</h4>
<h4 class="title">Small Batch</h4>
<h4 class="title">Fair Trade</h4>
<h4 class="title">Organic Tea</h4>
</div>
</div>
</div>
</div>
</section>
<section id="services">
<div class="wrapper_1">
<div class="services">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="services_items">
<div class="item">
<img src="images/Services/Berry_Blitz.jpg" alt="Cup of Tea on the Table">
<p>Fall Berry Blitz Tea</p>
</div>
<div class="item">
<img src="images/Services/Spiced_Rum_Tea.jpg" alt="Package of Tea on the Table">
<p>Spiced Rum Tea</p>
</div>
<div class="item">
<img src="images/Services/Donutt.jpg" alt="Donutt on the Table">
<p>Seasonal Donuts</p>
</div>
<div class="item">
<img src="images/Services/myrtle_ave.jpg" alt="Cake on the Table">
<p>Myrtle Ave Tea</p>
</div>
<div class="item">
<img src="images/Services/Badford_Bizarre_Tea.jpg" alt="Cup of Tea on the Table">
<p>Bedford Bizzare Tea</p>
</div>
</div>
</div>
</div>
</section>
<section id="locations">
<div class="wrapper">
<div class="location">
<h2 class="location_title">Locations</h2>
<div class="location_adress">
<div class="location_item">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="location_item">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="location_item">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
</div>
</div>
</section>
<section id="contacts">
<div class="wrapper">
<div class="contacts">
<h2 class="contact-item">The Tea Cozy</h2>
<h5 class="contact-item">contact@theteacozy.com</h5>
<h5 class="contact-item">917-555-8904</h5>
</div>
</div>
</section>
</main>
<footer>
<div class="footer">
<h5>Copyright the Tea Cozy 2017</h5>
</div>
</footer>
</body>
</html>
Raw
style.css
body {
margin: 0; /*Обнуляю поля браузера*/
background-color: #0e0d0c;
font-family: "Helvetica", sans-serif;
font-size: 22px;
}
/*Алгоритм підрахунку розмірів полів і відступів*/
*,
*:before,
*:after {
box-sizing: border-box;
}
h2, h3, h4, h5{
margin: 0;
padding: 10px;
color: seashell;
opacity: 0.9;
}
/*Заголовок
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
.header {
width: 100%;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #0f0e11;
opacity: 0.9;
}
/*Основний контейнер хедера*/
.header__wrapper {
width: 100%;
margin: 0 auto;
}
.header__inner {
margin: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
/*Логотип*/
.logo {
height: 50px;
opacity: 0.9;
}
/*Навігаційний блок*/
.nav {
padding: 20px 0;
opacity: 0.9;
}
/*Посилання навігації*/
.nav__link {
color: seashell;
padding: 0 10px;
}
/*Прибираю поле перед першим посиланням*/
.nav__link:first-child {
padding-left: 0;
}
/*При наводі на посилання*/
.nav__link:hover {
color: #ba0000;
opacity: 1;
}
.logo:hover {
opacity: 1;
}
/*
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
/*Основний контейнер*/
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
/*Баннер
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
.banner {
margin-top: 69px;
height: 700px;
background-image: url("images/Banner_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: 0.9;
position: relative;
}
/*Заголовки*/
.intro {
width: 100%;
height: 100px;
background-color: #0e0d0c;
position: absolute;
margin-top: 250px;
}
.title {
color: seashell;
opacity: 0.9;
}
.title_1 {
text-align: center;
}
.sub_title {
display: flex;
justify-content: center;
}
/*
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
/*Сервіси
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
/*Основний контейнер сурвіс-секції*/
.wrapper_1 {
max-width: 1000px;
margin: 0 auto;
}
.services {
text-align: center;
}
.services_items {
display: flex;
flex-wrap: wrap;
Justify-content: center;
}
.item {
display: block;
text-align: center;
opacity: 0.9;
}
.item img {
height: 200px;
width: 300px;
padding: 10px;
opacity: 0.9;
}
p {
color: seashell;
opacity: 0.9;
}
#services {
margin: 70px 0;
}
/*
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
/*Локації
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
.location {
background-image: url("images/Locations.jpg");
background-repeat: no-repeat;
background-position: center 25%;
background-size: cover;
height: 500px;
opacity: 0.9;
}
.location_title {
text-align: center;
margin-bottom: 15px;
padding-top: 70px;
}
.location_adress {
display: flex;
justify-content: center;
}
.location_item {
width: 300px;
background-color: #0e0d0c;
display: block;
text-align: center;
margin-right: 40px;
}
/*
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
/*Локації
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
.contacts {
height: 200px;
text-align: center;
}
.contact-item {
padding-bottom: 30px;
opacity: 0.9;
}
/*
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
/*Футер
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
.footer {
margin-left: 20px;
text-align: left;
opacity: 0.9;
}
/*
~=~=~=~=~=~=~=~=~=~=~=~=~=*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment