Skip to content

Instantly share code, notes, and snippets.

@Yurii-Chaban

Yurii-Chaban/defefef

Created March 18, 2024 18:48
Show Gist options
  • Save Yurii-Chaban/1bf3fbc9e8ad099ccd713799b7d64d5f to your computer and use it in GitHub Desktop.
Save Yurii-Chaban/1bf3fbc9e8ad099ccd713799b7d64d5f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
defefef
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebStudio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css"
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="./css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,700;1,700&family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container header-container">
<nav class="header-nav">
<a href="./index.html" class="logo">Web<span class="logo-part">Studio</span></a>
<ul class="nav-list">
<li><a class="nav-link current" href="./index.html">Studio</a></li>
<li><a class="nav-link" href="">Portfolio</a></li>
<li><a class="nav-link" href="">Contacts</a></li>
</ul>
</nav>
<address class="address">
<ul class="address-header">
<li><a class="address-link" href="mailto:info@devstudio.com">info@devstudio.com</a></li>
<li><a class="address-link" href="tel:+110001111111">+11 (000) 111-11-11</a> </li>
</ul>
</address>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1 class="hero-name">Effective Solutions for Your Business</h1>
<button class="hero-order-btn" type="button">Order Service</button>
</div>
</section>
<section class="info">
<div class="container">
<h2 class="visually-hidden">&nbsp;</h2>
<ul class="info-list">
<li class="text-list-strenghts">
<div class="item">
<svg class="item-icon" width="64" height="64">
<use href="./images/icon-nav.svg.svg#icon-antenna"></use>
</svg>
</div>
<h3 class="text-list-name-info">Strategy</h3>
<p class="text">
Our goal is to identify the business problem to walk away with the
perfect and creative solution.
</p>
</li>
<li class="text-list-strenghts">
<div class="item">
<svg class="item-icon" width="64" height="64">
<use href="./images/icon-nav.svg.svg#icon-clock"></use>
</svg>
</div>
<h3 class="text-list-name-info">Punctuality</h3>
<p class="text">
Bring the key message to the brand's audience for the best price
within the shortest possible time.
</p>
</li>
<li class="text-list-strenghts">
<div class="item">
<svg class="item-icon" width="64" height="64">
<use href="./images/icon-nav.svg.svg#icon-diagram"></use>
</svg>
</div>
<h3 class="text-list-name-info">Diligence</h3>
<p class="text">
Research and confirm brands that present the strongest digital
growth opportunities and minimize risk.
</p>
</li>
<li class="text-list-strenghts">
<div class="item">
<svg class="item-icon" width="64" height="64">
<use href="./images/icon-nav.svg.svg#icon-astronaut"></use>
</svg>
</div>
<h3 class="text-list-name-info">Technologies</h3>
<p class="text">
Design practice focused on digital experiences. We bring forth a
deep passion for problem-solving.
</p>
</li>
</ul>
</div>
</section>
<section class="team">
<div class="container">
<h2 class="name-list">Our Team</h2>
<ul class="team-link">
<li class="team-list">
<div class="last-name">
<img src="./images/mark-guerrero.jpg" width="264" alt="Mark Guerrero">
<h3 class="text-list-name">Mark Guerrero</h3>
<p class="text-tema">Product Designer</p>
<ul class="team-icon-list">
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use xlink:href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
</ul>
</div>
</li>
<li class="team-list">
<div class="last-name">
<img src="./images/tom-ford.jpg" width="264" alt="Tom Ford">
<h3 class="text-list-name">Tom Ford</h3>
<p class="text-tema">Frontend Developer</p>
<ul class="team-icon-list">
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
</ul>
</div>
</li>
<li class="team-list">
<div class="last-name">
<img src="./images/camila-garcia.jpg" width="264" alt="Camila Garcia">
<h3 class="text-list-name">Camila Garcia</h3>
<p class="text-tema">Marketing</p>
<ul class="team-icon-list">
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
</ul>
</div>
</li>
<li class="team-list">
<div class="last-name">
<img src="./images/daniel-wilson.jpg" width="264" alt="Daniel Wilson">
<h3 class="text-list-name">Daniel Wilson</h3>
<p class="text-tema">UI Designer</p>
<ul class="team-icon-list">
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li class="team-icon-link">
<a class="icon" href="">
<svg class="team-icon" width="16" height="16">
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</section>
<section class="portfolio">
<div class="container">
<h2 class="name-list">Our Portfolio</h2>
<ul class="portfolio-list">
<li class="title-list">
<div class="portfolio-conteiner">
<img src="./images/Banking-App.jpg" width="360" alt="Banking-App">
<p class="portfolio-text-next"> 14 Stylish and User-Friendly App Design Concepts · Task Manager App ·
Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App
</p>
</div>
<div class="portfolio-name">
<h3 class="portfolio-link">Banking App</h3>
<p class="portfolio-text">App</p>
</div>
</li>
<li class="title-list">
<div class="portfolio-conteiner">
<img src="./images/Cashless-Payment.jpg" width="360" alt="Cashless-Payment">
<p class="portfolio-text-next"> 14 Stylish and User-Friendly App Design Concepts · Task Manager App ·
Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App
</p>
</div>
<div class="portfolio-name">
<h3 class="portfolio-link">Cashless Payment</h3>
<p class="portfolio-text">Marketing</p>
</div>
</li>
<li class="title-list">
<div class="portfolio-conteiner">
<img src="./images/Meditation-App.jpg" width="360" alt="Meditation-App">
<p class="portfolio-text-next"> 14 Stylish and User-Friendly App Design Concepts · Task Manager App ·
Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App
</p>
</div>
<div class="portfolio-name">
<h3 class="portfolio-link">Meditation App</h3>
<p class="portfolio-text">App</p>
</div>
</li>
<li class="title-list">
<div class="portfolio-conteiner">
<img src="./images/Taxi-Service.jpg" width="360" alt="Taxi-Service">
<p class="portfolio-text-next"> 14 Stylish and User-Friendly App Design Concepts · Task Manager App ·
Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App
</p>
</div>
<div class="portfolio-name">
<h3 class="portfolio-link">Taxi Service</h3>
<p class="portfolio-text">Marketing</p>
</div>
</li>
<li class="title-list">
<div class="portfolio-conteiner">
<img src="./images/Screen-Illustrations.jpg" width="360"
alt="Screen-Illustrations">
<p class="portfolio-text-next"> 14 Stylish and User-Friendly App Design Concepts · Task Manager App ·
Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App
</p>
</div>
<div class="portfolio-name">
<h3 class="portfolio-link">Screen Illustrations</h3>
<p class="portfolio-text">Design</p>
</div>
</li>
<li class="title-list">
<div class="portfolio-conteiner">
<img src="./images/Online-Courses.jpg" width="360" alt="Online-Courses">
<p class="portfolio-text-next"> 14 Stylish and User-Friendly App Design Concepts · Task Manager App ·
Calorie Tracker App · Exotic Fruit Ecommerce App · Cloud Storage App
</p>
</div>
<div class="portfolio-name">
<h3 class="portfolio-link">Online Courses</h3>
<p class="portfolio-text">Marketing</p>
</div>
</li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="container general">
<div class="footer-subname">
<a href="./index.html" class="logo-part-footer">Web<span class="logo-footer">Studio</span></a>
<p class="text-footer">
Increase the flow of customers and sales for your business with digital
marketing & growth solutions.
</p>
</div>
<div class="social-conteiner">
<p class="footrer-name-list">Social media</p>
<ul class="footer-list">
<li class="footer-link">
<a class="footer-icon-madia" href="">
<svg class="footer-icon" width="24" height="24">
<use href="./images/icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li class="footer-link">
<a class="footer-icon-madia" href="">
<svg class="footer-icon" width="24" height="24">
<use href="./images/icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li class="footer-link">
<a class="footer-icon-madia" href="">
<svg class="footer-icon" width="24" height="24">
<use href="./images/icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li class="footer-link">
<a class="footer-icon-madia" href="">
<svg class="footer-icon" width="24" height="24">
<use href="./images/icons.svg#icon-linkedin"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment