0% found this document useful (0 votes)

6 views36 pages

HTML src code

html documentes

Uploaded by

katotroyr

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

6 views36 pages

HTML src code

html documentes

Uploaded by

katotroyr

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

You are on page 1/ 36

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CineStream - Modern Movie Experience</title>

<link rel="icon" href="https://i.postimg.cc/MZ4CX7pY/logo-removebg-preview.png"

type="image/x-icon">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2c3e50;
--accent-color: #e74c3c;
--text-color: #ecf0f1;
--dark-bg: #1a1a2e;
--card-bg: #2d3748;
--hover-color: #3498db;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: var(--dark-bg);
color: var(--text-color);
line-height: 1.6;
}

.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}

/* Header Styles */
header {
background-color: var(--primary-color);
padding: 15px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

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

.logo {
font-size: 1.8rem;
font-weight: bold;
color: var(--text-color);
text-decoration: none;
display: flex;
align-items: center;
}

.logo i {
margin-right: 8px;
color: var(--accent-color);
}

.menu-toggle {
display: none;
background: none;
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
}

/* Navigation Styles */
.main-nav ul {
display: flex;
list-style: none;
gap: 20px;
}

.main-nav a {
color: var(--text-color);
text-decoration: none;
font-weight: 500;
padding: 8px 15px;
border-radius: 4px;
transition: all 0.3s ease;
display: flex;
align-items: center;
}

.main-nav a i {
margin-right: 8px;
}

.main-nav a:hover {
background-color: var(--hover-color);
}

.social-links {
display: flex;
gap: 15px;
}

.social-links a {
color: var(--text-color);
font-size: 1.2rem;
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--accent-color);
}

/* Search Bar */
.search-container {
width: 100%;
max-width: 800px;
margin: 30px auto;
position: relative;
}

.search-bar {
width: 100%;
padding: 15px 20px;
border-radius: 50px;
border: none;
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-color);
font-size: 1.1rem;
transition: all 0.3s ease;
padding-right: 50px;
}

.search-bar:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
}

.search-icon {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-color);
font-size: 1.2rem;
cursor: pointer;
}

/* Hero Section */
.hero {
height: 600px;
position: relative;
margin-bottom: 50px;
overflow: hidden;
border-radius: 15px;
}

.hero-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}

.hero-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 100px 50px 50px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
color: white;
}

.hero-title {
font-size: 3rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-info {
display: flex;
gap: 20px;
margin-bottom: 15px;
align-items: center;
flex-wrap: wrap;
}

.hero-info span {
display: flex;
align-items: center;
}

.hero-info span i {
margin-right: 5px;
}

.hero-rating {
display: flex;
align-items: center;
background-color: var(--accent-color);
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
}

.hero-desc {
max-width: 600px;
margin-bottom: 25px;
font-size: 1.1rem;
line-height: 1.6;
}

.hero-buttons {
display: flex;
gap: 15px;
}

.hero-btn {
padding: 12px 25px;
border: none;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.3s ease;
}

.hero-btn i {
margin-right: 8px;
}

.btn-play {
background-color: var(--accent-color);
color: white;
}

.btn-play:hover {
background-color: #c0392b;
}

.btn-info {
background-color: rgba(255, 255, 255, 0.2);
color: white;
}

.btn-info:hover {
background-color: rgba(255, 255, 255, 0.3);
}

/* Section Headers */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid var(--card-bg);
}

.section-title {
font-size: 1.8rem;
display: flex;
align-items: center;
}

.section-title i {
margin-right: 10px;
color: var(--accent-color);
}

.view-all {
color: var(--hover-color);
text-decoration: none;
display: flex;
align-items: center;
font-weight: 500;
transition: color 0.3s ease;
}

.view-all:hover {
color: var(--accent-color);
}
.view-all i {
margin-left: 5px;
}

/* Movie Cards */
.movie-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 50px;
}

.movie-card {
background-color: var(--card-bg);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}

.movie-card:hover {
transform: translateY(-5px);
}

.movie-card-img-container {
position: relative;
overflow: hidden;
height: 330px;
}

.movie-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.movie-card:hover .movie-card-img {
transform: scale(1.05);
}

.movie-card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.8));
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.movie-card:hover .movie-card-overlay {
opacity: 1;
}

.play-icon {
background-color: rgba(231, 76, 60, 0.9);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
transition: transform 0.3s ease;
}

.movie-card:hover .play-icon {
transform: scale(1.1);
}

.movie-card-content {
padding: 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
}

.movie-card-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex-grow: 1;
}

.movie-card-meta {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: #bdc3c7;
}

.quality-tag {
position: absolute;
top: 10px;
right: 10px;
background-color: var(--hover-color);
color: white;
padding: 3px 8px;
border-radius: 3px;
font-size: 0.8rem;
font-weight: bold;
z-index: 1;
}
/* Genre Pills */
.genre-pills {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 30px 0;
}

.genre-pill {
background-color: var(--card-bg);
color: var(--text-color);
padding: 8px 20px;
border-radius: 30px;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}

.genre-pill:hover, .genre-pill.active {
background-color: var(--hover-color);
}

/* Category Tabs */
.category-tabs {
display: flex;
gap: 5px;
margin-bottom: 20px;
border-bottom: 1px solid var(--card-bg);
padding-bottom: 5px;
overflow-x: auto;
scrollbar-width: none; /* Hide scrollbar Firefox */
}

.category-tabs::-webkit-scrollbar {
display: none; /* Hide scrollbar Chrome/Safari/Edge */
}

.category-tab {
padding: 10px 20px;
background: none;
border: none;
color: #bdc3c7;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s ease;
position: relative;
}

.category-tab:after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 3px;
background-color: var(--accent-color);
transition: width 0.3s ease;
}

.category-tab.active {
color: var(--text-color);
}

.category-tab.active:after {
width: 100%;
}

.category-tab:hover:not(.active) {
color: var(--accent-color);
}

/* Featured Row */
.featured-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 50px;
}

.featured-card {
display: flex;
background-color: var(--card-bg);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
}

.featured-card:hover {
transform: translateY(-5px);
}

.featured-img {
width: 180px;
height: 250px;
object-fit: cover;
}

.featured-content {
padding: 20px;
display: flex;
flex-direction: column;
}

.featured-title {
font-size: 1.4rem;
margin-bottom: 10px;
}

.featured-meta {
display: flex;
gap: 15px;
margin-bottom: 15px;
color: #bdc3c7;
font-size: 0.9rem;
}
.featured-desc {
flex-grow: 1;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.featured-btn {
align-self: flex-start;
padding: 8px 20px;
background-color: var(--hover-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
text-decoration: none;
display: flex;
align-items: center;
}

.featured-btn i {
margin-right: 5px;
}

.featured-btn:hover {
background-color: #2980b9;
}

/* Newsletter */
.newsletter {
background-color: var(--primary-color);
border-radius: 10px;
padding: 40px;
margin: 50px 0;
text-align: center;
}

.newsletter h2 {
font-size: 2rem;
margin-bottom: 15px;
}

.newsletter p {
max-width: 600px;
margin: 0 auto 25px;
}

.newsletter-form {
display: flex;
max-width: 500px;
margin: 0 auto;
gap: 10px;
}

.newsletter-input {
flex-grow: 1;
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 1rem;
}

.newsletter-submit {
padding: 12px 25px;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: background-color 0.3s ease;
}

.newsletter-submit:hover {
background-color: #c0392b;
}

/* Footer */
footer {
background-color: var(--primary-color);
padding: 50px 0 20px;
margin-top: 50px;
}

.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 30px;
}

.footer-section h3 {
color: var(--text-color);
margin-bottom: 20px;
font-size: 1.3rem;
position: relative;
padding-bottom: 10px;
}

.footer-section h3:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--accent-color);
}

.footer-links {
list-style: none;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-links a {
color: #bdc3c7;
text-decoration: none;
transition: color 0.3s ease;
display: flex;
align-items: center;
}

.footer-links a i {
margin-right: 8px;
}

.footer-links a:hover {
color: var(--accent-color);
}

.app-badges {
display: flex;
gap: 10px;
margin-top: 15px;
}

.app-badge {
background-color: #1c2833;
color: white;
padding: 10px 15px;
border-radius: 5px;
display: flex;
align-items: center;
text-decoration: none;
transition: background-color 0.3s ease;
}

.app-badge:hover {
background-color: #3498db;
}

.app-badge i {
font-size: 1.5rem;
margin-right: 10px;
}

.app-badge span {
display: flex;
flex-direction: column;
}

.app-store-text {
font-size: 0.7rem;
}

.app-store-name {
font-weight: 600;
}

.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #bdc3c7;
font-size: 0.9rem;
}

/* Modal */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.modal-backdrop.active {
opacity: 1;
pointer-events: all;
}

.modal-content {
width: 90%;
max-width: 900px;
background-color: var(--dark-bg);
border-radius: 10px;
overflow: hidden;
position: relative;
}

.modal-close {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}

.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}

/* Responsive Design */
@media (max-width: 992px) {
.featured-row {
grid-template-columns: 1fr;
}

.hero-title {
font-size: 2.5rem;
}
}

@media (max-width: 768px) {

.menu-toggle {
display: block;
}

.main-nav {
position: fixed;
top: 70px;
left: -100%;
width: 250px;
height: calc(100vh - 70px);
background-color: var(--primary-color);
transition: left 0.3s ease;
z-index: 99;
}

.main-nav.active {
left: 0;
}

.main-nav ul {
flex-direction: column;
padding: 20px;
}

.social-links {
display: none;
}

.hero {
height: 500px;
}

.hero-content {
padding: 80px 30px 30px;
}
.hero-title {
font-size: 2rem;
}

.hero-desc {
font-size: 1rem;
}

.featured-img {
width: 120px;
height: 180px;
}

.newsletter-form {
flex-direction: column;
}
}

@media (max-width: 480px) {

.hero-buttons {
flex-direction: column;
width: 100%;
}

.hero-btn {
width: 100%;
justify-content: center;
}

.featured-card {
flex-direction: column;
}

.featured-img {
width: 100%;
height: 200px;
}
}
</style>
</head>
<body>
<div id="splash-screen">
<div class="splash-content">
<i class="fas fa-film splash-icon"></i>
<h1 class="splash-text">CineStream</h1>
<p class="splash-subtext">Modern Movie Experience</p>
</div>
</div>

<div class="modal-backdrop" id="youtubeModal">

<div class="modal-content">
<button class="modal-close" id="closeModal"><i class="fas
fa-times"></i></button>
<div class="video-container">
<iframe id="youtubePlayer" src="" allowfullscreen></iframe>
</div>
</div>
</div>

<header>
<div class="container header-content">
<a href="file:///C:/Users/STUDENT%2011/Desktop/oo.html" class="logo">
<i class="fas fa-film"></i>CineStream
</a>

<button class="menu-toggle" id="menuToggle">

<nav class="main-nav" id="mainNav">

<ul>
<li><a href="index.html"><i class="fas fa-home"></i>Home</a></li>
<li><a href="/genre/in-theaters/"><i class="fas
fa-ticket-alt"></i>Theaters</a></li>
<li><a href="/top/"><i class="fas fa-trophy"></i>Rated</a></li>
<li><a href="/genre/tv-series/"><i class="fas fa-tv"></i>TV
Series</a></li>
<li><a href="/watchlist/"><i class="fas fa-list"></i>My
Watchlist</a></li>
</ul>
</nav>

<section class="hero">
<img src="https://i.postimg.cc/9QXh3zpy/dune.jpg" alt="Dune: Part Two"
class="hero-img">
<div class="hero-content">
<h1 class="hero-title">Dune: Part Two</h1>
<div class="hero-info">
<div class="hero-rating"><i class="fas fa-star"></i> 8.5</div>
<span><i class="fas fa-calendar"></i> 2024</span>
<span><i class="fas fa-clock"></i> 166 min</span>
<span><i class="fas fa-film"></i> Sci-Fi, Adventure</span>
</div>
<p class="hero-desc">Paul Atreides unites with Chani and the Fremen while
seeking revenge against the conspirators who destroyed his family. Facing a choice
between the love of his life and the fate of the universe, he must prevent a
terrible future only he can foresee.</p>
<div class="hero-buttons">
<a href="file:///C:/Users/OTHER%20LEARNERS/Desktop/ii.html"
class="hero-btn btn-play"><i class="fas fa-play"></i> Watch Now</a>
<a href="https://en.wikipedia.org/wiki/Dune:_Part_Two" class="hero-btn
btn-info"><i class="fas fa-info-circle"></i> More Info</a>
</div>
</div>
</section>

<div class="genre-pills">
<a href="#" class="genre-pill active">All</a>
<a href="#" class="genre-pill">Action</a>
<a href="#" class="genre-pill">Comedy</a>
<a href="#" class="genre-pill">Drama</a>
<a href="#" class="genre-pill">Horror</a>
<a href="#" class="genre-pill">Sci-Fi</a>
<a href="#" class="genre-pill">Animation</a>
<a href="#" class="genre-pill">Romance</a>
<a href="#" class="genre-pill">Thriller</a>
</div>

<section>
<div class="section-header">
<h2 class="section-title"><i class="fas fa-fire"></i> Popular Movies</h2>
<a href="/popular/" class="view-all">View All <i class="fas fa-chevron-
right"></i></a>
</div>

<div class="category-tabs">
<button class="category-tab active">Today</button>
<button class="category-tab">This Week</button>
<button class="category-tab">This Month</button>
<button class="category-tab">All Time</button>
</div>

<div class="movie-card-content">
<h3 class="movie-card-title">Captain Marvel</h3>
<div class="movie-card-meta">
<span>2019</span>
<span><i class="fas fa-star"></i> 6.9</span>
</div>
</div>
</a>
<a href="movie-detail.html" class="movie-card">
<div class="movie-card-img-container">
<span class="quality-tag">HD</span>
<img
src="https://image.tmdb.org/t/p/original/AtsgWhDnHTq68L0lLsUrCnM7TjG.jpg"
alt="Captain Marvel" class="movie-card-img">
<div class="movie-card-overlay">
<div class="play-icon">
<i class="fas fa-play"></i>
</div>
</div>
</div>

<div class="movie-card-content">
<h3 class="movie-card-title">Captain Marvel</h3>
<div class="movie-card-meta">
<span>2019</span>
<span><i class="fas fa-star"></i> 6.9</span>
</div>
</div>
</a>

<a href="#" class="movie-card">
<div class="movie-card-img-container">
<span class="quality-tag">4K</span>
<img src="https://i.postimg.cc/C5tmcPmv/end.jpg" alt="Avengers:
Endgame" class="movie-card-img">
<div class="movie-card-overlay">
<div class="play-icon">
<i class="fas fa-play"></i>
</div>
</div>
</div>
<div class="movie-card-content">
<h3 class="movie-card-title">Avengers: Endgame</h3>
<div class="movie-card-meta">
<span>2019</span>
<span><i class="fas fa-star"></i> 8.4</span>
</div>
</div>
</a>
<a href="movie-detail.html" class="movie-card">
<div class="movie-card-img-container">
<span class="quality-tag">HD</span>
<img
src="https://image.tmdb.org/t/p/original/AtsgWhDnHTq68L0lLsUrCnM7TjG.jpg"
alt="Captain Marvel" class="movie-card-img">
<div class="movie-card-overlay">
<div class="play-icon">
<i class="fas fa-play"></i>
</div>
</div>
</div>

<div class="movie-card-content">
<h3 class="movie-card-title">Captain Marvel</h3>
<div class="movie-card-meta">
<span>2019</span>
<span><i class="fas fa-star"></i> 6.9</span>
</div>
</div>
</a>

<a href="#" class="movie-card">
<div class="movie-card-img-container">
<span class="quality-tag">HD</span>
<img src="https://i.postimg.cc/FF8Kybh1/shazam.jpg" alt="Shazam!"
class="movie-card-img">
<div class="movie-card-overlay">
<div class="play-icon">
<i class="fas fa-play"></i>
</div>
</div>
</div>
<div class="movie-card-content">
<h3 class="movie-card-title">Shazam!</h3>
<div class="movie-card-meta">
<span>2019</span>
<span><i class="fas fa-star"></i> 8.4</span>
</div>
</div>
</a>

<a href="#" class="movie-card">

<div class="movie-card-img-container">
<span class="quality-tag">HD</span>
<img src="https://i.postimg.cc/RCJdS9S9/pp.jpg" alt="Shazam!"
class="movie-card-img">
<div class="movie-card-overlay">
<div class="play-icon">
<i class="fas fa-play"></i>
</div>
</div>
</div>
<div class="movie-card-content">
<h3 class="movie-card-title">SuperMan</h3>
<div class="movie-card-meta">
<span>2019</span>
<span><i class="fas fa-star"></i> 8.4</span>
</div>
</div>
</a>
<section>
<div class="section-header">
<h2 class="section-title">
<i class="fas fa-fire" style="color: red;"></i> Animation
</h2>
</div>
<a href="#" class="movie-card">
<div class="movie-card-img-container">
<span class="quality-tag">4K</span>
<img src="https://i.postimg.cc/C5tmcPmv/end.jpg" alt="Avengers:
Endgame" class="movie-card-img">
<div class="movie-card-overlay">
<div class="play-icon">
<i class="fas fa-play"></i>
</div>
</div>
</div>
<div class="movie-card-content">
<h3 class="movie-card-title">Avengers: Endgame</h3>
<div class="movie-card-meta">
<span>2019</span>
<span><i class="fas fa-star"></i> 8.4</span>
</div>
</div>
</a>
</section>
<script>
const playButton = document.querySelector('.btn-play');
const modal = document.getElementById('youtubeModal');
const iframe = document.getElementById('youtubePlayer');
const closeModal = document.getElementById('closeModal');

playButton.addEventListener('click', (e) => {

e.preventDefault();
// Set the YouTube video URL
iframe.src = "iframe.src = "https://www.youtube.com/embed/tH9bS7fIKps?
autoplay=1";
";

// Show the modal

modal.classList.add('active');

// Try to enter fullscreen (user must have clicked)

const iframeElement = iframe;
const requestFullscreen = iframeElement.requestFullscreen ||
iframeElement.webkitRequestFullscreen || iframeElement.msRequestFullscreen;
if (requestFullscreen) {
requestFullscreen.call(iframeElement);
}
});

closeModal.addEventListener('click', () => {
modal.classList.remove('active');
iframe.src = ""; // stop video
// Exit full screen if needed
const exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen
|| document.msExitFullscreen;
if (exitFullscreen) {
exitFullscreen.call(document);
}
});
</script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CineStream - Modern Movie Experience</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2c3e50;
--accent-color: #e74c3c;
--text-color: #ecf0f1;
--dark-bg: #1a1a2e;
--card-bg: #2d3748;
--hover-color: #3498db;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}