├── README.md
├── debug.log
├── assets
    ├── img
    │   ├── perfil.png
    │   ├── skill.jpg
    │   ├── work1.jpg
    │   ├── work2.jpg
    │   ├── work3.jpg
    │   ├── work4.jpg
    │   ├── work5.jpg
    │   └── work6.jpg
    ├── js
    │   └── main.js
    └── css
    │   └── style.css
├── yarn.lock
├── .idea
    ├── codeStyles
    │   └── codeStyleConfig.xml
    ├── modules.xml
    ├── Новая папка.iml
    └── workspace.xml
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # beautifull-website
2 | very beautifull website for portfolio 
3 | 


--------------------------------------------------------------------------------
/debug.log:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/debug.log


--------------------------------------------------------------------------------
/assets/img/perfil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/perfil.png


--------------------------------------------------------------------------------
/assets/img/skill.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/skill.jpg


--------------------------------------------------------------------------------
/assets/img/work1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/work1.jpg


--------------------------------------------------------------------------------
/assets/img/work2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/work2.jpg


--------------------------------------------------------------------------------
/assets/img/work3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/work3.jpg


--------------------------------------------------------------------------------
/assets/img/work4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/work4.jpg


--------------------------------------------------------------------------------
/assets/img/work5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/work5.jpg


--------------------------------------------------------------------------------
/assets/img/work6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sammibadriddinov/beautifull-website/HEAD/assets/img/work6.jpg


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 | 
4 | 
5 | 


--------------------------------------------------------------------------------
/.idea/codeStyles/codeStyleConfig.xml:
--------------------------------------------------------------------------------
1 | <component name="ProjectCodeStyleConfiguration">
2 |   <state>
3 |     <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4 |   </state>
5 | </component>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/Новая папка.iml" filepath="$PROJECT_DIR$/.idea/Новая папка.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/Новая папка.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="ChangeListManager">
 4 |     <list default="true" id="0c735701-3f65-413e-9120-c4ae3efd9a68" name="Default Changelist" comment="" />
 5 |     <option name="SHOW_DIALOG" value="false" />
 6 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 7 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 8 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 9 |   </component>
10 |   <component name="ProjectId" id="1iiQGv9FRnxP2P0ZQyfTiJAJVED" />
11 |   <component name="ProjectViewState">
12 |     <option name="autoscrollToSource" value="true" />
13 |     <option name="hideEmptyMiddlePackages" value="true" />
14 |     <option name="showLibraryContents" value="true" />
15 |     <option name="showMembers" value="true" />
16 |   </component>
17 |   <component name="PropertiesComponent">
18 |     <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
19 |     <property name="WebServerToolWindowFactoryState" value="false" />
20 |     <property name="nodejs_package_manager_path" value="npm" />
21 |     <property name="vue.rearranger.settings.migration" value="true" />
22 |   </component>
23 |   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
24 |   <component name="TaskManager">
25 |     <task active="true" id="Default" summary="Default task">
26 |       <changelist id="0c735701-3f65-413e-9120-c4ae3efd9a68" name="Default Changelist" comment="" />
27 |       <created>1602387854361</created>
28 |       <option name="number" value="Default" />
29 |       <option name="presentableId" value="Default" />
30 |       <updated>1602387854361</updated>
31 |       <workItem from="1602387858922" duration="9520000" />
32 |     </task>
33 |     <servers />
34 |   </component>
35 |   <component name="TypeScriptGeneratedFilesManager">
36 |     <option name="version" value="3" />
37 |   </component>
38 | </project>


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
 1 | /*=========== SHOW MENU  ===============*/
 2 | const showMenu = (toggleId, navId) => {
 3 |     const toggle = document.getElementById(toggleId);
 4 |     const nav = document.getElementById(navId);
 5 | 
 6 |     if (toggle && nav) {
 7 |         toggle.addEventListener('click', () => {
 8 |             nav.classList.toggle('show')
 9 |         })
10 |     }
11 | }
12 | showMenu('nav-toggle', 'nav-menu')
13 | 
14 | /*=========== REMOVE MENU MOBILE  ===============*/
15 | const navLink = document.querySelectorAll('.nav__link')
16 | 
17 | function linkAction() {
18 |     const navMenu = document.getElementById('nav-menu')
19 |     navMenu.classList.remove('show')
20 | }
21 | navLink.forEach(n => n.addEventListener('click', linkAction))
22 | 
23 | /*=========== SCROLL SECTION ACTIVE LINK  ===============*/
24 | const sections = document.querySelectorAll('section[id]')
25 | 
26 | window.addEventListener('scroll', scrollActive)
27 | 
28 | function scrollActive() {
29 |     const scrollY = window.scrollY
30 | 
31 |     sections.forEach(function (current) {
32 |         const sectionHeight = current.offsetHeight
33 |         const sectionTop = current.offsetTop - 50;
34 |         const sectionId = current.getAttribute('id')
35 | 
36 |         if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
37 |             document.querySelector('.nav__menu a[href*=' + sectionId +']').classList.add('active')
38 |         }else{
39 |             document.querySelector('.nav__menu a[href*=' + sectionId +']').classList.remove('active')
40 | 
41 |         }
42 |     })
43 | }
44 | 
45 | /*=========== SCROLL REVEAL ANIMATION  ===============*/
46 | const sr = ScrollReveal({
47 |     origin: 'top',
48 |     distance: '80px',
49 |     duration: 2000,
50 |     reset: true
51 | })
52 | /*=========== SCROLL ABOUT  ===============*/
53 | sr.reveal('.home__title', {})
54 | sr.reveal('.home__scroll', {delay: 200})
55 | sr.reveal('.home__img', {origin:'right', delay: 400})
56 | 
57 | sr.reveal('.about__img', {delay:500})
58 | sr.reveal('.about__subtitle', {delay:300})
59 | sr.reveal('.about__profession', {delay:400})
60 | sr.reveal('.about__text', {delay:500})
61 | sr.reveal('.about__social-icon', {delay:600, interval: 200})
62 | 
63 | sr.reveal('.skills__subtitle', {})
64 | sr.reveal('.skills__name', {distance: '20px', delay:50, interval:100})
65 | sr.reveal('.skills__img', {delay:400})
66 | 
67 | sr.reveal('.portfolio__img', {interval: 200})
68 | 
69 | 
70 | sr.reveal('.contact__subtitle', {})
71 | sr.reveal('.contact__text', {interval: 200})
72 | sr.reveal('.contact__input', {delay: 400})
73 | sr.reveal('.contact__text', {interval: 200})
74 | sr.reveal('.contact__button', {delay: 600})
75 | 
76 | 
77 | 
78 | 
79 | 
80 | 
81 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 
  7 | 	<!-- ======= CSS =======  -->
  8 | 	<link rel="stylesheet" href="assets/css/style.css">
  9 | 
 10 | 	<!-- ========= BOX ICONS  =========  -->
 11 | 	<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
 12 | 
 13 | 	<title>Document</title>
 14 | </head>
 15 | <body>
 16 | 	<!-- Header -->
 17 | 
 18 | 	<header class="l-header">
 19 | 		<nav class="nav bd-grid">
 20 | 			<div>
 21 | 				<a href="#" class="nav__logo">Samar</a>
 22 | 			</div>
 23 | 			<div class="nav__menu" id="nav-menu">
 24 | 				<ul class="nav__list">
 25 | 					<li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
 26 | 					<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
 27 | 					<li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
 28 | 					<li class="nav__item"><a href="#portfolio" class="nav__link">Portfolio</a></li>
 29 | 					<li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
 30 | 				</ul>
 31 | 			</div>
 32 | 			<div class="nav__toggle" id="nav-toggle">
 33 | 				<i class="bx bx-menu"></i>
 34 | 			</div>
 35 | 		</nav>
 36 | 	</header>
 37 | 
 38 | 	<main class="l-main">
 39 | 		<!--======= HOME ========== -->
 40 | 		<section class="home" id="home">
 41 | 			<div class="home__container bd-grid">
 42 | 				<h1 class="home__title"><span>HE</span><br>LLO.</h1>
 43 | 
 44 | 				<div class="home__scroll">
 45 | 					<a href="#about" class="home__scroll-link"><i class='bx bx-up-arrow-alt' ></i>Scroll down</a>
 46 | 				</div>
 47 | 
 48 | 				<img src="assets/img/perfil.png" alt="" class="home__img">
 49 | 			</div>
 50 | 		</section>
 51 | 
 52 | 
 53 | 		<!--======= ABOUT ========== -->
 54 | 
 55 | 		<section class="about section" id="about">
 56 | 			<h2 class="section-title">About</h2>
 57 | 			<div class="about__container bd-grid">
 58 | 				<div class="about__img">
 59 | 					<img src="assets/img/perfil.png" alt="">
 60 | 				</div>
 61 | 				<div>
 62 | 					<h2 class="about__subtitle">I am Samar</h2>
 63 | 					<span class="about__profession">Front-End Developer</span>
 64 | 					<p class="about__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus culpa delectus deserunt, dolor dolores eos exercitationem illo incidunt, iusto laborum molestias quis quisquam repudiandae!</p>
 65 | 
 66 | 					<div class="about__social">
 67 | 						<a href="#" class="about__social-icon"><i class="bx bxl-instagram"></i></a>
 68 | 						<a href="#" class="about__social-icon"><i class="bx bxl-facebook"></i></a>
 69 | 						<a href="#" class="about__social-icon"><i class="bx bxl-youtube"></i></a>
 70 | 					</div>
 71 | 				</div>
 72 | 			</div>
 73 | 
 74 | 		</section>
 75 | 
 76 | 
 77 | 		<!--======= SKILLS ========== -->
 78 | 
 79 | 		<section class="skills section" id="skills">
 80 | 			<h2 class="section-title">Skills</h2>
 81 | 
 82 | 			<div class="skills__container bd-grid">
 83 | 				<div class="skills-box">
 84 | 					<h3 class="skills__subtitle">Development</h3>
 85 | 					<span class="skills__name">Html</span>
 86 | 					<span class="skills__name">Css</span>
 87 | 					<span class="skills__name">Javascript</span>
 88 | 					<span class="skills__name">Bootstrap</span>
 89 | 					<span class="skills__name">jQuery</span>
 90 | 					<span class="skills__name">React</span>
 91 | 
 92 | 					<h3 class="skills__subtitle">Design</h3>
 93 | 					<span class="skills__name">Figma</span>
 94 | 					<span class="skills__name">Adobe XD</span>
 95 | 					<span class="skills__name">Photoshop</span>
 96 | 
 97 | 
 98 | 				</div>
 99 | 				<div class="skills__img">
100 | 					<img src="assets/img/skill.jpg" alt="">
101 | 				</div>
102 | 			</div>
103 | 		</section>
104 | 
105 | 
106 | 
107 | 		<!--======= PORTFOLIO ========== -->
108 | 
109 | 		<section class="portfolio section" id="portfolio">
110 | 			<h2 class="section-title">Portfolio</h2>
111 | 
112 | 			<div class="portfolio__container bd-grid">
113 | 				<div class="portfolio__img">
114 | 					<img src="assets/img/work1.jpg" alt="">
115 | 
116 | 					<div class="portfolio__link">
117 | 						<a href="#" class="portfolio__link-name">View details</a>
118 | 					</div>
119 | 				</div>
120 | 				<div class="portfolio__img">
121 | 					<img src="assets/img/work2.jpg" alt="">
122 | 
123 | 					<div class="portfolio__link">
124 | 						<a href="#" class="portfolio__link-name">View details</a>
125 | 					</div>
126 | 				</div>
127 | 				<div class="portfolio__img">
128 | 					<img src="assets/img/work3.jpg" alt="">
129 | 
130 | 					<div class="portfolio__link">
131 | 						<a href="#" class="portfolio__link-name">View details</a>
132 | 					</div>
133 | 				</div>
134 | 				<div class="portfolio__img">
135 | 					<img src="assets/img/work4.jpg" alt="">
136 | 
137 | 					<div class="portfolio__link">
138 | 						<a href="#" class="portfolio__link-name">View details</a>
139 | 					</div>
140 | 				</div>
141 | 				<div class="portfolio__img">
142 | 					<img src="assets/img/work5.jpg" alt="">
143 | 
144 | 					<div class="portfolio__link">
145 | 						<a href="#" class="portfolio__link-name">View details</a>
146 | 					</div>
147 | 				</div>
148 | 				<div class="portfolio__img">
149 | 					<img src="assets/img/work6.jpg" alt="">
150 | 
151 | 					<div class="portfolio__link">
152 | 						<a href="#" class="portfolio__link-name">View details</a>
153 | 					</div>
154 | 				</div>
155 | 			</div>
156 | 		</section>
157 | 
158 | 
159 | 		<!--======= CONTACT ========== -->
160 | 		<section class="contact section" id="contact">
161 | 			<h2 class="section-title">Contact</h2>
162 | 
163 | 			<div class="contact__container bd-grid">
164 | 				<div class="contact__info">
165 | 					<h3 class="contact__subtitle">EMAIL</h3>
166 | 					<span class="contact__text">samarbadriddinov08@gmail.com</span>
167 | 
168 | 					<h3 class="contact__subtitle">PHONE</h3>
169 | 					<span class="contact__text">+998(90)113-11-01</span>
170 | 
171 | 					<h3 class="contact__subtitle">ADRESS</h3>
172 | 					<span class="contact__text">Ibn Sino</span>
173 | 				</div>
174 | 
175 | 				<form action="" class="contact__form">
176 | 					<div class="contact__inputs">
177 | 						<input type="text" placeholder="Name" class="contact__input">
178 | 						<input type="mail" placeholder="Email" class="contact__input">
179 | 					</div>
180 | 
181 | 					<textarea name="" id="" cols="0" rows="10" class="contact__input"></textarea>
182 | 
183 | 					<input type="submit" value="Enviar" class="contact__button">
184 | 				</form>
185 | 			</div>
186 | 		</section>
187 | 	</main>
188 | 
189 | 	
190 | 	<!-- FOOTER -->
191 | 	<footer class="footer section">
192 | 		<div class="footer__container bd-grid">
193 | 			<div class="footer__data">
194 | 				<h2 class="footer__title">Samar Badriddinov</h2>
195 | 				<p class="footer__text">I'm Samar Badriddinov and this is my personal website</p>
196 | 			</div>
197 | 
198 | 			<div class="footer__data">
199 | 				<h2 class="footer__title">EXPLORE</h2>
200 | 				<ul>
201 | 					<li><a href="#home" class="footer__link">Home</a></li>
202 | 					<li><a href="#about" class="footer__link">About</a></li>
203 | 					<li><a href="#skills" class="footer__link">Skills</a></li>
204 | 					<li><a href="#portfolio" class="footer__link">Portfolio</a></li>
205 | 					<li><a href="#contact" class="footer__link">Contact</a></li>
206 | 				</ul>
207 | 			</div>
208 | 
209 | 			<div class="footer__data">
210 | 				<h2 class="footer__title">FOLLOW</h2>
211 | 				<a href="#" class="footer__social"><i class='bx bxl-facebook' ></i></a>
212 | 				<a href="#" class="footer__social"><i class='bx bxl-instagram' ></i></a>
213 | 				<a href="#" class="footer__social"><i class='bx bxl-twitter' ></i></a>
214 | 			</div>
215 | 
216 | 
217 | 		</div>
218 | 	</footer>
219 | 
220 | 
221 | 	<!-- SCROLL REVEAL -->
222 | 
223 | 	<script src="https://unpkg.com/scrollreveal"></script>
224 | 
225 | 
226 | 
227 | 	<!-- SCRIPT -->
228 | 	<script src="assets/js/main.js"></script>
229 | 
230 | 	
231 | </body>
232 | </html>


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | /*===== GOOGLE FONTS =====*/
  2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
  3 | 
  4 | /*=========== VARIABES CSS  ===============*/
  5 | :root{
  6 | 	--header-height: 3rem;
  7 | 	--font-medium: 500;
  8 | }
  9 | /*=========== Colores  ===============*/
 10 | :root{
 11 | 	--first-color: #5361ff;
 12 | 	--white-color: #FAFAFF;
 13 | 	--dark-color: #2A3B47;
 14 | 	--text-color: #697477;
 15 | }
 16 | /*=========== Typografia  ===============*/
 17 | :root{
 18 | 	--body-font: 'Montserrat', sans-serif;
 19 | 	--big-font-size: 6.25rem;
 20 | 	--h2-font-size: 1.25rem;
 21 | 	--normal-font-size: .938rem;
 22 | 	--small-font-size: .813rem;
 23 | }
 24 | @media screen and (min-width: 768px){
 25 | 	:root{
 26 | 		--big-font-size: 10.5rem;
 27 | 		--h2-font-size: 2rem;
 28 | 		--normal-font-size: 1rem;
 29 | 		--small-font-size: .875rem;
 30 | 	}
 31 | }
 32 | 
 33 | /*=========== Margenes  ===============*/
 34 | :root{
 35 | 	--mb-1: .5rem;
 36 | 	--mb-2: 1rem;
 37 | 	--mb-3: 1.5rem;
 38 | 	--mb-4: 2rem;
 39 | }
 40 | /*=========== Z-Index  ===============*/
 41 | :root{
 42 | 	--z-fixed: 100;
 43 | }
 44 | /*=========== Base  ===============*/
 45 | *,::before,::after{
 46 | 	box-sizing: border-box;
 47 | }
 48 | html{
 49 | 	scroll-behavior: smooth;
 50 | }
 51 | body{
 52 | 	margin: var(--header-height) 0 0 0;
 53 | 	font-family: var(--body-font);
 54 | 	font-size: var(--normal-font-size);
 55 | 	font-weight: var(--font-medium);
 56 | 	color: var(--text-color);
 57 | 	line-height: 1.6;
 58 | }
 59 | h1, h2, p{
 60 | 	margin: 0;
 61 | }
 62 | ul{
 63 | 	margin: 0;
 64 | 	padding: 0;
 65 | 	list-style: none;
 66 | }
 67 | a{
 68 | 	text-decoration: none;
 69 | 	color: var(--text-color);
 70 | }
 71 | img{
 72 | 	max-width: 100%;
 73 | 	height: auto;
 74 | 	display: block;
 75 | }
 76 | 
 77 | /*=========== CLASS CSS  ===============*/
 78 | .section{
 79 | 	padding: 3rem 0;
 80 | }
 81 | .section-title{
 82 | 	position: relative;
 83 | 	font-size: var(--h2-font-size);
 84 | 	color: var(--dark-color);
 85 | 	margin: var(--mb-4) 0;
 86 | 	text-align: center;
 87 | }
 88 | .section-title::after{
 89 | 	position: absolute;
 90 | 	content: "";
 91 | 	width: 32px;
 92 | 	height: .18rem;
 93 | 	left: 0;
 94 | 	right: 0;
 95 | 	margin: auto;
 96 | 	top: 2rem;
 97 | 	background: var(--first-color);
 98 | }
 99 | 
100 | /*=========== LAYOUT  ===============*/
101 | .bd-grid{
102 | 	max-width: 1024px;
103 | 	display: grid;
104 | 	grid-template-columns: 100%;
105 | 	grid-column-gap: 2rem;
106 | 	width: calc(100% - 2rem);
107 | 	margin-left: var(--mb-2);
108 | 	margin-right: var(--mb-2);
109 | }
110 | .l-header{
111 | 	width: 100%;
112 | 	position: fixed;
113 | 	top: 0;
114 | 	left: 0;
115 | 	z-index: var(--z-fixed);
116 | 	background: var(--first-color);
117 | }
118 | /*=========== NAV  ===============*/
119 | .nav{
120 | 	height: var(--header-height);
121 | 	display: flex;
122 | 	justify-content: space-between;
123 | 	align-items: center;
124 | }
125 | @media screen and (max-width: 768px) {
126 | 	.nav__menu{
127 | 		position: fixed;
128 | 		top: var(--header-height);
129 | 		right: -100%;
130 | 		width: 80%;
131 | 		height: 100%;
132 | 		padding: 2rem;
133 | 		background: rgba(255, 255, 255, .3);
134 | 		transition: .5s;
135 | 		backdrop-filter: blur(10px);
136 | 	}
137 | }
138 | .nav__item{
139 | 	margin-bottom: var(--mb-4);
140 | }
141 | .nav__link{
142 | 	position: relative;
143 | 	color: var(--dark-color);
144 | }
145 | .nav__link:hover{
146 | 	color: var(--first-color);
147 | }
148 | .nav__logo{
149 | 	color: var(--white-color);
150 | }
151 | .nav__toggle{
152 | 	color: var(--white-color);
153 | 	font-size: 1.5rem;
154 | 	cursor: pointer;
155 | }
156 | /*=========== SHOW MENU  ===============*/
157 | .show{
158 | 	right: 0;
159 | }
160 | 
161 | /*=========== ACTIVE MENU  ===============*/
162 | .active::after{
163 | 	position: absolute;
164 | 	content: "";
165 | 	width: 100%;
166 | 	height: .18rem;
167 | 	left: 0;
168 | 	top: 2rem;
169 | 	background: var(--first-color);
170 | }
171 | /*<!--======= HOME ========== -->*/
172 | .home{
173 | 	position: relative;
174 | 	background-color: var(--first-color);
175 | 	overflow: hidden;
176 | }
177 | .home__container{
178 | 	height: calc(100vh - var(--header-height));
179 | 	row-gap: 5rem;
180 | }
181 | .home__title{
182 | 	align-self: flex-end;
183 | 	font-size: var(--big-font-size);
184 | 	color: var(--white-color);
185 | 	line-height: .8;
186 | }
187 | .home__title span{
188 | 	text-shadow: 0 20px 25px rgba(0,0,0,.5);
189 | }
190 | .home__scroll{
191 | 	align-self: flex-end;
192 | 	padding-bottom: var(--mb-4);
193 | }
194 | .home__scroll-link{
195 | 	writing-mode: vertical-lr;
196 | 	transform: rotate(-180deg);
197 | 	color: var(--white-color);
198 | }
199 | .home__img{
200 | 	position: absolute;
201 | 	right: 0;
202 | 	bottom: 0;
203 | 	width: 295px;
204 | }
205 | 
206 | /*<!--======= ABOUT ========== -->*/
207 | .about__container{
208 | 	justify-items: center;
209 | 	row-gap: 2rem;
210 | 	text-align: center;
211 | }
212 | .about__img{
213 | 	display: flex;
214 | 	justify-content: center;
215 | 	padding-top: 1rem;
216 | 	width: 120px;
217 | 	height: 120px;
218 | 	background: var(--first-color);
219 | 	border-radius: 50%;
220 | 	overflow: hidden;
221 | }
222 | .about__img img{
223 | 	width: 100px;
224 | }
225 | .about__subtitle{
226 | 	font-size: var(--h2-font-size);
227 | 	color: var(--first-color);
228 | 	margin-bottom: var(--mb-4);
229 | }
230 | .about__text{
231 | 	margin-bottom: var(--mb-4);
232 | }
233 | .about__profession{
234 | 	display: block;
235 | 	margin-bottom: var(--mb-4);
236 | }
237 | .about__social-icon{
238 | 	font-size: 1.4rem;
239 | 	margin: 0 var(--mb-1);
240 | }
241 | .about__social-icon:hover{
242 | 	color: var(--first-color);
243 | }
244 | 
245 | 
246 | /*<!--======= SKILLS ========== -->*/
247 | .skills__container{
248 | 	row-gap: 2rem;
249 | }
250 | .skills__subtitle{
251 | 	color: var(--first-color);
252 | 	margin-bottom: var(--mb-3);
253 | }
254 | .skills__name{
255 | 	display: inline-block;
256 | 	font-size: var(--small-font-size);
257 | 	margin-right: var(--mb-2);
258 | 	margin-bottom: var(--mb-3);
259 | 	padding: .25rem .5rem;
260 | 	background: var(--white-color);
261 | 	border-radius: .25rem;
262 | }
263 | .skills__name:hover{
264 | 	background: var(--first-color);
265 | 	color: var(--white-color);
266 | }
267 | .skills__img img{
268 | 	border-radius: .5rem;
269 | }
270 | 
271 | 
272 | 
273 | /*<!--======= PORTFOLIO ========== -->*/
274 | .portfolio{
275 | 	background: var(--white-color);
276 | }
277 | .portfolio__container{
278 | 	justify-content: center;
279 | 	row-gap: 2rem;
280 | }
281 | .portfolio__img{
282 | 	position: relative;
283 | 	overflow: hidden;
284 | }
285 | .portfolio__img img{
286 | 	border-radius: .5rem;
287 | }
288 | .portfolio__link{
289 | 	position: absolute;
290 | 	bottom: -100%;
291 | 	width: 100%;
292 | 	height: 100%;
293 | 	display: flex;
294 | 	justify-content: center;
295 | 	align-items: center;
296 | 	background: rgba(255, 255, 255, .3);
297 | 	border-radius: .5rem;
298 | 	cursor: pointer;
299 | 	backdrop-filter: blur(10px);
300 | 	transition: .3s linear;
301 | }
302 | .portfolio__img:hover .portfolio__link{
303 | 	bottom: 0;
304 | }
305 | .portfolio__link-name{
306 | 	color: var(--dark-color);
307 | }
308 | 
309 | /*<!--======= CONTACT ========== -->*/
310 | .contact__container{
311 | 	row-gap: 2rem;
312 | }
313 | .contact__subtitle{
314 | 	font-size: var(--normal-font-size);
315 | 	color: var(--first-color);
316 | }
317 | .contact__text{
318 | 	display: inline-block;
319 | 	margin-bottom: var(--mb-2);
320 | }
321 | .contact__inputs{
322 | 	display: grid;
323 | 	grid-template-columns: repeat(2, 1fr);
324 | 	column-gap: 1rem;
325 | }
326 | .contact__input{
327 | 	width: 100%;
328 | 	padding: .8rem;
329 | 	outline: none;
330 | 	border: 1.5px solid var(--dark-color);
331 | 	font-size: var(--normal-font-size);
332 | 	margin-bottom: var(--mb-4);
333 | 	border-radius: .5rem;
334 | }
335 | .contact__button{
336 | 	display: block;
337 | 	background: var(--first-color);
338 | 	color: var(--white-color);
339 | 	padding: .75rem 2.5rem;
340 | 	margin-left: auto;
341 | 	border-radius: .5rem;
342 | 	border: none;
343 | 	font-size: var(--normal-font-size);
344 | 	cursor: pointer;
345 | }
346 | /*footer*/
347 | .footer{
348 | 	background-color: var(--dark-color);
349 | }
350 | .footer__container{
351 | 	row-gap: 2rem;
352 | }
353 | .footer__title{
354 | 	font-size: var(--normal-font-size);
355 | 	color: var(--white-color);
356 | 	margin-bottom: var(--mb-2);
357 | }
358 | .footer__link{
359 | 	padding: .25rem 0;
360 | }
361 | .footer__link:hover{
362 | 	color: var(--first-color);
363 | }
364 | .footer__social{
365 | 	font-size: 1.4rem;
366 | 	margin-right: var(--mb-1);
367 | }
368 | .footer__social:hover{
369 | 	color: var(--first-color);
370 | }
371 | 
372 | /*========= MEDIA QUERY     ============*/
373 | 
374 | @media screen and (min-width: 768px) {
375 | 	body{
376 | 		margin: 0;
377 | 	}
378 | 	.section{
379 |         padding-top: 4rem;
380 |     }
381 |     .section-title{
382 |         margin-bottom: 3rem;
383 |     }
384 |     .section-title::after{
385 |         width: 64px;
386 |         top: 3rem;
387 |     }
388 | 
389 |     .nav{
390 |     	height: calc(var(--header-height) + 1rem)
391 |     }
392 |     .nav__list{
393 |     	display: flex;
394 |     }
395 |     .nav__item{
396 |     	margin-left: var(--mb-4);
397 |     	margin-bottom: 0;
398 |     }
399 |     .nav__toggle{
400 |     	display: none;
401 |     }
402 |     .nav__link{
403 |         color: var(--white-color);
404 |     }
405 |     .nav__link:hover{
406 |         color: var(--white-color);
407 |     }
408 |     .active::after{
409 |         background-color: var(--white-color);
410 |     }
411 | 
412 |     .home__container{
413 |         height: 100vh;
414 |         grid-template-rows: 1.7fr 1fr;
415 |         row-gap: 0;
416 |     }
417 |     .home__img{
418 |     	width: 524px;
419 |     	right: 10%;
420 |     }
421 | 
422 |     .about__container{
423 |     	grid-template-columns: repeat(2, 1fr);
424 |         align-items: center;
425 |         text-align: initial;
426 |         padding: 4rem 0;
427 |     }
428 |     .about__img{
429 |         width: 200px;
430 |         height: 200px;
431 |     }
432 |     .about__img img{
433 |     	width: 165px;
434 |     }
435 |     .skills__container{
436 |         grid-template-columns: repeat(2, 1fr);
437 |         align-items: center;
438 |     }
439 |     .portfolio__container{
440 |         grid-template-columns: repeat(3, 1fr);
441 |         grid-template-rows: repeat(2, 1fr);
442 |         column-gap: 2rem;
443 |     }
444 |     .contact__container{
445 |         grid-template-columns: repeat(2, 1fr);
446 |         justify-items: center;
447 |     }
448 |     .contact__form{
449 |         width: 380px;
450 |     }
451 | 
452 |     .footer__container{
453 |         grid-template-columns: repeat(3, 1fr);
454 |         justify-items: center;
455 |     }
456 | }
457 | @media screen and (min-width: 1024px){
458 |     .bd-grid{
459 |         margin-left: auto;
460 |         margin-right: auto;
461 |     }
462 | }
463 | 
464 | 
465 | 
466 | 
467 | 
468 | 
469 | 
470 | 
471 | 
472 | 
473 | 
474 | 
475 | 
476 | 
477 | 
478 | 


--------------------------------------------------------------------------------