By GokiSoft.com|
20:17 11/10/2023|
Học HTML5 - CSS3
Bài tập - Tạo website giới thiệu thông tin cá nhân - profile page - Lập trình HTML/CSS/JS
Tạo website giới thiệu thông tin cá nhân - profile page - Lập trình HTML/CSS/JS
Ví dụ: Đây chỉ là demo -> Không phải bắt buộc giống -> Làm theo style của bạn.
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
![Vũ Trung Kiên [C2009I]](https://www.gravatar.com/avatar/abf994de48c0204239812f8d9a7dcf8c.jpg?s=80&d=mm&r=g){kind=avatar}
Vũ Trung Kiên
2020-12-03 15:20:14
#Intro.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introduce Myself</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="htps://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/popper.js/1.14.3/ump/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section id="header">
<div class="container text-center">
<div class="user-box">
<img src="https://scontent.fhan5-2.fna.fbcdn.net/v/t1.0-9/121071380_1617601565076512_1927382383891191503_n.jpg?_nc_cat=110&ccb=2&_nc_sid=174925&_nc_ohc=jy5r5rnPD6AAX-iFFVQ&_nc_ht=scontent.fhan5-2.fna&oh=690ac7f6929d4b1fc7b7dc247d20427b&oe=5FED3747">
<h1>Kien Vu</h1>
<p ><a href="https://kccshop.vn/">KCCSHOP.VN</a></p>
<p>Laptop - PC Hiend - Gaming Gear</p>
</div>
</div>
<div class="scroll-btn">
<div class="scroll-bar"><a href="#about"><span> </span></a>
</div>
</div>
</section>
<section id="user-info">
<div class="nav-bar">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT ME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume">RESUME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="about container" id="about">
<div class="row">
<div class="col-md-6 text-center">
<img src="https://scontent.fhan5-3.fna.fbcdn.net/v/t1.0-9/76751514_1329400333896638_5059507548118319104_n.jpg?_nc_cat=106&ccb=2&_nc_sid=174925&_nc_ohc=YZCZ38pMktkAX8exW3v&_nc_ht=scontent.fhan5-3.fna&oh=67ab6317b09e99d64cad62a023428dd7&oe=5FED20BF" class="profile-img">
</div>
<div class="col-md-6">
<h3>WHO AM I?</h3>
<p>
Even me don't know who I am ¯\_(ツ)_/¯
</p>
<div class="skills-bar">
<p>Coding</p>
<div class="progress">
<div class="progress-bar" style="width: 50%;">50%</div>
</div>
<p>2D Design</p>
<div class="progress">
<div class="progress-bar" style="width: 75%;">75%</div>
</div>
<p>3D Design</p>
<div class="progress">
<div class="progress-bar" style="width: 35%;">35%</div>
</div>
<p>Gaming</p>
<div class="progress">
<div class="progress-bar" style="width: 90%;">90%</div>
</div>
<p>Technique</p>
<div class="progress">
<div class="progress-bar" style="width: 65%;">65%</div>
</div>
</div>
</div>
</div>
</div>
<div class="social-icon">
<ul>
<a href="#"><li><i class="fa fa-backward"></i></li></a>
<a href="#"><li><i class="fa fa-play-circle"></i></li></a>
<a href="#"><li><i class="fa fa-stop"></i></li></a>
<a href="#"><li><i class="fa fa-random"></i></li></a>
<a href="#"><li><i class="fa fa-forward"></i></li></a>
</ul>
</div>
<div class="resume" id="resume">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 class="text-center">My Experiences</h3>
<ul class="timeline">
<li>
<h4><span>October 2020 to Now - </span> Seller</h4>
<p>
"Computer Technician And Seller"<br/>
<b>Company</b> - KCCShop & KVDigitals<br/>
<b>Duration</b> - 2 months<br/>
</p>
</li>
<li>
<h4><span>January 2018 to Now - </span> Local Guide</h4>
<p>
"Travel and Edit Map"<br/>
<b>Company</b> - Volunteer at Google<br/>
<b>Duration</b> - 2 years<br/>
</p>
</li>
<li>
<h4><span>July 2017 to June 2019 - </span> Video Editor</h4>
<p>
"Making video and upload them to Youtube :3"<br/>
<b>Company</b> - Avivali Entertainment<br/>
<b>Duration</b> - 2 year<br/>
</p>
</li>
<li>
<h4><span>July 2017 to Now - </span> Photographer</h4>
<p>
"The Passionate Camera"<br/>
<b>Company</b> - KVStudio<br/>
<b>Duration:</b><br/> - 1 year at Avivali Entertainment<br/>
- 2 years at KVStudio
</p>
</li>
</ul>
</div>
<div class="col-md-6">
<h3 class="text-center">My Education</h3>
<ul class="timeline">
<li>
<h4><span>September 2020 to Now - </span> College</h4>
<p>
<b>Institute</b> - Aptech Computer Education<br/>
<b>Session</b> - 2020 -> 2024<br/>
<b>Degree</b> - Certificate of Completion "The Hour of Code"
</p>
</li>
<li>
<h4><span>May 2017 to June 2020 - </span> High School</h4>
<p>
<b>Institute</b> - THPT Doan Ket - Hai Ba Trung<br/>
<b>Session</b> - 2017 -> 2020<br/>
<b>Degree:</b><br/> - "Start-up student 2020" scholarship<br/>
- 2nd prize for excellent student in computer science<br/>
- 3rd prize in law knowledge contest<br/>
</p>
</li>
<li>
<h4><span>May 2013 to May 2017 - </span> Secondary School</h4>
<p>
<b>Institute</b> - THCS Tan Mai<br/>
<b>Session</b> - 2013 -> 2017<br/>
<b>Degree</b> - Graduated with good grades
</p>
</li>
<li>
<h4><span>May 2008 to May 2013 - </span> Primary School</h4>
<p>
<b>Institute</b> - TH Tan Mai<br/>
<b>Session</b> - 2008 -> 2013<br/>
<b>Degree</b> - Graduated with good grades
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="services" id="services">
<div class="container">
<h1 class="text-center">My Offered Services</h1>
<p class="text-center">
Best choice!<br/>
Cheapest price in Vietnam
</p>
<div class="row">
<div class="col-md-4">
<div class="services-box">
<i class="fa fa-desktop"></i><span>PCCC</span>
<p>
- Consulting PC configuration suitable for the purpose, highest performance and best price<br/>
- Software support
</p>
</div>
</div>
<div class="col-md-4">
<div class="services-box">
<i class="fa fa-video-camera"></i><span>Photography</span>
<p>
- Event photography<br/>
- Event video recording<br/>
- Photo, Video editing
</p>
</div>
</div>
<div class="col-md-4">
<div class="services-box">
<i class="fa fa-laptop"></i><span>Selling</span>
<p>
provided:<br/>
- pc components
- pc gaming<br/>
- workstation
- laptop<br/>
- gaming gear
</p>
</div>
</div>
</div>
</div>
</div>
<div class="contact" id="contact">
<div class="container text-center">
<h1>Contact Me</h1>
<p class="text-center">
Contact for more information
</p>
<div class="row">
<div class="col-md-4">
<i class="fa fa-phone"></i>
<p>(+84)38.581.0495<br/>(+84)58.404.7677<br/>(+84)56.338.6700</p>
</div>
<div class="col-md-4">
<i class="fa fa-envelope"></i>
<p>
vtkchannel1111@gmail.com<br/>
kvstudio.154@gmail.com<br/>
kvstores.154@gmail.com
</p>
</div>
<div class="col-md-4">
<i class="fa fa-internet-explorer"></i>
<p>
www.kvdigitals.weebly.com<br/>
www.kvstores.weebly.com<br/>
www.kvstudio.weebly.com
</p>
</div>
</div>
<button type="button" class="btn btn-primary">
<i class="fa fa-facebook"></i>
<a href="https://www.messenger.com/t/kienvu.154">Inbox me</a>
</button>
<button type="button" class="btn btn-primary">
<i class="fa fa-shopping-cart"></i>
<a href="https://kccshop.vn/">Shopping</a>
</button>
</div>
<div class="footer text-center">
<p>
Made with <i class="fa fa-heart-o"></i> by Kien Vu
</p>
</div>
</div>
</section>
<script src="smooth-scroll.js"></script>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
</body>
</html>
#smooth-scroll.js
/*! SmoothScroll v16.1.4 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.SmoothScroll = factory());
}(this, (function () { 'use strict';
//
// Default settings
//
var defaults = {
// Selectors
ignore: '[data-scroll-ignore]',
header: null,
topOnEmptyHash: true,
// Speed & Duration
speed: 1000,
speedAsDuration: false,
durationMax: null,
durationMin: null,
clip: true,
offset: 50,
// Easing
easing: 'easeInOutCubic',
customEasing: null,
// History
updateURL: true,
popstate: true,
// Custom Events
emitEvents: true
};
//
// Utility Methods
//
/**
* Check if browser supports required methods
* @return {Boolean} Returns true if all required methods are supported
*/
var supports = function () {
return (
'querySelector' in document &&
'addEventListener' in window &&
'requestAnimationFrame' in window &&
'closest' in window.Element.prototype
);
};
/**
* Merge two or more objects together.
* @param {Object} objects The objects to merge together
* @returns {Object} Merged values of defaults and options
*/
var extend = function () {
var merged = {};
Array.prototype.forEach.call(arguments, function (obj) {
for (var key in obj) {
if (!obj.hasOwnProperty(key)) return;
merged[key] = obj[key];
}
});
return merged;
};
/**
* Check to see if user prefers reduced motion
* @param {Object} settings Script settings
*/
var reduceMotion = function () {
if ('matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches) {
return true;
}
return false;
};
/**
* Get the height of an element.
* @param {Node} elem The element to get the height of
* @return {Number} The element's height in pixels
*/
var getHeight = function (elem) {
return parseInt(window.getComputedStyle(elem).height, 10);
};
/**
* Escape special characters for use with querySelector
* @author Mathias Bynens
* @link https://github.com/mathiasbynens/CSS.escape
* @param {String} id The anchor ID to escape
*/
var escapeCharacters = function (id) {
// Remove leading hash
if (id.charAt(0) === '#') {
id = id.substr(1);
}
var string = String(id);
var length = string.length;
var index = -1;
var codeUnit;
var result = '';
var firstCodeUnit = string.charCodeAt(0);
while (++index < length) {
codeUnit = string.charCodeAt(index);
// Note: there’s no need to special-case astral symbols, surrogate
// pairs, or lone surrogates.
// If the character is NULL (U+0000), then throw an
// `InvalidCharacterError` exception and terminate these steps.
if (codeUnit === 0x0000) {
throw new InvalidCharacterError(
'Invalid character: the input contains U+0000.'
);
}
if (
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
// U+007F, […]
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
// If the character is the first character and is in the range [0-9]
// (U+0030 to U+0039), […]
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
// If the character is the second character and is in the range [0-9]
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
(
index === 1 &&
codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
firstCodeUnit === 0x002D
)
) {
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
result += '\\' + codeUnit.toString(16) + ' ';
continue;
}
// If the character is not handled by one of the above rules and is
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
// U+005A), or [a-z] (U+0061 to U+007A), […]
if (
codeUnit >= 0x0080 ||
codeUnit === 0x002D ||
codeUnit === 0x005F ||
codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
codeUnit >= 0x0041 && codeUnit <= 0x005A ||
codeUnit >= 0x0061 && codeUnit <= 0x007A
) {
// the character itself
result += string.charAt(index);
continue;
}
// Otherwise, the escaped character.
// http://dev.w3.org/csswg/cssom/#escape-a-character
result += '\\' + string.charAt(index);
}
// Return sanitized hash
return '#' + result;
};
/**
* Calculate the easing pattern
* @link https://gist.github.com/gre/1650294
* @param {Object} settings Easing pattern
* @param {Number} time Time animation should take to complete
* @returns {Number}
*/
var easingPattern = function (settings, time) {
var pattern;
// Default Easing Patterns
if (settings.easing === 'easeInQuad') pattern = time * time; // accelerating from zero velocity
if (settings.easing === 'easeOutQuad') pattern = time * (2 - time); // decelerating to zero velocity
if (settings.easing === 'easeInOutQuad') pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
if (settings.easing === 'easeInCubic') pattern = time * time * time; // accelerating from zero velocity
if (settings.easing === 'easeOutCubic') pattern = (--time) * time * time + 1; // decelerating to zero velocity
if (settings.easing === 'easeInOutCubic') pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
if (settings.easing === 'easeInQuart') pattern = time * time * time * time; // accelerating from zero velocity
if (settings.easing === 'easeOutQuart') pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
if (settings.easing === 'easeInOutQuart') pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
if (settings.easing === 'easeInQuint') pattern = time * time * time * time * time; // accelerating from zero velocity
if (settings.easing === 'easeOutQuint') pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
if (settings.easing === 'easeInOutQuint') pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
// Custom Easing Patterns
if (!!settings.customEasing) pattern = settings.customEasing(time);
return pattern || time; // no easing, no acceleration
};
/**
* Determine the document's height
* @returns {Number}
*/
var getDocumentHeight = function () {
return Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
};
/**
* Calculate how far to scroll
* Clip support added by robjtede - https://github.com/cferdinandi/smooth-scroll/issues/405
* @param {Element} anchor The anchor element to scroll to
* @param {Number} headerHeight Height of a fixed header, if any
* @param {Number} offset Number of pixels by which to offset scroll
* @param {Boolean} clip If true, adjust scroll distance to prevent abrupt stops near the bottom of the page
* @returns {Number}
*/
var getEndLocation = function (anchor, headerHeight, offset, clip) {
var location = 0;
if (anchor.offsetParent) {
do {
location += anchor.offsetTop;
anchor = anchor.offsetParent;
} while (anchor);
}
location = Math.max(location - headerHeight - offset, 0);
if (clip) {
location = Math.min(location, getDocumentHeight() - window.innerHeight);
}
return location;
};
/**
* Get the height of the fixed header
* @param {Node} header The header
* @return {Number} The height of the header
*/
var getHeaderHeight = function (header) {
return !header ? 0 : (getHeight(header) + header.offsetTop);
};
/**
* Calculate the speed to use for the animation
* @param {Number} distance The distance to travel
* @param {Object} settings The plugin settings
* @return {Number} How fast to animate
*/
var getSpeed = function (distance, settings) {
var speed = settings.speedAsDuration ? settings.speed : Math.abs(distance / 1000 * settings.speed);
if (settings.durationMax && speed > settings.durationMax) return settings.durationMax;
if (settings.durationMin && speed < settings.durationMin) return settings.durationMin;
return parseInt(speed, 10);
};
var setHistory = function (options) {
// Make sure this should run
if (!history.replaceState || !options.updateURL || history.state) return;
// Get the hash to use
var hash = window.location.hash;
hash = hash ? hash : '';
// Set a default history
history.replaceState(
{
smoothScroll: JSON.stringify(options),
anchor: hash ? hash : window.pageYOffset
},
document.title,
hash ? hash : window.location.href
);
};
/**
* Update the URL
* @param {Node} anchor The anchor that was scrolled to
* @param {Boolean} isNum If true, anchor is a number
* @param {Object} options Settings for Smooth Scroll
*/
var updateURL = function (anchor, isNum, options) {
// Bail if the anchor is a number
if (isNum) return;
// Verify that pushState is supported and the updateURL option is enabled
if (!history.pushState || !options.updateURL) return;
// Update URL
history.pushState(
{
smoothScroll: JSON.stringify(options),
anchor: anchor.id
},
document.title,
anchor === document.documentElement ? '#top' : '#' + anchor.id
);
};
/**
* Bring the anchored element into focus
* @param {Node} anchor The anchor element
* @param {Number} endLocation The end location to scroll to
* @param {Boolean} isNum If true, scroll is to a position rather than an element
*/
var adjustFocus = function (anchor, endLocation, isNum) {
// Is scrolling to top of page, blur
if (anchor === 0) {
document.body.focus();
}
// Don't run if scrolling to a number on the page
if (isNum) return;
// Otherwise, bring anchor element into focus
anchor.focus();
if (document.activeElement !== anchor) {
anchor.setAttribute('tabindex', '-1');
anchor.focus();
anchor.style.outline = 'none';
}
window.scrollTo(0 , endLocation);
};
/**
* Emit a custom event
* @param {String} type The event type
* @param {Object} options The settings object
* @param {Node} anchor The anchor element
* @param {Node} toggle The toggle element
*/
var emitEvent = function (type, options, anchor, toggle) {
if (!options.emitEvents || typeof window.CustomEvent !== 'function') return;
var event = new CustomEvent(type, {
bubbles: true,
detail: {
anchor: anchor,
toggle: toggle
}
});
document.dispatchEvent(event);
};
//
// SmoothScroll Constructor
//
var SmoothScroll = function (selector, options) {
//
// Variables
//
var smoothScroll = {}; // Object for public APIs
var settings, toggle, fixedHeader, animationInterval;
//
// Methods
//
/**
* Cancel a scroll-in-progress
*/
smoothScroll.cancelScroll = function (noEvent) {
cancelAnimationFrame(animationInterval);
animationInterval = null;
if (noEvent) return;
emitEvent('scrollCancel', settings);
};
/**
* Start/stop the scrolling animation
* @param {Node|Number} anchor The element or position to scroll to
* @param {Element} toggle The element that toggled the scroll event
* @param {Object} options
*/
smoothScroll.animateScroll = function (anchor, toggle, options) {
// Cancel any in progress scrolls
smoothScroll.cancelScroll();
// Local settings
var _settings = extend(settings || defaults, options || {}); // Merge user options with defaults
// Selectors and variables
var isNum = Object.prototype.toString.call(anchor) === '[object Number]' ? true : false;
var anchorElem = isNum || !anchor.tagName ? null : anchor;
if (!isNum && !anchorElem) return;
var startLocation = window.pageYOffset; // Current location on the page
if (_settings.header && !fixedHeader) {
// Get the fixed header if not already set
fixedHeader = document.querySelector(_settings.header);
}
var headerHeight = getHeaderHeight(fixedHeader);
var endLocation = isNum ? anchor : getEndLocation(anchorElem, headerHeight, parseInt((typeof _settings.offset === 'function' ? _settings.offset(anchor, toggle) : _settings.offset), 10), _settings.clip); // Location to scroll to
var distance = endLocation - startLocation; // distance to travel
var documentHeight = getDocumentHeight();
var timeLapsed = 0;
var speed = getSpeed(distance, _settings);
var start, percentage, position;
/**
* Stop the scroll animation when it reaches its target (or the bottom/top of page)
* @param {Number} position Current position on the page
* @param {Number} endLocation Scroll to location
* @param {Number} animationInterval How much to scroll on this loop
*/
var stopAnimateScroll = function (position, endLocation) {
// Get the current location
var currentLocation = window.pageYOffset;
// Check if the end location has been reached yet (or we've hit the end of the document)
if (position == endLocation || currentLocation == endLocation || ((startLocation < endLocation && window.innerHeight + currentLocation) >= documentHeight)) {
// Clear the animation timer
smoothScroll.cancelScroll(true);
// Bring the anchored element into focus
adjustFocus(anchor, endLocation, isNum);
// Emit a custom event
emitEvent('scrollStop', _settings, anchor, toggle);
// Reset start
start = null;
animationInterval = null;
return true;
}
};
/**
* Loop scrolling animation
*/
var loopAnimateScroll = function (timestamp) {
if (!start) { start = timestamp; }
timeLapsed += timestamp - start;
percentage = speed === 0 ? 0 : (timeLapsed / speed);
percentage = (percentage > 1) ? 1 : percentage;
position = startLocation + (distance * easingPattern(_settings, percentage));
window.scrollTo(0, Math.floor(position));
if (!stopAnimateScroll(position, endLocation)) {
animationInterval = window.requestAnimationFrame(loopAnimateScroll);
start = timestamp;
}
};
/**
* Reset position to fix weird iOS bug
* @link https://github.com/cferdinandi/smooth-scroll/issues/45
*/
if (window.pageYOffset === 0) {
window.scrollTo(0, 0);
}
// Update the URL
updateURL(anchor, isNum, _settings);
// If the user prefers reduced motion, jump to location
if (reduceMotion()) {
adjustFocus(anchor, Math.floor(endLocation), false);
return;
}
// Emit a custom event
emitEvent('scrollStart', _settings, anchor, toggle);
// Start scrolling animation
smoothScroll.cancelScroll(true);
window.requestAnimationFrame(loopAnimateScroll);
};
/**
* If smooth scroll element clicked, animate scroll
*/
var clickHandler = function (event) {
// Don't run if event was canceled but still bubbled up
// By @mgreter - https://github.com/cferdinandi/smooth-scroll/pull/462/
if (event.defaultPrevented) return;
// Don't run if right-click or command/control + click or shift + click
if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return;
// Check if event.target has closest() method
// By @totegi - https://github.com/cferdinandi/smooth-scroll/pull/401/
if (!('closest' in event.target)) return;
// Check if a smooth scroll link was clicked
toggle = event.target.closest(selector);
if (!toggle || toggle.tagName.toLowerCase() !== 'a' || event.target.closest(settings.ignore)) return;
// Only run if link is an anchor and points to the current page
if (toggle.hostname !== window.location.hostname || toggle.pathname !== window.location.pathname || !/#/.test(toggle.href)) return;
// Get an escaped version of the hash
var hash;
try {
hash = escapeCharacters(decodeURIComponent(toggle.hash));
} catch(e) {
hash = escapeCharacters(toggle.hash);
}
// Get the anchored element
var anchor;
if (hash === '#') {
if (!settings.topOnEmptyHash) return;
anchor = document.documentElement;
} else {
anchor = document.querySelector(hash);
}
anchor = !anchor && hash === '#top' ? document.documentElement : anchor;
// If anchored element exists, scroll to it
if (!anchor) return;
event.preventDefault();
setHistory(settings);
smoothScroll.animateScroll(anchor, toggle);
};
/**
* Animate scroll on popstate events
*/
var popstateHandler = function () {
// Stop if history.state doesn't exist (ex. if clicking on a broken anchor link).
// fixes `Cannot read property 'smoothScroll' of null` error getting thrown.
if (history.state === null) return;
// Only run if state is a popstate record for this instantiation
if (!history.state.smoothScroll || history.state.smoothScroll !== JSON.stringify(settings)) return;
// Get the anchor
var anchor = history.state.anchor;
if (typeof anchor === 'string' && anchor) {
anchor = document.querySelector(escapeCharacters(history.state.anchor));
if (!anchor) return;
}
// Animate scroll to anchor link
smoothScroll.animateScroll(anchor, null, {updateURL: false});
};
/**
* Destroy the current initialization.
*/
smoothScroll.destroy = function () {
// If plugin isn't already initialized, stop
if (!settings) return;
// Remove event listeners
document.removeEventListener('click', clickHandler, false);
window.removeEventListener('popstate', popstateHandler, false);
// Cancel any scrolls-in-progress
smoothScroll.cancelScroll();
// Reset variables
settings = null;
toggle = null;
fixedHeader = null;
animationInterval = null;
};
/**
* Initialize Smooth Scroll
* @param {Object} options User settings
*/
var init = function () {
// feature test
if (!supports()) throw 'Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs.';
// Destroy any existing initializations
smoothScroll.destroy();
// Selectors and variables
settings = extend(defaults, options || {}); // Merge user options with defaults
fixedHeader = settings.header ? document.querySelector(settings.header) : null; // Get the fixed header
// When a toggle is clicked, run the click handler
document.addEventListener('click', clickHandler, false);
// If updateURL and popState are enabled, listen for pop events
if (settings.updateURL && settings.popstate) {
window.addEventListener('popstate', popstateHandler, false);
}
};
//
// Initialize plugin
//
init();
//
// Public APIs
//
return smoothScroll;
};
return SmoothScroll;
})));
#style.css
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
#header
{
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url(http://bgfons.com/uploads/lines/lines_texture1095.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.user-box
{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
.user-box img
{
border-radius: 50%;
width: 250px;
border: 2px solid #6caed5;
}
.user-box h1
{
color: #fff;
font-weight: bold;
margin: 10px;
}
.user-box p
{
color: #fff;
}
.user-box a
{
color: #fff;
}
.scroll-btn
{
bottom: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 2px solid #fff;
padding: 10px 10px 20px;
border-radius: 30px;
}
.scroll-bar span
{
border: 2px solid #fff;
font-size: 10px;
border-radius: 30px;
}
.scroll-bar
{
animation: mover 1s infinite alternate;
}
@keyframes mover
{
0%{transform: translateY(0);}
100&{transform: translateY(10px);}
}
.about
{
padding-top: 100px;
margin-bottom: -130px;
}
.profile-img{
height: 400px;
border-radius: 50%;
border: 2px solid #fff;
}
.nav-bar{
top: 0;
position: sticky;
z-index: 2;
}
.navbar
{
background-color: #000;
}
.navbar-brand
{
height: 50px;
}
.nav-bar .fa-bars
{
font-size: 35px;
color: #fff;
}
.navbar-toggler
{
outline: none !important;
}
.navbar-nav
{
float: right;
text-align: right;
}
.nav-link
{
color: #fff !important;
}
.skills-bar
{
margin-bottom: 6px;
font-weight: 600;
}
.progress
{
border-radius: 16px !important;
margin-bottom: 10px;
}
.progress-bar
{
border-radius: 16px;
background: #000 !important;
}
.resume
{
margin-top: -50px;
padding-top: 50px;
padding-bottom: 30px;
background: #f9f9f9;
}
.resume h3
{
margin-bottom: 50px;
}
.timeline
{
list-style-type: none;
position: relative;
}
.timeline:before
{
content: '';
background: #555;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 1;
}
.timeline li
{
margin-bottom: 20px;
margin-top: 20px;
margin-left: 20px;
background: #fff;
}
.timeline li h4
{
background-color: #000;
padding: 5px 0 5px 20px;
color: #fff;
font-size: 15px;
}
.timeline li h4 span
{
font-weight: bold;
color: #ccc;
}
.timeline li:before
{
content: '';
background: #fff;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #000;
left: 20px;
width: 20px;
height: 20px;
z-index: 1;
}
.services
{
padding-top: 50px;
padding-bottom: 50px;
}
.services h1
{
margin-bottom: 15px;
}
.services-box
{
background: #f9f9f9;
padding: 10px;
margin-top: 20px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.services-box .fa
{
margin: 0 10px;
font-size: 20px;
}
.services-box span
{
margin: 3px;
font-size: 20px;
font-weight: bold;
}
.services-box p
{
font-size: 15px;
margin-top: 20px;
color: #777;
}
.services-box:hover
{
background: #000;
color: #fff;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
transition: 1s;
}
.services-box:hover p
{
color: #fff;
}
.contact
{
padding-top: 50px;
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url(https://previews.123rf.com/images/9dreamstudio/9dreamstudio1706/9dreamstudio170601892/80642001-manager-office-with-contact-us-set-and-notebook-on-wooden-background-top-view-space-for-text.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
color: #fff
}
.contact .row
{
padding: 30px 0;
font-size: 22px;
}
.contact .col-md-4 .fa
{
padding: 10px;
font-size: 40px;
}
.contact .btn
{
padding: 10px 25px 10px 25px;
margin: 5px;
border-radius: 30px;
border: 2px solid #fff;
background: transparent;
}
.contact .btn:focus
{
box-shadow: none !important;
}
.contact .btn:hover
{
border: 2px solid #000 !important;
background: #000 !important;
transition: 0.6s;
}
.contact .btn .fa
{
margin-right: 10px;
}
.footer
{
background: #000;
height: 50px;
margin-top: 50px;
color: #fff;
padding-top: 10px;
}
.fa-heart-o
{
color: red;
}
.social-icon
{
top: 50%;
transform: translateY(-50%);
position: sticky;
z-index: 1;
width: 80px;
}
.social-icon ul
{
padding: initial;
}
.social-icon ul li
{
height: 40px;
width: 40px;
list-style-type: none;
padding-left: 12px;
padding-top: 6px;
margin-top: 5px;
color: #fff;
background: #000;
}
.social-icon ul li:hover
{
padding-left: 30px;
width: 80px;
transition: 1s;
}
.contact a
{
color: #fff;
}![Lê Sĩ Tuyển [community]](https://www.gravatar.com/avatar/22f5881f5e83b4dfb378a4c0ca7d67cd.jpg?s=80&d=mm&r=g){kind=avatar}
Lê Sĩ Tuyển
2020-12-03 06:28:11
<!DOCTYPE html>
<html>
<head>
<title>Giới Thiệu Bản Thân</title>
<meta charset="utf-8">
</head>
<body style="display:flex;align-items: center;justify-content: center;flex-direction: column;">
<div>
<h1 style="text-align: center;color: white;background-color: black;margin-bottom: 0px;">Giới thiệu chung</h1>
<div style="margin: 0px auto; width: 960px;">
<img src="https://scr.vn/wp-content/uploads/2020/07/T%E1%BA%A3i-h%C3%ACnh-n%E1%BB%81n-%C4%91%E1%BA%B9p-7.jpg" style="display: block;width: 250px;height: 300px;">
</div>
<div>
<h3>Họ và Tên: Lê Sĩ Tuyển</h3>
<h3>Ngày Sinh: 06/12/2002</h3>
<h3>Quê Quán: Hà Nội</h3>
<h3>Địa Chỉ: Đại Từ,Đại Kim,Hoàng Mai,Hà Nội</h3>
<h3>Nghề Nghiệp: Lập Trình Viên aptech </h3>
<h3>Sở Thích: Ngủ và Đá Bóng</h3>
</div>
</div>
</body>
</html>![nguyen hoang viet [community]](https://www.gravatar.com/avatar/d2766fccea69cebc93358554d1a18e65.jpg?s=80&d=mm&r=g){kind=avatar}
nguyen hoang viet
2020-12-02 17:10:42
https://nguyenhoangviet.herokuapp.com/introduce.html
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
width: 950px;
padding: 30px;
text-align: center;
font-size: 30px;
color: white;
}
nav {
float: left;
width: 450px;
height: 400px;
background: #ccc;
padding: 20px;
}
article {
float: left;
}
section:after {
content: "";
display: table;
clear: both;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h1>Nguyen Hoang Viet</h1>
<h3>C2009I</h3>
</header>
<section>
<nav>
<h3>Gender: Male</h3>
<h3>Phone: 0793169902</h3>
<h3>Email: viet.nh.945@aptechlearning.edu.vn</h3>
<h3>Address: Ha Noi, Viet Nam</h3>
<h3>Hobby: Read light novel, play game</h3>
</nav>
<article>
<img src="https://scontent.fhan2-2.fna.fbcdn.net/v/t31.0-8/10869568_371006149739652_1333177505588583676_o.jpg?_nc_cat=111&ccb=2&_nc_sid=cdbe9c&_nc_ohc=s6ml3ofsIB0AX_2UJgJ&_nc_ht=scontent.fhan2-2.fna&oh=3bda5aa1d55207486ff8f37902f08b13&oe=5FEC8152" width="500" height="400">
</article>
</section>
</body>
</html>![Nguyễn Hải Đăng [community]](https://www.gravatar.com/avatar/8ea49f7d50e84016c91b9c881b3f92ac.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyễn Hải Đăng
2020-12-02 15:43:39
https://newlevel06.herokuapp.com/
<!DOCTYPE html>
<html>
<head>
<title>Giới thiệu về bản thân</title>
<meta charset="utf-8">
<style>
body{
height: 90vh;
background: url(bg.jpg) no-repeat center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pic img{
display: block;
width: 250px;
height: 200px;
}
</style>
</head>
<body>
<h1 style="text-align: center">About Me</h1>
<div class="pic">
<img src="4.png">
</div>
<h3 style="color: white">Họ tên: Nguyễn Hải Đăng<br/>
Năm sinh: 2002<br/>
Địa chỉ: Ngách 2/35/17, phố Hoàng Liệt, Hoàng Mai, Hà Nội<br/>
Sở thích: Đọc sách và chơi game<br/>
Đang theo học ở Aptech</h3>
</body>
</html>
![Do Trung Duc [T2008A]](https://www.gravatar.com/avatar/2973ac07124f066b4605c535e8d39a99.jpg?s=80&d=mm&r=g){kind=avatar}
Do Trung Duc
2020-10-07 02:08:30
#tieusu.html
<!DOCTYPE html>
<html>
<head>
<title>Introduce my seft</title>
</head>
<body style="background-color: #b35900">
<center><h1 style="color: yellow; background-color: red">WELLCOME TO MY WEB SITE</h1></center>
<hr size="2px" color="blue"/>
<h2 style="background-color: yellow">
<a href="#Information">Information<a/><br>
<a href="#Pictute">Pictute<a/><br>
<a href="#Contach">Contact<a/>
</h2>
<hr size="2px" color="blue"/>
<h4 id="Infromation" style="color:red; background-color: yellow"><u>Information:</u>
<ul style="color:red; list-style-type: circle;" >
<li>Name: Do Trung Duc</li>
<li>Age: 29</li>
<li>Date birth: 20/12/1991</li>
<li>Class: T2008A - FPT Aptech</li>
</ul>
</h4>
<hr size="2px" color="blue"/>
<h4 id="Picture" style="color:red"><u>Picture:</u></h4>
<center><img height="500" width="500" src="anh/myson.jpg"/></center>
<center><u style="color: blue">Pictute with my son</u></center>
<center><img height="600" width="500" src="anh/mygirl.jpg"></center>
<center><u style="color: blue">Pictute with my girlfriend</u></center>
<center><img height="350" width="500" src="anh/daihoi.jpg"></center>
<center><u style="color: blue">Pictute with my partner</u></center>
<hr size="2px" color="blue">
<h4 id="Contach" style="color:red"><u>Contact:</u></h4>
<ol style="color: blue; list-style-type: lower-norwegian;">
<li>Facebook: <a target="_blank" href="https://www.facebook.com/profile.php?id=100006588250775">TrungDuc</a></li>
<li>Phone: 0985.764.267</li>
</ol>
</body>
</html>![Triệu Văn Lăng [T2008A]](https://www.gravatar.com/avatar/1348e3562c6492c26f796cb1f45982a1.jpg?s=80&d=mm&r=g){kind=avatar}
Triệu Văn Lăng
2020-10-06 14:22:36
#vidu.html
<!DOCTYPE html>
<html>
<head>
<title>profile page</title>
<meta charset="utf-8">
<!-- luu css -->
<!-- luu js -->
<style type="text/css">
body{
background-color: green;
}
#trai {
float: left;
}
#phai{
float: right;
}
</style>
</head>
<body style="background-color: white" >
<ins>
<header>
<h1 title="thông tin cá nhân">
<center>PROFILE</center>
</h1>
</header>
</ins>
<main>
<div id="trai" style="margin-left: 50px;">
<h1 title="họ và tên">
<ins>Họ Và Tên:</ins>
<i style="color: red">Triệu Văn Lăng</i>
</h1>
<h1 title="sinh nhật">
<ins>Sinh nhật:</ins>
<i style="color: red">13/09/2001</i>
</h1>
<h1 title="địa chỉ">
<ins>Địa chỉ:</ins>
<i style="color: red">Lạng Sơn</i>
</h1>
<h1 title="số điện thoại">
<ins>SĐT:</ins>
<i style="color: red">0976670256</i>
</h1>
<h1>
Đang học tại FPT Aptech
</h1>
</div>
<div id="phai">
<img src="https://scontent-hkg4-1.xx.fbcdn.net/v/t1.0-9/120734847_205276291018227_404493634315552521_n.jpg?_nc_cat=103&_nc_sid=e3f864&_nc_ohc=ZyKv7TIGm1UAX8CkPj4&_nc_ht=scontent-hkg4-1.xx&oh=39f2dbf4616d38a15a2cc112053d8408&oe=5FA3A32C" width="250" height="250" style="border-radius: 50%; margin-left: : 200px">
<img src="https://scontent-hkg4-1.xx.fbcdn.net/v/t1.0-9/93661049_151045116441345_7152067046962888704_n.jpg?_nc_cat=102&_nc_sid=09cbfe&_nc_ohc=HCBtIYKKEg8AX-zGvaH&_nc_ht=scontent-hkg4-1.xx&oh=44d152f962acd3fbe421e513a1ba0f70&oe=5FA206EB" width="250" height="250" style="border-radius: 50%; margin-right: : 50px">
<img src="https://scontent-hkg4-1.xx.fbcdn.net/v/t1.0-9/31641916_596841834003273_8907153424714301440_n.jpg?_nc_cat=101&_nc_sid=8bfeb9&_nc_ohc=tA_GGhGUDv8AX8yk47p&_nc_ht=scontent-hkg4-1.xx&oh=fbbcceddfacbcae20d439d85c7140939&oe=5FA398AD" width="250" height="250" style="border-radius: 50%">
</div>
</main>
<footer style="margin: 350px 0px 0px 50px;">
<small style="email">
Email
<a href="https://mail.google.com/mail/u/0/#inbox">tại đây</a>
</small>
<small>
Link facebook ở
<a href="https://www.facebook.com/profile.php?id=100046075726560">Đây</a>
</small>
</footer>
</body>
</html>![Nguyễn Tiến Đạt [T2008A]](https://www.gravatar.com/avatar/b5819cd0adc95c727c7ad0c2bcf6098b.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyễn Tiến Đạt
2020-10-06 03:38:31
#thongtincanhan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nguyen Tien Dat-Wikipédia</title>
<style type="text/css">
body{
background-color: #f0d8a8;
}
#trai{
float: left;
}
#phai{
float: right;
}
#chu20{
font-size: 20px;
}
</style>
</head>
<body>
<center><h1 style="background-color: green"><i>Nguyễn Tiến Đạt</i></h1></center>
<hr color="black">
<div id="trai">
<h1 style="background-color: red"><i>Tiểu sử:</i></h1>
<ul>
<div id="chu20">
<li>Ngày sinh:18/04/2002</li>
<li>Nơi sinh: Hà Tây</li>
<li>Nơi ở hiện tại: Văn Quán</li>
<li>Tình trạng hôn nhân: Không</li>
</div>
</ul>
</div>
<div id="phai">
<h1 style="background-color: red"><i>Thành viên trong gia đình:</i></h1>
<ul>
<div id="chu20">
<li>Họ tên cha: Nguyễn Thái Thịnh</li>
<li>Họ tên mẹ: Mai Thị Hải Yến</li>
<li>Họ tên em gái: Nguyễn Vi Hân</li>
</div>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<center>
<div id="chu20">
<img src="https://scontent.fhan1-1.fna.fbcdn.net/v/t1.0-9/480470_108013692716083_2038384858_n.jpg?_nc_cat=107&_nc_sid=ba80b0&_nc_ohc=MqUcE8vrAr4AX9lymfh&_nc_ht=scontent.fhan1-1.fna&oh=847869bdf88d795bbe5783bb80c6912a&oe=5FA08015" style="width: 960px;height: 650px">
<br><br>
Ảnh cấp 1
<br><br>
<img src="https://scontent.fhan1-1.fna.fbcdn.net/v/t1.0-9/12662565_1554904748158738_6137757252916335242_n.jpg?_nc_cat=107&_nc_sid=19026a&_nc_ohc=xj9eVWsLZXsAX_bT-J-&_nc_ht=scontent.fhan1-1.fna&oh=1fc996d1d8dd29fa4ca26d42982794b4&oe=5FA0F0A1">
<br><br>
Ảnh cấp 2
<br><br>
<img src="https://scontent.fhan1-1.fna.fbcdn.net/v/t1.0-9/116264809_1514334652083973_3052823936823285672_o.jpg?_nc_cat=109&_nc_sid=e3f864&_nc_ohc=1fgigRQOzgIAX9csnQJ&_nc_ht=scontent.fhan1-1.fna&oh=cf5399afc5963c0463426dca0cb6a87a&oe=5F9FAA5B" style="width: 960px; height: 650px">
<br><br>
Ảnh cấp 3
</div>
</center>
<hr color="black">
<address>
<div id="chu20">
Contact with me:
<br>
Phone number: <u style="color: #6b1da3">0967962184</u>
<br>
Link FB: <a target="blank" href="https://www.facebook.com/nguyentiendat18042002" style="color: #2fa1ba">Dat Nguyen</a>
<br>
Link Instagram: <a target="blank" href="https://www.instagram.com/tiendat.184/?fbclid=IwAR2BHEOn9jQ9pXE8czcP-ifqKfgOGaQfi1AQ7MBBc2LIR2OpxYhEcrrbwWA" style="color: #2fa1ba">tiendat.184</a>
</div>
</address>
</body>
</html>![Nguyễn Anh Vũ [T2008A]](https://www.gravatar.com/avatar/8863d24ed74b396082becbc4db8331fd.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyễn Anh Vũ
2020-10-05 17:13:13
#hoan tat ALL.html
<!DOCTYPE html>
<html>
<head>
<title>Nguyễn Anh Vũ</title>
<meta charset="utf-8">
</head>
<body style="background-color: #FF0000; background-image: url(https://file.vforum.vn/hinh/2018/03/top-nhung-hinh-anh-hinh-nen-manchester-united-dep-nhat-full-hd3.jpg);background-repeat: no-repeat; background-size: cover; color: white">
<center><ins style="color: turquoise">THÔNG TIN CHI TIẾT</ins><center>
<br>
<h1 style="color: black">Thông Tin Cá Nhân</h1>
<h2 style="color: #AA0000">Họ Và Tên: Nguyễn Anh Vũ</h2>
<h3 style="color: #AA0000">Ngày Tháng Năm Sinh: 28-04-2002</h3>
<h3 style="color: #AA0000">Địa Chỉ: Hà Nam</h3>
<h3 style="color: #AA0000">Trường: FPT Aptech</h3>
<h3 style="color: turquoise">SĐT: 0964657860</h3>
<h3 style="color: turquoise">Fb: Anh Vũ Nav(Chuột)</h3>
<h4 style="color: turquoise">Sở Thích: Đá Bóng (Vị Trí: GK)</h4>
<h4 style="color: turquoise">Là thành viên của FC AOE HANAM và FC NSL MYDINH</h4>
<br>
<b style="color: #000000">Ghi chú</b>
<br>
<i>Thông tin chi tiết:</i>
<br>
<u style="color: #00FF00">Fakebook:facebook.com/anhvunav280402.</u>
<br>
<small title="" style="color: #00FF00">Zalo:0964657860.</small>
<h2 style="background-color: #EEEEEE ; color:#111111;">Một Số Hình Ảnh FC AOE HANAM!</h2>
<img width="300" height="200" src="https://scontent.fhan2-2.fna.fbcdn.net/v/t1.0-9/118268532_348241339535784_3324211638465884755_o.jpg?_nc_cat=106&_nc_sid=8bfeb9&_nc_ohc=REe2dcbY-bQAX-McBMN&_nc_ht=scontent.fhan2-2.fna&oh=6cab41c4e18854ccf7b22ff6dbeb84db&oe=5F9F8F5F">
<img width="300" height="200" src="https://scontent.fhan2-4.fna.fbcdn.net/v/t1.0-9/115977778_330400647986520_2258681831191485101_o.jpg?_nc_cat=105&_nc_sid=e3f864&_nc_ohc=wOQgw8aCP1sAX-BxF26&_nc_ht=scontent.fhan2-4.fna&oh=20b3c4e1990fb8eafde804dbe9ad287b&oe=5FA27836">
<img width="300" height="200" src="https://scontent.fhan2-4.fna.fbcdn.net/v/t1.0-9/109308459_329478841412034_5066061748221431231_n.jpg?_nc_cat=110&_nc_sid=8bfeb9&_nc_ohc=tUWSpsmhousAX_tDswh&_nc_ht=scontent.fhan2-4.fna&oh=814a2c10a578925c1acf399d9158e427&oe=5F9F6C0D">
<img width="300" height="200" src="https://scontent.fhan2-6.fna.fbcdn.net/v/t1.0-9/116113601_329478881412030_6453833306432897470_n.jpg?_nc_cat=103&_nc_sid=8bfeb9&_nc_ohc=Kj7ZdFlZL9EAX84eoFe&_nc_ht=scontent.fhan2-6.fna&oh=87e208b8018f7d8439a81a8e68e17510&oe=5F9F186A">
<img width="300" height="200" src="https://scontent.fhan2-1.fna.fbcdn.net/v/t1.0-9/118422059_3780211745340921_2057929062470293691_o.jpg?_nc_cat=102&_nc_sid=09cbfe&_nc_ohc=7cDuytPra80AX9RzTeM&_nc_ht=scontent.fhan2-1.fna&oh=770719fd7c66e3a52706e1c31512aef5&oe=5FA1E785">
<br>
FC AOE được thành lập vào năm 2010 với những cầu thủ trẻ có niềm đam mê mãnh liệt với trái bóng tròn coi nó là một phần không thể thiếu trong cuộc sống,nơi đây hội tụ những cầu thủ có kĩ thuật ổn và dày dặn kinh nghiệm do đã thành lập đc 10 năm nên các anh đã có tuổi lên tuyển thêm mấy cầu thủ trẻ có tiếng ở khu vực nhằm đi giao lưu các đối ở phương xa,do thành viên tham gia quá đông lên mới đây đã chia ra thành 2 Fc đó là Fc Dalo!<del></del> <ins></ins>,
<br/>
Đôi trưởng: Vũ Toàn chủ quán trà sữa Ding Tea.
<br>
Đội phó Văn Tiệp <strong></strong>
<br/>
<sub></sub>
Thủ Quỹ Thế Hiển <sup>
<br>
<br>
Nhận Đối giao lưu liên hệ: FB: Vu Toan để được biết thêm thông tin chi tiết.
<br/>
<h2 style="color: #FF6600 ">Những Năm giành cúp:</h2>
<ol style="list-style-type: upper-alpha;">
<li style="color: #FFFFCC">2010</li>
<li style="color: #FFFFCC">2011</li>
<li style="color: #FFFFCC">2012</li>
<li style="color: #FFFFCC">2014</li>
<li style="color: #FFFFCC">2015</li>
<li style="color: #FFFFCC">2017</li>
<li style="color: #FFFFCC">2019</li>
<center style="color: #FFCCFF">VICTORY</center>
<h2 style="background-color: #EEEEEE ; color:#111111;">Một Số Hình Ảnh FC NSL MYDINH!</h2>
<img width="300" height="200" src="https://scontent.fhan2-1.fna.fbcdn.net/v/t1.0-9/119237923_2648047402075724_5817863997065312092_n.jpg?_nc_cat=106&_nc_sid=825194&_nc_ohc=kddjx4Gs_yAAX8ORX0H&_nc_ht=scontent.fhan2-1.fna&oh=495c9db27a34f615bab205583e3e8c01&oe=5F9F0ED9">
<img width="300" height="200" src="https://scontent.fhan2-5.fna.fbcdn.net/v/t1.0-9/s720x720/119037516_1802957853180631_8303856931602135995_o.jpg?_nc_cat=107&_nc_sid=825194&_nc_ohc=wO1wttlTcawAX8Zgc2R&_nc_ht=scontent.fhan2-5.fna&tp=7&oh=161a73bd43e29f3d2e6e940179bbfe48&oe=5FA2AF03">
<img width="300" height="200" src="https://scontent.fhan2-6.fna.fbcdn.net/v/t1.0-0/p180x540/118770426_1798100486999701_7662371610421145348_n.jpg?_nc_cat=103&_nc_sid=825194&_nc_ohc=H_7X1e0wRFsAX8JIavg&_nc_ht=scontent.fhan2-6.fna&tp=6&oh=66c23a21f29607dbc8cdb9320c0c38cb&oe=5FA0211D">
<img width="300" height="200" src="https://scontent.fhan2-2.fna.fbcdn.net/v/t1.0-0/p180x540/118284840_1791352461007837_5670533328974710265_n.jpg?_nc_cat=111&_nc_sid=825194&_nc_ohc=vsSw0Zf7H1QAX-D8uTA&_nc_ht=scontent.fhan2-2.fna&tp=6&oh=8755dee26c1d3c4d11442e850e9680f9&oe=5FA1602A">
<img width="300" height="200" src="https://scontent.fhan2-3.fna.fbcdn.net/v/t1.0-9/106274350_2590596507820814_3104315851143119432_o.jpg?_nc_cat=108&_nc_sid=825194&_nc_ohc=w629W6IspqwAX8OiAiM&_nc_ht=scontent.fhan2-3.fna&oh=57727166fa01e1d4b836480bcf8a0e48&oe=5FA055D8">
<br>
FC NSL được thành lập vào năm 2016 với những cầu thủ trẻ có niềm đam mê mãnh liệt với trái bóng tròn coi nó là một phần không thể thiếu trong cuộc sống,nơi đây hội tụ những cầu thủ có kĩ thuật ổn và dày dặn kinh nghiệm do đã thành lập đc 4 năm nơi hộ tụ những con người ở các miền nam bắc tại khu vực mỹ đình,lập đội tạo điều kiện cho mọi người rèn luyện sức khoẻ cũng như là nơi sả tress sau giờ là mệt mỏi cũng như sau những giờ học căng thẳng!<del></del> <ins></ins>,
<br/>
Đôi trưởng: Xuân Tiến
<br>
Đội phó Dương <strong></strong>
<br/>
<sub></sub>
Thủ Quỹ Kim Nhật Thành <sup>
<br>
<br>
Nhận Đối giao lưu liên hệ: FB: Nguyễn Tùng để được biết thêm thông tin chi tiết.
<br/>
<h2 style="color: #FF6600 ">Những Năm giành cúp:</h2>
<ol style="list-style-type: upper-alpha;">
<li style="color: #FFFFCC">2018</li>
<li style="color: #FFFFCC">2020</li>
<center style="color: #FFCCFF">VICTORY</center>
</body>
</html>![Trần Văn Lâm [T2008A]](https://www.gravatar.com/avatar/cfc15c8cb7781ad669b013e01f9f1a6b.jpg?s=80&d=mm&r=g){kind=avatar}
Trần Văn Lâm
2020-10-05 14:14:34
#thongtin.html
<!DOCTYPE html>
<html>
<head>
<title>Thong Tin Ca Nhan</title>
<meta charset="utf-8">
</head>
<body>
<h1 style="color: black">Thong tin Ca Nhan:</h1>
<h2 style="color: white">Ten:Tran Van Lam</h2>
<h2 style="color: white">Tuoi:18</h2>
<h2 style="color: white">Dia Chi:Ha Nam:</h2>
<h2 style="color: white">Tinh Trang Hon Nhan: Alone</h2>
<body style="background-color: #BECEDB; background-image:url(https://3.bp.blogspot.com/-IzYETuZ48C8/T7MQmHucwCI/AAAAAAAABEQ/jBTkIk7ObKY/s1600/hinh-nen-dep-31.jpg) ">
<br>
Dep trai, tai nang, tu duy dinh cao, to chat lanh dao,...
<br/>
<br>
Gu ny: la con gai la duoc:))
<br/>
<i>
Nick facebook and Zalo:
</i>
<u>
Van Lam and 0364771502
</u>
</body>
</html>![Nguyễn Hữu Hiếu [T2008A]](https://www.gravatar.com/avatar/ca2884508b617fee77f000c7d99c219d.jpg?s=80&d=mm&r=g){kind=avatar}
Nguyễn Hữu Hiếu
2020-10-05 14:11:19
#My Profile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wellcome my Profile!!!</title>
<style>
.cv {
width:100%;
float:left;
}
.content {
background-image:url(https://tophinhnen.com/wp-content/uploads/2018/03/hinh-nen-mau-vang-8.jpg) ;
background-size: cover;
height: 150px;
width: 100%;
}
.text {
color: #ffffff;
top: 10px;
left: 70px;
padding-top:
}
.left1 {
float:left;
width: 33%;
height: 500;
text-indent: 15%;
color: #0208b0;
}
.left {
float:left;
width: 33%;
height: 500;
color: #0208b0;
}
.table {
}
</style>
</head>
<body>
<div class="content">
<br><center><h1 class="text">Hi! I'm Nguyen Huu Hieu</h1>
<h3 class="text">FPT Aptech Ha Noi</h3></center>
</div>
<div class="cv">
<div class="left1">
<br><u><h2>HỌC TẬP VÀ KỸ NĂNG:</h2></u>
<h3 style="text-indent: 0%">
<ul style="list-style-type: circle;">
<li>C progam</li>
<li>HTML</li>
<li>CSS</li>
<li>Java script</li>
</ul>
</h3>
</div>
<center><div class="left"><img src="https://bom.to/c56Gu8q"></div></center>
<div class="left">
<br><u><h2>THÔNG TIN CÁ NHÂN</h2></u>
<h3>
<table style="align-items: left;">
<tr>
<th>Họ và tên:</th>
<td>Nguyễn Hữu Hiếu</td>
</tr>
<tr>
<th>Địa chỉ:</th>
<td>Hoài Đức - Hà Nội</td>
</tr>
<tr>
<th>Số điện thoại:</th>
<td>0123456789</td>
</tr>
<tr>
<th>Email:</th>
<td>mygmail@gmail.com</td>
</tr>
</table>
</h3>
</div>
</div>
</body>
</html>
